refactor: bind effect to render context

jest.config.js

@@ -135,7 +135,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jest-environment-jsdom",
+  testEnvironment: "jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-store/core",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "main": "dist/index.js",
   "repository": "https://github.com/sahabpardaz/react-store.git",
   "author": "Amir Hossein Qasemi Moqaddam <[email protected]>",
@@ -17,49 +17,50 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.9",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@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",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
+    "@testing-library/react": "^13.3.0",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/clone-deep": "^4.0.1",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.181",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/jest": "^28.1.1",
+    "@types/lodash": "^4.14.182",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
     "@types/testing-library__jest-dom": "^5.14.3",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^28.1.1",
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
-    "eslint": "^8.13.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": ">=12",
+    "husky": "^8.0.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "lint-staged": ">=13",
     "prettier": "^2.6.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-refresh-typescript": "^2.0.4",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-refresh-typescript": "^2.0.5",
     "react-router-dom": "6",
-    "rollup": "^2.70.2",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup": "^2.75.6",
+    "rollup-plugin-typescript2": "^0.32.1",
     "styled-components": "^5.3.5",
-    "ts-loader": "^9.2.8",
+    "ts-loader": "^9.3.0",
     "ttypescript": "^1.5.13",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
+    "typescript": "^4.7.3",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
     "websocket-extensions": "^0.1.4"
   },
   "scripts": {

src/constant.ts

@@ -1,4 +1,3 @@
 export const TARGET = Symbol("TARGET");
-export const STORE_USED_CONTEXTS = Symbol("STORE_USED_CONTEXTS");
 export const STORE_ADMINISTRATION = Symbol("STORE_ADMINISTRATION");
 export const PROXY_HANDLER_TYPE = Symbol("PROXY_HANDLER_TYPE");

src/proxy/storeForConsumerComponentProxy.ts

@@ -21,6 +21,10 @@ export class StoreForConsumerComponentProxy implements ProxyHandler<object> {
       );
     }
 
+    if (storeAdmin?.methodsManager.methods.has(propertyKey)) {
+      return storeAdmin.methodsManager.methods.get(propertyKey)?.storeBound;
+    }
+
     if (storeAdmin?.gettersManager.getters.has(propertyKey)) {
       return storeAdmin.gettersManager.getters.get(propertyKey)?.getValue("State");
     }

src/store/administrator/effects/effectsProxy.ts

@@ -0,0 +1,56 @@
+import { StoreAdministrator } from "../storeAdministrator";
+import { adtProxyBuilder } from "src/proxy/adtProxy/adtProxyBuilder";
+import { getUnproxiedValue } from "src/utils/getUnProxiedValue";
+
+export class EffectProxy implements ProxyHandler<object> {
+  directMutatedStoreProperties = new Map<PropertyKey, unknown>();
+
+  constructor(private storeAdmin: StoreAdministrator) {}
+
+  get(target: object, propertyKey: PropertyKey, receiver: unknown) {
+    if (this.directMutatedStoreProperties.has(propertyKey)) {
+      return this.directMutatedStoreProperties.get(propertyKey);
+    }
+
+    // Property Key
+    if (this.storeAdmin?.propertyKeysManager.propertyKeys.has(propertyKey)) {
+      const value = this.storeAdmin?.propertyKeysManager.propertyKeys
+        .get(propertyKey)
+        ?.getValue("State");
+
+      if (StoreAdministrator.get(getUnproxiedValue(value))) {
+        return StoreAdministrator.get(getUnproxiedValue(value))?.effectsManager
+          .context;
+      }
+
+      return adtProxyBuilder({
+        value,
+        proxiedValuesStorage: new Map(),
+        onSet: () =>
+          this.storeAdmin.propertyKeysManager.propertyKeys
+            .get(propertyKey)
+            ?.doOnSet(),
+      });
+    }
+
+    // Getters
+    if (this.storeAdmin?.gettersManager.getters.has(propertyKey)) {
+      return this.storeAdmin.gettersManager.getters
+        .get(propertyKey)
+        ?.getValue("State");
+    }
+
+    /**
+     * 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
+     */
+
+    return Reflect.get(target, propertyKey, receiver);
+  }
+
+  set(target: object, propertyKey: PropertyKey, value: unknown) {
+    this.storeAdmin?.propertyKeysManager.onSetPropertyKey(propertyKey, value);
+    this.directMutatedStoreProperties.set(propertyKey, value);
+    return true;
+  }
+}

