@goldfishjs/reactive-connect - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

babel-plugin-import-config.js

@@ -20,3 +20,3 @@ const libraryName = require('./package.json').name;
       state: `${codeDir}/decorators/state`,
-      MiniDataSetter: `${codeDir}/MiniDataSetter`,
+      getMiniDataSetter: `${codeDir}/getMiniDataSetter`,
       isComponent2: `${codeDir}/isComponent2`,
@@ -23,0 +23,0 @@ }[name];

lib/createMiniComponent.js

 import _connect from "@goldfishjs/reactive/lib/connect";
 import attachLogic from './attachLogic';
-import MiniDataSetter from './MiniDataSetter';
+import getMiniDataSetter from './getMiniDataSetter';
 export var isComponent2 = typeof my !== 'undefined' ? my.canIUse('component2') : false;
@@ -18,5 +18,4 @@ export default function createTinyappComponent(storeClass) {
 
-    var miniDataSetter = this.$$miniDataSetter || new MiniDataSetter(this);
-    this.$$miniDataSetter = miniDataSetter;
-    miniDataSetter.set(keyPathList, newV, oldV, options);
+    var miniDataSetter = getMiniDataSetter();
+    miniDataSetter.set(this, keyPathList, newV, oldV, options);
   }, function (instance) {
@@ -23,0 +22,0 @@ beforeCreateStore && beforeCreateStore(instance);

lib/createMiniPage.js

 import _connect from "@goldfishjs/reactive/lib/connect";
 import attachLogic from './attachLogic';
-import MiniDataSetter from './MiniDataSetter';
+import getMiniDataSetter from './getMiniDataSetter';
 export default function createMiniPage(storeClass) {
@@ -18,5 +18,4 @@ var pageOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    var miniDataSetter = this.$$miniDataSetter || new MiniDataSetter(this);
-    this.$$miniDataSetter = miniDataSetter;
-    miniDataSetter.set(keyPathList, newV, oldV, options);
+    var miniDataSetter = getMiniDataSetter();
+    miniDataSetter.set(this, keyPathList, newV, oldV, options);
   }, function (instance) {
@@ -23,0 +22,0 @@ beforeCreateStore && beforeCreateStore(instance);

lib/index.js

@@ -14,3 +14,2 @@ export * from './decorators/index';
 export { default as attachLogic } from './attachLogic';
-export { default as MiniDataSetter } from './MiniDataSetter';
-export * from './MiniDataSetter';
+export { default as getMiniDataSetter } from './getMiniDataSetter';

lib/MiniDataSetter.js

@@ -1,6 +0,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _generateKeyPathString from "@goldfishjs/reactive/lib/generateKeyPathString";
 import _set from "@goldfishjs/reactive/lib/set";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -41,13 +40,121 @@ import _createClass from "@babel/runtime/helpers/createClass";
 
+export var Count =
+/*#__PURE__*/
+function () {
+  function Count(cb) {
+    _classCallCheck(this, Count);
+
+    this.segTotalList = [];
+    this.counter = 0;
+    this.cb = cb;
+  }
+
+  _createClass(Count, [{
+    key: "set",
+    value: function set() {
+      return __awaiter(this, void 0, void 0,
+      /*#__PURE__*/
+      _regeneratorRuntime.mark(function _callee() {
+        var segIndex, segLength;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                segIndex = this.counter === 0 ? this.segTotalList.length : this.segTotalList.length - 1;
+
+                if (!this.segTotalList[segIndex]) {
+                  this.segTotalList[segIndex] = 0;
+                }
+
+                this.counter += 1;
+                this.segTotalList[segIndex] += 1;
+                _context.next = 6;
+                return Promise.resolve();
+
+              case 6:
+                this.counter -= 1; // The last invoke of `set`
+
+                if (!(this.counter === 0)) {
+                  _context.next = 12;
+                  break;
+                }
+
+                segLength = this.segTotalList.length;
+                _context.next = 11;
+                return Promise.resolve();
+
+              case 11:
+                if (this.segTotalList.length === segLength) {
+                  this.cb();
+                  this.counter = 0;
+                  this.segTotalList = [];
+                }
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+    }
+  }]);
+
+  return Count;
+}();
+
 var MiniDataSetter =
 /*#__PURE__*/
 function () {
-  function MiniDataSetter(view) {
+  function MiniDataSetter() {
+    var _this = this;
+
     _classCallCheck(this, MiniDataSetter);
 
-    this.updateList = [];
-    this.view = view;
+    this.count = new Count(function () {
+      return _this.flush();
+    });
+    this.setDataObjectMap = {};
+    this.spliceDataObjectMap = {};
+    this.viewMap = {};
   }
 
   _createClass(MiniDataSetter, [{
+    key: "getBatchUpdates",
+    value: function getBatchUpdates(view) {
+      return view.$batchedUpdates ? view.$batchedUpdates.bind(view) : view.$page.$batchedUpdates.bind(view.$page);
+    }
+  }, {
+    key: "flush",
+    value: function flush() {
+      var _this2 = this;
+
+      var _loop = function _loop(id) {
+        var setDataObject = _this2.setDataObjectMap[id];
+        var spliceDataObject = _this2.spliceDataObjectMap[id];
+        var view = _this2.viewMap[id];
+        var store = view.store;
+        var isSyncDataSafe = store && store.isSyncDataSafe === false ? false : true;
+
+        if (!isSyncDataSafe) {
+          return "continue";
+        }
+
+        _this2.getBatchUpdates(view)(function () {
+          view.setData(setDataObject);
+          view.$spliceData(spliceDataObject);
+        });
+      };
+
+      for (var id in this.viewMap) {
+        var _ret = _loop(id);
+
+        if (_ret === "continue") continue;
+      }
+
+      this.viewMap = {};
+      this.setDataObjectMap = {};
+      this.spliceDataObjectMap = {};
+    }
+  }, {
     key: "setByKeyPathList",
@@ -83,71 +190,38 @@ value: function setByKeyPathList(obj, keyPathList, value) {
     key: "set",
-    value: function set(keyPathList, newV, oldV, options) {
-      return __awaiter(this, void 0, void 0,
-      /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee() {
-        var _this = this;
+    value: function set(view, keyPathList, newV, oldV, options) {
+      this.spliceDataObjectMap[view.$id] = this.spliceDataObjectMap[view.$id] || {};
+      this.setDataObjectMap[view.$id] = this.setDataObjectMap[view.$id] || {};
+      this.viewMap[view.$id] = view;
 
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                this.updateList.push(function () {
-                  try {
-                    var keyPathString = _generateKeyPathString(keyPathList);
+      try {
+        var keyPathString = _generateKeyPathString(keyPathList);
 
-                    if (Array.isArray(newV) && Array.isArray(oldV) && options && options.method) {
-                      var methodName = options && options.method;
-                      var args = options && options.args;
-                      var optionsOldV = options && options.oldV;
+        if (Array.isArray(newV) && Array.isArray(oldV) && options && options.method) {
+          var methodName = options && options.method;
+          var args = options && options.args;
+          var optionsOldV = options && options.oldV;
+          this.setByKeyPathList(view.data, keyPathList, options.oldV);
+          var map = {
+            push: [optionsOldV.length, 0].concat(_toConsumableArray(args)),
+            splice: args,
+            unshift: [0, 0].concat(_toConsumableArray(args)),
+            pop: [optionsOldV.length - 1, 1],
+            shift: [0, 1]
+          };
+          var spliceDataArgs = map[methodName];
 
-                      _this.setByKeyPathList(_this.view.data, keyPathList, options.oldV);
+          if (spliceDataArgs) {
+            this.spliceDataObjectMap[view.$id][keyPathString] = spliceDataArgs;
+          } else {
+            this.setDataObjectMap[view.$id][keyPathString] = newV;
+          }
+        } else {
+          this.setDataObjectMap[view.$id][keyPathString] = newV;
+        }
+      } catch (e) {
+        this.setDataObjectMap[view.$id][keyPathList[0]] = view.data[keyPathList[0]];
+        console.warn(e);
+      }
 
-                      var map = {
-                        push: [optionsOldV.length, 0].concat(_toConsumableArray(args)),
-                        splice: args,
-                        unshift: [0, 0].concat(_toConsumableArray(args)),
-                        pop: [optionsOldV.length - 1, 1],
-                        shift: [0, 1]
-                      };
-                      var spliceDataArgs = map[methodName];
-
-                      if (spliceDataArgs) {
-                        _this.view.$spliceData(_defineProperty({}, keyPathString, spliceDataArgs));
-                      } else {
-                        _this.view.setData(_defineProperty({}, keyPathString, newV));
-                      }
-                    } else {
-                      _this.view.setData(_defineProperty({}, keyPathString, newV));
-                    }
-                  } catch (e) {
-                    _this.view.setData(_defineProperty({}, keyPathList[0], _this.view.data[keyPathList[0]]));
-
-                    console.warn(e);
-                  }
-                });
-                setTimeout(function () {
-                  var store = _this.view.store;
-                  var isSyncDataSafe = store && store.isSyncDataSafe === false ? false : true;
-
-                  if (!isSyncDataSafe || !_this.updateList.length) {
-                    return;
-                  } // Component Store needs $page.$batchedUpdates
-
-
-                  (_this.view.$batchedUpdates ? _this.view.$batchedUpdates.bind(_this.view) : _this.view.$page.$batchedUpdates.bind(_this.view.$page))(function () {
-                    _this.updateList.forEach(function (update) {
-                      return update();
-                    });
-
-                    _this.updateList = [];
-                  });
-                });
-
-              case 2:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
+      this.count.set();
     }
@@ -154,0 +228,0 @@ }]);

package.json

 {
   "name": "@goldfishjs/reactive-connect",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "goldfish-reactive-connect",
@@ -19,3 +19,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@goldfishjs/reactive": "^0.0.12",
+    "@goldfishjs/reactive": "^0.0.13",
     "mini-types": "^0.0.4"
@@ -22,0 +22,0 @@ },

src/createMiniComponent.ts

 import { connect, IViewInstance, ChangeOptions } from '@goldfishjs/reactive';
 import ComponentStore from './ComponentStore';
 import attachLogic from './attachLogic';
-import MiniDataSetter from './MiniDataSetter';
+import getMiniDataSetter from './getMiniDataSetter';
 
@@ -39,4 +39,3 @@ export const isComponent2 = typeof my !== 'undefined' ? my.canIUse('component2') : false;
         setData: tinyapp.SetDataMethod<D>;
-        store: CS;
-        $$miniDataSetter?: MiniDataSetter<tinyapp.IComponentInstance<P, D>>
+        store: CS
       },
@@ -53,5 +52,4 @@ _: any,
 
-      const miniDataSetter = this.$$miniDataSetter || new MiniDataSetter(this);
-      this.$$miniDataSetter = miniDataSetter;
-      miniDataSetter.set(keyPathList, newV, oldV, options);
+      const miniDataSetter = getMiniDataSetter();
+      miniDataSetter.set(this, keyPathList, newV, oldV, options);
     },
@@ -58,0 +56,0 @@ (instance) => {

src/createMiniPage.ts

@@ -5,3 +5,3 @@ import { connect, IViewInstance, ChangeOptions } from '@goldfishjs/reactive';
 import AppStore from './AppStore';
-import MiniDataSetter from './MiniDataSetter';
+import getMiniDataSetter from './getMiniDataSetter';
 
@@ -41,3 +41,2 @@ export type PageInstance<D, S> =
         store: PS;
-        $$miniDataSetter?: MiniDataSetter<tinyapp.IPageInstance<D>>
       },
@@ -54,5 +53,4 @@ _: any,
 
-      const miniDataSetter = this.$$miniDataSetter || new MiniDataSetter(this);
-      this.$$miniDataSetter = miniDataSetter;
-      miniDataSetter.set(keyPathList, newV, oldV, options);
+      const miniDataSetter = getMiniDataSetter();
+      miniDataSetter.set(this, keyPathList, newV, oldV, options);
     },
@@ -59,0 +57,0 @@ (instance) => {

src/index.ts

@@ -23,3 +23,2 @@ export * from './decorators/index';
 
-export { default as MiniDataSetter } from './MiniDataSetter';
-export * from './MiniDataSetter';
+export { default as getMiniDataSetter } from './getMiniDataSetter';

src/MiniDataSetter.ts

@@ -8,13 +8,81 @@ import {
 
-export default class MiniDataSetter<
-  V extends tinyapp.IPageInstance<any> | tinyapp.IComponentInstance<any, any>
-> {
-  private view: V;
+export class Count {
+  private segTotalList: number[] = [];
 
-  private updateList: (() => void)[] = [];
+  private counter = 0;
 
-  public constructor(view: V) {
-    this.view = view;
+  private cb: () => void;
+
+  public constructor(cb: () => void) {
+    this.cb = cb;
   }
 
+  public async set() {
+    const segIndex = this.counter === 0
+      ? this.segTotalList.length
+      : (this.segTotalList.length - 1);
+
+    if (!this.segTotalList[segIndex]) {
+      this.segTotalList[segIndex] = 0;
+    }
+
+    this.counter += 1;
+    this.segTotalList[segIndex] += 1;
+
+    await Promise.resolve();
+
+    this.counter -= 1;
+
+    // The last invoke of `set`
+    if (this.counter === 0) {
+      const segLength = this.segTotalList.length;
+      await Promise.resolve();
+      if (this.segTotalList.length === segLength) {
+        this.cb();
+        this.counter = 0;
+        this.segTotalList = [];
+      }
+    }
+  }
+}
+
+type View = tinyapp.IPageInstance<any> | tinyapp.IComponentInstance<any, any>;
+
+export default class MiniDataSetter {
+  private count = new Count(() => this.flush());
+
+  private setDataObjectMap: Record<string, Record<string, any>> = {};
+
+  private spliceDataObjectMap: Record<string, Record<string, any>> = {};
+
+  private viewMap: Record<string, View> = {};
+
+  private getBatchUpdates(view: View) {
+    return view.$batchedUpdates ?
+      view.$batchedUpdates.bind(view) :
+      view.$page.$batchedUpdates.bind(view.$page);
+  }
+
+  private flush() {
+    for (const id in this.viewMap) {
+      const setDataObject = this.setDataObjectMap[id];
+      const spliceDataObject = this.spliceDataObjectMap[id];
+      const view = this.viewMap[id];
+
+      const store = (view as any).store;
+      const isSyncDataSafe = store && store.isSyncDataSafe === false ? false : true;
+      if (!isSyncDataSafe) {
+        continue;
+      }
+
+      this.getBatchUpdates(view)(() => {
+        view.setData(setDataObject);
+        view.$spliceData(spliceDataObject);
+      });
+    }
+    this.viewMap = {};
+    this.setDataObjectMap = {};
+    this.spliceDataObjectMap = {};
+  }
+
   private setByKeyPathList(
@@ -49,3 +117,4 @@ obj: any,
 
-  public async set(
+  public set(
+    view: View,
     keyPathList: (string | number)[],
@@ -56,62 +125,37 @@ newV: any,
   ) {
-    this.updateList.push(() => {
-      try {
-        const keyPathString = generateKeyPathString(keyPathList);
-        if (Array.isArray(newV) && Array.isArray(oldV) && options && options.method) {
-          const methodName: Methods = options && options.method;
-          const args = options && options.args!;
-          const optionsOldV = options && options.oldV!;
-          this.setByKeyPathList(this.view.data, keyPathList, options.oldV);
+    this.spliceDataObjectMap[view.$id] = this.spliceDataObjectMap[view.$id] || {};
+    this.setDataObjectMap[view.$id] = this.setDataObjectMap[view.$id] || {};
+    this.viewMap[view.$id] = view;
+    try {
+      const keyPathString = generateKeyPathString(keyPathList);
+      if (Array.isArray(newV) && Array.isArray(oldV) && options && options.method) {
+        const methodName: Methods = options && options.method;
+        const args = options && options.args!;
+        const optionsOldV = options && options.oldV!;
+        this.setByKeyPathList(view.data, keyPathList, options.oldV);
 
-          const map: Record<string, any> = {
-            push: [optionsOldV.length, 0, ...args],
-            splice: args,
-            unshift: [0, 0, ...args],
-            pop: [optionsOldV.length - 1, 1],
-            shift: [0, 1],
-          };
-          const spliceDataArgs = map[methodName];
+        const map: Record<string, any> = {
+          push: [optionsOldV.length, 0, ...args],
+          splice: args,
+          unshift: [0, 0, ...args],
+          pop: [optionsOldV.length - 1, 1],
+          shift: [0, 1],
+        };
+        const spliceDataArgs = map[methodName];
 
-          if (spliceDataArgs) {
-            this.view.$spliceData({
-              [keyPathString]: spliceDataArgs,
-            });
-          } else {
-            this.view.setData({
-              [keyPathString]: newV,
-            });
-          }
+        if (spliceDataArgs) {
+          this.spliceDataObjectMap[view.$id][keyPathString] = spliceDataArgs;
         } else {
-          this.view.setData({
-            [keyPathString]: newV,
-          });
+          this.setDataObjectMap[view.$id][keyPathString] = newV;
         }
-      } catch (e) {
-        this.view.setData({
-          [keyPathList[0]]: this.view.data[keyPathList[0]],
-        });
-        console.warn(e);
+      } else {
+        this.setDataObjectMap[view.$id][keyPathString] = newV;
       }
-    });
+    } catch (e) {
+      this.setDataObjectMap[view.$id][keyPathList[0]] = view.data[keyPathList[0]];
+      console.warn(e);
+    }
 
-    setTimeout(
-      () => {
-        const store = (this.view as any).store;
-        const isSyncDataSafe = store && store.isSyncDataSafe === false ? false : true;
-        if (!isSyncDataSafe || !this.updateList.length) {
-          return;
-        }
-
-        // Component Store needs $page.$batchedUpdates
-        (
-          this.view.$batchedUpdates ?
-          this.view.$batchedUpdates.bind(this.view) :
-          this.view.$page.$batchedUpdates.bind(this.view.$page)
-        )(() => {
-          this.updateList.forEach(update => update());
-          this.updateList = [];
-        });
-      },
-    );
+    this.count.set();
   }
 }

types/index.d.ts

@@ -14,3 +14,2 @@ export * from './decorators/index';
 export { default as attachLogic } from './attachLogic';
-export { default as MiniDataSetter } from './MiniDataSetter';
-export * from './MiniDataSetter';
+export { default as getMiniDataSetter } from './getMiniDataSetter';

types/MiniDataSetter.d.ts

 /// <reference types="mini-types" />
 import { ChangeOptions } from '@goldfishjs/reactive';
-export default class MiniDataSetter<V extends tinyapp.IPageInstance<any> | tinyapp.IComponentInstance<any, any>> {
-    private view;
-    private updateList;
-    constructor(view: V);
+export declare class Count {
+    private segTotalList;
+    private counter;
+    private cb;
+    constructor(cb: () => void);
+    set(): Promise<void>;
+}
+declare type View = tinyapp.IPageInstance<any> | tinyapp.IComponentInstance<any, any>;
+export default class MiniDataSetter {
+    private count;
+    private setDataObjectMap;
+    private spliceDataObjectMap;
+    private viewMap;
+    private getBatchUpdates;
+    private flush;
     private setByKeyPathList;
-    set(keyPathList: (string | number)[], newV: any, oldV: any, options?: ChangeOptions): Promise<void>;
+    set(view: View, keyPathList: (string | number)[], newV: any, oldV: any, options?: ChangeOptions): void;
 }
+export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54305

increased by5.46%

Number of package files

59

increased by5.36%

Lines of code

1534

increased by7.42%

Dependency changes

• + Added@goldfishjs/reactive@0.0.13(transitive)

• - Removed@goldfishjs/reactive@0.0.12(transitive)

• Updated@goldfishjs/reactive@^0.0.13