npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

galinka

v0.1.2

Published

simple app state driving

Downloads

1

Readme

Very simple library for driving your app's state.
Данная библиотека вдохновлена Redux и использует некоторые ее идеи.
Пример использования на React.

а)Импортируй G  
```js
import G from '../../galinka';
```
б)Создай константу, вызвав G. Обязательный аргумент - имя хранилища.  
```js
const inputStore = G('toDos');
``` 
Данная константа используется для взаимодействия с хранилищем. Если в компоненте используются разные хранилища, то для каждого создай константу, вызвав G с артументом, соответствующем имени данного хранилища.  

в)Чтобы поместить данные в хранилище вызови на соответствующей его имени константе метод updateStore:  
 ```js
   inputStore.updateStore('add', data);
 ```

где первый аргумент - название метода обработки данных(см.ниже) для данного хранилища, а второй - данные.

Если нужно выполнить upgrade данных в нескольких хранилищай, создай для каждого хранилища свою кнстанту,вызвав G с именем нужного хранилиза и на ней вызови метод апдейта(updateStore)  

к оглавлению

    1)сделай несколько констант, вызвав функцию G c обязательным аргументом - именем соответствующего хранилища:  
     ```js
     const toDosStoreInstance = G('toDos');
     const someNextStoreInstance = G('someNextStore');
     ```  

     и на каждой константе вызови метод  getStore
     ```js
     const toDosStore = toDosStoreInstance.getStore();
     const someNextStore = someNextStoreInstance.getStore();
     ```  

    вернется соответствующее имени хранилище.   
      
    2)сделай одну константу, вызвав функцию G с обязательным аргументом - именем любого(можно основного) хранилища.  
      ```js
      const toDosStoreInstance = G('toDos');
      ```  
      и для каждого требуемого хранилища выполни вызов метода с его именем:  
      ```js
      const toDosStore = toDosStoreInstance.getStore('toDos');
      const someNextStore = toDosStoreInstance.getStore('someNextStore');
      ```   
      
      ВНИМАНИЕ!!! Аргумент - название хранилища - обязательно  

г) единожды для каждого компонента, использующего G добавь функцию, вызывающую перерендеринг страницы:
    ```js
    componentDidMount = () => {
            inputStore.addStateFunc(this.state, 'toDos');
        };
    ```  
    первый аргумент - функция, второй - на какое хранилище подписываемся, третий - постоянный уникальный ID. по нему будет происходить защита от дублей, если ты ошибочно будешь вызывать эту функцию несколько раз, например в рендере.Важно, чтобы данный ID не меялся.
    ВАЖНО! В идеале добавляй эту функцию в том месте, которое вызывается лишь однажды за жизненный цикл компонента.
    В React я просто передаю setState в ComponentDidMount.  
    Именно это место связывает хранилище и фреймворк(библиотеку react в данном случае)  

к оглавлению

   б)сделай одну константу, вызвав G с аргументом - обязательным именем хранилища:    
       ```js
       const inputStoreInstance = G('toDos');
       ```  

   в)задай все функции обработчики данного хранилища.  
   У каждой функции обработчика первый аргумент - данные, второй - старое хранилище. Оба обязательны.  
   Возвращать функция должна новое хранилище:  
    ```js
    const del = (id, oldState = []) => oldState.filter(item => !(item.id === id));
    const add = (data, oldState = []) => [data, ...oldState];
    ```  

    Обрати внимание, я задаю дефолтное значение старого хранилища в аргументе функции. G ничего не знает о функциях-обработчиках,
    поэтому подобное дефолтное значение позволит избежать ошибок при первом обращении к функции.  

    г)Структура хранилища - не зона ответственности G. Ты задаешь структуру самостоятельно.  
    Хорошая практика - указывать структуру данного хранилища в начале файла:  
   ```js
   const thisStoreStructure = [
   		{
   			id:'someUniqueId',
   			data:'some string data',
   		},
   		{
   			id:'someAnotherUniqueId',
   			data:'some another string data',
   		},
   	];
   	```  

   	д)Добавь функции-обработчики текущего хранилища. Для каждой функции создай объект вида  
   	   ```js
   	   const addObj = {
       		type: 'add',
       		updateFunc: add,
       	};
       	const delObj = {
        		type: 'del',
        		updateFunc: del,
        	};
   	   ```  

   	   где оба свойства - обязательные.  
   	   свойство из поля type ты потом будешь вызывать при обновлении хранилища (updateStore('add', data), см п.1)  
   	   свойство из поля update - это сама функция обработчик (const add = (data, oldState = []) => [data, ...oldState];)  
   	   
   	   далее есть 2 варианта:  

   	   1)Функций несколько: на константе созданной вызовом G, вызови метод addStoreConstructors куда передай массив сформированных выше объектов:  
   	   ```js
   	   toDos.addStoreConstructors([addFuncObj, delFuncObj]);
   	   ```  

   	   2)Функция одна. на константе созданной вызовом G, вызови метод addStoreConstructor, куда передай сформированный выше объект:  
   	   ```js
   	   toDos.addStoreConstructor(addFuncObj);
   	   ```
   	е)Подключи файлы конструкторов store к проекту, например проимпортировав их в js точке входа проекта или подключив скриптом в html точке входа  

к оглавлению

    а) История. На данный момент эта фича отключена.  
        При каждом обновлении store, старое состояние хранилищ сохраняется.   
        Можно использовать историю состояний. Метод getFullHistory вернет массив всех состояний, последовательно измененных.  
        По дефолту история выключена, так как сохраняются полный объект всех хранилищ и при длительном использовании это может вызывать утечки памяти.  
        Чтобы включить - на любом инстансе класса Galinka вызови метод enableHistory();  
        Если понадобится выключить историю - на любом инстансе класса Galinka вызови метод disableHistory();  
        Хорошей практикой считается указание всех параметров в отдельном файле.  

к оглавлению