driver-worker - npm Package Compare versions

Comparing version 0.6.5 to 0.6.6-0

lib/create-document.js

@@ -8,6 +8,2 @@ "use strict";
 
-var _styleToCss = _interopRequireDefault(require("./style-to-css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -44,3 +40,3 @@
 var global = typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : new Function('return this')();
-var IS_DATASET_REG = /^data\-/;
+var IS_DATASET_REG = /^data-/;
 
@@ -57,3 +53,3 @@ function assign(obj, props) {
 
-var CAMELCASE_REG = /\-[a-z]/g;
+var CAMELCASE_REG = /-[a-z]/g;
 var CamelCaseCache = {};
@@ -93,2 +89,6 @@
 
+var requestAnimationFrame = global.requestAnimationFrame || function (cb) {
+  return setTimeout(cb, 16);
+};
+
 var ELEMENT_NODE = 1;
@@ -278,3 +278,3 @@ var TEXT_NODE = 3;
 
-    setTimeout(function () {
+    requestAnimationFrame(function () {
       var _animationGroup$confi = animationGroup.config,
@@ -287,10 +287,10 @@ duration = _animationGroup$confi.duration,
 
-      if (node.style.cssText) {
-        var propList = node.style.cssText.replace(/;/g, ':').split(':');
+      if (node.style) {
+        var propList = Object.keys(node.style);
         var style = {};
         var transformProperties = ['transition', 'transform', 'transform-origin']; // traverse all properties that aren't about transform
 
-        propList.forEach(function (prop, index) {
-          if (prop && index % 2 === 0 && transformProperties.indexOf(prop) < 0) {
-            style[prop] = propList[index + 1];
+        propList.forEach(function (prop) {
+          if (prop && transformProperties.indexOf(prop) < 0) {
+            style[prop] = node.style[prop];
           }
@@ -302,3 +302,3 @@ }); // merge nextProperties into style
 
-      Object.assign(node.style, _objectSpread({
+      node.style = Object.assign(node.style, _objectSpread({
         transition: "all ".concat(duration, "ms ").concat(timeFunction, " ").concat(delay, "ms"),
@@ -308,4 +308,3 @@ transformOrigin: transformOrigin,
       }, properties));
-      node.style.cssText = (0, _styleToCss.default)(node.style);
-    }, 16);
+    });
   }
@@ -479,10 +478,2 @@
       });
-      Object.defineProperty(_this2.style, 'cssText', {
-        set: function set(val) {
-          _this2.setAttribute('style', val);
-        },
-        get: function get() {
-          return _this2.getAttribute('style');
-        }
-      });
       return _this2;
@@ -597,2 +588,13 @@ }
       }
+    }, {
+      key: "style",
+      get: function get() {
+        return this._style;
+      },
+      set: function set(styleObject) {
+        this._style = styleObject;
+        mutation(this, 'attributes', {
+          style: styleObject
+        });
+      }
     }]);
@@ -800,2 +802,4 @@
   return createDocument();
-}
+}
+
+module.exports = exports["default"];

lib/dom-renderer.js

@@ -29,3 +29,3 @@ "use strict";
 } : true;
-var UNBUBBLES = ['appear', 'disappear', 'scroll'];
+var UNBUBBLES = ['appear', 'disappear', 'scroll', 'blur', 'focus', 'load', 'unload', 'resize'];
 
