@cicada/render - npm Package Compare versions

Comparing version 1.1.8-alpha2 to 1.1.8-alpha20

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/className.test.js

@@ -97,3 +97,3 @@ 'use strict';
   }));
-  expect(container.html()).toEqual('<div class="cls1 cls2"></div>');
+  expect(container.html()).toEqual('<div data-cicada-cls1="" data-cicada-cls2=""></div>');
 });
@@ -131,4 +131,6 @@
   expect(container.html()).toEqual('<div><div></div><div></div></div>');
-  stateTree.set('demo.value', 'hide');
-  expect(container.html()).toEqual('<div><div>hide</div><div class="hide"></div></div>');
+  stateTree.set('demo.value', 'cls1 cls2 hide');
+  expect(container.html()).toEqual('<div><div>cls1 cls2 hide</div><div data-cicada-cls1="" data-cicada-cls2="" data-cicada-hide=""></div></div>');
+  stateTree.set('demo.value', 'cls1 show');
+  expect(container.html()).toEqual('<div><div>cls1 show</div><div data-cicada-cls1="" data-cicada-show=""></div></div>');
 });

lib/__test__/integration/dynamicRender.test.js

@@ -55,3 +55,4 @@ 'use strict';
 
-var DISPLAY_NONE = '' + _createAppearance.STYLE_SHEET_PREFIX + _createAppearance.DISPLAY_NONE;
+// const DISPLAY_NONE = `${STYLE_SHEET_PREFIX}${DISPLAY_NONE_NAME}`
+var DISPLAY_NONE = '' + _createAppearance.DISPLAY_NONE;
 
@@ -221,3 +222,3 @@ function createButton() {
     expect(container.instance().appearance.isVisibleById(stateId)).toBe(false);
-    expect(container.html()).toEqual('<div class="' + DISPLAY_NONE + '"></div>');
+    expect(container.html()).toEqual('<div data-cicada-' + DISPLAY_NONE + '=""></div>');
   });
@@ -224,0 +225,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,
@@ -102,9 +160,11 @@ appearance: appearance,
     }
-  }));
-  var styleId = container.html().match(/class="(.+)"/)[1];
-  expect(document.getElementById(styleId).innerText).toEqual('.' + styleId + ' { background-color: #ccc; font-size: 14px }');
+  });
+  (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,
@@ -135,6 +195,10 @@ appearance: appearance,
     }
-  }));
-  var styleId = container.html().match(/class="(.+)"/)[1];
-  stateTree.set('demo.value', 'background-color: red');
-  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__/integration/visible.test.js

@@ -69,3 +69,4 @@ 'use strict';
 
-var DISPLAY_NONE = '' + _createAppearance.STYLE_SHEET_PREFIX + _createAppearance.DISPLAY_NONE; /* eslint-disable react/no-multi-comp */
+// const DISPLAY_NONE = `${STYLE_SHEET_PREFIX}${DISPLAY_NONE_NAME}`
+var DISPLAY_NONE = '' + _createAppearance.DISPLAY_NONE; /* eslint-disable react/no-multi-comp */
 /* eslint-disable newline-per-chained-call */
@@ -171,4 +172,5 @@
     }));
-    expect(container.html()).toEqual('<div class="' + DISPLAY_NONE + '"></div>');
+    expect(container.html()).toEqual('<div data-cicada-' + DISPLAY_NONE + '=""></div>');
   });
+
   test('basic set and reset', function () {
@@ -181,3 +183,3 @@ var _checkComponentDispla = checkComponentDisplay({ render: function render() {
         );
-      } }, '<div class="other ' + DISPLAY_NONE + '">content</div>'),
+      } }, '<div class="other" data-cicada-' + DISPLAY_NONE + '="">content</div>'),
         container = _checkComponentDispla.container,
@@ -197,3 +199,3 @@ stateId = _checkComponentDispla.stateId;
         return _react2.default.createElement(Inner, null);
-      } }, '<div class="' + DISPLAY_NONE + '">inner</div>');
+      } }, '<div data-cicada-' + DISPLAY_NONE + '="">inner</div>');
   });
