Revert "rename to react-one-state"

This reverts commit be0fd88.

Author: Aminadav

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "globx",
+    "mystore",
+    "todos"
+  ]
+}

.vscode/terminals.json

@@ -0,0 +1,20 @@
+{
+  "autorun": false,
+  "terminals": [
+    {
+      "name": "compile packagfe",
+      "description": "This is a description",
+      "command": "tsc --watch index.ts"
+    },
+    {
+      "name": "local website",
+      "description": "This is a description",
+      "command": "cd website; npm start -- --port 4000"
+    },
+    {
+      "name": "deploy website",
+      "description": "This is a description",
+      "command": "cd website; echo npm run build"
+    }
+  ]
+}

README.md

@@ -1,12 +1,12 @@
-# react-one-state
+# GlobX
 
 A global state manager that let you read and change the the whole state from all your components.
 
-A new solution for creating simple and powerful stores for React apps. The react-one-state let you change and read any part of the store from every component or traditional JavaScript code.
+I built a new solution for creating simple and powerful stores for React apps. GlobX let you change and read any part of the store from every component or traditional JavaScript code.
 
-Let's take the Redux todo example. (https://github.com/reduxjs/redux/tree/master/examples/todos) Wen implemented it in react-one-state (https://github.com/Aminadav/react-one-state-todo) it's saving about 90% of the code.
+I took the Redux todo example. (https://github.com/reduxjs/redux/tree/master/examples/todos) cloned it and reimplemented it in GlobX (https://github.com/Aminadav/globx-todo). I saved about 90% of the code. (I'm recommended you to inspect the code, I'm sure you will ❤️ it)
 
-## Why react-one-state?
+## Why Glob'x?
 
 - Very easy to refactor.
 - Great for agility. Let you easily refactor.
@@ -27,13 +27,13 @@ Let's take the Redux todo example. (https://github.com/reduxjs/redux/tree/master
 - I Like JSON. And the component should use the store's property like any other JSON object. And without using or creating selectors.
 - I wouldn't say I like immutable objects. I prefer to push, pull, and change arrays and objects without cloning.
 - I don't like that sometimes I'm getting previous store values because of cloning, and I'm not particularly eager to fix it using useRef and similar fixes. I prefer to have one state ojbect.
-- In Redux all IDE smart features like "Find all references" or "rename symbol" doesn't work for keys in the store (unless your spend more time to create type definitaions). In react-one-state it's working out of the box, so my code always have the naming I wish and I don't afraid to refactor.
+- In Redux all IDE smart features like "Find all references" or "rename symbol" doesn't work for keys in the store (unless your spend more time to create type definitaions). In GlobX it's working out of the box, so my code always have the naming I wish and I don't afraid to refactor.
 
-## How to use react-one-state?
+## How to use GlobX?
 
-Create a new file (`store.js`) and call the react-one-state `newStore` function with your initial store. And export the result.
+Create a new file (`store.js`) and call the GlobX `newStore` function with your initial store. And export the result.
 
-```js
+```
 const store = NewStore({
   todos:[],
   filter:'ALL',
@@ -45,9 +45,9 @@ export default store
 
 *Suppport all smart IDE's features such as autocomplete for keys in your store, rename symbols and find all references*
 
-react-one-state will create one store for your whole app. You can read any part of the store easily by importing the store.js file. This is a simple JSON file.
+GlobX will create one store for your whole app. You can read any part of the store easily by importing the store.js file. This is a simple JSON file.
 
-```js
+```
 import store from './store'
 
 console.log(store.filter)
@@ -66,9 +66,9 @@ import store from './store'
 </div>
 ```
 
-To know which components should re-render you have to use the react-one-state hook useRerenderIfChange and tell it which part of the store this component is dependent on.
+To know which components should re-render you have to use the GlobX hook useRerenderIfChange and tell it which part of the store this component is dependent on.
 
-```js
+```
 import store from './store'
 function MyComponent(){
   store.useRerenderIfChange(()=>[store.counter]) // Each time counter change re-render this component
@@ -78,30 +78,30 @@ function MyComponent(){
 }
 ```
 
-That it! You know everything about react-one-state.
+That it! You know everything about Globx.
 
 - `createStore` - called once.
 - `updateStore` - called every time you want to rerender your UI.
 - `useRerenderIfChange` - called on every component that depended on specific part of the store.
 
 ## Demo App:
-Please see the full working demo app: https://github.com/Aminadav/react-one-state/tree/master/examples/todo
+Please see the full working demo app: https://github.com/Aminadav/globx/tree/master/examples/todo
 
-See the website: https://react-one-state.js.org
+See the website: https://globx.js.org
 
 Link to the first Reddit post about it: https://www.reddit.com/r/reactjs/comments/m27hqm/globux_a_global_state_manager_that_let_you_read/
 
 ## Installation
 
-    npm i react-one-state
+    npm i globx
 
 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.
-import {newStore} from "react-one-state"
+import {newStore} from "globx"
 
 const store = newStore({
   key1:0,

examples/todo/README.md

@@ -1,4 +1,4 @@
-# react-one-state todos example
+# Globx todos example
 
 This is just the example app. Try to compare to Redux and see how much less code you have to write. Meaning less bugs, and more features in less time.
 
@@ -7,9 +7,9 @@ The Reddit post about it:
 https://www.reddit.com/r/reactjs/comments/m27hqm/globux_a_global_state_manager_that_let_you_read/
 
 
-Please star and watch the react-one-state repo to be notified when I publish documentation.
+Please star and watch the Globx repo to be notified when I publish documentation.
 
-https://github.com/Aminadav/react-one-state
+https://github.com/Aminadav/globx
 
 
 Both repos are open for contributions. (Very welcome)

examples/todo/package-lock.json

@@ -6,7 +6,7 @@
     "react-scripts": "^3.4.1"
   },
   "dependencies": {
-    "react-one-state": "^1.0.7",
+    "globx": "^1.0.7",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

examples/todo/package.json

@@ -1,87 +1,57 @@
-"use strict"
-exports.__esModule = true
-exports.newStore = void 0
+"use strict";
+exports.__esModule = true;
+exports.newStore = void 0;
 //@ts-check
-var React = require("react")
-function cloneDeep(obj) {
-  return JSON.parse(JSON.stringify(obj))
-}
-function isEqual(a,b) {
-  if(typeof a!=typeof b) {
-    return false
-  }
-  if(typeof a=='object' && typeof b=='object') {
-    if (Object.keys(a).length!=Object.keys(b).length) return false
-  }
-  return JSON.stringify(a)==JSON.stringify(b)
-}
+var react_1 = require("react");
+var isEqual = require("lodash.isequal");
+var cloneDeep = require("lodash.clonedeep");
 function newStore(state) {
     //@ts-ignore
-    var Store = state
-    var callbacks = {}
-    var callbacksNextAvailableKey = 0
-
-    var onBeforeRenders=[]
-    Store.onBeforeRender=(callback)=>onBeforeRenders.push(callback)
-    var beforeLastRender
-    function updateStoreNow() { 
-          
-        scheduled = false
-        if(onBeforeRenders.length>0) {
-          if(beforeLastRender) { // skip first time
-            onBeforeRenders.forEach(x=>x(beforeLastRender))
-          }
-          beforeLastRender = cloneDeep(Store)
-        }
+    var Store = state;
+    var callbacks = {};
+    var callbacksNextAvailableKey = 0;
+    function updateStoreNow() {
+        scheduled = false;
         for (var i in callbacks) {
-            callbacks[i]()
+            callbacks[i]();
         }
     }
-
-
-    var scheduled = false
+    var scheduled = false;
     function Schedule() {
         if (scheduled)
-            return
-        scheduled = true
-        setTimeout(updateStoreNow, 0)
+            return;
+        scheduled = true;
+        setTimeout(updateStoreNow, 0);
     }
     /**
      * @example useRerenderIfChange((store) => [store.scale, store.othervalue])
      * @param callback {(store:Store)=>void}
      */
-    Store.useRerenderIfChange = function (callback,name) {
-        var _a = React.useState(0), _ = _a[0], setMeToRerender = _a[1]
-        var callbacksKeyRef = React.useRef(callbacksNextAvailableKey++)
+    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 cloned = React.useCallback(()=>cloneDeep(callback(Store)))
-        var lastValueRef = React.useRef(cloned)
-        React.useEffect(function () {
+        var lastValueRef = react_1.useRef(cloneDeep(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
+                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.
-                    if(React.startTransition) { // support React 18 {
-                      React.startTransition(()=>{
-                        setMeToRerender(function (prev) { return prev + 1 }) // Rerender the objects
-                      })
-                    } else {
-                      setMeToRerender(function (prev) { return prev + 1 }) // Rerender the objects
-                    }
+                    lastValueRef.current = cloneDeep(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
-    }
+                delete callbacks[callbacksKeyRef.current];
+            };
+        }, []);
+        return lastValueRef.current;
+    };
     Store.updateStore = function () {
-        Schedule()
-    }
-    return Store
+        Schedule();
+    };
+    return Store;
 }
-exports.newStore = newStore
+exports.newStore = newStore;

index.js

@@ -1,9 +1,63 @@
-//@ts-nocheck
+//@ts-check
+import { useState, useEffect, useRef } from "react"
+import isEqual = require("lodash.isequal")
+import cloneDeep = require("lodash.clonedeep")
+
 interface a{
   updateStore:()=>void
   useRerenderIfChange:(callback)=>void
-  onBeforeRender:(callback:(prevStore)=>void)=>void
 }
-
 export function newStore<T>(state:T):(a & T) {
-}
+  //@ts-ignore
+  var Store:(a & T)=state
+  var callbacks = {}
+  var callbacksNextAvailableKey = 0
+  
+  function updateStoreNow() {
+    scheduled=false
+    for (var i in callbacks) {
+      callbacks[i]()
+    }
+  }
+  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
+}
+
+

index.ts

@@ -1,21 +1,24 @@
 {
-  "name": "react-one-state",
-  "version": "1.0.13",
-  "descript/urlion": "",
+  "name": "globx",
+  "version": "1.0.10",
+  "description": "",
   "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Aminadav/react-one-state.git"
+    "url": "git+https://github.com/Aminadav/globx.git"
   },
   "keywords": [
     "react"
   ],
   "author": "Aminadav Glickshtein",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/Aminadav/react-one-state/issues"
+    "url": "https://github.com/Aminadav/globux/issues"
   },
-  "homepage": "https://github.com/Aminadav/react-one-state#readme",
+  "homepage": "https://github.com/Aminadav/globx#readme",
   "dependencies": {
     "lodash.clonedeep": "",
     "lodash.isequal": ""