@@ -36,2 +36,107 @@ function isUnbubbleEvent(evtName) {
 
+var PREFIX_PROPS = {
+  flex: true,
+  alignItems: true,
+  alignSelf: true,
+  flexDirection: true,
+  justifyContent: true,
+  flexWrap: true,
+  lineClamp: true,
+  textSizeAdjust: true,
+  textDecorationLine: true,
+  textDecorationColor: true,
+  textDecorationStyle: true,
+  textDecorationSkip: true,
+  writingMode: true,
+  animatin: true,
+  animationName: true,
+  animationDuration: true,
+  animationTimingFunction: true,
+  animationDelay: true,
+  animationIterationCount: true,
+  animationDirection: true,
+  animationFillMode: true,
+  animationPlayState: true,
+  transform: true,
+  transformOrigin: true,
+  transformStyle: true,
+  perspective: true,
+  perspectiveOrigin: true,
+  backfaceVisibility: true,
+  appearance: true,
+  userSelect: true,
+  columns: true,
+  columnWidth: true,
+  columnCount: true,
+  columnGap: true,
+  columnRule: true,
+  columnRuleWidth: true,
+  columnRuleStyle: true,
+  columnRuleColor: true,
+  columnSpan: true,
+  columnFill: true,
+  columnBreakBefore: true,
+  columnBreakAfter: true,
+  columnBreakInside: true
+};
+var PREFIX_PROP_VALS = {
+  position: 'sticky',
+  display: 'flex'
+};
+var StylePrefixer = {
+  shouldPrefix: function shouldPrefix(prop) {
+    return PREFIX_PROPS[prop] || PREFIX_PROP_VALS[prop];
+  }
+};
+Object.keys(PREFIX_PROPS).forEach(function (prop) {
+  StylePrefixer[prop] = function (value) {
+    var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    style['webkit' + prop[0].toUpperCase() + prop.slice(1)] = value;
+    style[prop] = value;
+    return style;
+  };
+});
+Object.keys(PREFIX_PROP_VALS).forEach(function (prop) {
+  var rule = PREFIX_PROPS[prop];
+
+  StylePrefixer[prop] = function (value) {
+    var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    if (value === rule) {
+      style[prop] = ['-webkit-' + rule, rule];
+    } else {
+      style[prop] = value;
+    }
+
+    return style;
+  };
+});
+
+function applyCompatibleStyle(node, styleObject) {
+  var tranformedStyles = {};
+
+  for (var prop in styleObject) {
+    var val = styleObject[prop];
+
+    if (StylePrefixer.shouldPrefix(prop)) {
+      StylePrefixer[prop](val, tranformedStyles);
+    } else {
+      tranformedStyles[prop] = val;
+    }
+  }
+
+  for (var _prop in tranformedStyles) {
+    var transformValue = tranformedStyles[_prop]; // if browser only accept -webkit-flex
+    // node.style.display = 'flex' will not work
+
+    if (Array.isArray(transformValue)) {
+      for (var i = 0; i < transformValue.length; i++) {
+        node.style[_prop] = transformValue[i];
+      }
+    } else {
+      node.style[_prop] = transformValue;
+    }
+  }
+}
+
 var _default = function _default(_ref) {
@@ -43,3 +148,2 @@ var worker = _ref.worker,
   var registeredEventCounts = {};
-  var canvasCache = {};
 
@@ -239,12 +343,8 @@ function getNode(node) {
       if (vnode.style) {
-        for (var i in vnode.style) {
-          if (vnode.style.hasOwnProperty(i)) {
-            node.style[i] = vnode.style[i];
-          }
-        }
+        applyCompatibleStyle(node, vnode.style);
       }
 
       if (vnode.attributes) {
-        for (var _i = 0; _i < vnode.attributes.length; _i++) {
-          var a = vnode.attributes[_i];
+        for (var i = 0; i < vnode.attributes.length; i++) {
+          var a = vnode.attributes[i];
 
@@ -260,4 +360,4 @@ if (_typeof(a.value) === 'object') {
       if (vnode.childNodes) {
-        for (var _i2 = 0; _i2 < vnode.childNodes.length; _i2++) {
-          node.appendChild(createNode(vnode.childNodes[_i2]));
+        for (var _i = 0; _i < vnode.childNodes.length; _i++) {
+          node.appendChild(createNode(vnode.childNodes[_i]));
         }
@@ -267,4 +367,4 @@ }
       if (vnode.events) {
-        for (var _i3 = 0; _i3 < vnode.events.length; _i3++) {
-          _addEvent(vnode.events[_i3], vnode);
+        for (var _i2 = 0; _i2 < vnode.events.length; _i2++) {
+          _addEvent(vnode.events[_i2], vnode);
         }
@@ -305,7 +405,7 @@ }
       if (addedNodes) {
-        for (var _i4 = 0; _i4 < addedNodes.length; _i4++) {
-          var newNode = getNode(addedNodes[_i4]);
+        for (var _i3 = 0; _i3 < addedNodes.length; _i3++) {
+          var newNode = getNode(addedNodes[_i3]);
 
           if (!newNode) {
-            newNode = createNode(addedNodes[_i4]);
+            newNode = createNode(addedNodes[_i3]);
           }
@@ -320,7 +420,10 @@
           attributeName = _ref3.attributeName,
-          newValue = _ref3.newValue;
+          newValue = _ref3.newValue,
+          style = _ref3.style;
       var vnode = target;
       var node = getNode(vnode);
 
-      if (newValue == null) {
+      if (style) {
+        applyCompatibleStyle(node, style);
+      } else if (newValue == null) {
         node.removeAttribute(attributeName);
@@ -397,2 +500,3 @@ } else if (_typeof(newValue) === 'object') {
 
-exports.default = _default;
+exports.default = _default;
+module.exports = exports["default"];

lib/index.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _styleToCss = _interopRequireDefault(require("./style-to-css"));
-
 var _createDocument = _interopRequireDefault(require("./create-document"));
@@ -26,3 +24,2 @@
 var COMMENT_NODE = 8;
-var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 var CLASS_NAME = 'className';
@@ -246,6 +243,2 @@ var CLASS = 'class';
     removeAttribute: function removeAttribute(node, propKey) {
-      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        return node.innerHTML = null;
-      }
-
       if (propKey === CLASS_NAME) {
@@ -265,6 +258,2 @@ propKey = CLASS;
     setAttribute: function setAttribute(node, propKey, propValue) {
-      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        return node.innerHTML = propValue.__html;
-      }
-
       if (propKey === CLASS_NAME) {
@@ -291,18 +280,6 @@ propKey = CLASS;
         tranformedStyles[prop] = (0, _styleUnit.convertUnit)(val, prop);
-      }
-
-      for (var _prop in tranformedStyles) {
-        var transformValue = tranformedStyles[_prop]; // hack handle compatibility issue
-
-        if (Array.isArray(transformValue)) {
-          for (var i = 0; i < transformValue.length; i++) {
-            node.style[_prop] = transformValue[i];
-          }
-        } else {
-          node.style[_prop] = transformValue;
-        }
       } // For trigger attribute mutation
 
 
-      node.style.cssText = (0, _styleToCss.default)(node.style);
+      node.style = tranformedStyles;
     },
@@ -336,2 +313,3 @@ beforeRender: function beforeRender() {
 
-exports.default = _default;
+exports.default = _default;
+module.exports = exports["default"];

package.json

 {
   "name": "driver-worker",
-  "version": "0.6.5",
+  "version": "0.6.6-0",
   "description": "Worker driver for Rax",
@@ -16,4 +16,4 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "style-unit": "^0.6.4"
+    "style-unit": "^0.6.5"
   }
 }

README.md

@@ -34,4 +34,4 @@ # driver-worker
 const worker = spawnWorker();
-const tagNamePrefix = 'a-';
+const tagNamePrefix = 'a-'; // Only for custom-elements
 domRenderer({ worker, tagNamePrefix });
 ```

src/create-document.js

@@ -1,6 +0,5 @@
-import styleToCSS from './style-to-css';
-
 const global = typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : new Function('return this')();
 
-const IS_DATASET_REG = /^data\-/;
+const IS_DATASET_REG = /^data-/;
+
 function assign(obj, props) {
@@ -14,3 +13,3 @@ for (let i in props) obj[i] = props[i];
 
-const CAMELCASE_REG = /\-[a-z]/g;
+const CAMELCASE_REG = /-[a-z]/g;
 const CamelCaseCache = {};
@@ -48,2 +47,6 @@ function camelCase(str) {
 
+const requestAnimationFrame = global.requestAnimationFrame || function(cb) {
+  return setTimeout(cb, 16);
+};
+
 const ELEMENT_NODE = 1;
@@ -218,3 +221,3 @@ const TEXT_NODE = 3;
 
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const {
@@ -228,4 +231,4 @@ duration,
 
-      if (node.style.cssText) {
-        const propList = node.style.cssText.replace(/;/g, ':').split(':');
+      if (node.style) {
+        const propList = Object.keys(node.style);
         const style = {};
@@ -238,9 +241,8 @@ const transformProperties = [
         // traverse all properties that aren't about transform
-        propList.forEach((prop, index) => {
+        propList.forEach((prop) => {
           if (
             prop &&
-            index % 2 === 0 &&
             transformProperties.indexOf(prop) < 0
           ) {
-            style[prop] = propList[index + 1];
+            style[prop] = node.style[prop];
           }
@@ -252,3 +254,3 @@ });
 
-      Object.assign(node.style, {
+      node.style = Object.assign(node.style, {
         transition: `all ${duration}ms ${timeFunction} ${delay}ms`,
@@ -259,5 +261,3 @@ transformOrigin: transformOrigin,
       });
-
-      node.style.cssText = styleToCSS(node.style);
-    }, 16);
+    });
   }
@@ -364,8 +364,2 @@
       });
-      Object.defineProperty(this.style, 'cssText', {
-        set: val => {
-          this.setAttribute('style', val);
-        },
-        get: () => this.getAttribute('style')
-      });
     }
@@ -385,2 +379,10 @@
 
+    get style() {
+      return this._style;
+    }
+    set style(styleObject) {
+      this._style = styleObject;
+      mutation(this, 'attributes', { style: styleObject });
+    }
+
     setAttribute(key, value) {
@@ -387,0 +389,0 @@ if (value !== this.getAttribute(key)) {

src/dom-renderer.js

@@ -24,3 +24,8 @@ // feature-detect support for event listener options
   'disappear',
-  'scroll'
+  'scroll',
+  'blur',
+  'focus',
+  'load',
+  'unload',
+  'resize',
 ];
@@ -31,6 +36,110 @@ function isUnbubbleEvent(evtName) {
 
+const PREFIX_PROPS = {
+  flex: true,
+  alignItems: true,
+  alignSelf: true,
+  flexDirection: true,
+  justifyContent: true,
+  flexWrap: true,
+
+  lineClamp: true,
+  textSizeAdjust: true,
+  textDecorationLine: true,
+  textDecorationColor: true,
+  textDecorationStyle: true,
+  textDecorationSkip: true,
+  writingMode: true,
+
+  animatin: true,
+  animationName: true,
+  animationDuration: true,
+  animationTimingFunction: true,
+  animationDelay: true,
+  animationIterationCount: true,
+  animationDirection: true,
+  animationFillMode: true,
+  animationPlayState: true,
+
+  transform: true,
+  transformOrigin: true,
+  transformStyle: true,
+  perspective: true,
+  perspectiveOrigin: true,
+  backfaceVisibility: true,
+  appearance: true,
+  userSelect: true,
+
+  columns: true,
+  columnWidth: true,
+  columnCount: true,
+  columnGap: true,
+  columnRule: true,
+  columnRuleWidth: true,
+  columnRuleStyle: true,
+  columnRuleColor: true,
+  columnSpan: true,
+  columnFill: true,
+  columnBreakBefore: true,
+  columnBreakAfter: true,
+  columnBreakInside: true,
+};
+
+const PREFIX_PROP_VALS = {
+  position: 'sticky',
+  display: 'flex',
+};
+
+const StylePrefixer = {
+  shouldPrefix(prop) {
+    return PREFIX_PROPS[prop] || PREFIX_PROP_VALS[prop];
+  },
+};
+Object.keys(PREFIX_PROPS).forEach((prop) => {
+  StylePrefixer[prop] = (value, style = {}) => {
+    style['webkit' + prop[0].toUpperCase() + prop.slice(1)] = value;
+    style[prop] = value;
+    return style;
+  };
+});
+Object.keys(PREFIX_PROP_VALS).forEach((prop) => {
+  const rule = PREFIX_PROPS[prop];
+  StylePrefixer[prop] = (value, style = {}) => {
+    if (value === rule) {
+      style[prop] = ['-webkit-' + rule, rule];
+    } else {
+      style[prop] = value;
+    }
+    return style;
+  };
+});
+
+function applyCompatibleStyle(node, styleObject) {
+  let tranformedStyles = {};
+
+  for (let prop in styleObject) {
+    let val = styleObject[prop];
+    if (StylePrefixer.shouldPrefix(prop)) {
+      StylePrefixer[prop](val, tranformedStyles);
+    } else {
+      tranformedStyles[prop] = val;
+    }
+  }
+
+  for (let prop in tranformedStyles) {
+    const transformValue = tranformedStyles[prop];
+    // if browser only accept -webkit-flex
+    // node.style.display = 'flex' will not work
+    if (Array.isArray(transformValue)) {
+      for (let i = 0; i < transformValue.length; i++) {
+        node.style[prop] = transformValue[i];
+      }
+    } else {
+      node.style[prop] = transformValue;
+    }
+  }
+}
+
 export default ({ worker, tagNamePrefix = '' }) => {
   const NODES = new Map();
   const registeredEventCounts = {};
-  const canvasCache = {};
 
@@ -206,6 +315,3 @@ function getNode(node) {
       if (vnode.style) {
-        for (let i in vnode.style)
-          if (vnode.style.hasOwnProperty(i)) {
-            node.style[i] = vnode.style[i];
-          }
+        applyCompatibleStyle(node, vnode.style);
       }
@@ -275,6 +381,9 @@
     },
-    attributes({ target, attributeName, newValue }) {
+    attributes({ target, attributeName, newValue, style }) {
       let vnode = target;
       let node = getNode(vnode);
-      if (newValue == null) {
+
+      if (style) {
+        applyCompatibleStyle(node, style);
+      } else if (newValue == null) {
         node.removeAttribute(attributeName);
@@ -281,0 +390,0 @@ } else if (typeof newValue === 'object') {

src/index.js

 import { convertUnit, setRem } from 'style-unit';
-import styleToCSS from './style-to-css';
 import createDocument from './create-document';
@@ -8,3 +7,2 @@
 const COMMENT_NODE = 8;
-const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 const CLASS_NAME = 'className';
@@ -26,3 +24,2 @@ const CLASS = 'class';
 
-
 export default ({ postMessage, addEventListener }) => {
@@ -260,6 +257,2 @@ let document = createDocument();
     removeAttribute(node, propKey) {
-      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        return node.innerHTML = null;
-      }
-
       if (propKey === CLASS_NAME) {
@@ -280,6 +273,2 @@ propKey = CLASS;
     setAttribute(node, propKey, propValue) {
-      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        return node.innerHTML = propValue.__html;
-      }
-
       if (propKey === CLASS_NAME) {
@@ -309,15 +298,4 @@ propKey = CLASS;
 
-      for (let prop in tranformedStyles) {
-        const transformValue = tranformedStyles[prop];
-        // hack handle compatibility issue
-        if (Array.isArray(transformValue)) {
-          for (let i = 0; i < transformValue.length; i++) {
-            node.style[prop] = transformValue[i];
-          }
-        } else {
-          node.style[prop] = transformValue;
-        }
-      }
       // For trigger attribute mutation
-      node.style.cssText = styleToCSS(node.style);
+      node.style = tranformedStyles;
     },
@@ -324,0 +302,0 @@

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84621

increased by3.32%

Lines of code

2639

increased by5.43%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

8

decreased by-20%

Dependency changes

• Updatedstyle-unit@^0.6.5