@@ -204,3 +206,3 @@ // 嵌套多层
         return _react2.default.createElement(NestedInner, null);
-      } }, '<div class="' + DISPLAY_NONE + '">inner</div>');
+      } }, '<div data-cicada-' + DISPLAY_NONE + '="">inner</div>');
   });
@@ -217,3 +219,3 @@ test('stateless set', function () {
         return _react2.default.createElement(Stateless, null);
-      } }, '<div class="' + DISPLAY_NONE + '">stateless</div>');
+      } }, '<div data-cicada-' + DISPLAY_NONE + '="">stateless</div>');
   });
@@ -255,3 +257,3 @@ });
   expect(appearance.isVisibleById(stateId)).toBe(false);
-  expect(container.html()).toEqual('<div><div>hide</div><div class="' + DISPLAY_NONE + '"></div></div>');
+  expect(container.html()).toEqual('<div><div>hide</div><div data-cicada-' + DISPLAY_NONE + '=""></div></div>');
 });
@@ -295,3 +297,3 @@
   expect(appearance.isVisibleById(stateId)).toBe(false);
-  expect(container.html()).toEqual('<div><div>hide</div><div class="' + DISPLAY_NONE + '"></div></div>');
+  expect(container.html()).toEqual('<div><div>hide</div><div data-cicada-' + DISPLAY_NONE + '=""></div></div>');
 });
@@ -329,3 +331,3 @@
   stateTree.set('demo', { value: 'hide' });
-  expect(container.html()).toEqual('<div><div>hide</div><h3 class="' + DISPLAY_NONE + '"></h3></div>');
+  expect(container.html()).toEqual('<div><div>hide</div><h3 data-cicada-' + DISPLAY_NONE + '=""></h3></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

@@ -20,2 +20,4 @@ 'use strict';
 
+var _util = require('../../util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,2 +38,5 @@
     };
+    return function () {
+      delete stateIdToClassNameFns[stateId];
+    };
   }
@@ -50,3 +55,19 @@
     });
-    appearance.addStyleById.apply(appearance, [stateId].concat((0, _toConsumableArray3.default)(classNames)));
+    // className job 采用覆盖机制，因为统一调用 addStyleById 接口
+    // 这里需要摒弃已在dom上存在的重复的 className
+    var oldClassNames = appearance.getStyleById(stateId);
+    if (oldClassNames.length) {
+      var discard = [];
+      (0, _util.each)(oldClassNames, function (cls) {
+        if (!classNames.includes(cls)) {
+          discard.push(cls);
+        }
+      });
+      appearance.replaceStyleById(stateId, oldClassNames.filter(function (cls) {
+        return !discard.includes(cls);
+      }));
+    }
+    if (classNames.length) {
+      appearance.addStyleById.apply(appearance, [stateId].concat((0, _toConsumableArray3.default)(classNames)));
+    }
   }
@@ -53,0 +74,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];
+    };
   }
@@ -64,3 +67,3 @@
 
-  return mapBackgroundToState !== undefined && mapBackgroundToState.length !== 0;
+  return mapBackgroundToState !== undefined && Array.isArray(mapBackgroundToState) && mapBackgroundToState.length !== 0;
 }

lib/background/job/style.js

@@ -29,7 +29,8 @@ 'use strict';
 }
+
 function styleToString(style) {
   var content = (0, _util.reduce)(style, function (arr, o, key) {
-    return arr.concat(toLowerCaseKey(key) + ': ' + o);
+    return arr.concat(toLowerCaseKey(key) + ': ' + (typeof o === 'number' ? o + 'px' : o));
   }, []).join('; ');
-  return '{ ' + content + ' }';
+  return '' + content;
 }
@@ -44,11 +45,12 @@
 
-    var styleName = appearance.createStylesheet(stateId, '{ }');
     stateIdToStyleFns[stateId] = {
-      styleName: styleName,
       getStatePath: getStatePath,
       fn: typeof style === 'function' ? style : function () {
         return style;
-      }
+      },
+      content: ''
     };
-    appearance.addStyleById(stateId, styleName);
+    return function () {
+      delete stateIdToStyleFns[stateId];
+    };
   }
