v 0.0.1

Author: alevnyacow

package.json

@@ -21,22 +21,25 @@
   "author": "alevnyacow",
   "license": "MIT",
   "devDependencies": {
-    "@testing-library/react": "^12.1.3",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.39",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
     "del-cli": "^4.0.1",
     "eslint": "^8.10.0",
     "jest": "^27.5.1",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
     "ts-jest": "^27.1.3",
     "typescript": "^4.6.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
   "types": "transpiled/index.d.ts",
   "dependencies": {
-    "@alevnyacow/deep-js-proxy": "^0.0.1"
+    "@alevnyacow/deep-js-proxy": "^1.0.0",
+    "uuid": "^8.3.2"
   },
   "repository": {
     "type": "git",

sources/index.ts

@@ -1,3 +1,38 @@
-const answerForEverything = 42;
+import { useCallback, useEffect, useRef } from "react";
+import { v4 } from "uuid";
+import { deepProxy } from "@alevnyacow/deep-js-proxy";
+import { useRerenderer } from "./use-rerenderer";
+import { rerenderersList } from "./rerenderers-list";
 
-export { answerForEverything };
+function createUseSharedVariable<T extends object>(initialState: T) {
+    const variableIdentifier = v4();
+    const sharedVariable = deepProxy(
+        [rerenderersList.fire],
+        variableIdentifier
+    )(initialState);
+
+    function useSharedVariable(rerenderOnChange = true) {
+        useEffect(() => {
+            const rerenderer = useRerenderer();
+            const memoizedRerenderer = useCallback(rerenderer, []);
+            const rerenderIdentifier = useRef(v4());
+            rerenderersList.add(
+                variableIdentifier,
+                rerenderIdentifier.current,
+                rerenderOnChange ? memoizedRerenderer : () => {}
+            );
+            return () => {
+                rerenderersList.remove(
+                    variableIdentifier,
+                    rerenderIdentifier.current
+                );
+            };
+        }, []);
+
+        return sharedVariable;
+    }
+
+    return useSharedVariable;
+}
+
+export { createUseSharedVariable };

sources/rerenderers-list.ts

@@ -0,0 +1,51 @@
+class RerenderersList {
+    private _rerenderersData: Record<string, Record<string, () => void>>;
+
+    constructor() {
+        this._rerenderersData = {};
+    }
+
+    private addForVariable = (variableId: string) => {
+        this._rerenderersData[variableId] = {};
+    };
+
+    private existsForVariable = (variableId: string) => {
+        return this._rerenderersData[variableId] !== undefined;
+    };
+
+    public add = (
+        variableId: string,
+        rerendererId: string,
+        rerenderer: () => void
+    ) => {
+        if (!this.existsForVariable(variableId)) {
+            this.addForVariable(variableId);
+        }
+
+        this._rerenderersData[variableId][rerendererId] = rerenderer;
+    };
+
+    public remove = (variableId: string, rerendererId: string) => {
+        const variableRerendersData = this._rerenderersData[variableId];
+
+        if (!variableRerendersData) {
+            return;
+        }
+
+        delete variableRerendersData[rerendererId];
+    };
+
+    public fire = (variableId: string) => {
+        if (!this.existsForVariable(variableId)) {
+            return;
+        }
+
+        Object.values(this._rerenderersData[variableId]).forEach((rerender) => {
+            rerender();
+        });
+    };
+}
+
+const rerenderersList = new RerenderersList();
+
+export { rerenderersList };

sources/use-rerenderer.ts

@@ -0,0 +1,6 @@
+import { useState } from "react";
+
+export function useRerenderer() {
+    const [, setNewDummyObject] = useState({});
+    return () => setNewDummyObject({});
+}