@cicada/render - npm Package Compare versions

Comparing version 1.1.8-alpha9 to 1.1.8

lib/__test__/convertFragment.test.js

@@ -310,4 +310,4 @@ 'use strict';
 
-            stateTree.merge('button', { clicked: parseInt(clicked, 10) });
-            stateTree.merge('spy', { rendered: parseInt(rendered, 10) });
+            stateTree.set('button', { clicked: parseInt(clicked, 10) });
+            stateTree.set('spy', { rendered: parseInt(rendered, 10) });
           },
@@ -314,0 +314,0 @@

lib/__test__/integration/basic.test.js

@@ -223,3 +223,3 @@ 'use strict';
 
-                  innerStateTree.merge('button', { text: 'new_text' });
+                  innerStateTree.set('button', { text: 'new_text' });
                 }
@@ -281,3 +281,3 @@ }]
                   var innerStateTree = _ref8.stateTree;
-                  innerStateTree.merge('button', { style: { color: 'black' } });
+                  innerStateTree.set('button', { style: { color: 'black' } });
                 }
@@ -342,3 +342,3 @@ }]
                   var innerStateTree = _ref11.stateTree;
-                  innerStateTree.merge('button', { styles: [{ color: 'black' }] });
+                  innerStateTree.setHard('button', { styles: [{ color: 'black' }] });
                 }
@@ -356,5 +356,5 @@ }]
 
