feat: make pure inject stores & injectables

amirqasemi74 · Aug 2, 2022 · 1c3ab80 · 1c3ab80
1 parent 6e4c309
commit 1c3ab80
Show file tree

Hide file tree

Showing 22 changed files with 1,550 additions and 2,300 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@react-store/core",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "main": "dist/index.js",
   "repository": "https://github.com/sahabpardaz/react-store.git",
   "author": "Amir Hossein Qasemi Moqaddam <[email protected]>",
   "license": "MIT",
   "dependencies": {
     "clone-deep": "^4.0.1",
-    "dequal": "^2.0.2",
+    "dequal": "^2.0.3",
     "is-promise": "^4.0.0",
     "lodash": "^4.17.21",
     "reflect-metadata": "^0.1.13"
@@ -17,50 +17,50 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-proposal-decorators": "^7.18.2",
-    "@babel/plugin-transform-runtime": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/clone-deep": "^4.0.1",
-    "@types/jest": "^28.1.1",
+    "@types/jest": "^28.1.5",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.25",
-    "@types/testing-library__jest-dom": "^5.14.3",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "babel-jest": "^28.1.1",
+    "babel-jest": "^28.1.3",
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
-    "eslint": "^8.17.0",
+    "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "lint-staged": ">=13",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-refresh-typescript": "^2.0.5",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-refresh-typescript": "^2.0.7",
     "react-router-dom": "6",
-    "rollup": "^2.75.6",
+    "rollup": "^2.77.0",
     "rollup-plugin-typescript2": "^0.32.1",
     "styled-components": "^5.3.5",
-    "ts-loader": "^9.3.0",
+    "ts-loader": "^9.3.1",
     "ttypescript": "^1.5.13",
-    "typescript": "^4.7.3",
+    "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.2",
+    "webpack-dev-server": "^4.9.3",
     "websocket-extensions": "^0.1.4"
   },
   "scripts": {

diff --git a/src/store/administrator/effects/effectsProxy.ts b/src/store/administrator/effects/effectsProxy.ts
@@ -1,18 +1,33 @@
+import { ObservableProperty } from "../propertyKeys/observableProperty";
 import { StoreAdministrator } from "../storeAdministrator";
 import { adtProxyBuilder } from "src/proxy/adtProxy/adtProxyBuilder";
 import { getUnproxiedValue } from "src/utils/getUnProxiedValue";
 
+/**
+ * Effect context must be proxied to use value from state insteadOf store
+ * because we have hooks like useDeferreValue or useTransition can others hooks cause
+ * rerenders but these hooks value not change in that render
+ * So we must bind effect context to state values.
+ */
 export class EffectProxy implements ProxyHandler<object> {
   directMutatedStoreProperties = new Map<PropertyKey, unknown>();
 
   constructor(private storeAdmin: StoreAdministrator) {}
 
   get(target: object, propertyKey: PropertyKey, receiver: unknown) {
+    /**
+     * Because we change effect context to state if we set value it will be
+     * done async and if we read the value immediately it doesn't work
+     * so we make trick here only for primitive types
+     */
     if (this.directMutatedStoreProperties.has(propertyKey)) {
       return this.directMutatedStoreProperties.get(propertyKey);
     }
 
-    // Property Key
+    /**
+     * Here we switch effect context to `State`
+     * There is question why we need it?
+     */
     if (this.storeAdmin?.propertyKeysManager.propertyKeys.has(propertyKey)) {
       const value = this.storeAdmin?.propertyKeysManager.propertyKeys
         .get(propertyKey)
@@ -27,9 +42,11 @@ export class EffectProxy implements ProxyHandler<object> {
         value,
         proxiedValuesStorage: new Map(),
         onSet: () =>
-          this.storeAdmin.propertyKeysManager.propertyKeys
-            .get(propertyKey)
-            ?.doOnSet(),
+          (
+            this.storeAdmin.propertyKeysManager.propertyKeys.get(
+              propertyKey
+            ) as ObservableProperty
+          )?.doOnSet(),
       });
     }
 
@@ -41,6 +58,7 @@ export class EffectProxy implements ProxyHandler<object> {
     }
 
     /**
+     * Methods should bind to effect context:
      * There is no need to bind methods to effect context because when we call method in
      * effect context using this keyword, the method is automatically bind to effect context
      */

diff --git a/src/store/administrator/getters/memoizedProperty.ts b/src/store/administrator/getters/memoizedProperty.ts
@@ -44,6 +44,10 @@ export class MemoizedProperty {
 
   tryRecomputeIfNeed() {
     const isEqual = this.deepEqual ? dequal : Object.is;
+    /**
+     * Here because we get deps for instanceForComponents, it's unproxied
+     * by default. So we don't need to make it unproxy
+     */
     const depsValues = this.manualDepsFn(this.storeAdmin.instanceForComponents);
 
     if (depsValues.some((v, i) => !isEqual(v, this.preDepValues?.[i]))) {

diff --git a/src/store/administrator/propertyKeys/observableProperty.ts b/src/store/administrator/propertyKeys/observableProperty.ts
@@ -17,11 +17,7 @@ export class ObservableProperty {
 
   private _reactSetState?: () => void;
 
-  constructor(
-    private storeAdmin: StoreAdministrator,
-    value: unknown,
-    public isReadOnly?: boolean
-  ) {
+  constructor(private storeAdmin: StoreAdministrator, value: unknown) {
     this.isPrimitive = isPrimitive(value);
     value = this.makeDeepObservable(value);
     const _val = this.isPrimitive ? value : { $: value };
@@ -57,9 +53,6 @@ export class ObservableProperty {
   }
 
   getValue(from: "State" | "Store") {
-    if (this.isReadOnly) {
-      from = "Store";
-    }
     switch (from) {
       case "State":
         return this.isPrimitive
@@ -85,9 +78,7 @@ export class ObservableProperty {
   }
 
   doOnSet() {
-    if (!this.isReadOnly) {
-      this.isSetStatePending = true;
-      this.storeAdmin.renderConsumers();
-    }
+    this.isSetStatePending = true;
+    this.storeAdmin.renderConsumers();
   }
 }
diff --git a/src/store/administrator/propertyKeys/readonlyProperty.ts b/src/store/administrator/propertyKeys/readonlyProperty.ts
@@ -0,0 +1,11 @@
+export class ReadonlyProperty {
+  constructor(private value: unknown) {}
+
+  setValue(value: unknown) {
+    this.value = value;
+  }
+
+  getValue() {
+    return this.value;
+  }
+}
diff --git a/src/store/administrator/propertyKeys/storePropertyKeysManager.ts b/src/store/administrator/propertyKeys/storePropertyKeysManager.ts
@@ -1,5 +1,6 @@
 import { StoreAdministrator } from "../storeAdministrator";
 import { ObservableProperty } from "./observableProperty";
+import { ReadonlyProperty } from "./readonlyProperty";
 import { useState } from "react";
 import { InjectableMetadataUtils } from "src/container/decorators/Injectable";
 import { HooksMetadataUtils } from "src/decorators/hook";
@@ -11,7 +12,10 @@ import { getUnproxiedValue } from "src/utils/getUnProxiedValue";
 import { useFixedLazyRef } from "src/utils/useLazyRef";
 
 export class StorePropertyKeysManager {
-  readonly propertyKeys = new Map<PropertyKey, ObservableProperty>();
+  readonly propertyKeys = new Map<
+    PropertyKey,
+    ObservableProperty | ReadonlyProperty
+  >();
 
   private readonly readonlyPropertyKeys: Array<{
     matcher: (propertyKey: PropertyKey) => boolean;
@@ -69,6 +73,7 @@ export class StorePropertyKeysManager {
           }.${propertyKey.toString()}\` is an injected @Injectable() , so can't be mutated.`
         ),
     });
+
     // Injected Stores
     const storeMatcher = (propertyKey: PropertyKey) => {
       const type = getUnproxiedValue(
@@ -92,14 +97,12 @@ export class StorePropertyKeysManager {
       const isReadOnly = this.readonlyPropertyKeys.some(({ matcher }) =>
         matcher(propertyKey)
       );
-
+      const value = this.storeAdmin.instance[propertyKey];
       this.propertyKeys.set(
         propertyKey,
-        new ObservableProperty(
-          this.storeAdmin,
-          this.storeAdmin.instance[propertyKey],
-          isReadOnly
-        )
+        isReadOnly
+          ? new ReadonlyProperty(value)
+          : new ObservableProperty(this.storeAdmin, value)
       );
 
       // Define setter and getter
@@ -115,8 +118,7 @@ export class StorePropertyKeysManager {
   }
 
   private onGetPropertyKey(propertyKey: PropertyKey) {
-    const value = this.propertyKeys.get(propertyKey)?.getValue("Store");
-    return value;
+    return this.propertyKeys.get(propertyKey)?.getValue("Store");
   }
 
   /**
@@ -127,35 +129,41 @@ export class StorePropertyKeysManager {
   onSetPropertyKey(propertyKey: PropertyKey, value: unknown, force?: boolean) {
     value = deepUnproxy(value);
     const info = this.propertyKeys.get(propertyKey)!;
-    const preValue = info?.getValue("Store");
 
-    if (info.isReadOnly && !force) {
-      this.readonlyPropertyKeys
-        .find(({ matcher }) => matcher(propertyKey))
-        ?.onSet(propertyKey);
-    } else {
+    const storeValueAndRenderIfNeed = () => {
+      const preValue = info?.getValue("Store");
       info.setValue(value, "Store");
-    }
-
-    // Props property key must not affect renders status at all.
-    if (!info.isReadOnly || force) {
-      info.isSetStatePending = !info.isReadOnly;
       const purePreValue = getUnproxiedValue(Object(preValue)) || preValue;
       if (purePreValue !== value) {
         this.storeAdmin.renderConsumers(force);
       }
+    };
+
+    if (info instanceof ObservableProperty) {
+      info.isSetStatePending = true;
+      storeValueAndRenderIfNeed();
+    }
+
+    if (info instanceof ReadonlyProperty) {
+      if (force) {
+        storeValueAndRenderIfNeed();
+      } else {
+        this.readonlyPropertyKeys
+          .find(({ matcher }) => matcher(propertyKey))
+          ?.onSet(propertyKey);
+      }
     }
   }
 
   hasPendingSetStates() {
     return Array.from(this.propertyKeys.values()).some(
-      (info) => info.isSetStatePending
+      (info) => info instanceof ObservableProperty && info.isSetStatePending
     );
   }
 
   doPendingSetStates() {
     this.propertyKeys.forEach((info) => {
-      if (info.isSetStatePending) {
+      if (info instanceof ObservableProperty && info.isSetStatePending) {
         info.reactSetState?.();
       }
     });
@@ -168,8 +176,11 @@ export class StorePropertyKeysManager {
       when: "AFTER_INSTANCE",
       hook: () => {
         const propertyKeysInfo = useFixedLazyRef(() =>
-          Array.from(this.propertyKeys.values()).filter((info) => !info.isReadOnly)
-        );
+          Array.from(this.propertyKeys.values()).filter(
+            (info) => info instanceof ObservableProperty
+          )
+        ) as ObservableProperty[];
+
         propertyKeysInfo.forEach((info) => {
           const [state, setState] = useState(() =>
             info.isPrimitive ? info.getValue("Store") : { $: info.getValue("Store") }