dob - npm Package Compare versions

Comparing version 2.3.2 to 2.3.3

built/demos/atom/index.js

@@ -66,3 +66,3 @@ "use strict";
 function fetchName(name) {
-    return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee() {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
         return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -87,3 +87,3 @@ while (1) {
 function fetchAge(age) {
-    return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee2() {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -118,3 +118,3 @@ while (1) {
     this.name = computed_async_1.computedAsync("", function () {
-        return __awaiter(_this, void 0, void 0, regeneratorRuntime.mark(function _callee3() {
+        return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
             return regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -139,3 +139,3 @@ while (1) {
     this.age = computed_async_1.computedAsync("", function () {
-        return __awaiter(_this, void 0, void 0, regeneratorRuntime.mark(function _callee4() {
+        return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
             return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -142,0 +142,0 @@ while (1) {

built/demos/todo-mvc/index.js

@@ -10,4 +10,5 @@ "use strict";
 // tslint:disable-next-line:no-var-requires
+// tslint:disable-next-line:no-submodule-imports
 require("todomvc-app-css/index.css");
 react_dom_1.render(React.createElement(react_redux_1.Provider, { store: stores_1.store }, React.createElement(app_1.default, null)), document.getElementById("react-dom"));
 //# sourceMappingURL=index.js.map

built/demos/todo-mvc/stores/todo.js

@@ -66,3 +66,3 @@ "use strict";
             return function (dispatch, getState) {
-                return __awaiter(_this, void 0, void 0, regeneratorRuntime.mark(function _callee() {
+                return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
                     return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -69,0 +69,0 @@ while (1) {

built/index.js

@@ -19,2 +19,4 @@ "use strict";
 exports.Reaction = reaction_1.Reaction;
+var utils_1 = require("./utils");
+exports.useDebug = utils_1.useDebug;
 //# sourceMappingURL=index.js.map

built/observer.js

@@ -79,2 +79,6 @@ "use strict";
                 if (key === "length" || value !== oldValue) {
+                    if (utils_1.globalState.useDebug) {
+                        // tslint:disable-next-line:no-console
+                        console.log(key + ": %c" + oldValue + "%c " + value, "\n            text-decoration: line-through;\n            color: #999;\n          ", "\n            color: green;\n          ");
+                    }
                     queueRunReactions(target, key);
@@ -223,2 +227,6 @@ }
 function startBatch() {
+    if (utils_1.globalState.useDebug) {
+        // tslint:disable-next-line:no-console
+        console.groupCollapsed("Action " + utils_1.globalState.currentDebugName);
+    }
     if (utils_1.globalState.inBatch === 0) {
@@ -235,2 +243,6 @@ // 如果正在从 0 开始新的队列，清空原有队列
 function endBatch() {
+    if (utils_1.globalState.useDebug) {
+        // tslint:disable-next-line:no-console
+        console.groupEnd();
+    }
     if (--utils_1.globalState.inBatch === 0) {
@@ -262,3 +274,3 @@ runPendingReactions();
 
-                return runInAction(func.bind.apply(func, [_this].concat(args)));
+                return runInAction(func.bind.apply(func, [_this].concat(args)), propertyKey);
             };
@@ -276,3 +288,6 @@ },
  */
-function runInAction(fn) {
+function runInAction(fn, debugName) {
+    if (utils_1.globalState.useDebug) {
+        utils_1.globalState.currentDebugName = debugName || null;
+    }
     startBatch();
@@ -279,0 +294,0 @@ try {

built/tests/observer.test.js

@@ -270,3 +270,3 @@ "use strict";
             value: function run(num) {
-                return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee() {
+                return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
                     return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -997,3 +997,3 @@ while (1) {
     index_1.Action(function () {
-        return __awaiter(undefined, void 0, void 0, regeneratorRuntime.mark(function _callee2() {
+        return __awaiter(undefined, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
             return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -1041,3 +1041,3 @@ while (1) {
     index_1.Action(function () {
-        return __awaiter(undefined, void 0, void 0, regeneratorRuntime.mark(function _callee3() {
+        return __awaiter(undefined, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
             return regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -1044,0 +1044,0 @@ while (1) {

built/utils.js

@@ -13,9 +13,9 @@ "use strict";
 function isPrimitive(value) {
-    if (value === null || value === undefined) {
-        return true;
-    }
-    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date) {
-        return true;
-    }
-    return false;
+  if (value === null || value === undefined) {
+    return true;
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date) {
+    return true;
+  }
+  return false;
 }
@@ -27,12 +27,12 @@ exports.isPrimitive = isPrimitive;
 exports.createThunkMiddleware = function (_ref) {
-    var dispatch = _ref.dispatch,
-        getState = _ref.getState;
-    return function (next) {
-        return function (action) {
-            if (typeof action === "function") {
-                return action(dispatch, getState);
-            }
-            return next(action);
-        };
+  var dispatch = _ref.dispatch,
+      getState = _ref.getState;
+  return function (next) {
+    return function (action) {
+      if (typeof action === "function") {
+        return action(dispatch, getState);
+      }
+      return next(action);
     };
+  };
 };
@@ -42,39 +42,47 @@ var globalOrWindow = (typeof self === "undefined" ? "undefined" : _typeof(self)) === "object" && self.self === self && self || (typeof global === "undefined" ? "undefined" : _typeof(global)) === "object" && global.global === global && global || undefined;
 var GlobalState = function GlobalState() {
-    _classCallCheck(this, GlobalState);
+  _classCallCheck(this, GlobalState);
 
-    /**
-     * 存储所有代理
-     * key：代理 + 原始对象
-     */
-    this.proxies = new WeakMap();
-    /**
-     * 所有代理 -> 原是对象的映射
-     */
-    this.originObjects = new WeakMap();
-    /**
-     * 存储所有要代理原始的对象
-     * 以对象每个 key 存储监听事件
-     */
-    this.objectReactionBindings = new WeakMap();
-    /**
-     * 当前 reaction
-     */
-    this.currentReaction = null;
-    /**
-     * 批量执行深入，比如每次调用 runInAction 深入 +1，调用完 -1，深入为 0 时表示执行完了
-     * 当 inBatch === 0 时，表示操作队列完毕
-     */
-    this.inBatch = 0;
-    /**
-     * 所有 action 中等执行队列的集合
-     */
-    this.pendingReactions = new Set();
-    /**
-     * 忽略动态对象的 symbol
-     */
-    this.ignoreDynamicSymbol = Symbol();
-    /**
-     * track 嵌套 track 时，临时缓存下来的 track 队列，等待上一层 track 执行完后再执行
-     */
-    this.pendingTacks = new Set();
+  /**
+   * 存储所有代理
+   * key：代理 + 原始对象
+   */
+  this.proxies = new WeakMap();
+  /**
+   * 所有代理 -> 原是对象的映射
+   */
+  this.originObjects = new WeakMap();
+  /**
+   * 存储所有要代理原始的对象
+   * 以对象每个 key 存储监听事件
+   */
+  this.objectReactionBindings = new WeakMap();
+  /**
+   * 当前 reaction
+   */
+  this.currentReaction = null;
+  /**
+   * 批量执行深入，比如每次调用 runInAction 深入 +1，调用完 -1，深入为 0 时表示执行完了
+   * 当 inBatch === 0 时，表示操作队列完毕
+   */
+  this.inBatch = 0;
+  /**
+   * 所有 action 中等执行队列的集合
+   */
+  this.pendingReactions = new Set();
+  /**
+   * 忽略动态对象的 symbol
+   */
+  this.ignoreDynamicSymbol = Symbol();
+  /**
+   * track 嵌套 track 时，临时缓存下来的 track 队列，等待上一层 track 执行完后再执行
+   */
+  this.pendingTacks = new Set();
+  /**
+   * 是否开启 debug
+   */
+  this.useDebug = true;
+  /**
+   * 当前所在 debugName（由 decorator Action 触发）
+   */
+  this.currentDebugName = null;
 };
@@ -85,5 +93,5 @@
 if (globalOrWindow[tag]) {
-    exports.globalState = globalState = globalOrWindow[tag];
+  exports.globalState = globalState = globalOrWindow[tag];
 } else {
-    globalOrWindow[tag] = globalState;
+  globalOrWindow[tag] = globalState;
 }
@@ -99,3 +107,3 @@ /**
 function inAction() {
-    return globalState.inBatch !== 0;
+  return globalState.inBatch !== 0;
 }
@@ -107,3 +115,3 @@ exports.inAction = inAction;
 function inTrack() {
-    return !!globalState.currentReaction;
+  return !!globalState.currentReaction;
 }
@@ -115,18 +123,25 @@ exports.inTrack = inTrack;
 function getBinder(object, key) {
-    var keysForObject = globalState.objectReactionBindings.get(object);
-    if (!keysForObject) {
-        keysForObject = new Map();
-        globalState.objectReactionBindings.set(object, keysForObject);
-    }
-    var reactionsForKey = keysForObject.get(key);
-    if (!reactionsForKey) {
-        reactionsForKey = new Set();
-        keysForObject.set(key, reactionsForKey);
-    }
-    return {
-        binder: keysForObject,
-        keyBinder: reactionsForKey
-    };
+  var keysForObject = globalState.objectReactionBindings.get(object);
+  if (!keysForObject) {
+    keysForObject = new Map();
+    globalState.objectReactionBindings.set(object, keysForObject);
+  }
+  var reactionsForKey = keysForObject.get(key);
+  if (!reactionsForKey) {
+    reactionsForKey = new Set();
+    keysForObject.set(key, reactionsForKey);
+  }
+  return {
+    binder: keysForObject,
+    keyBinder: reactionsForKey
+  };
 }
 exports.getBinder = getBinder;
+/**
+ * 开启调试模式
+ */
+function useDebug() {
+  globalState.useDebug = true;
+}
+exports.useDebug = useDebug;
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "dob",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "",
@@ -67,3 +67,3 @@ "main": "built/index.js",
     "entrys": [
-      "src/demos/reaction/index.ts"
+      "src/demos/todo-mvc/index.tsx"
     ],
@@ -70,0 +70,0 @@ "rules": [

readme.md

@@ -23,2 +23,43 @@ # Dob · [![CircleCI Status](https://img.shields.io/travis/ascoders/dob/master.svg?style=flat)](https://travis-ci.org/ascoders/dob) [![npm version](https://img.shields.io/npm/v/dob.svg?style=flat)](https://www.npmjs.com/package/dob) [![code coverage](https://img.shields.io/codecov/c/github/ascoders/dob/master.svg)](https://codecov.io/github/ascoders/dob)
 
+## Use in react
+
+```typescript
+import { Action, observable } from 'dob'
+import { Provider, Connect } from 'dob-react'
+import { injectFactory, inject } from 'dependency-inject';
+
+@observable
+export class UserStore {
+    name = 'bob'
+}
+
+export class UserAction {
+    @inject(UserStore) private UserStore: UserStore;
+
+    @Action setName () {
+        this.store.name = 'lucy'
+    }
+}
+
+@Connect
+class App extends React.Component {
+    render() {
+        return (
+            <span onClick={this.props.UserAction.setName}>
+                {this.props.store.name}
+            </span>
+        )
+    }
+}
+
+const store = injectFactory({
+    UserStore,
+    UserAction
+})
+
+ReactDOM.render(
+    <Provider {...store}> <App /> </Provider>
+, document.getElementById('react-dom'))
+```
+
 ## Installation
@@ -68,2 +109,2 @@
 - [mobx](https://github.com/mobxjs/mobx)
-- [nx-js](https://github.com/nx-js/observer-util)
+- [nx-js](https://github.com/nx-js/observer-util)

src/index.ts

@@ -5,2 +5,3 @@ import { Atom } from "./atom"
 import { Reaction } from "./reaction"
+import { useDebug } from "./utils"
 
@@ -23,3 +24,5 @@ export {
 
-    Reaction
+    Reaction,
+
+    useDebug
 }

src/observer.ts

@@ -90,2 +90,12 @@ import builtIns from "./built-ins"
         if (key === "length" || value !== oldValue) {
+          if (globalState.useDebug) {
+            // tslint:disable-next-line:no-console
+            console.log(`${key}: %c${oldValue}%c ${value}`, `
+            text-decoration: line-through;
+            color: #999;
+          `, `
+            color: green;
+          `)
+          }
+
           queueRunReactions<T>(target, key)
@@ -253,2 +263,7 @@ }
 function startBatch() {
+  if (globalState.useDebug) {
+    // tslint:disable-next-line:no-console
+    console.groupCollapsed(`Action ${globalState.currentDebugName}`)
+  }
+
   if (globalState.inBatch === 0) {
@@ -266,2 +281,7 @@ // 如果正在从 0 开始新的队列，清空原有队列
 function endBatch() {
+  if (globalState.useDebug) {
+    // tslint:disable-next-line:no-console
+    console.groupEnd()
+  }
+
   if (--globalState.inBatch === 0) {
@@ -296,3 +316,3 @@ runPendingReactions()
       return (...args: any[]) => {
-        return runInAction(func.bind(this, ...args))
+        return runInAction(func.bind(this, ...args), propertyKey)
       }
@@ -311,3 +331,7 @@ },
  */
-function runInAction(fn: () => any | Promise<any>) {
+function runInAction(fn: () => any | Promise<any>, debugName?: string) {
+  if (globalState.useDebug) {
+    globalState.currentDebugName = debugName || null
+  }
+
   startBatch()
@@ -314,0 +338,0 @@

src/utils.ts

@@ -86,2 +86,10 @@ import { Reaction } from "./reaction"
   public pendingTacks = new Set<Func>()
+  /**
+   * 是否开启 debug
+   */
+  public useDebug = true
+  /**
+   * 当前所在 debugName（由 decorator Action 触发）
+   */
+  public currentDebugName: string = null
 }
@@ -142,1 +150,8 @@
 }
+
+/**
+ * 开启调试模式
+ */
+export function useDebug() {
+  globalState.useDebug = true
+}

No alert changes

Improved metrics

Total package byte prevSize

474744

increased by0.92%

Lines of code

6239

increased by1.13%

Number of lines in readme file

108

increased by58.82%

Worsened metrics

Number of package files

106

decreased by-0.93%

No dependency changes