@@ -64,5 +66,11 @@
   function handle(stateId, result) {
-    var styleName = stateIdToStyleFns[stateId].styleName;
-
-    appearance.replaceStylesheet(styleName, typeof result === 'string' ? '{ ' + result + ' }' : styleToString(result));
+    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);
+      appearance.addStyleById(stateId, rule);
+    }
   }
@@ -69,0 +77,0 @@

lib/background/job/visibility.js

@@ -27,2 +27,5 @@ 'use strict';
     stateIdToVisibleFns[stateId] = { visibleArr: visible, getStatePath: getStatePath };
+    return function () {
+      delete stateIdToVisibleFns[stateId];
+    };
   }
@@ -58,3 +61,3 @@
 
-  return visible !== undefined && visible.length !== 0;
+  return visible !== undefined && Array.isArray(visible) && visible.length !== 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/constant.js

@@ -8,3 +8,3 @@ 'use strict';
 var DISPLAY_INLINE = exports.DISPLAY_INLINE = 'inline';
-
+var isDebug = exports.isDebug = process.env.NODE_ENV === 'development';
 var PRIMITIVE_COMPONENTS = exports.PRIMITIVE_COMPONENTS = {
@@ -37,3 +37,5 @@ a: DISPLAY_INLINE,
 
-var primitiveFnNames = exports.primitiveFnNames = ['componentDidMount', 'componentWillReceiveProps', 'componentWillUnmount', 'getChildContext', 'shouldComponentUpdate', 'componentWillUpdate'];
+var primitiveFnNames = exports.primitiveFnNames = ['componentDidMount', 'componentWillReceiveProps', 'componentWillUnmount', 'getChildContext',
+// 'shouldComponentUpdate', react 16后这个原生方法要特殊处理
+'componentWillUpdate'];
 
@@ -40,0 +42,0 @@ var VALIDATION_TYPE_ERROR = exports.VALIDATION_TYPE_ERROR = 'error';

lib/createAppearance.js

@@ -8,5 +8,5 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
 
@@ -33,2 +33,8 @@ var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['', ''], ['', '']);
+
 exports.default = createAppearance;
@@ -44,2 +50,6 @@
 
+var _sheet = require('./sheet');
+
+var _sheet2 = _interopRequireDefault(_sheet);
+
 var _util = require('./util');
@@ -53,8 +63,32 @@
 
+var _constant = require('./constant');
+
+var _hash = require('./hash');
+
+var _hash2 = _interopRequireDefault(_hash);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var DISPLAY_NONE = exports.DISPLAY_NONE = 'DISPLAY_NONE';
+var DISPLAY_NONE = exports.DISPLAY_NONE = 'display-none';
 var STYLE_SHEET_PREFIX = exports.STYLE_SHEET_PREFIX = 'CICADA_APPEAR_';
-var prefixReg = new RegExp('^' + STYLE_SHEET_PREFIX);
+// const prefixReg = new RegExp(`^${STYLE_SHEET_PREFIX}`)
 
+var isObject = function isObject(v) {
+  return Object.prototype.toString.apply(v) === '[object Object]';
+};
+// 避免state数据传入到react开发版props属性被设置为frozen导致无法set
+function simpleCloneWithNofrozen(state) {
+  if (!isObject(state)) return state;
+  return (0, _util.mapValues)(state, function (v) {
+    return isObject(v) ? (0, _extends3.default)({}, v) : v;
+  });
+}
+
+function spliceOne(list, index) {
+  for (var i = index, k = i + 1, n = list.length; k < n; i += 1, k += 1) {
+    list[i] = list[k];
+  }
+  list.pop();
+}
+
 var RefProxy = function (_React$Component) {
@@ -76,5 +110,21 @@ (0, _inherits3.default)(RefProxy, _React$Component);
 }(_react2.default.Component);
-/* eslint-disable no-use-before-define */
 
+function createStylesheet(clsName, content) {
+  // clsName = `${STYLE_SHEET_PREFIX}${clsName}`
+  if (typeof document === 'undefined' || document.getElementById(clsName)) return clsName;
+  var styleDom = document.createElement('style');
+  styleDom.setAttribute('id', clsName);
+  var attrName = 'data-cicada-' + clsName;
+  styleDom.innerText = '.' + clsName + ', [' + attrName + '] { ' + content + ' }';
+  document.head.appendChild(styleDom);
+  return clsName;
+}
 