src/store/administrator/storeEffectsManager.ts → src/store/administrator/effects/storeEffectsManager.ts

@@ -1,14 +1,19 @@
-import type { StoreAdministrator } from "./storeAdministrator";
+import type { StoreAdministrator } from "../storeAdministrator";
+import { EffectProxy } from "./effectsProxy";
 import cloneDeep from "clone-deep";
 import { dequal } from "dequal";
 import isPromise from "is-promise";
 import { useEffect, useRef } from "react";
 import { EffectsMetadataUtils, ManualEffectOptions } from "src/decorators/effect";
-import { Func } from "src/types";
+import { ClassType, Func } from "src/types";
 
 export class StoreEffectsManager {
   readonly effects = new Map<PropertyKey, { clear?: Func<void> }>();
 
+  private effectProxy: EffectProxy;
+
+  context: InstanceType<ClassType>;
+
   constructor(private storeAdmin: StoreAdministrator) {}
 
   registerEffects() {
@@ -23,6 +28,9 @@ export class StoreEffectsManager {
         },
       });
     });
+
+    this.effectProxy = new EffectProxy(this.storeAdmin);
+    this.context = new Proxy(this.storeAdmin.instance, this.effectProxy);
   }
 
   private manualEffectHandler(
@@ -50,6 +58,7 @@ export class StoreEffectsManager {
     }
 
     useEffect(() => {
+      this.effectProxy.directMutatedStoreProperties.clear();
       this.runEffect(effectKey, storeAdmin);
       return () => effectsManager.getClearEffect(effectKey)?.();
     }, [signal.current]);
@@ -58,8 +67,8 @@ export class StoreEffectsManager {
   private runEffect(effectKey: PropertyKey, storeAdmin: StoreAdministrator) {
     // Run Effect
     const clearEffect: Func<void> | undefined = (
-      storeAdmin.instanceForComponents[effectKey] as Func
-    )?.apply(storeAdmin.instanceForComponents) as undefined;
+      storeAdmin.instance[effectKey] as Func
+    )?.apply(this.context) as undefined;
 
     if (
       clearEffect &&

src/store/administrator/getters/storeGettersManager.ts

@@ -7,35 +7,28 @@ export class StoreGettersManager {
 
   constructor(private storeAdmin: StoreAdministrator) {}
 
-  makeAllAsComputed() {
-    // @Memo Decorator
+  registerMemos() {
     this.memosMetaData.forEach((metadata) => {
-      const getter = Object.getOwnPropertyDescriptor(
+      const descriptor = Object.getOwnPropertyDescriptor(
         Object.getPrototypeOf(this.storeAdmin.instance),
         metadata.propertyKey
-      )?.get;
+      );
 
-      if (getter) {
+      if (descriptor?.get) {
         const memoized = new MemoizedProperty({
-          getter,
+          getter: descriptor.get,
           storeAdmin: this.storeAdmin,
           depFn: metadata.options.deps,
           deepEqual: metadata.options.deepEqual,
         });
-        this.getters.set(metadata.propertyKey, memoized);
-      }
-    });
 
-    this.getters.forEach((memoized, propertyKey) => {
-      const desc = Object.getOwnPropertyDescriptor(
-        Object.getPrototypeOf(this.storeAdmin.instance),
-        propertyKey
-      );
+        Object.defineProperty(this.storeAdmin.instance, metadata.propertyKey, {
+          ...descriptor,
+          get: () => memoized.getValue("Store"),
+        });
 
-      Object.defineProperty(this.storeAdmin.instance, propertyKey, {
-        ...desc,
-        get: () => memoized.getValue("Store"),
-      });
+        this.getters.set(metadata.propertyKey, memoized);
+      }
     });
 
     this.storeAdmin.hooksManager.reactHooks.add({

src/store/administrator/propertyKeys/observableProperty.ts

@@ -23,7 +23,7 @@ export class ObservableProperty {
     public isReadOnly?: boolean
   ) {
     this.isPrimitive = isPrimitive(value);
-    value = this.makeDeepObservable(value, isReadOnly);
+    value = this.makeDeepObservable(value);
     const _val = this.isPrimitive ? value : { $: value };
     this.value = {
       state: _val,
@@ -43,10 +43,10 @@ export class ObservableProperty {
     return this._reactSetState;
   }
 
-  setValue(value: unknown, to: "State" | "Store", readonly?: boolean) {
+  setValue(value: unknown, to: "State" | "Store") {
     this.isPrimitive = isPrimitive(value);
     if (to === "Store") {
-      value = this.makeDeepObservable(value, readonly);
+      value = this.makeDeepObservable(value);
     }
     switch (to) {
       case "State":
@@ -75,18 +75,19 @@ export class ObservableProperty {
     }
   }
 
-  private makeDeepObservable(value: unknown, readonly?: boolean) {
+  private makeDeepObservable(value: unknown) {
     const observable = adtProxyBuilder({
       value,
       proxiedValuesStorage: this.proxiedValuesStorage,
-      onSet: () => {
-        this.isSetStatePending = false;
-        if (!readonly) {
-          this.isSetStatePending = true;
-          this.storeAdmin.renderConsumers();
-        }
-      },
+      onSet: () => this.doOnSet(),
     });
     return observable;
   }
+
+  doOnSet() {
+    if (!this.isReadOnly) {
+      this.isSetStatePending = true;
+      this.storeAdmin.renderConsumers();
+    }
+  }
 }

src/store/administrator/propertyKeys/storePropertyKeysManager.ts

@@ -128,19 +128,18 @@ export class StorePropertyKeysManager {
     value = deepUnproxy(value);
     const info = this.propertyKeys.get(propertyKey)!;
     const preValue = info?.getValue("Store");
-    const readonlyProperty = this.readonlyPropertyKeys.find(({ matcher }) =>
-      matcher(propertyKey)
-    );
 
-    if (readonlyProperty && !force) {
-      readonlyProperty?.onSet(propertyKey);
+    if (info.isReadOnly && !force) {
+      this.readonlyPropertyKeys
+        .find(({ matcher }) => matcher(propertyKey))
+        ?.onSet(propertyKey);
     } else {
-      info.setValue(value, "Store", !!readonlyProperty);
+      info.setValue(value, "Store");
     }
 
     // Props property key must not affect renders status at all.
-    if (!readonlyProperty || force) {
-      info.isSetStatePending = !readonlyProperty;
+    if (!info.isReadOnly || force) {
+      info.isSetStatePending = !info.isReadOnly;
       const purePreValue = getUnproxiedValue(Object(preValue)) || preValue;
       if (purePreValue !== value) {
         this.storeAdmin.renderConsumers(force);

src/store/administrator/storeAdministrator.ts

@@ -1,10 +1,10 @@
 import { STORE_ADMINISTRATION } from "../../constant";
 import { StoreForConsumerComponentProxy } from "../../proxy/storeForConsumerComponentProxy";
+import { StoreEffectsManager } from "./effects/storeEffectsManager";
 import { StoreGettersManager } from "./getters/storeGettersManager";
 import { HooksManager } from "./hooksManager";
 import { StorePropertyKeysManager } from "./propertyKeys/storePropertyKeysManager";
 import { PropsManager } from "./propsManager";
-import { StoreEffectsManager } from "./storeEffectsManager";
 import { StoreMethodsManager } from "./storeMethodsManager";
 import { StoreStorePartsManager } from "./storeStorePartsManager";
 import { ClassType } from "src/types";
@@ -60,8 +60,8 @@ export class StoreAdministrator {
     this.propertyKeysManager.registerUseStates();
     this.propertyKeysManager.makeAllObservable();
     this.effectsManager.registerEffects();
-    this.gettersManager.makeAllAsComputed();
-    this.methodsManager.makeAllAutoBound();
+    this.gettersManager.registerMemos();
+    this.methodsManager.bindMethods();
   }
 
   renderConsumers(relax?: boolean) {