@cicada/render - npm Package Compare versions

Comparing version 1.1.8-alpha12 to 1.1.8-alpha13

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();
+});
 
@@ -81,3 +113,3 @@ var DemoComponent = {
 test('style as string', function () {
-  var container = (0, _enzyme.mount)(_react2.default.createElement(_Render2.default, {
+  var container = _react2.default.createElement(_Render2.default, {
     stateTree: stateTree,
@@ -97,11 +129,14 @@ appearance: appearance,
       type: 'Demo',
-      style: '\n        backgroundColor: \'#ccc\',\n        fontSize: \'14px\',\n      '
+      style: 'color: #108ee9;background-color: #108ee9;'
     }
-  }));
-  // 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).color).toEqual('rgb(16, 142, 233)');
+    expect(childStyle(node, 0).backgroundColor).toEqual('rgb(16, 142, 233)');
+    expect(node.innerHTML).toEqual('<div data-cicada-css-0=""></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,
@@ -126,9 +161,11 @@ appearance: appearance,
     }
-  }));
-  // 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-0=""></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,
@@ -159,7 +196,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>');
+  });
+
+  (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-0=""></div></div>');
 });

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,3 +49,4 @@ var stateIdToStyleFns = {};
         return style;
-      }
+      },
+      content: ''
     };
@@ -48,2 +64,7 @@ }
     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 +71,0 @@ appearance.addStyleById(stateId, rule);

lib/createAppearance.js

@@ -12,6 +12,2 @@ 'use strict';
 
-var _typeof2 = require('babel-runtime/helpers/typeof');
-
-var _typeof3 = _interopRequireDefault(_typeof2);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -84,15 +80,2 @@
 
-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 spliceOne(list, index) {
@@ -314,5 +297,2 @@ for (var i = index, k = i + 1, n = list.length; k < n; i += 1, k += 1) {
     }
-    if ((typeof style === 'undefined' ? 'undefined' : (0, _typeof3.default)(style)) === 'object') {
-      style = styleToString(style);
-    }
     return css(_templateObject, style);
@@ -399,2 +379,6 @@ }
     replaceStylesheet: replaceStylesheet,
+    getStyleSheet: function getStyleSheet() {
+      return appearance.sheet;
+    },
+
     getIdsByComponentPath: function getIdsByComponentPath(pathArr) {
@@ -401,0 +385,0 @@ return stateIdByComponentPath.get(pathArr.join('.'));

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

376331

increased by0.35%

Lines of code

9176

increased by0.43%

No dependency changes