+function interleave(strings, interpolations) {
+  return strings.reduce(function (final, str, i) {
+    return final + str + (interpolations[i] === undefined ? '' : interpolations[i]);
+  }, '');
+}
+
+/* eslint-disable no-use-before-define */
 function createAppearance(stateTree) {
@@ -86,14 +136,14 @@ var externalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var refCache = {};
+  var hashCache = {};
   var globalSubscribers = (0, _createSubscribers2.default)();
   var stateIdByComponentPath = (0, _common.createOneToManyContainer)();
 
-  function createStylesheet(clsName, content) {
-    clsName = '' + STYLE_SHEET_PREFIX + clsName;
-    if (typeof document === 'undefined' || document.getElementById(clsName)) return clsName;
-    var styleDom = document.createElement('style');
-    styleDom.setAttribute('id', clsName);
-    styleDom.innerText = '.' + clsName + ' ' + content;
-    document.head.appendChild(styleDom);
-    return clsName;
+  appearance.sheet = new _sheet2.default({
+    key: 'css'
+  });
+
+  if (_util.isBrowser) {
+    appearance.sheet.inject();
   }
+
   function replaceStylesheet(styleName, content) {
@@ -106,4 +156,5 @@ if (typeof document === 'undefined') return;
   }
-  var displayNoneStyle = createStylesheet(DISPLAY_NONE, '{ display: none !important; }');
 
+  // const displayNoneStyle = createStylesheet(DISPLAY_NONE, 'display: none !important;')
+
   function updateAppearanceRef(id) {
@@ -119,7 +170,32 @@ var _ref = refCache[id] || {},
 
-    var classList = visible ? styleList : styleList.concat(displayNoneStyle);
-    var className = ref.className.split(/\s+/).filter(function (cls) {
-      return cls && !prefixReg.test(cls);
-    }).concat(classList).join(' ');
-    if (ref.className !== className) ref.className = className;
+    if (visible) {
+      var classList = styleList;
+      // 获取已有 data-attr
+      var attrs = ref.attributes;
+      var output = [];
+      for (var i = attrs.length - 1; i >= 0; i--) {
+        output.push(attrs[i].name);
+      }
+      // visible 变化
+      if (output.includes('data-cicada-' + DISPLAY_NONE)) {
+        ref.removeAttribute('data-cicada-' + DISPLAY_NONE);
+      }
+      // className 动态变化后，如果 attr 没有 cls, 则新增 attr
+      // 如果已有，则不用set，但是从记录中删除
+      (0, _util.each)(classList, function (cls) {
+        if (!output.includes('data-cicada-' + cls)) {
+          ref.setAttribute('data-cicada-' + cls, '');
+        } else {
+          spliceOne(output, output.indexOf('data-cicada-' + cls));
+        }
+      });
+      // 最后遍历下attr原始记录，多余的data-attr删除
+      (0, _util.each)(output, function (attr) {
+        if (/^data-cicada/.test(attr)) {
+          ref.removeAttribute(attr);
+        }
+      });
+    } else {
+      ref.setAttribute('data-cicada-' + DISPLAY_NONE, '');
+    }
     if (children !== undefined) {
@@ -132,7 +208,2 @@ // refCache[id].children = ref.innerHTML
   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];
@@ -179,3 +250,3 @@ }
       componentArg.props = (0, _extends3.default)({}, componentArg.props, injectedExternalProps);
-
+      componentArg.state = _constant.isDebug ? simpleCloneWithNofrozen(componentArg.state) : componentArg.state;
       return _react2.default.createElement(
@@ -210,2 +281,25 @@ RefProxy,
 
+  function insertCSSRuleById(style) {
+    var sheet = appearance.sheet;
+    // 简单的 css-in-js ，不能处理 nested、mediaquery
+    // 由于 className 与 antdesign 冲突，使用 data-attr 来加载样式
+    function css(strings) {
+      for (var _len2 = arguments.length, interpolations = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        interpolations[_key2 - 1] = arguments[_key2];
+      }
+
+      var styleString = interleave(strings, interpolations);
+      // 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);
+  }
+
   return {
@@ -239,2 +333,4 @@ register: function register(id, _ref2, fn) {
     },
+
+    insertCSSRuleById: insertCSSRuleById,
     isVisibleById: function isVisibleById(id) {
@@ -256,13 +352,23 @@ return appearance[id].visible;
     subscribeById: subscribeById,
+    getStyleById: function getStyleById(id) {
+      return appearance[id].styleList || [];
+    },
+    replaceStyleById: function replaceStyleById(id) {
+      for (var _len3 = arguments.length, styleList = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        styleList[_key3 - 1] = arguments[_key3];
+      }
+
+      appearance[id].styleList = styleList;
+    },
     addStyleById: function addStyleById(id) {
-      for (var _len2 = arguments.length, styleList = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        styleList[_key2 - 1] = arguments[_key2];
+      for (var _len4 = arguments.length, styleList = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+        styleList[_key4 - 1] = arguments[_key4];
       }
 
-      appearance[id].styleList = (0, _util.union)(appearance[id].styleList.concat(styleList));
+      appearance[id].styleList = (0, _util.union)(appearance[id].styleList, styleList);
       notify(id);
     },
     removeStyleById: function removeStyleById(id) {
-      for (var _len3 = arguments.length, styleList = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-        styleList[_key3 - 1] = arguments[_key3];
+      for (var _len5 = arguments.length, styleList = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
+        styleList[_key5 - 1] = arguments[_key5];
       }
@@ -276,4 +382,8 @@
 
+    createStylesheet: createStylesheet,
     replaceStylesheet: replaceStylesheet,
-    createStylesheet: createStylesheet,
+    getStyleSheet: function getStyleSheet() {
+      return appearance.sheet;
+    },
+
     getIdsByComponentPath: function getIdsByComponentPath(pathArr) {
@@ -280,0 +390,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/createPrimitiveWrapper.js

@@ -54,7 +54,8 @@ 'use strict';
     var children = _ref.children,
-        props = _ref.props,
+        _ref$props = _ref.props,
+        props = _ref$props === undefined ? {} : _ref$props,
         listeners = _ref.listeners;
     return _react2.default.createElement(
       Tag,
-      (0, _extends3.default)({}, props, listeners),
+      (0, _extends3.default)({}, (0, _util.pick)(props, ['style', 'className']), listeners),
       children
@@ -61,0 +62,0 @@ );

lib/createStateTree.js

@@ -31,2 +31,4 @@ 'use strict';
 
+var _constant = require('./constant');
+
 var _common = require('./common');
@@ -39,14 +41,14 @@
 /* eslint-disable no-use-before-define */
-var isDebug = process.env.NODE_ENV === 'development'; /**
-                                                       * stateTree 是配合 Render 一起使用的数据结构，它的核心功能有两个:
-                                                       * 1. 提供一个树状的数据保存功能。这个树状的数据理论上应该和 Render 渲染的组件数据结构保持一致。
-                                                       * 但是这个保障是需要由组件和正确的用户代码来保障的。不是由 stateTree 这个数据结构保障的。
-                                                       * 2. 提供深度 merge，自动修复，重置等数据功能。它在其中注册了组件渲染时的初始值(这个值里包含了
-                                                       * 用户设置的值)和组件的真实初始值，所以能提供重置功能。
-                                                       *
-                                                       * 组件和 state 的对应关系是通过 stateId 绑定的，statePath 只是第一次注册时用到了。
-                                                       *
-                                                       * 注意，pub 和 sub 的功能被提到了 applyStateTreeSubscriber 中，这样能保证 stateTree 实现尽量简单。
-                                                       * 阅读完 createStateTree 之后，建议阅读 applyStateTreeSubscriber。
-                                                       */
+/**
+ * stateTree 是配合 Render 一起使用的数据结构，它的核心功能有两个:
+ * 1. 提供一个树状的数据保存功能。这个树状的数据理论上应该和 Render 渲染的组件数据结构保持一致。
+ * 但是这个保障是需要由组件和正确的用户代码来保障的。不是由 stateTree 这个数据结构保障的。
+ * 2. 提供深度 merge，自动修复，重置等数据功能。它在其中注册了组件渲染时的初始值(这个值里包含了
+ * 用户设置的值)和组件的真实初始值，所以能提供重置功能。
+ *
+ * 组件和 state 的对应关系是通过 stateId 绑定的，statePath 只是第一次注册时用到了。
+ *
+ * 注意，pub 和 sub 的功能被提到了 applyStateTreeSubscriber 中，这样能保证 stateTree 实现尽量简单。
+ * 阅读完 createStateTree 之后，建议阅读 applyStateTreeSubscriber。
+ */
 function createStateTree(initialStateTree) {
@@ -68,4 +70,4 @@ var stateTree = (0, _cloneDeep2.default)(initialStateTree) || {};
 
-      if (isDebug && _exist2.default.detect(stateTree, statePath) !== true) {
-        throw new _errors.ErrorWrongStateTreePath(statePath, _exist2.default.detect(stateTree, statePath));
+      if (_constant.isDebug && _exist2.default.detect(stateTree, statePath) !== true) {
+        console.error('Warning: ' + new _errors.ErrorWrongStateTreePath(statePath, _exist2.default.detect(stateTree, statePath)));
       }
@@ -107,14 +109,2 @@
     });
-
-    // Object.defineProperty(state, '_getStatePath', {
-    //   value: pathGetters.getStatePath,
-    // })
-    //
-    // Object.defineProperty(state, '_getRootStatePath', {
-    //   value: pathGetters.getRootStatePath,
-    // })
-    //
-    // Object.defineProperty(state, '_getScopes', {
-    //   value: pathGetters.getScopes,
-    // })
   }
@@ -186,4 +176,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 }];
@@ -200,3 +196,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 说明可能是上级数组中的占位符，不再处理。
@@ -212,7 +208,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));
+    }
 
@@ -224,5 +226,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));
       }
@@ -233,3 +235,3 @@ });
 