-  // 2. set
-  describe('set', function () {
-    test('shallow set', function () {
+  // 2. mergeInitialState
+  describe('mergeInitialState', function () {
+    test('shallow mergeInitalState', function () {
       var Component = {
@@ -406,3 +406,3 @@ stateTypes: {
                   var innerStateTree = _ref14.stateTree;
-                  innerStateTree.set('button', { text: 'new_text' });
+                  innerStateTree.mergeInitialState('button', { text: 'new_text' });
                 }
@@ -420,3 +420,3 @@ }]
 
-    test('deep set', function () {
+    test('deep mergeInitialState', function () {
       var Component = {
@@ -465,3 +465,3 @@ stateTypes: {
                   var innerStateTree = _ref17.stateTree;
-                  innerStateTree.set('button', { style: { color: 'black' } });
+                  innerStateTree.mergeInitialState('button', { style: { color: 'black' } });
                 }
@@ -468,0 +468,0 @@ }]

lib/__test__/integration/fragment.test.js

@@ -134,4 +134,4 @@ 'use strict';
 
-          stateTree.merge('first', { value: firstValue });
-          stateTree.merge('second', { value: secondValue });
+          stateTree.set('first', { value: firstValue });
+          stateTree.set('second', { value: secondValue });
         },
@@ -301,4 +301,4 @@
 
-            stateTree.merge('first', { value: firstValue });
-            stateTree.merge('second', { value: secondValue });
+            stateTree.set('first', { value: firstValue });
+            stateTree.set('second', { value: secondValue });
           },
@@ -305,0 +305,0 @@

lib/__test__/integration/style.test.js

 'use strict';
 
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
 var _react = require('react');
@@ -7,2 +11,4 @@
 
+var _reactDom = require('react-dom');
+
 var _propTypes = require('prop-types');
@@ -50,10 +56,36 @@
 
-var stateTree = null; /* eslint-disable react/no-multi-comp */
+/* eslint-disable react/no-multi-comp */
 /* eslint-disable newline-per-chained-call */
+function childStyle(node, index) {
+  var p = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
 
+  return global.window.getComputedStyle(node.childNodes[index], p);
+}
+
+function getDataAttributes(node) {
+  var d = {},
+      re_dataAttr = /^data\-(.+)$/;
+  [].concat((0, _toConsumableArray3.default)(node.attributes)).forEach(function (attr) {
+    if (re_dataAttr.test(attr.nodeName)) {
+      var key = attr.nodeName.match(re_dataAttr)[1];
+      d[key] = attr.nodeValue;
+    }
+  });
+  return d;
+}
+
+var stateTree = null;
 var appearance = null;
+var node = void 0;
 beforeEach(function () {
   stateTree = (0, _applyStateTreeSubscriber2.default)(_createStateTree2.default)();
   appearance = (0, _createAppearance2.default)();
+  node = document.createElement('div');
+  document.body.appendChild(node);
 });
+afterEach(function () {
+  (0, _reactDom.unmountComponentAtNode)(node);
+  document.body.removeChild(node);
+  appearance.getStyleSheet().flush();
+});
 
@@ -80,4 +112,30 @@ var DemoComponent = {
 
+test('style as string', function () {
+  var container = _react2.default.createElement(_Render2.default, {
+    stateTree: stateTree,
+    appearance: appearance,
+    components: { Demo: (0, _connect2.default)(DemoComponent, 'Demo') },
+    background: (0, _createBackground2.default)({
+      jobs: {
+        style: styleJob
+      },
+      utilities: {
+        stateTree: stateTreeUtility
+      }
+    }, stateTree, appearance),
+    config: {
+      bind: 'demo',
+      type: 'Demo',
+      style: 'color: #108ee9;background-color: #108ee9;'
+    }
+  });
+  (0, _reactDom.render)(container, node, function () {
+    expect(childStyle(node, 0).color).toEqual('rgb(16, 142, 233)');
+    expect(childStyle(node, 0).backgroundColor).toEqual('rgb(16, 142, 233)');
+    expect(node.innerHTML).toEqual('<div data-cicada-css-1h0o6px=""></div>');
+  });
+});
+
 test('style as object', function () {
-  var container = (0, _enzyme.mount)(_react2.default.createElement(_Render2.default, {
+  var container = _react2.default.createElement(_Render2.default, {
     stateTree: stateTree,
@@ -97,11 +155,16 @@ appearance: appearance,
       type: 'Demo',
-      style: '\n        backgroundColor: \'#ccc\',\n        fontSize: \'14px\',\n      '
+      style: {
+        backgroundColor: '#ccc',
+        fontSize: '14px'
+      }
     }
-  }));
-  // const styleId = container.html().match(/class="(.+)"/)[1]
-  expect(container.html()).toEqual('<div data-cicada-css-0=""></div>');
+  });
+  (0, _reactDom.render)(container, node, function () {
+    expect(childStyle(node, 0).backgroundColor).toEqual('rgb(204, 204, 204)');
+    expect(node.innerHTML).toEqual('<div data-cicada-css-1467p3q=""></div>');
+  });
 });
 
 test('style as function and replace', function () {
-  var container = (0, _enzyme.mount)(_react2.default.createElement(_Render2.default, {
+  var container = _react2.default.createElement(_Render2.default, {
     stateTree: stateTree,
@@ -132,8 +195,10 @@ appearance: appearance,
     }
-  }));
-  // const styleId = container.html().match(/class="(.+)"/)[1]
-  expect(container.html()).toEqual('<div><div></div><div></div></div>');
-  stateTree.set('demo.value', 'background-color: red');
-  expect(container.html()).toEqual('<div><div>background-color: red</div><div data-cicada-css-0=""></div></div>');
-  // expect(document.getElementById(styleId).innerText).toEqual(`.${styleId} { background-color: red }`)
+  });
+
+  (0, _reactDom.render)(container, node, function () {
+    expect(node.innerHTML).toEqual('<div><div></div><div></div></div>');
+  });
+  stateTree.set('demo.value', 'background-color: #eee');
+  expect(childStyle(node.childNodes[0], 1).backgroundColor).toEqual('rgb(238, 238, 238)');
+  expect(node.innerHTML).toEqual('<div><div>background-color: #eee</div><div data-cicada-css-607pib=""></div></div>');
 });

lib/__test__/scope.test.js

@@ -24,16 +24,2 @@ 'use strict';
 /* eslint-disable no-shadow */
-function updateRepeatItems(stateTree, scopePath, newItems) {
-  var mergeFn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {};
-
-  var oldArr = stateTree.get(scopePath);
-  var result = newItems.map(function (item, i) {
-    if (oldArr[i] !== undefined) {
-      mergeFn(scopePath + '.' + i, item);
-      return stateTree.get(scopePath + '.' + i);
-    }
-    return item;
-  });
-  stateTree.set(scopePath, result);
-}
-
 var render = void 0;
@@ -88,31 +74,2 @@ var stateTree = void 0;
 };
-var ButtonComponent = {
-  stateTypes: {
-    clicked: _propTypes2.default.number
-  },
-  getDefaultState: function getDefaultState() {
-    return {
-      clicked: 0
-    };
-  },
-  defaultListeners: {
-    onClick: function onClick(_ref3) {
-      var state = _ref3.state;
-
-      return {
-        clicked: ++state.clicked
-      };
-    }
-  },
-  render: function render(_ref4) {
-    var listeners = _ref4.listeners,
-        state = _ref4.state;
-
-    return _react2.default.createElement(
-      'button',
-      { onClick: listeners.onClick },
-      state.clicked
-    );
-  }
-};
 var fragments = {
@@ -122,10 +79,10 @@ FullName: {
       name: {
-        from: function from(_ref5) {
-          var stateTree = _ref5.stateTree;
+        from: function from(_ref3) {
+          var stateTree = _ref3.stateTree;
 
           return stateTree.get('first.value', '') + '-' + stateTree.get('second.value', '');
         },
-        to: function to(_ref6) {
-          var value = _ref6.value,
-              stateTree = _ref6.stateTree;
+        to: function to(_ref4) {
+          var value = _ref4.value,
+              stateTree = _ref4.stateTree;
 
@@ -199,8 +156,6 @@ var _value$split = value.split('-'),
   expect(container.html()).toEqual('<div class="repeat-wrapper"><div>0</div><div>1</div></div>');
-  updateRepeatItems(stateTree, 'repeat.items', [{ input: { value: '0_0' } }, { input: { value: '1_1' } }, { input: { value: '2_2' } }], function (path, newData) {
-    stateTree.set(path + '.input', newData.input);
-  });
+  stateTree.mergeStupid('repeat.items', [{ input: { value: '0_0' } }, { input: { value: '1_1' } }, { input: { value: '2_2' } }]);
   expect(container.html()).toEqual('<div class="repeat-wrapper"><div>0_0</div><div>1_1</div><div>2_2</div></div>');
 });
-test.skip('scope with fragment', function () {
+test('scope with fragment', function () {
   var config = {
@@ -221,8 +176,6 @@ type: 'Repeat',
   var items = [{ fullname: { name: 'f1-l1' } }, { fullname: { name: 'f2-l2' } }];
-  var items2 = [{ fullname: { name: 'f11-l11' } }, { fullname: { name: 'f22-l22' } }, { fullname: { name: 'f22-l22' } }];
-  updateRepeatItems(stateTree, 'repeat.items', items);
-  updateRepeatItems(stateTree, 'repeat.items', items2, function (path, newData) {
-    stateTree.set(path + '.fullname.name', newData.fullname.name);
-  });
-  console.log(container.html());
+  var items2 = [{ fullname: { name: 'f11-l11' } }, { fullname: { name: 'f22-l22' } }, { fullname: { name: 'f33-l33' } }];
+  stateTree.mergeStupid('repeat.items', items);
+  stateTree.mergeStupid('repeat.items', items2);
+  expect(container.html()).toEqual('<div class="repeat-wrapper"><div><div>f11</div><div>l11</div></div><div><div>f22</div><div>l22</div></div><div><div>f33</div><div>l33</div></div></div>');
 });

lib/applyStateTreeSubscriber.js

@@ -134,2 +134,4 @@ 'use strict';
       set: cacheInSession(saveChangesGroupById(stateTree.set, 2)),
+      mergeStupid: cacheInSession(saveChangesGroupById(stateTree.mergeStupid, 2)),
+      setStupid: cacheInSession(saveChangesGroupById(stateTree.setStupid, 2)),
       merge: cacheInSession(saveChangesGroupById(stateTree.merge, 2)),
@@ -136,0 +138,0 @@ reset: cacheInSession(saveChangesGroupById(stateTree.reset, 1)),

lib/background/job/className.js

@@ -37,2 +37,5 @@ 'use strict';
     };
+    return function () {
+      delete stateIdToClassNameFns[stateId];
+    };
   }
@@ -57,3 +60,3 @@
       (0, _util.each)(oldClassNames, function (cls) {
-        if (!classNames.includes(cls)) {
+        if (!classNames.includes(cls) && !/^css-/.test(cls)) {
           discard.push(cls);
@@ -60,0 +63,0 @@ }

lib/background/job/interpolation.js

@@ -21,7 +21,10 @@ 'use strict';
 
-  function register(id, _ref) {
+  function register(stateId, _ref) {
     var interpolate = _ref.interpolate,
         getStatePath = _ref.getStatePath;
 
-    idToInterpolate[id] = { fn: interpolate, getStatePath: getStatePath };
+    idToInterpolate[stateId] = { fn: interpolate, getStatePath: getStatePath };
+    return function () {
+      delete idToInterpolate[stateId];
+    };
   }
@@ -28,0 +31,0 @@

lib/background/job/mapBackgroundToState.js

@@ -30,2 +30,5 @@ 'use strict';
     stateIdToMapFns[stateId] = mapBackgroundToState;
+    return function () {
+      delete stateIdToMapFns[stateId];
+    };
   }
@@ -32,0 +35,0 @@

lib/background/job/style.js

@@ -20,4 +20,19 @@ 'use strict';
 
+var _util = require('../../util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function toLowerCaseKey(key) {
+  return key.replace(/[A-Z]/g, function (k, i) {
+    return i === 0 ? k.toLowerCase() : '-' + k.toLowerCase();
+  });
+}
+
+function styleToString(style) {
+  var content = (0, _util.reduce)(style, function (arr, o, key) {
+    return arr.concat(toLowerCaseKey(key) + ': ' + (typeof o === 'number' ? o + 'px' : o));
+  }, []).join('; ');
+  return '' + content;
+}
+
 function initialize(utilInstances, stateTree, appearance) {
@@ -34,4 +49,8 @@ var stateIdToStyleFns = {};
         return style;
-      }
+      },
+      content: ''
     };
+    return function () {
+      delete stateIdToStyleFns[stateId];
+    };
   }
@@ -47,3 +66,8 @@
   function handle(stateId, result) {
-    if (result && result.length) {
+    if (result) {
+      if ((typeof result === 'undefined' ? 'undefined' : (0, _typeof3.default)(result)) === 'object') {
+        result = styleToString(result);
+      }
+      if (stateIdToStyleFns[stateId].content === result) return;
+      stateIdToStyleFns[stateId].content = result;
       var rule = appearance.insertCSSRuleById(result);
@@ -50,0 +74,0 @@ appearance.addStyleById(stateId, rule);

lib/background/job/visibility.js

@@ -27,2 +27,5 @@ 'use strict';
     stateIdToVisibleFns[stateId] = { visibleArr: visible, getStatePath: getStatePath };
+    return function () {
+      delete stateIdToVisibleFns[stateId];
+    };
   }
@@ -29,0 +32,0 @@

lib/background/utility/stateTree.js

@@ -73,3 +73,3 @@ 'use strict';
     },
-    merge: function merge() {
+    mergeInitialState: function mergeInitialState() {
       for (var _len = arguments.length, arg = Array(_len), _key = 0; _key < _len; _key++) {
@@ -79,4 +79,5 @@ arg[_key] = arguments[_key];
 
-      return stateTree.merge.apply(stateTree, arg.concat([{ type: _constant.REASON_CUSTOM_LISTENER }]));
+      return stateTree.setStupid.apply(stateTree, arg.concat([{ type: _constant.REASON_CUSTOM_LISTENER }]));
     },
+    // CAUTION 业务中大部分用的是merge的场景, 所以set这个方法默认采用merge, 同时额外提供一个mergeInitState
     set: function set() {
@@ -87,4 +88,11 @@ for (var _len2 = arguments.length, arg = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
 
-      return stateTree.set.apply(stateTree, arg.concat([{ type: _constant.REASON_CUSTOM_LISTENER }]));
+      return stateTree.mergeStupid.apply(stateTree, arg.concat([{ type: _constant.REASON_CUSTOM_LISTENER }]));
     },
+    setHard: function setHard() {
+      for (var _len3 = arguments.length, arg = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        arg[_key3] = arguments[_key3];
+      }
+
+      return stateTree.merge.apply(stateTree, arg.concat([{ type: _constant.REASON_CUSTOM_LISTENER }]));
+    },
     test: test
@@ -91,0 +99,0 @@ };

lib/common.js

@@ -110,2 +110,10 @@ 'use strict';
   }, {
+    key: 'back',
+    value: function back() {
+      var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      // back方法目前只按点去分割回滚
+      return new StatePath(this.toString().split('.').slice(0, -len).join('.'));
+    }
+  }, {
     key: 'explode',
@@ -112,0 +120,0 @@ value: function explode() {

lib/connect.js

@@ -118,3 +118,3 @@ 'use strict';
 
-      var _this = (0, _possibleConstructorReturn3.default)(this, (Wrapper.__proto__ || (0, _getPrototypeOf2.default)(Wrapper)).call(this));
+      var _this = (0, _possibleConstructorReturn3.default)(this, (Wrapper.__proto__ || (0, _getPrototypeOf2.default)(Wrapper)).call(this, props, context));
 
@@ -130,3 +130,4 @@ _initialiseProps.call(_this);
         return {};
-      } : _props$getInitialStat;
+      } : _props$getInitialStat,
+          configProps = props.props;
       var _context$getScopes = context.getScopes,
@@ -153,3 +154,3 @@ getScopes = _context$getScopes === undefined ? function () {
       _this.setupDefaultListeners(defaultListeners);
-      _this.registerToContext(props, context, getInitialState);
+      _this.registerToContext(props, context, getInitialState, configProps);
       return _this;
@@ -160,3 +161,3 @@ }
       key: 'registerToContext',
-      value: function registerToContext(props, context, getInitialState) {
+      value: function registerToContext(props, context, getInitialState, configProps) {
         var statePath = this.getResolvedStatePath(context, props);
@@ -168,3 +169,3 @@ var stateTree = context.stateTree,
         var finalGetInitialState = function finalGetInitialState() {
-          return (0, _extends3.default)({}, getDefaultState(), getInitialState());
+          return (0, _extends3.default)({}, getDefaultState(), getInitialState(), configProps);
         };
@@ -171,0 +172,0 @@ // TODO pathGetter 中的 statePath 相关的应该由 stateTree 自己实现，另一部分算作外界附加上去的信息，两者要区分。

lib/constant.js

@@ -36,3 +36,5 @@ 'use strict';
 
-var primitiveFnNames = exports.primitiveFnNames = ['componentDidMount', 'componentWillReceiveProps', 'componentWillUnmount', 'getChildContext', 'shouldComponentUpdate', 'componentWillUpdate'];
+var primitiveFnNames = exports.primitiveFnNames = ['componentDidMount', 'componentWillReceiveProps', 'componentWillUnmount', 'getChildContext',
+// 'shouldComponentUpdate', react 16后这个原生方法要特殊处理
+'componentWillUpdate'];
 
@@ -39,0 +41,0 @@ var VALIDATION_TYPE_ERROR = exports.VALIDATION_TYPE_ERROR = 'error';

lib/convertFragment.js

@@ -308,3 +308,3 @@ 'use strict';
       var mockBackground = createBackground(backgroundDef, mockStateTree, createAppearance());
-      mockRender(fragment.config, context.components, mockStateTree, mockBackground);
+      mockRender(fragment.config, components || context.components, mockStateTree, mockBackground);
 
@@ -311,0 +311,0 @@ // 2. 这个时候已经得到了完整的的 stateTree，接下来尝试通过 computeTo 来把 state 上的值合并进去，

lib/createAppearance.js

@@ -62,2 +62,6 @@ 'use strict';
 
+var _hash = require('./hash');
+
+var _hash2 = _interopRequireDefault(_hash);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -105,3 +109,3 @@
 function createStylesheet(clsName, content) {
-  clsName = '' + STYLE_SHEET_PREFIX + clsName;
+  // clsName = `${STYLE_SHEET_PREFIX}${clsName}`
   if (typeof document === 'undefined' || document.getElementById(clsName)) return clsName;
@@ -111,3 +115,3 @@ var styleDom = document.createElement('style');
   var attrName = 'data-cicada-' + clsName;
-  styleDom.innerText = '.' + clsName + ', [' + attrName + '] ' + content;
+  styleDom.innerText = '.' + clsName + ', [' + attrName + '] { ' + content + ' }';
   document.head.appendChild(styleDom);
@@ -130,2 +134,3 @@ return clsName;
   var refCache = {};
+  var hashCache = {};
   var globalSubscribers = (0, _createSubscribers2.default)();
@@ -150,4 +155,3 @@ var stateIdByComponentPath = (0, _common.createOneToManyContainer)();
 
-  // const displayNoneStyle = createStylesheet(DISPLAY_NONE, 'display: none !important;')
-
+  var displayNoneStyle = createStylesheet(DISPLAY_NONE, 'display: none !important;');
   function updateAppearanceRef(id) {
@@ -200,16 +204,5 @@ var _ref = refCache[id] || {},
   function clearAppearanceRef(id) {
-    /*    const { ref, children } = refCache[id] || {}
-        if (!ref) return
-        const className = ref.className.split(/\s+/).filter(cls => cls && !prefixReg.test(cls)).join(' ')
-        if (ref.className !== className) ref.className = className
-        if (children) ref.innerHTML = children */
     delete refCache[id];
   }
 
-  function flush() {
-    if (_util.isBrowser) {
-      appearance.sheet.flush();
-    }
-  }
-
   function injectExternalListenerArg(id, listener, props) {
@@ -286,3 +279,3 @@ return function () {
     // 简单的 css-in-js ，不能处理 nested、mediaquery
-    // 与 antdesign 冲突，使用 data-attr 来加载样式
+    // 由于 className 与 antdesign 冲突，使用 data-attr 来加载样式
     function css(strings) {
@@ -294,11 +287,12 @@ for (var _len2 = arguments.length, interpolations = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       var styleString = interleave(strings, interpolations);
-      var index = sheet.ctr;
-      var id = index.toString(36);
-      var className = 'css-' + id;
+      // hashify
+      var uniqueId = (0, _hash2.default)(styleString).toString(36);
+      var className = 'css-' + uniqueId;
       var attrName = '[data-cicada-' + className + ']';
       var rule = '.' + className + ', ' + attrName + ' { ' + styleString + ' }';
+      if (hashCache[uniqueId]) return className;
+      hashCache[uniqueId] = styleString;
       sheet.insert(rule);
       return className;
     }
-
     return css(_templateObject, style);
@@ -325,3 +319,2 @@ }
           unsubscribe();
-          flush();
           delete appearance[id];
@@ -386,2 +379,6 @@ clearAppearanceRef(id);
     replaceStylesheet: replaceStylesheet,
+    getStyleSheet: function getStyleSheet() {
+      return appearance.sheet;
+    },
+
     getIdsByComponentPath: function getIdsByComponentPath(pathArr) {
@@ -388,0 +385,0 @@ return stateIdByComponentPath.get(pathArr.join('.'));

lib/createBackgroundJobContainer.js

@@ -64,6 +64,6 @@ 'use strict';
   });
-  var jobNameByStateId = {};
   var dependenciesByUtility = (0, _util.mapValues)(utilityDefs, function () {
     return {};
   });
+  var stateIdDepended = {};
   var startFns = [];
@@ -80,3 +80,4 @@
       if (deps !== undefined) {
-        dependenciesByUtility[name][stateId] = deps;
+        if (!dependenciesByUtility[name][stateId]) dependenciesByUtility[name][stateId] = {};
+        dependenciesByUtility[name][stateId][jobName] = deps;
       }
@@ -91,10 +92,9 @@ });
     // 对当前变化的 utility 有依赖的每一个组件都进行重新运算
-    (0, _util.each)(dependenciesByUtility[utilityName], function (dep, stateId) {
-      // 如果当前变化确实匹配
-      if (utilityDefs[utilityName].test(dep, change, stateTree, appearance)) {
-        // 对这个组件注册的每个 job 都重新运算
-        jobNameByStateId[stateId].forEach(function (jobName) {
+    (0, _util.each)(dependenciesByUtility[utilityName], function (jobDep, stateId) {
+      (0, _util.each)(jobDep, function (dep, jobName) {
+        // 如果当前变化确实匹配
+        if (utilityDefs[utilityName].test(dep, change, stateTree, appearance)) {
           run(stateId, jobName);
-        });
-      }
+        }
+      });
     });
@@ -114,7 +114,5 @@ }
 
-    jobNameByStateId[stateId] = [];
-
     var cancelRegister = (0, _util.map)(jobsToStart, function (job, name) {
-      jobNameByStateId[stateId].push(name);
-
+      // 标记依赖
+      stateIdDepended[stateId] = true;
       // TODO 这样还是有问题的。
@@ -126,3 +124,5 @@ // 本来设计启动函数是为了在数据稳定之后再执行依赖。这样可以避免前面的组件要去读后面组件的值读不到。
         setTimeout(function () {
-          return run(stateId, name);
+          // 在快速触发的浏览器事件流里(如键盘输入)删除某个组件可能会在1ms内注销stateId的依赖, 所以这里要加一个锁
+          if (!stateIdDepended[stateId]) return;
+          run(stateId, name);
         }, 1);
@@ -139,5 +139,7 @@ } else {
     });
-
     var cancelStateId = function cancelStateId() {
-      delete jobNameByStateId[stateId];
+      delete stateIdDepended[stateId];
+      (0, _util.mapValues)(dependenciesByUtility, function (utilityDepMap) {
+        delete utilityDepMap[stateId];
+      });
     };
@@ -144,0 +146,0 @@ return (0, _util.concat)([].concat((0, _toConsumableArray3.default)(cancelRegister), [cancelStateId]));

lib/createStateTree.js

@@ -106,14 +106,2 @@ 'use strict';
     });
-
-    // Object.defineProperty(state, '_getStatePath', {
-    //   value: pathGetters.getStatePath,
-    // })
-    //
-    // Object.defineProperty(state, '_getRootStatePath', {
-    //   value: pathGetters.getRootStatePath,
-    // })
-    //
-    // Object.defineProperty(state, '_getScopes', {
-    //   value: pathGetters.getScopes,
-    // })
   }
@@ -185,4 +173,10 @@
     var inputStatePath = arguments[6];
+    var stupid = arguments[7];
 
+    var targetStateId = get((0, _common.joinPath)([stateNodePath, relativePath]), {})._id;
     var stateId = inputStateId || get(stateNodePath)._id;
+    // 需要更新子组件
+    if (targetStateId && stateId !== targetStateId) {
+      return setObject((0, _common.joinPath)([stateNodePath, relativePath]), '', inputValue, targetStateId, mergeLastState, initialValue, inputStatePath);
+    }
     var changes = [{ stateId: stateId, statePath: stateNodePath, valuePath: relativePath }];
@@ -199,3 +193,3 @@ var nextValue = mergeLastState ? inputValue : (0, _extends3.default)({}, initialValue, inputValue);
         changes = changes.concat(setNaive(stateNodePath, childPath, value, stateId, inputStatePath));
-      } else if ((0, _util.isObject)(value) && !value._id) {
+      } else if ((0, _util.isObject)(value) && (stupid || !value._id)) {
         // CAUTION 只对普通的对象继续深度递归，如果是 stateNode 说明可能是上级数组中的占位符，不再处理。
@@ -211,7 +205,13 @@ changes = changes.concat(setObject(stateNodePath, childPath, value, stateId, mergeLastState, initialValue[key], inputStatePath));
 
-  function setArray(stateNodePath, relativePath, inputValue, inputStateId, mergeLastState, inputStatePath) {
+  function setArray(stateNodePath, relativePath, inputValue, inputStateId, mergeLastState, inputStatePath, stupid) {
     var stateId = inputStateId || get(stateNodePath)._id;
     var changes = [{ stateId: stateId, statePath: stateNodePath, valuePath: relativePath }];
-    // CAUTION 只要是数组操作，一定都是带了原来的引用的，所以直接设置进去肯定没问题
-    _exist2.default.set(stateTree, (0, _common.joinPath)([stateNodePath, relativePath]), inputValue);
+    var valuePath = (0, _common.joinPath)([stateNodePath, relativePath]);
+    if (!stupid) {
+      // CAUTION 非stupid模式的数组操作，一定都是带了原来的引用的，所以直接设置进去肯定没问题
+      _exist2.default.set(stateTree, valuePath, inputValue);
+    } else {
+      var oldValue = get(valuePath);
+      _exist2.default.set(stateTree, valuePath, oldValue.slice(0, inputValue.length));
+    }
 
@@ -223,5 +223,5 @@ inputValue.forEach(function (value, key) {
       } else if ((0, _util.isObject)(value)) {
-        changes = changes.concat(setObject(stateNodePath, childPath, value, stateId, mergeLastState, {}, inputStatePath));
+        changes = changes.concat(setObject(stateNodePath, childPath, value, stateId, mergeLastState, {}, inputStatePath, stupid));
       } else {
-        changes = changes.concat(setArray(stateNodePath, childPath, value, stateId, mergeLastState, inputStatePath));
+        changes = changes.concat(setArray(stateNodePath, childPath, value, stateId, mergeLastState, inputStatePath, stupid));
       }
@@ -232,3 +232,3 @@ });
 
-  function setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState) {
+  function setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState, stupid) {
     var changes = [];
@@ -239,5 +239,5 @@ if ((typeof value === 'undefined' ? 'undefined' : (0, _typeof3.default)(value)) !== 'object') {
       var initialValue = initialState === undefined ? undefined : initialState[key];
-      changes = changes.concat(setObject(statePath, key, value, stateId, mergeLastState, initialValue, inputStatePath));
+      changes = changes.concat(setObject(statePath, key, value, stateId, mergeLastState, initialValue, inputStatePath, stupid));
     } else {
-      changes = changes.concat(setArray(statePath, key, value, stateId, mergeLastState, inputStatePath));
+      changes = changes.concat(setArray(statePath, key, value, stateId, mergeLastState, inputStatePath, stupid));
     }
@@ -247,3 +247,3 @@ return changes;
 
-  function setStateNode(statePath, inputState, mergeLastState, inputStatePath) {
+  function setStateNode(statePath, inputState, mergeLastState, inputStatePath, stupid) {
     var changes = [];
@@ -254,3 +254,3 @@ var stateId = get(statePath)._id;
     (0, _util.each)(finalState, function (value, key) {
-      changes = changes.concat(setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState));
+      changes = changes.concat(setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState, stupid));
     });
@@ -273,3 +273,3 @@
 
-  function setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState) {
+  function setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState, stupid) {
     var stateNodePath = findClosestInitialPath(inputStatePath);
@@ -285,3 +285,3 @@ var stateId = get(stateNodePath)._id;
     // CAUTION patchChange 第二个参数一定要 findParentPath, 因为后面的 setStateValue 也会记录最后一个 path
-    return patchChanges(stateNodePath, findParentPath(relativeChildPath), stateId, inputStatePath).concat(setStateValue(parentPath, childPath, inputState, stateId, inputStatePath, mergeLastState, initialStateValue));
+    return patchChanges(stateNodePath, findParentPath(relativeChildPath), stateId, inputStatePath).concat(setStateValue(parentPath, childPath, inputState, stateId, inputStatePath, mergeLastState, initialStateValue, stupid));
   }
@@ -291,4 +291,5 @@
     var mergeLastState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var stupid = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
 
-    return !get(inputStatePath, {})._id ? setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState) : setStateNode(inputStatePath, inputState, mergeLastState, inputStatePath);
+    return !get(inputStatePath, {})._id ? setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState, stupid) : setStateNode(inputStatePath, inputState, mergeLastState, inputStatePath, stupid);
   }
@@ -357,2 +358,4 @@
     merge: guardWithPathDetect((0, _util.after)((0, _util.partialRight)(set, true), increaseVersion)),
+    setStupid: guardWithPathDetect((0, _util.after)((0, _util.partialRight)(set, false, true), increaseVersion)),
+    mergeStupid: guardWithPathDetect((0, _util.after)((0, _util.partialRight)(set, true, true), increaseVersion)),
     reset: guardWithPathDetect((0, _util.after)(reset, increaseVersion)),
@@ -359,0 +362,0 @@ resetHard: guardWithPathDetect((0, _util.after)(resetHard, increaseVersion)),

package.json

 {
   "name": "@cicada/render",
-  "version": "1.1.8-alpha9",
+  "version": "1.1.8",
   "main": "./lib/index.js",
@@ -5,0 +5,0 @@ "scripts": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

383222

increased by2.61%

Number of package files

69

increased by4.55%

Lines of code

9335

increased by2.7%

Number of low quality alerts

1

decreased by-50%

No dependency changes