@cicada/render - npm Package Compare versions

Comparing version 1.1.8-alpha7 to 1.1.8-alpha8

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

@@ -94,10 +94,7 @@ 'use strict';
       type: 'Demo',
-      style: {
-        backgroundColor: '#ccc',
-        fontSize: '14px'
-      }
+      style: '\n        backgroundColor: \'#ccc\',\n        fontSize: \'14px\',\n      '
     }
   }));
-  var styleId = container.html().match(/class="(.+)"/)[1];
-  expect(document.getElementById(styleId).innerText).toEqual('.' + styleId + ' { background-color: #ccc; font-size: 14px }');
+  // const styleId = container.html().match(/class="(.+)"/)[1]
+  expect(container.html()).toEqual('<div data-cicada-css-0=""></div>');
 });
@@ -133,5 +130,7 @@
   }));
-  var styleId = container.html().match(/class="(.+)"/)[1];
+  // 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(document.getElementById(styleId).innerText).toEqual('.' + styleId + ' { 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 }`)
 });

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

@@ -20,2 +20,4 @@ 'use strict';
 
+var _util = require('../../util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,3 +51,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)));
+    }
   }
@@ -52,0 +70,0 @@

lib/background/job/style.js

@@ -20,18 +20,4 @@ '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) {
@@ -44,5 +30,3 @@ var stateIdToStyleFns = {};
 
-    var styleName = appearance.createStylesheet(stateId, '{ }');
     stateIdToStyleFns[stateId] = {
-      styleName: styleName,
       getStatePath: getStatePath,
@@ -53,3 +37,2 @@ fn: typeof style === 'function' ? style : function () {
     };
-    appearance.addStyleById(stateId, styleName);
   }
@@ -65,5 +48,6 @@
   function handle(stateId, result) {
-    var styleName = stateIdToStyleFns[stateId].styleName;
-
-    appearance.replaceStylesheet(styleName, typeof result === 'string' ? '{ ' + result + ' }' : styleToString(result));
+    if (result && result.length) {
+      var rule = appearance.insertCSSRuleById(result);
+      appearance.addStyleById(stateId, rule);
+    }
   }
@@ -70,0 +54,0 @@

lib/createAppearance.js

@@ -8,2 +8,6 @@ 'use strict';
 
+var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -33,2 +37,4 @@
 
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['', ''], ['', '']);
+
 exports.default = createAppearance;
@@ -44,2 +50,6 @@
 
+var _sheet = require('./sheet');
+
+var _sheet2 = _interopRequireDefault(_sheet);
+
 var _util = require('./util');
@@ -57,5 +67,5 @@
 
-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}`)
 
@@ -73,2 +83,9 @@ 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) {
@@ -90,5 +107,10 @@ (0, _inherits3.default)(RefProxy, _React$Component);
 }(_react2.default.Component);
-/* eslint-disable no-use-before-define */
 
+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) {
@@ -103,11 +125,10 @@ var externalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  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) {
@@ -120,4 +141,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) {
@@ -133,7 +155,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) {
@@ -154,2 +201,8 @@ // refCache[id].children = ref.innerHTML
 
+  function flush() {
+    if (_util.isBrowser) {
+      appearance.sheet.flush();
+    }
+  }
+
   function injectExternalListenerArg(id, listener, props) {
@@ -194,3 +247,2 @@ return function () {
       componentArg.state = _constant.isDebug ? simpleCloneWithNofrozen(componentArg.state) : componentArg.state;
-
       return _react2.default.createElement(
@@ -225,2 +277,24 @@ RefProxy,
 
+  function insertCSSRuleById(style) {
+    var sheet = appearance.sheet;
+    // 简单的 css-in-js ，不能处理 nested、mediaquery
+    // 与 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);
+      var index = sheet.ctr;
+      var id = index.toString(36);
+      var className = 'css-' + id;
+      var attrName = '[data-cicada-' + className + ']';
+      var rule = '.' + className + ', ' + attrName + ' { ' + styleString + ' }';
+      sheet.insert(rule);
+      return className;
+    }
+
+    return css(_templateObject, style);
+  }
+
   return {
@@ -244,2 +318,3 @@ register: function register(id, _ref2, fn) {
           unsubscribe();
+          flush();
           delete appearance[id];
@@ -255,2 +330,4 @@ clearAppearanceRef(id);
     },
+
+    insertCSSRuleById: insertCSSRuleById,
     isVisibleById: function isVisibleById(id) {
@@ -272,13 +349,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];
       }
@@ -293,3 +380,2 @@
     replaceStylesheet: replaceStylesheet,
-    createStylesheet: createStylesheet,
     getIdsByComponentPath: function getIdsByComponentPath(pathArr) {
@@ -296,0 +382,0 @@ return stateIdByComponentPath.get(pathArr.join('.'));

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-alpha7",
+  "version": "1.1.8-alpha8",
   "main": "./lib/index.js",
@@ -77,2 +77,1 @@ "scripts": {
 }
-

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

372981

increased by1.47%

Lines of code

9079

increased by1.74%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes