driver-worker - npm Package Compare versions

Comparing version 0.6.4-2 to 0.6.4-3

lib/create-document.js

@@ -86,16 +86,3 @@ 'use strict';
 
-  var patchTransform = {
-    rotateX: 0,
-    rotateY: 0,
-    rotateZ: 0,
-    translateX: 0,
-    translateY: 0,
-    translateZ: 0,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-    skewX: 0,
-    skewY: 0
-  };
-
+  var patchTransform = {};
   function dispatchAnimationToStyle(node, animationGroup) {
@@ -105,3 +92,3 @@ // properties aren't belonged to transform
     var nextProperties = '';
-    var nextTranfrom = 'transform:';
+    var nextTranfrom = '';
     var transformActions = [];
@@ -122,27 +109,48 @@
     // match actions and update patchTransform
-    transformActions.forEach(function (action) {
-      var initial = 0;
-      if (action.name === 'matrix' || action.name === 'matrix3d') {
-        nextTranfrom += ' ' + action.name + '(' + action.value.join(',') + ')';
+    transformActions.forEach(function (_ref) {
+      var name = _ref.name,
+          value = _ref.value;
+
+      var defaultVal = 0;
+      var unit = '';
+
+      if (/rotate[XYZ]?$/.test(name)) {
+        unit = 'deg';
+      }
+
+      if (/translate/.test(name)) {
+        unit = 'px';
+      }
+      // scale's defaultVal is 1
+      if (/scale/.test(name)) {
+        defaultVal = 1;
+      }
+
+      if (['rotate', 'scale', 'translate', 'skew'].indexOf(name) > -1) {
+        // if the rotate only has one param, it equals to rotateZ
+        if (name === 'rotate' && value.length === 1) {
+          patchTransform[name + 'Z'] = (value[0] || defaultVal) + unit;
+          return;
+        }
+
+        if (value.length === 3) {
+          patchTransform[name + 'Z'] = (value[2] || defaultVal) + unit;
+        }
+
+        patchTransform[name + 'X'] = (value[0] || defaultVal) + unit;
+        patchTransform[name + 'Y'] = (value[1] || defaultVal) + unit;
+      } else if (['scale3d', 'translate3d'].indexOf(name) > -1) {
+        // three args
+        patchTransform[name] = value.map(function (i) {
+          return '' + (i || defaultVal) + unit;
+        }).join(',');
+      } else if ('rotate3d' === name) {
+        patchTransform[name] = value.map(function (i) {
+          return '' + (i || defaultVal) + unit;
+        }).join(',') + 'deg';
+      } else if (['matrix', 'matrix3d'].indexOf(name) > -1) {
+        nextTranfrom += ' ' + name + '(' + value.join(',') + ')';
       } else {
-        // handle the situation that params are not fixed
-        if (action.name === 'rotate' || action.name === 'scale' || action.name === 'translate' || action.name === 'skew' || action.name.indexOf('3d') > -1) {
-          switch (true) {
-            // scale's initial is 1
-            case action.name === 'scale':
-              initial = 1;
-            // if the rotate only has one param, it equals to rotateZ
-            case action.value.length === 1 && action.name === 'rotate':
-              patchTransform[action.name + 'Z'] = action.value[0] || initial;
-              break;
-            case action.value.length === 3:
-              patchTransform[action.name + 'Z'] = action.value[2] || initial;
-            default:
-              patchTransform[action.name + 'X'] = action.value[0] || initial;
-              patchTransform[action.name + 'Y'] = action.value[1] || initial;
-              break;
-          }
-        } else {
-          patchTransform[action.name] = action.value[0];
-        }
+        // key = val
+        patchTransform[name] = value[0] + unit;
       }
@@ -161,3 +169,16 @@ });
     setTimeout(function () {
-      node.style.cssText = 'transition: all ' + animationGroup.config.duration + 'ms ' + animationGroup.config.timeFunction + ' ' + animationGroup.config.delay + 'ms;transform-origin: ' + animationGroup.config.transformOrigin + ';' + nextTranfrom + ';' + nextProperties;
+      var _animationGroup$confi = animationGroup.config,
+          duration = _animationGroup$confi.duration,
+          timeFunction = _animationGroup$confi.timeFunction,
+          delay = _animationGroup$confi.delay,
+          transformOrigin = _animationGroup$confi.transformOrigin;
+
+
+      Object.assign(node.style, {
+        transition: 'all ' + duration + 'ms ' + timeFunction + ' ' + delay + 'ms',
+        transformOrigin: transformOrigin,
+        transform: nextTranfrom + ' ' + nextProperties
+      });
+
+      node.style.cssText = (0, _styleToCss2.default)(node.style);
     }, 16);
@@ -296,13 +317,14 @@ }
 
-          var len = queues.length;
-          var handleAnimationQueue = function handleAnimationQueue() {
+          if (Array.isArray(queues) && queues.length > 0) {
+            var handleAnimationQueue = function handleAnimationQueue() {
+              if (queues.length > 0) {
+                dispatchAnimationToStyle(_this3, queues.shift());
+              } else {
+                _this3.removeEventListener('transitionend', handleAnimationQueue);
+              }
+            };
             if (queues.length > 0) {
-              dispatchAnimationToStyle(_this3, queues.shift());
-            } else {
-              _this3.removeEventListener('transitionend', handleAnimationQueue);
+              dispatchAnimationToStyle(this, queues.shift());
+              this.addEventListener('transitionend', handleAnimationQueue);
             }
-          };
-          if (len > 0) {
-            dispatchAnimationToStyle(this, queues.shift());
-            this.addEventListener('transitionend', handleAnimationQueue);
           }
@@ -410,5 +432,5 @@ },
         var dataset = {};
-        this.attributes.filter(isDataset).forEach(function (_ref) {
-          var name = _ref.name,
-              value = _ref.value;
+        this.attributes.filter(isDataset).forEach(function (_ref2) {
+          var name = _ref2.name,
+              value = _ref2.value;
 
@@ -545,3 +567,3 @@ dataset[camelCase(name.slice(5))] = value;
     function CanvasElement() {
-      var _ref2;
+      var _ref3;
 
@@ -554,3 +576,3 @@ _classCallCheck(this, CanvasElement);
 
-      return _possibleConstructorReturn(this, (_ref2 = CanvasElement.__proto__ || Object.getPrototypeOf(CanvasElement)).call.apply(_ref2, [this].concat(args)));
+      return _possibleConstructorReturn(this, (_ref3 = CanvasElement.__proto__ || Object.getPrototypeOf(CanvasElement)).call.apply(_ref3, [this].concat(args)));
     }
@@ -622,2 +644,8 @@
 
+var _styleToCss = require('./style-to-css');
+
+var _styleToCss2 = _interopRequireDefault(_styleToCss);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -624,0 +652,0 @@

lib/dom-renderer.js

@@ -95,2 +95,9 @@ 'use strict';
     if (e.target) event.target = e.target.$$id;
+    if (e.type === 'scroll' && e.target === document) {
+      event.target = document.body.$$id;
+      // page scroll container's top
+      // safari is document.body.scrollTop
+      // chrome is document.documentElement.scrollTop
+      event.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    }
     // CustomEvent detail
@@ -189,2 +196,7 @@ if (e.detail) event.detail = e.detail;
       var vnode = target;
+
+      if (vnode && vnode.nodeName === 'BODY') {
+        document.body.$$id = vnode.$$id;
+      }
+
       var parent = getNode(vnode);
@@ -191,0 +203,0 @@ if (removedNodes) {

lib/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _styleToCss = require('./style-to-css');
+
+var _styleToCss2 = _interopRequireDefault(_styleToCss);
+
 var _createDocument = require('./create-document');
@@ -34,15 +38,2 @@
 
-var UPPERCASE_REGEXP = /[A-Z]/g;
-var CSSPropCache = {};
-
-function styleToCSS(style) {
-  var css = '';
-  for (var prop in style) {
-    var val = style[prop];
-    prop = CSSPropCache[prop] ? CSSPropCache[prop] : CSSPropCache[prop] = prop.replace(UPPERCASE_REGEXP, '-$&').toLowerCase();
-    css = css + (prop + ':' + val + ';');
-  }
-  return css;
-}
-
 exports.default = function (_ref) {
@@ -167,2 +158,3 @@ var postMessage = _ref.postMessage,
   return {
+    document: document,
     deviceWidth: null,
@@ -312,3 +304,3 @@ viewportWidth: 750,
       // For trigger attribute mutation
-      node.style.cssText = styleToCSS(node.style);
+      node.style.cssText = (0, _styleToCss2.default)(node.style);
     },
@@ -315,0 +307,0 @@ beforeRender: function beforeRender() {

package.json

 {
   "name": "driver-worker",
-  "version": "0.6.4-2",
+  "version": "0.6.4-3",
   "description": "Worker driver for Rax",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/create-document.js

@@ -0,1 +1,3 @@
+import styleToCSS from './style-to-css';
+
 const IS_DATASET_REG = /^data\-/;
@@ -58,3 +60,3 @@ function assign(obj, props) {
 
-    for (let i = observers.length; i--; ) {
+    for (let i = observers.length; i--;) {
       let ob = observers[i],
@@ -79,3 +81,3 @@ match = target === ob._target;
     pendingMutations = false;
-    for (let i = observers.length; i--; ) {
+    for (let i = observers.length; i--;) {
       let ob = observers[i];
@@ -115,16 +117,3 @@ if (ob._records.length) {
 
-  const patchTransform = {
-    rotateX: 0,
-    rotateY: 0,
-    rotateZ: 0,
-    translateX: 0,
-    translateY: 0,
-    translateZ: 0,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-    skewX: 0,
-    skewY: 0
-  };
-
+  const patchTransform = {};
   function dispatchAnimationToStyle(node, animationGroup) {
@@ -143,3 +132,3 @@ // properties aren't belonged to transform
     let nextProperties = '';
-    let nextTranfrom = 'transform:';
+    let nextTranfrom = '';
     let transformActions = [];
@@ -160,33 +149,45 @@
     // match actions and update patchTransform
-    transformActions.forEach(action => {
-      let initial = 0;
-      if (action.name === 'matrix' || action.name === 'matrix3d') {
-        nextTranfrom += ` ${action.name}(${action.value.join(',')})`;
+    transformActions.forEach(({ name, value }) => {
+      let defaultVal = 0;
+      let unit = '';
+
+      if (/rotate[XYZ]?$/.test(name)) {
+        unit = 'deg';
+      }
+
+      if (/translate/.test(name)) {
+        unit = 'px';
+      }
+      // scale's defaultVal is 1
+      if (/scale/.test(name)) {
+        defaultVal = 1;
+      }
+
+      if (
+        ['rotate', 'scale', 'translate', 'skew'].indexOf(name) > -1
+      ) {
+        // if the rotate only has one param, it equals to rotateZ
+        if (name === 'rotate' && value.length === 1) {
+          patchTransform[`${name}Z`] = (value[0] || defaultVal) + unit;
+          return;
+        }
+
+        if (value.length === 3) {
+          patchTransform[`${name}Z`] = (value[2] || defaultVal) + unit;
+        }
+
+        patchTransform[`${name}X`] = (value[0] || defaultVal) + unit;
+        patchTransform[`${name}Y`] = (value[1] || defaultVal) + unit;
+      } else if (
+        ['scale3d', 'translate3d'].indexOf(name) > -1
+      ) {
+        // three args
+        patchTransform[name] = value.map((i) => `${i || defaultVal}${unit}`).join(',');
+      } else if ('rotate3d' === name) {
+        patchTransform[name] = value.map((i) => `${i || defaultVal}${unit}`).join(',') + 'deg';
+      } else if (['matrix', 'matrix3d'].indexOf(name) > -1) {
+        nextTranfrom += ` ${name}(${value.join(',')})`;
       } else {
-        // handle the situation that params are not fixed
-        if (
-          action.name === 'rotate' ||
-          action.name === 'scale' ||
-          action.name === 'translate' ||
-          action.name === 'skew' ||
-          action.name.indexOf('3d') > -1
-        ) {
-          switch (true) {
-            // scale's initial is 1
-            case action.name === 'scale':
-              initial = 1;
-            // if the rotate only has one param, it equals to rotateZ
-            case action.value.length === 1 && action.name === 'rotate':
-              patchTransform[`${action.name}Z`] = action.value[0] || initial;
-              break;
-            case action.value.length === 3:
-              patchTransform[`${action.name}Z`] = action.value[2] || initial;
-            default:
-              patchTransform[`${action.name}X`] = action.value[0] || initial;
-              patchTransform[`${action.name}Y`] = action.value[1] || initial;
-              break;
-          }
-        } else {
-          patchTransform[action.name] = action.value[0];
-        }
+        // key = val
+        patchTransform[name] = value[0] + unit;
       }
@@ -205,7 +206,11 @@ });
     setTimeout(() => {
-      node.style.cssText = `transition: all ${animationGroup.config.duration}ms ${
-        animationGroup.config.timeFunction
-      } ${animationGroup.config.delay}ms;transform-origin: ${
-        animationGroup.config.transformOrigin
-      };${nextTranfrom};${nextProperties}`;
+      const { duration, timeFunction, delay, transformOrigin } = animationGroup.config;
+
+      Object.assign(node.style, {
+        transition: `all ${duration}ms ${timeFunction} ${delay}ms`,
+        transformOrigin: transformOrigin,
+        transform: `${nextTranfrom} ${nextProperties}`,
+      });
+
+      node.style.cssText = styleToCSS(node.style);
     }, 16);
@@ -297,13 +302,14 @@ }
         set(queues) {
-          const len = queues.length;
-          const handleAnimationQueue = () => {
+          if (Array.isArray(queues) && queues.length > 0) {
+            const handleAnimationQueue = () => {
+              if (queues.length > 0) {
+                dispatchAnimationToStyle(this, queues.shift());
+              } else {
+                this.removeEventListener('transitionend', handleAnimationQueue);
+              }
+            };
             if (queues.length > 0) {
               dispatchAnimationToStyle(this, queues.shift());
-            } else {
-              this.removeEventListener('transitionend', handleAnimationQueue);
+              this.addEventListener('transitionend', handleAnimationQueue);
             }
-          };
-          if (len > 0) {
-            dispatchAnimationToStyle(this, queues.shift());
-            this.addEventListener('transitionend', handleAnimationQueue);
           }
@@ -396,3 +402,3 @@ },
         if (l)
-          for (i = l.length; i--; ) {
+          for (i = l.length; i--;) {
             if ((l[i].call(t, event) === false || event._end) && c) break;
@@ -399,0 +405,0 @@ }

src/dom-renderer.js

@@ -85,2 +85,9 @@ // feature-detect support for event listener options
     if (e.target) event.target = e.target.$$id;
+    if (e.type === 'scroll' && e.target === document) {
+      event.target = document.body.$$id;
+      // page scroll container's top
+      // safari is document.body.scrollTop
+      // chrome is document.documentElement.scrollTop
+      event.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    }
     // CustomEvent detail
@@ -181,2 +188,7 @@ if (e.detail) event.detail = e.detail;
       let vnode = target;
+
+      if (vnode && vnode.nodeName === 'BODY') {
+        document.body.$$id = vnode.$$id;
+      }
+
       let parent = getNode(vnode);
@@ -183,0 +195,0 @@ if (removedNodes) {

src/index.js

 import { convertUnit, setRem } from 'style-unit';
+import styleToCSS from './style-to-css';
 import createDocument from './create-document';
@@ -24,15 +25,3 @@
 
-const UPPERCASE_REGEXP = /[A-Z]/g;
-const CSSPropCache = {};
 
-function styleToCSS(style) {
-  let css = '';
-  for (var prop in style) {
-    let val = style[prop];
-    prop = CSSPropCache[prop] ? CSSPropCache[prop] : CSSPropCache[prop] = prop.replace(UPPERCASE_REGEXP, '-$&').toLowerCase();
-    css = css + `${prop}:${val};`;
-  }
-  return css;
-}
-
 export default ({ postMessage, addEventListener }) => {
@@ -151,2 +140,3 @@ let document = createDocument();
   return {
+    document,
     deviceWidth: null,
@@ -153,0 +143,0 @@ viewportWidth: 750,

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73375

increased by2.85%

Number of package files

10

increased by25%

Lines of code

2264

increased by2.07%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes