initial commit

Author: Aminadav

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1 +1,64 @@
-# react-global-store
+# react-global-store
+
+I need a name for my new React store.
+
+Why I created it? Because I very like Redux, but:
+
+- It lot of code. (Action builders, reducers, Selectors, Connectors...)
+- It hard to refactor.
+- It hard to get IDE autocomplete.
+
+I have created a new store, that it's usefull for small team (or team of 1 developer) in Agile environment
+who would like to develop faster, and still keep the app run fast.
+
+- You get one store and can access to all of it in any component.
+- You can update any part of the store directly from every component.
+- No need to create action builders or selectors. The store is a simple read/write JavaScript JSON object.
+- You can create all your components memoized, and setup to render them only when specific field changed in the store.
+- It run fast.
+- You get auto-complete to all fields in your store automatically.
+- No bugs of changing array or object values without cloning. You can change them in-place.
+
+Demo:
+
+```js
+// First you should creating the store.
+// Usually you will create one store for each app and share this variable.
+// Usually you will put this in separate file.
+const GlobalStore = require('react-global-store2') 
+
+const store = GlobalStore.NewStore({
+  key1:0,
+  key2:0,
+  // You can add many keys as you wish
+  // It can be functions, arrays, or Whatever you want.
+})
+
+
+
+function App(){
+  // This component will automatically re-render when store.key1 will change.
+  store.useRerenderIfChange(()=>[store.key1])
+  function incrementKey1(){
+    store.key1++
+    store.updateStore() // This will check which component should re-render since the last update.
+  }
+  return <div onClick={incrementKey1}>
+    Store key1: {store.key1}
+    <ChildComponent />
+    </div>
+}
+
+function ChildComponent() {
+  // This component will automatically re-render when store.key2 or store.key1 will change.
+  store.useRerenderIfChange(()=>[store.key2,store.key1])
+  function incrementKey2(){
+    store.key2++
+    store.updateStore()
+  }
+  return <div onClick={incrementKey2}>
+    Store key1: {store.key1}
+    Store key2: {store.key2}
+    </div>
+}
+```

demo/index.js

@@ -0,0 +1,24 @@
+import React from 'react'
+const store = require('./store')
+function App(){
+  store.useRerenderIfChange(()=>[store.key1])
+  function incrementKey1(){
+    store.key1++
+    store.updateStore()
+  }
+  return <div onClick={incrementKey1}>
+    Store key1: {store.key1}
+    <ChildComponent />
+    </div>
+}
+
+function ChildComponent() {
+  store.useRerenderIfChange(()=>[store.key2])
+  function incrementKey2(){
+    store.key2++
+    store.updateStore()
+  }
+  return <div onClick={incrementKey2}>
+    Store key2: {store.key2}
+    </div>
+}

demo/store.js

@@ -0,0 +1,7 @@
+var store = require('../index')
+
+module.exports=store.NewStore({
+  key1:0,
+  key2:0
+})
+

index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports.NewStore = void 0;
+//@ts-check
+var react_1 = require("react");
+var lodash_isequal_1 = require("lodash.isequal");
+var lodash_clonedeep_1 = require("lodash.clonedeep");
+function NewStore(state, persistentProvider) {
+    //@ts-ignore
+    var Store = state;
+    var prevPersistented = __assign({}, ((Store === null || Store === void 0 ? void 0 : Store.persistent) || {}));
+    var callbacks = {};
+    var callbacksNextAvailableKey = 0;
+    function updateStoreNow() {
+        scheduled = false;
+        for (var i in callbacks) {
+            callbacks[i]();
+        }
+        if (Store.persistent) {
+            if (!persistentProvider) {
+                throw new Error('cannot use persistent without persistent provider');
+            }
+            for (var _i = 0, _a = Object.keys(Store.persistent); _i < _a.length; _i++) {
+                var key = _a[_i];
+                var val = Store.persistent[key];
+                // console.log({key,val:JSON.stringify(val),prev:prevPersistented[key]})
+                if (JSON.stringify(val) != prevPersistented[key]) {
+                    persistentProvider.setKey(key, val);
+                    prevPersistented[key] = JSON.stringify(val);
+                    // console.log({prevPersistented})
+                }
+            }
+        }
+    }
+    var scheduled = false;
+    function Schedule() {
+        if (scheduled)
+            return;
+        scheduled = true;
+        setTimeout(updateStoreNow, 0);
+    }
+    /**
+     * @example useRerenderIfChange((store) => [store.scale, store.othervalue])
+     * @param callback {(store:Store)=>void}
+     */
+    Store.useRerenderIfChange = function (callback) {
+        var _a = react_1.useState(0), _ = _a[0], setMeToRerender = _a[1];
+        var callbacksKeyRef = react_1.useRef(callbacksNextAvailableKey++);
+        /** The array from the user. Cloned so new changes will not be there */
+        var lastValueRef = react_1.useRef(lodash_clonedeep_1["default"](callback(Store)));
+        react_1.useEffect(function () {
+            // When object mount, add a function to the callbacks, to change if the value changes
+            // it will trigged by the "updateStore below"
+            callbacks[callbacksKeyRef.current] = function () {
+                var currentValue = callback(Store); // The new array of values calculated from the store
+                if (!lodash_isequal_1["default"](currentValue, lastValueRef.current)) {
+                    lastValueRef.current = lodash_clonedeep_1["default"](currentValue); // Update the old array.
+                    setMeToRerender(function (prev) { return prev + 1; }); // Rerender the objects
+                }
+            };
+            return function () {
+                // When object unmount we don't need this callback any more.
+                delete callbacks[callbacksKeyRef.current];
+            };
+        }, []);
+        return lastValueRef.current;
+    };
+    Store.updateStore = function () {
+        Schedule();
+    };
+    return Store;
+}
+exports.NewStore = NewStore;

index.ts

@@ -0,0 +1,85 @@
+//@ts-check
+import { useState, useEffect, useRef } from "react"
+import isEqual from "lodash.isequal"
+import cloneDeep from "lodash.clonedeep"
+
+interface a{
+  updateStore:()=>void
+  useRerenderIfChange:(callback)=>void
+  persistent:{[key:string]:any}
+  isReady?:Promise<void>
+}
+interface PersistentProvider {
+  setKey:(key:string,value:any)=>Promise<void>
+  getKey:(key:string)=>Promise<any>
+}
+export function NewStore<T>(state:(T & {persistent:{[key:string]:any}}),persistentProvider?:PersistentProvider):(a & T) {
+  //@ts-ignore
+  var Store:(a & T)=state
+  var prevPersistented = {... (Store?.persistent || {})}
+  var callbacks = {}
+  var callbacksNextAvailableKey = 0
+  
+  function updateStoreNow() {
+    scheduled=false
+    for (var i in callbacks) {
+      callbacks[i]()
+    }
+    if(Store.persistent) {
+      if(!persistentProvider) {
+        throw new Error('cannot use persistent without persistent provider')
+      }      
+      for(let key of Object.keys(Store.persistent)) {
+        var val=Store.persistent[key]
+        // console.log({key,val:JSON.stringify(val),prev:prevPersistented[key]})
+        
+        if(JSON.stringify(val)!=prevPersistented[key]) {
+          persistentProvider.setKey(key,val)
+          prevPersistented[key]=JSON.stringify(val)
+          // console.log({prevPersistented})
+        }
+      }
+    }
+  }
+  var scheduled=false  
+  function Schedule(){
+    if(scheduled) return 
+    scheduled=true
+    setTimeout(updateStoreNow,0)
+  }
+  /**
+   * @example useRerenderIfChange((store) => [store.scale, store.othervalue])
+   * @param callback {(store:Store)=>void}
+   */
+  Store.useRerenderIfChange=function(callback) {
+
+    var [_, setMeToRerender] = useState(0)
+    var callbacksKeyRef = useRef(callbacksNextAvailableKey++)
+
+    /** The array from the user. Cloned so new changes will not be there */
+    var lastValueRef = useRef(cloneDeep(callback(Store)))
+    useEffect(() => {
+      // When object mount, add a function to the callbacks, to change if the value changes
+      // it will trigged by the "updateStore below"
+      callbacks[callbacksKeyRef.current] = () => {
+        var currentValue = callback(Store) // The new array of values calculated from the store
+        if (!isEqual(currentValue, lastValueRef.current)) {
+          lastValueRef.current = cloneDeep(currentValue) // Update the old array.
+          setMeToRerender((prev) => prev + 1) // Rerender the objects
+        }
+      }
+      return () => {
+        // When object unmount we don't need this callback any more.
+        delete callbacks[callbacksKeyRef.current]
+      }
+    }, [])
+    return lastValueRef.current
+  }
+
+  Store.updateStore=function() {
+    Schedule()
+  }
+  return Store
+}
+
+

package-lock.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-global-store2",
+  "version": "1.0.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Aminadav/react-global-store.git"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "Aminadav Glickshtein",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Aminadav/react-global-store/issues"
+  },
+  "homepage": "https://github.com/Aminadav/react-global-store#readme",
+  "dependencies": {
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.5.0",
+    "react": "^17.0.1"
+  }
+}