@cicada/render - npm Package Compare versions

Comparing version 1.1.9 to 1.1.10-alpha

lib/__test__/integration/dynamicRender.test.js

@@ -51,2 +51,6 @@ 'use strict';
 
+var _style = require('../../background/job/style');
+
+var styleJob = _interopRequireWildcard(_style);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -140,3 +144,4 @@
   jobs: {
-    interpolation: interpolationJob
+    interpolation: interpolationJob,
+    style: styleJob
   }
@@ -207,2 +212,29 @@ };
 
+  test('dynamic support style', function () {
+    var initialState = {
+      dynamic: {
+        config: {
+          type: 'span',
+          style: 'color: red'
+        }
+      }
+    };
+
+    var container = (0, _enzyme.mount)(_react2.default.createElement(_Render2.default, {
+      stateTree: (0, _applyStateTreeSubscriber2.default)(_createStateTree2.default)(initialState),
+      appearance: appearance,
+      components: components,
+      background: (0, _createBackground2.default)(backgroundDef, stateTree, appearance),
+      config: {
+        children: [{
+          type: 'DynamicRender',
+          bind: 'dynamic',
+          style: 'color: blue'
+        }]
+      }
+    }));
+    // 这里dynamic组件会产生两个样式
+    expect(container.html()).toEqual('<div><span data-cicada-css-1wszpi4="" data-cicada-css-13bfke7=""></span></div>');
+  });
+
   test('render with visible', function () {
@@ -209,0 +241,0 @@ var configWidthVisible = {

lib/background/job/className.js

@@ -20,4 +20,2 @@ 'use strict';
 
-var _util = require('../../util');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,19 +52,3 @@
     });
-    // 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) && !/^css-/.test(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)));
-    }
+    appearance.replaceStyleById.apply(appearance, [stateId].concat((0, _toConsumableArray3.default)(classNames)));
   }
@@ -73,0 +55,0 @@

lib/createAppearance.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.STYLE_SHEET_PREFIX = exports.DISPLAY_NONE = undefined;
+exports.DISPLAY_NONE = undefined;
 
@@ -70,4 +70,2 @@ var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
 var DISPLAY_NONE = exports.DISPLAY_NONE = 'display-none';
-var STYLE_SHEET_PREFIX = exports.STYLE_SHEET_PREFIX = 'CICADA_APPEAR_';
-// const prefixReg = new RegExp(`^${STYLE_SHEET_PREFIX}`)
 
@@ -85,9 +83,2 @@ var isObject = function isObject(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) {
@@ -111,3 +102,2 @@ (0, _inherits3.default)(RefProxy, _React$Component);
 function createStylesheet(clsName, content) {
-  // clsName = `${STYLE_SHEET_PREFIX}${clsName}`
   if (typeof document === 'undefined' || document.getElementById(clsName)) return clsName;
@@ -138,2 +128,3 @@ var styleDom = document.createElement('style');
   var stateIdByComponentPath = (0, _common.createOneToManyContainer)();
+  createStylesheet(DISPLAY_NONE, 'display: none !important;');
 
@@ -156,3 +147,2 @@ appearance.sheet = new _sheet2.default({
 
-  var displayNoneStyle = createStylesheet(DISPLAY_NONE, 'display: none !important;');
   function updateAppearanceRef(id) {
@@ -166,34 +156,27 @@ var _ref = refCache[id] || {},
         styleList = _appearance$id.styleList,
+        lastStyleList = _appearance$id.lastStyleList,
         children = _appearance$id.children;
 
-    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);
+    var addedStyleList = [];
+    if (!visible) {
+      if (!lastStyleList.includes(DISPLAY_NONE)) {
+        ref.setAttribute('data-cicada-' + DISPLAY_NONE, '');
       }
-      // visible 变化
-      if (output.includes('data-cicada-' + DISPLAY_NONE)) {
-        ref.removeAttribute('data-cicada-' + DISPLAY_NONE);
+      addedStyleList.push(DISPLAY_NONE);
+    }
+    styleList.forEach(function (cls) {
+      if (!lastStyleList.includes(cls)) {
+        ref.setAttribute('data-cicada-' + cls, '');
       }
-      // 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, '');
-    }
+      addedStyleList.push(cls);
+    });
+
+    lastStyleList.filter(function (cls) {
+      return !addedStyleList.includes(cls);
+    }).forEach(function (cls) {
+      ref.removeAttribute('data-cicada-' + cls);
+    });
+
+    // 更新lastStyleList, 跟最新的一次渲染保持一致
+    appearance[id].lastStyleList = visible ? styleList : styleList.concat(DISPLAY_NONE);
     if (children !== undefined) {
@@ -308,3 +291,3 @@ // refCache[id].children = ref.innerHTML
       var componentPathKey = componentPath !== undefined ? componentPath.join('.') : undefined;
-      appearance[id] = { visible: visible, styleList: [], componentPath: componentPath
+      appearance[id] = { visible: visible, styleList: [], lastStyleList: [], componentPath: componentPath
         // CAUTION 在与 react-router 这样的库结合使用时，由于会动态创建组件，
@@ -355,3 +338,4 @@ // 所以  Render 无法给组件打上 path, 要兼容这种情况。
 
-      appearance[id].styleList = styleList;
+      appearance[id].styleList = (0, _util.union)(styleList);
+      notify(id);
     },
@@ -358,0 +342,0 @@ addStyleById: function addStyleById(id) {

package.json

 {
   "name": "@cicada/render",
-  "version": "1.1.9",
+  "version": "1.1.10-alpha",
   "main": "./lib/index.js",
   "scripts": {
-    "test": "jest ./src",
-    "test:watch": "jest ./src --watch",
-    "coverage": "jest --coverage ./src",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "coverage": "jest --coverage",
     "build": "rm -rf lib && babel src --out-dir lib",
@@ -39,2 +39,6 @@ "prepublish": "npm run build"
   "jest": {
+    "rootDir": "./",
+    "roots": [
+      "<rootDir>/src/"
+    ],
     "moduleFileExtensions": [
@@ -41,0 +45,0 @@ "js",

New 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

Worsened metrics

Total package byte prevSize

383161

decreased by-0.06%

Number of package files

68

decreased by-1.45%

Lines of code

9332

decreased by-0.06%

Number of low quality alerts

2

increased by100%

No dependency changes