imp: make store reactive (observe state and react to changes)

This is a pretty big change, yet still not complete.

src/store.ts

@@ -1,6 +1,86 @@
 import { EventBus } from "./event_bus";
 import { Component } from "./component";
-import { shallowEqual } from "./utils";
+import { shallowEqual, magify } from "./utils";
+
+interface StoreConfig {
+  env?: any;
+  state?: any;
+  actions?: any;
+  mutations?: any;
+}
+
+interface StoreOption {
+  debug?: boolean;
+}
+export class Store extends EventBus {
+  state: any;
+  mstate: any;
+  actions: any;
+  mutations: any;
+  _isMutating: boolean = false;
+  _isDirty: boolean = false;
+  history: any[] = [];
+  debug: boolean;
+  env: any;
+
+  constructor(config: StoreConfig, options: StoreOption = {}) {
+    super();
+    this.debug = options.debug || false;
+    this.state = Object.assign({}, config.state);
+    this.mstate = magify({
+      raw: this.state,
+      key: "state",
+      parent: this,
+      onDirty: () => (this._isDirty = true)
+    });
+    this.actions = config.actions;
+    this.mutations = config.mutations;
+    this.env = config.env;
+
+    if (this.debug) {
+      this.history.push({ state: this.state });
+    }
+  }
+
+  dispatch(action, payload?: any) {
+    if (!this.actions[action]) {
+      throw new Error(`[Error] action ${action} is undefined`);
+    }
+    this.actions[action](
+      {
+        commit: this.commit.bind(this),
+        dispatch: this.dispatch.bind(this),
+        env: this.env,
+        state: this.state
+      },
+      payload
+    );
+  }
+
+  async commit(type, payload?: any) {
+    if (!this.mutations[type]) {
+      throw new Error(`[Error] mutation ${type} is undefined`);
+    }
+    this._isMutating = true;
+
+    this.mutations[type].call(null, this.mstate, payload);
+    if (this.debug) {
+      this.history.push({
+        state: this.state,
+        mutation: type,
+        payload: payload
+      });
+    }
+    await Promise.resolve();
+    if (this._isMutating) {
+      this._isMutating = false;
+      if (this._isDirty) {
+        this._isDirty = false;
+        this.trigger("update", this.state);
+      }
+    }
+  }
+}
 
 export function connect(mapStateToProps) {
   return function(Comp) {
@@ -47,80 +127,3 @@ export function connect(mapStateToProps) {
     };
   };
 }
-
-interface StoreConfig {
-  env?: any;
-  state?: any;
-  actions?: any;
-  mutations?: any;
-}
-
-interface StoreOption {
-  debug?: boolean;
-}
-export class Store extends EventBus {
-  _state: any;
-  actions: any;
-  mutations: any;
-  _isMutating: boolean = false;
-  history: any[] = [];
-  debug: boolean;
-  env: any;
-
-  constructor(config: StoreConfig, options: StoreOption = {}) {
-    super();
-    this.debug = options.debug || false;
-    this._state = Object.assign({}, config.state);
-    this.actions = config.actions;
-    this.mutations = config.mutations;
-    this.env = config.env;
-
-    if (this.debug) {
-      this.history.push({ state: this.state });
-    }
-  }
-
-  get state() {
-    return this._clone(this._state);
-  }
-
-  dispatch(action, payload?: any) {
-    if (!this.actions[action]) {
-      throw new Error(`[Error] action ${action} is undefined`);
-    }
-    this.actions[action](
-      {
-        commit: this.commit.bind(this),
-        dispatch: this.dispatch.bind(this),
-        env: this.env,
-        state: this.state
-      },
-      payload
-    );
-  }
-
-  async commit(type, payload) {
-    if (!this.mutations[type]) {
-      throw new Error(`[Error] mutation ${type} is undefined`);
-    }
-    this._isMutating = true;
-
-    this.mutations[type].call(null, this._state, payload);
-    if (this.debug) {
-      this.history.push({
-        state: this.state,
-        mutation: type,
-        payload: payload
-      });
-    }
-    await Promise.resolve();
-    if (this._isMutating) {
-      this._isMutating = false;
-      this.trigger("update", this.state);
-    }
-  }
-
-  _clone(obj) {
-    return JSON.parse(JSON.stringify(obj));
-  }
-}

src/utils.ts

@@ -176,3 +176,93 @@ export function unpatch(C: any, patchName: string) {
     }
   }
 }
+
+function _magifyArray({ raw, key, parent, magic, onDirty }) {
+  Object.defineProperty(magic, "length", {
+    get() {
+      return magic.raw.length;
+    }
+  });
+  Object.assign(magic, {
+    push: function(item) {
+      onDirty();
+      parent.raw[key] = [...magic.raw, item];
+      magic.raw = parent.raw[key];
+      const index = magic.raw.length - 1;
+      let prop = magify({ raw: item, key: index, parent: magic, onDirty });
+      Object.defineProperty(magic, index, {
+        set(newVal) {
+          onDirty();
+          parent.raw[key] = [...magic.raw];
+          parent.raw[key][index] = newVal;
+          magic.raw = parent.raw[key];
+          prop = magify({ raw: newVal, key: index, parent: magic, onDirty });
+        },
+        get() {
+          return prop;
+        }
+      });
+    }
+  });
+  raw.forEach(([value, index]) => {
+    let prop = magify({
+      raw: value,
+      key: index,
+      parent: magic,
+      onDirty
+    });
+    Object.defineProperty(magic, index, {
+      set(newVal) {
+        onDirty();
+        parent.raw[key] = [...magic.raw];
+        parent.raw[key][index] = newVal;
+        magic.raw = parent.raw[key];
+        prop = magify({ raw: newVal, key: index, parent: magic, onDirty });
+      },
+      get() {
+        return prop;
+      }
+    });
+  });
+}
+
+export function magify({ raw, key, parent, onDirty }) {
+  if (!parent.magic) {
+    parent = {
+      raw: parent,
+      magic: true,
+      parent: null
+    };
+  }
+  if (raw.magic) {
+    return raw;
+  }
+  if (typeof raw !== "object") {
+    return raw;
+  }
+  let magic = { raw, key, parent, magic: true };
+  if (Array.isArray(raw)) {
+    _magifyArray({ raw, key, parent, magic, onDirty });
+  } else {
+    Object.keys(raw).forEach(propKey => {
+      let prop = magify({
+        raw: raw[propKey],
+        key: propKey,
+        parent: magic,
+        onDirty
+      });
+      Object.defineProperty(magic, propKey, {
+        set(newVal) {
+          onDirty();
+          parent.raw[key] = { ...magic.raw, [propKey]: newVal };
+          magic.raw = parent.raw[key];
+          prop = magify({ raw: newVal, key: propKey, parent: magic, onDirty });
+        },
+        get() {
+          return prop;
+        }
+      });
+    });
+  }
+  return magic;
+}