-  function setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState) {
+  function setStateValue(statePath, key, value, stateId, inputStatePath, mergeLastState, initialState, stupid) {
     var changes = [];
@@ -240,5 +242,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));
     }
@@ -248,3 +250,3 @@ return changes;
 
-  function setStateNode(statePath, inputState, mergeLastState, inputStatePath) {
+  function setStateNode(statePath, inputState, mergeLastState, inputStatePath, stupid) {
     var changes = [];
@@ -255,3 +257,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));
     });
@@ -274,3 +276,3 @@
 
-  function setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState) {
+  function setStateNodeFromDescendant(inputStatePath, inputState, mergeLastState, stupid) {
     var stateNodePath = findClosestInitialPath(inputStatePath);
@@ -286,3 +288,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));
   }
@@ -292,4 +294,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);
   }
@@ -358,2 +361,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)),
@@ -360,0 +365,0 @@ resetHard: guardWithPathDetect((0, _util.after)(resetHard, increaseVersion)),

lib/exist.js

@@ -34,3 +34,3 @@ 'use strict';
 
-    /* eslint-disable no-nested-ternary*/
+    /* eslint-disable no-nested-ternary */
     return path === '' ? isExist(obj) ? obj : defaultValue : _exist2.default.get(obj, path, defaultValue);
@@ -37,0 +37,0 @@ },

lib/util.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.SUPPORTED_TAGS = exports.keys = undefined;
+exports.isBrowser = exports.SUPPORTED_TAGS = exports.keys = undefined;
 
@@ -463,2 +463,4 @@ var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
   return !isReactComponent;
-}
+}
+
+var isBrowser = exports.isBrowser = typeof document !== 'undefined';

package.json

 {
   "name": "@cicada/render",
-  "version": "1.1.8-alpha2",
+  "version": "1.1.8-alpha20",
   "main": "./lib/index.js",
@@ -77,2 +77,1 @@ "scripts": {
 }
-

No alert changes

Improved metrics

Total package byte prevSize

383095

increased by6.96%

Number of package files

68

increased by6.25%

Lines of code

9334

increased by7.97%

No dependency changes