feat: deep compare

Author: nchanged

README.md

@@ -52,6 +52,24 @@ class MyUser extends Fusion<any, any, MyStore> {
 
 The third (optional) generic typing will help with your typings on `this.store`, meanwhile the first and the second arguments remain conventional(IProps, IState)
 
+### Connecting with deep compare
+
+There are situations where you would like to avoid unnesserary updates. For that preffix your key with `@`
+
+```ts
+import { connect } from "fuse-react";
+@connect("@user")
+class MyUser extends Fusion<any, any, MyStore> {
+    public render() {
+        return (
+            <div>{this.store.user.name}</div>
+        );
+    };
+}
+```
+
+Once the dispatcher recieves an event and goes through all subscriptions it will check if the new value is different from the one in the store.
+
 ### Init
 
 ```tsx

fuse.js

@@ -19,12 +19,12 @@ task("test", async context => {
 })
 task("dist", async context => {
     await context.clean();
-    await context.prepareDistFolder();
     await exec("tsc")
 });
 
 task("publish", async () => {
     await exec("dist")
+    await context.prepareDistFolder();
     await npmPublish({path : "dist"});
 })
 

package.json

@@ -1,17 +1,18 @@
 {
   "name": "fuse-react",
-  "version": "1.0.2",
+  "version": "1.0.0",
   "main": "index.js",
   "repository": "git@github.com:fuse-box/fuse-react.git",
   "author": "nchanged <nchanged@gmail.com>",
   "license": "MIT",
   "dependencies": {
     "@types/react": "^16.3.17",
+    "deep-equal": "^1.0.1",
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
     "fuse-box": "^3.3.0-next.9",
     "typescript": "^2.9.1"
   }
-}
+}

src/Fusion.tsx

@@ -1,27 +1,34 @@
 import * as React from "react";
 import { getStore, getSubscriptions } from './Store';
-
+import * as equal from "deep-equal";
 const Subscriptions = getSubscriptions();
 
 export class Fusion<IProps, IState, IStore = null> extends React.Component<IProps, IState>  {
     public state: IState = {} as IState;
     public props: IProps;
-    public store : IStore = getStore();
+    public store: IStore = getStore();
 
     public _hasSubscriptions(obj: any) {
         const subscriptions = this.getConnectedStoreKeys();
         const store = getStore();
-        if (Array.isArray(subscriptions)) {
+        if (subscriptions) {
             for (const key in obj) {
-                if (subscriptions.indexOf(key) > -1) {
-                    return true;
+                const hasSubscription = subscriptions[key];
+                if (hasSubscription) {
+                    if (!hasSubscription.deep) {
+                        return true;
+                    }
+                    if (hasSubscription.deep && !equal(store[key], obj[key])) {
+                        return true;
+                    }
                 }
             }
         }
         return false;
     }
+
     private getConnectedStoreKeys(): Array<string> {
-        return this.constructor['$_connected_store_props'] || [];
+        return this.constructor['$_connected_store_props'] || {};
     }
 
     public _initialize() {
@@ -34,15 +41,17 @@ export class Fusion<IProps, IState, IStore = null> extends React.Component<IProp
 
     componentWillMount() {
         const keys = this.getConnectedStoreKeys();
-        if ( keys.length){
+        if (Object.keys(keys).length) {
             Subscriptions.push(this);
         }
         this._initialize();
     }
 
     componentWillUnmount() {
         const index = Subscriptions.indexOf(this);
-        Subscriptions.splice(index, 1);
+        if (index > -1) {
+            Subscriptions.splice(index, 1);
+        }
     }
 
     componentWillReceiveProps(newProps) {

src/Store.tsx

@@ -32,7 +32,7 @@ export class StoreWrapper {
         }
     }
 }
-export function createStore(myClassContext: new () => any) : StoreWrapper {
+export function createStore(myClassContext: new () => any): StoreWrapper {
     Context = new myClassContext();
     if (typeof Context["init"] === "function") {
         Context["init"]();
@@ -51,24 +51,28 @@ export function getSubscriptions(): Array<any> {
 export function dispatch<Context>(obj: { [key: string]: any } | string, value?: (cnt: Context) => any) {
     const Subscriptions = storage.__Subscriptions;
     const store = getStore();
-    let updates = obj;
+
+    let updates: any = obj;
     if (typeof obj === "object") {
         for (const key in obj) {
             if (typeof obj[key] === "function") {
-                store[key] = obj[key](store);
+                updates[key] = obj[key](store);
             } else {
-                store[key] = obj[key]
+                updates[key] = obj[key]
             }
         }
     }
     if (typeof obj === "string" && value) {
-        store[obj] = value(store[obj]);
         updates = {};
-        updates[obj] = store[obj];
+        updates[obj] = value(store[obj]);
     }
     Wrapper.trigger(updates);
+
     Subscriptions.forEach(component => {
         if (component._hasSubscriptions(updates)) {
+            for (const key in updates) {
+                store[key] = updates[key];
+            }
             component._initialize();
             component.forceUpdate();
         }
@@ -79,7 +83,20 @@ export function dispatch<Context>(obj: { [key: string]: any } | string, value?:
 export function connect<TP, TC extends React.ComponentClass<TP>>(...args): any {
     return (Target: any) => {
         if (args.length) {
-            Target["$_connected_store_props"] = args;
+            const collection = {};
+            for (const i in args) {
+
+                if (args.hasOwnProperty(i)) {
+                    let key = args[i];
+                    let deepEqual = false;
+                    if (key[0] === "@") {
+                        key = key.slice(1);
+                        deepEqual = true;
+                    }
+                    collection[key] = { deep: deepEqual };
+                }
+            }
+            Target["$_connected_store_props"] = collection;
         }
         return Target;
     }

src/dev.tsx

@@ -10,6 +10,7 @@ interface IUser {
     age: number;
 }
 class MyStore {
+    reset = {a : "b"}
     user = {
         name: "Bob",
         email: "bob@gmail.eomc",
@@ -22,11 +23,13 @@ wrapper.susbcribe("user", user => {
 })
 
 
-
-class MyRootComponent extends Fusion<any, any> {
+@connect("@reset")
+class MyRootComponent extends Fusion<any, any, MyStore> {
     public render() {
+        console.log("update");
         return (
             <div><input type="button" />
+                {this.store.reset.a}
                 <MyUser/>
                 <Controls/>
             </div>
@@ -47,6 +50,12 @@ class Controls extends Fusion<any, any> {
             return user;
         });
     }
+    private reset(){
+        dispatch("reset", () => ({a : "b"}));
+    }
+    private reset2(){
+        dispatch("reset", () => ({a : "a"}));
+    }
     public render() {
         return (
             <div>
@@ -56,6 +65,8 @@ class Controls extends Fusion<any, any> {
                     <input type="button" value="delete user" onClick={() => this.delete()}/>
                     <input type="button" value="create user" onClick={() => this.create()}/>
                     <input type="button" value="incrementAge11" onClick={() => this.incrementAge()}/>
+                    <input type="button" value="reset obj 1" onClick={() => this.reset()}/>
+                    <input type="button" value="reset obj 2" onClick={() => this.reset2()}/>
 
                 </div>
             </div>

yarn.lock

@@ -357,6 +357,10 @@ decamelize@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"