driver-worker - npm Package Compare versions

Comparing version 0.6.4-5 to 0.6.4-6

lib/create-document.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,8 +6,93 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = _default;
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+var _styleToCss = _interopRequireDefault(require("./style-to-css"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = function () {
+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); }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var IS_DATASET_REG = /^data\-/;
+
+function assign(obj, props) {
+  for (var i in props) {
+    obj[i] = props[i];
+  }
+}
+
+function toLower(str) {
+  return String(str).toLowerCase();
+}
+
+var CAMELCASE_REG = /\-[a-z]/g;
+var CamelCaseCache = {};
+
+function camelCase(str) {
+  return CamelCaseCache[str] || (CamelCaseCache[str] = str.replace(CAMELCASE_REG, function ($1) {
+    return $1.slice(1).toUpperCase();
+  }));
+}
+
+function splice(arr, item, add, byValueOnly) {
+  var i = arr ? findWhere(arr, item, true, byValueOnly) : -1;
+  if (~i) add ? arr.splice(i, 0, add) : arr.splice(i, 1);
+  return i;
+}
+
+function findWhere(arr, fn, returnIndex, byValueOnly) {
+  var i = arr.length;
+
+  while (i--) {
+    if (typeof fn === 'function' && !byValueOnly ? fn(arr[i]) : arr[i] === fn) break;
+  }
+
+  return returnIndex ? i : arr[i];
+}
+
+function createAttributeFilter(ns, name) {
+  return function (o) {
+    return o.ns === ns && toLower(o.name) === toLower(name);
+  };
+}
+
+var resolved = typeof Promise !== 'undefined' && Promise.resolve();
+var setImmediate = self && typeof self.setImmediate === 'function' ? self.setImmediate : resolved ? function (f) {
+  resolved.then(f);
+} : function (cb) {
+  return setTimeout(cb, 0);
+};
+var ELEMENT_NODE = 1;
+var TEXT_NODE = 3;
+var COMMENT_NODE = 8;
+var DOCUMENT_NODE = 9;
+
+function _default() {
   var observers = [];
@@ -23,2 +108,3 @@ var pendingMutations = false;
           match = target === ob._target;
+
       if (!match && ob._options.subtree) {
@@ -29,7 +115,9 @@ do {
       }
+
       if (match) {
         ob._records.push(record);
+
         if (!pendingMutations) {
           pendingMutations = true;
-          setImmediate(flushMutations);
+          setImmediate(flushMutations, 0);
         }
@@ -42,4 +130,6 @@ }
     pendingMutations = false;
+
     for (var i = observers.length; i--;) {
       var ob = observers[i];
+
       if (ob._records.length) {
@@ -51,3 +141,5 @@ ob.callback(ob.takeRecords());
 
-  var MutationObserver = function () {
+  var MutationObserver =
+  /*#__PURE__*/
+  function () {
     function MutationObserver(callback) {
@@ -61,3 +153,3 @@ _classCallCheck(this, MutationObserver);
     _createClass(MutationObserver, [{
-      key: 'observe',
+      key: "observe",
       value: function observe(target, options) {
@@ -70,3 +162,3 @@ this.disconnect();
     }, {
-      key: 'disconnect',
+      key: "disconnect",
       value: function disconnect() {
@@ -77,3 +169,3 @@ this._target = null;
     }, {
-      key: 'takeRecords',
+      key: "takeRecords",
       value: function takeRecords() {
@@ -90,2 +182,3 @@ return this._records.splice(0, this._records.length);
   }
+
   function isDataset(attr) {
@@ -96,26 +189,40 @@ return IS_DATASET_REG.test(attr.name);
   var patchTransform = {};
+
   function dispatchAnimationToStyle(node, animationGroup) {
     // properties aren't belonged to transform
     var notBelongedToTransform = ['opacity', 'backgroundColor', 'width', 'height', 'top', 'left', 'bottom', 'right'];
-    var nextProperties = '';
+    var nextProperties = {};
     var nextTranfrom = '';
-    var transformActions = [];
+    var transformActions = []; // actions about transform
 
-    // actions about transform
     animationGroup.animation.map(function (prop) {
-      if (notBelongedToTransform.indexOf(prop[0]) > -1) {
-        nextProperties += prop[0] + ':' + prop[1][0] + ';';
+      var _prop = _slicedToArray(prop, 2),
+          name = _prop[0],
+          value = _prop[1];
+
+      if (notBelongedToTransform.indexOf(name) > -1) {
+        var unit = '';
+        /**
+         * Tip:
+         * Currently, we are not supprt custom unit
+         */
+
+        if (['opacity', 'backgroundColor'].indexOf(name) < 0) {
+          unit = 'px';
+        } else if (name === 'backgroundColor') {
+          name = 'background-color';
+        }
+
+        nextProperties[name] = value + unit;
       } else {
         transformActions.push({
-          name: prop[0],
-          value: prop[1]
+          name: name,
+          value: value
         });
       }
-    });
+    }); // match actions and update patchTransform
 
-    // match actions and update patchTransform
     transformActions.forEach(function (_ref) {
       var name = _ref.name,
           value = _ref.value;
-
       var defaultVal = 0;
@@ -130,4 +237,5 @@ var unit = '';
         unit = 'px';
-      }
-      // scale's defaultVal is 1
+      } // scale's defaultVal is 1
+
+
       if (/scale/.test(name)) {
@@ -140,3 +248,3 @@ defaultVal = 1;
         if (name === 'rotate' && value.length === 1) {
-          patchTransform[name + 'Z'] = (value[0] || defaultVal) + unit;
+          patchTransform["".concat(name, "Z")] = (value[0] || defaultVal) + unit;
           return;
@@ -146,18 +254,18 @@ }
         if (value.length === 3) {
-          patchTransform[name + 'Z'] = (value[2] || defaultVal) + unit;
+          patchTransform["".concat(name, "Z")] = (value[2] || defaultVal) + unit;
         }
 
-        patchTransform[name + 'X'] = (value[0] || defaultVal) + unit;
-        patchTransform[name + 'Y'] = (value[1] || defaultVal) + unit;
+        patchTransform["".concat(name, "X")] = (value[0] || defaultVal) + unit;
+        patchTransform["".concat(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;
+          return "".concat(i || defaultVal).concat(unit);
         }).join(',');
       } else if ('rotate3d' === name) {
         patchTransform[name] = value.map(function (i) {
-          return '' + (i || defaultVal) + unit;
+          return "".concat(i || defaultVal).concat(unit);
         }).join(',') + 'deg';
       } else if (['matrix', 'matrix3d'].indexOf(name) > -1) {
-        nextTranfrom += ' ' + name + '(' + value.join(',') + ')';
+        nextTranfrom += " ".concat(name, "(").concat(value.join(','), ")");
       } else {
@@ -167,13 +275,15 @@ // key = val
       }
-    });
+    }); // stitching patchTransform into a string
 
-    // stitching patchTransform into a string
     Object.keys(patchTransform).forEach(function (name) {
-      nextTranfrom += ' ' + name + '(' + patchTransform[name] + ')';
+      nextTranfrom += " ".concat(name, "(").concat(patchTransform[name], ")");
     });
-
     /**
      * Merge onto style cssText
      * before every animationGroup setTimeout 16ms
+     *
+     * it shouldn't just assignment cssText
+     * but parse cssText
      */
+
     setTimeout(function () {
@@ -185,15 +295,30 @@ var _animationGroup$confi = animationGroup.config,
           transformOrigin = _animationGroup$confi.transformOrigin;
+      var properties = {};
 
+      if (node.style.cssText) {
+        var propList = node.style.cssText.replace(/;/g, ':').split(':');
+        var style = {};
+        var transformProperties = ['transition', 'transform', 'transform-origin']; // traverse all properties that aren't about transform
 
-      Object.assign(node.style, {
-        transition: 'all ' + duration + 'ms ' + timeFunction + ' ' + delay + 'ms',
+        propList.forEach(function (prop, index) {
+          if (prop && index % 2 === 0 && transformProperties.indexOf(prop) < 0) {
+            style[prop] = propList[index + 1];
+          }
+        }); // merge nextProperties into style
+
+        properties = Object.assign(style, nextProperties);
+      }
+
+      Object.assign(node.style, _objectSpread({
+        transition: "all ".concat(duration, "ms ").concat(timeFunction, " ").concat(delay, "ms"),
         transformOrigin: transformOrigin,
-        transform: nextTranfrom + ' ' + nextProperties
-      });
-
-      node.style.cssText = (0, _styleToCss2.default)(node.style);
+        transform: "".concat(nextTranfrom)
+      }, properties));
+      node.style.cssText = (0, _styleToCss.default)(node.style);
     }, 16);
   }
 
-  var Node = function () {
+  var Node =
+  /*#__PURE__*/
+  function () {
     function Node(nodeType, nodeName) {
@@ -208,3 +333,3 @@ _classCallCheck(this, Node);
     _createClass(Node, [{
-      key: 'appendChild',
+      key: "appendChild",
       value: function appendChild(child) {
@@ -215,3 +340,3 @@ this.insertBefore(child);
     }, {
-      key: 'insertBefore',
+      key: "insertBefore",
       value: function insertBefore(child, ref) {
@@ -223,6 +348,11 @@ child.remove();
           splice(this.childNodes, ref, child);
-          mutation(this, 'childList', { addedNodes: [child], nextSibling: ref });
+          mutation(this, 'childList', {
+            addedNodes: [child],
+            nextSibling: ref
+          });
         } else {
           this.childNodes.push(child);
-          mutation(this, 'childList', { addedNodes: [child] });
+          mutation(this, 'childList', {
+            addedNodes: [child]
+          });
         }
@@ -233,3 +363,3 @@
     }, {
-      key: 'replaceChild',
+      key: "replaceChild",
       value: function replaceChild(child, ref) {
@@ -243,10 +373,12 @@ if (ref.parentNode === this) {
     }, {
-      key: 'removeChild',
+      key: "removeChild",
       value: function removeChild(child) {
         splice(this.childNodes, child);
-        mutation(this, 'childList', { removedNodes: [child] });
+        mutation(this, 'childList', {
+          removedNodes: [child]
+        });
         return child;
       }
     }, {
-      key: 'remove',
+      key: "remove",
       value: function remove() {
@@ -256,3 +388,3 @@ if (this.parentNode) this.parentNode.removeChild(this);
     }, {
-      key: 'nextSibling',
+      key: "nextSibling",
       get: function get() {
@@ -263,3 +395,3 @@ var p = this.parentNode;
     }, {
-      key: 'previousSibling',
+      key: "previousSibling",
       get: function get() {
@@ -270,3 +402,3 @@ var p = this.parentNode;
     }, {
-      key: 'firstChild',
+      key: "firstChild",
       get: function get() {
@@ -276,3 +408,3 @@ return this.childNodes[0];
     }, {
-      key: 'lastChild',
+      key: "lastChild",
       get: function get() {
@@ -286,10 +418,13 @@ return this.childNodes[this.childNodes.length - 1];
 
-  var Text = function (_Node) {
+  var Text =
+  /*#__PURE__*/
+  function (_Node) {
     _inherits(Text, _Node);
 
     function Text(text) {
+      var _this;
+
       _classCallCheck(this, Text);
 
-      // TEXT_NODE
-      var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, TEXT_NODE, '#text'));
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, TEXT_NODE, '#text')); // TEXT_NODE
 
@@ -301,5 +436,7 @@ _this.data = text;
     _createClass(Text, [{
-      key: 'textContent',
+      key: "textContent",
       set: function set(text) {
-        mutation(this, 'characterData', { newValue: text });
+        mutation(this, 'characterData', {
+          newValue: text
+        });
         this.data = text;
@@ -315,10 +452,13 @@ },
 
-  var Element = function (_Node2) {
+  var Element =
+  /*#__PURE__*/
+  function (_Node2) {
     _inherits(Element, _Node2);
 
     function Element(nodeType, nodeName) {
+      var _this2;
+
       _classCallCheck(this, Element);
 
-      // ELEMENT_NODE
-      var _this2 = _possibleConstructorReturn(this, (Element.__proto__ || Object.getPrototypeOf(Element)).call(this, nodeType || ELEMENT_NODE, nodeName));
+      _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Element).call(this, nodeType || ELEMENT_NODE, nodeName)); // ELEMENT_NODE
 
@@ -328,3 +468,3 @@ _this2.attributes = [];
       _this2.style = {};
-      Object.defineProperty(_this2, 'className', {
+      Object.defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), 'className', {
         set: function set(val) {
@@ -337,3 +477,3 @@ _this2.setAttribute('class', val);
       });
-      Object.defineProperty(_this2, 'animation', {
+      Object.defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), 'animation', {
         set: function set(queues) {
@@ -350,2 +490,3 @@ var _this3 = this;
             };
+
             if (queues.length > 0) {
@@ -357,3 +498,2 @@ dispatchAnimationToStyle(this, queues.shift());
         },
-
         get: function get() {
@@ -375,3 +515,3 @@ return _this2.getAttribute('animation');
     _createClass(Element, [{
-      key: 'setAttribute',
+      key: "setAttribute",
       value: function setAttribute(key, value) {
@@ -383,3 +523,3 @@ if (value !== this.getAttribute(key)) {
     }, {
-      key: 'getAttribute',
+      key: "getAttribute",
       value: function getAttribute(key) {
@@ -389,3 +529,3 @@ return this.getAttributeNS(null, key);
     }, {
-      key: 'removeAttribute',
+      key: "removeAttribute",
       value: function removeAttribute(key) {
@@ -395,11 +535,13 @@ this.removeAttributeNS(null, key);
     }, {
-      key: 'setAttributeNS',
+      key: "setAttributeNS",
       value: function setAttributeNS(ns, name, value) {
         var attr = findWhere(this.attributes, createAttributeFilter(ns, name));
-        if (!attr) this.attributes.push(attr = { ns: ns, name: name });
-
-        // array and plain object will pass
+        if (!attr) this.attributes.push(attr = {
+          ns: ns,
+          name: name
+        }); // array and plain object will pass
         // through, instead of calling `toString`
         // null has been filtered before
-        if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
+
+        if (_typeof(value) === 'object') {
           attr.value = value;
@@ -409,6 +551,10 @@ } else {
         }
-        mutation(this, 'attributes', { attributeName: name, newValue: value });
+
+        mutation(this, 'attributes', {
+          attributeName: name,
+          newValue: value
+        });
       }
     }, {
-      key: 'getAttributeNS',
+      key: "getAttributeNS",
       value: function getAttributeNS(ns, name) {
@@ -419,21 +565,27 @@ var attr = findWhere(this.attributes, createAttributeFilter(ns, name));
     }, {
-      key: 'removeAttributeNS',
+      key: "removeAttributeNS",
       value: function removeAttributeNS(ns, name) {
         splice(this.attributes, createAttributeFilter(ns, name));
-        mutation(this, 'attributes', { attributeName: name });
+        mutation(this, 'attributes', {
+          attributeName: name
+        });
       }
     }, {
-      key: 'addEventListener',
+      key: "addEventListener",
       value: function addEventListener(type, handler) {
         (this.eventListeners[toLower(type)] || (this.eventListeners[toLower(type)] = [])).push(handler);
-        mutation(this, 'addEvent', { eventName: type });
+        mutation(this, 'addEvent', {
+          eventName: type
+        });
       }
     }, {
-      key: 'removeEventListener',
+      key: "removeEventListener",
       value: function removeEventListener(type, handler) {
         splice(this.eventListeners[toLower(type)], handler, 0, true);
-        mutation(this, 'removeEvent', { eventName: type });
+        mutation(this, 'removeEvent', {
+          eventName: type
+        });
       }
     }, {
-      key: 'dispatchEvent',
+      key: "dispatchEvent",
       value: function dispatchEvent(event) {
@@ -443,6 +595,8 @@ event.stopPropagation = function () {
         };
+
         var t = event.target = event.currentTarget = this;
         var c = event.cancelable;
-        var l = void 0;
-        var i = void 0;
+        var l;
+        var i;
+
         do {
@@ -454,6 +608,7 @@ l = t.eventListeners && t.eventListeners[toLower(event.type)];
         } while (event.bubbles && !(c && event._stop) && (event.currentTarget = t = t.parentNode));
+
         return !event.defaultPrevented;
       }
     }, {
-      key: 'children',
+      key: "children",
       get: function get() {
@@ -463,3 +618,3 @@ return this.childNodes.filter(isElement);
     }, {
-      key: 'dataset',
+      key: "dataset",
       get: function get() {
@@ -470,3 +625,2 @@ var dataset = {};
               value = _ref2.value;
-
           dataset[camelCase(name.slice(5))] = value;
@@ -481,3 +635,5 @@ });
 
-  var Document = function (_Element) {
+  var Document =
+  /*#__PURE__*/
+  function (_Element) {
     _inherits(Document, _Element);
@@ -488,3 +644,3 @@
 
-      return _possibleConstructorReturn(this, (Document.__proto__ || Object.getPrototypeOf(Document)).call(this, DOCUMENT_NODE, '#document')); // DOCUMENT_NODE
+      return _possibleConstructorReturn(this, _getPrototypeOf(Document).call(this, DOCUMENT_NODE, '#document')); // DOCUMENT_NODE
     }
@@ -495,12 +651,15 @@
 
-  var Comment = function (_Node3) {
+  var Comment =
+  /*#__PURE__*/
+  function (_Node3) {
     _inherits(Comment, _Node3);
 
     function Comment(text) {
+      var _this4;
+
       _classCallCheck(this, Comment);
 
-      var _this5 = _possibleConstructorReturn(this, (Comment.__proto__ || Object.getPrototypeOf(Comment)).call(this, COMMENT_NODE, '#comment'));
-
-      _this5.data = text;
-      return _this5;
+      _this4 = _possibleConstructorReturn(this, _getPrototypeOf(Comment).call(this, COMMENT_NODE, '#comment'));
+      _this4.data = text;
+      return _this4;
     }
@@ -511,3 +670,5 @@
 
-  var Event = function () {
+  var Event =
+  /*#__PURE__*/
+  function () {
     function Event(type, opts) {
@@ -522,3 +683,3 @@ _classCallCheck(this, Event);
     _createClass(Event, [{
-      key: 'stopPropagation',
+      key: "stopPropagation",
       value: function stopPropagation() {
@@ -528,3 +689,3 @@ this._stop = true;
     }, {
-      key: 'stopImmediatePropagation',
+      key: "stopImmediatePropagation",
       value: function stopImmediatePropagation() {
@@ -534,3 +695,3 @@ this._end = this._stop = true;
     }, {
-      key: 'preventDefault',
+      key: "preventDefault",
       value: function preventDefault() {
@@ -545,3 +706,3 @@ this.defaultPrevented = true;
   var CanvasRenderingContext2D = function CanvasRenderingContext2D(vnode) {
-    var _this6 = this;
+    var _this5 = this;
 
@@ -551,3 +712,2 @@ _classCallCheck(this, CanvasRenderingContext2D);
     this.canvas = vnode;
-
     var propertyValues = {
@@ -573,9 +733,7 @@ fillStyle: '#000000',
       textBaseline: 'alphabetic'
-    };
+    }; // context properties
 
-    // context properties
     var properties = ['direction', 'fillStyle', 'filter', 'font', 'globalAlpha', 'globalCompositeOperation', 'imageSmoothingEnabled', 'imageSmoothingQuality', 'lineCap', 'lineDashOffset', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseline'];
-
     properties.forEach(function (property) {
-      Object.defineProperty(_this6, property, {
+      Object.defineProperty(_this5, property, {
         get: function get() {
@@ -588,10 +746,8 @@ return propertyValues[property];
       });
-    });
+    }); // context api
 
-    // context api
     var methods = ['arc', 'arcTo', 'addHitRegion', 'beginPath', 'bezierCurveTo', 'clearHitRegions', 'clearRect', 'clip', 'closePath', 'createImageData', 'createLinearGradient', 'createPattern', 'createRadialGradient', 'drawFocusIfNeeded', 'drawImage', 'drawWidgetAsOnScreen', 'drawWindow', 'ellipse', 'fill', 'fillRect', 'fillText', 'getImageData', 'getLineDash', 'isPointInPath', 'isPointInStroke', 'lineTo', 'measureText', 'moveTo', 'putImageData', 'quadraticCurveTo', 'rect', 'removeHitRegion', 'resetTransform', 'restore', 'rotate', 'save', 'scale', 'scrollPathIntoView', 'setLineDash', 'setTransform', 'stroke', 'strokeRect', 'strokeText', 'transform', 'translate'];
-
     methods.forEach(function (method) {
-      _this6[method] = function () {
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      _this5[method] = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
@@ -609,19 +765,21 @@ }
 
-  var CanvasElement = function (_Element2) {
+  var CanvasElement =
+  /*#__PURE__*/
+  function (_Element2) {
     _inherits(CanvasElement, _Element2);
 
     function CanvasElement() {
-      var _ref3;
+      var _getPrototypeOf2;
 
       _classCallCheck(this, CanvasElement);
 
-      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
 
-      return _possibleConstructorReturn(this, (_ref3 = CanvasElement.__proto__ || Object.getPrototypeOf(CanvasElement)).call.apply(_ref3, [this].concat(args)));
+      return _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(CanvasElement)).call.apply(_getPrototypeOf2, [this].concat(args)));
     }
 
     _createClass(CanvasElement, [{
-      key: 'getContext',
+      key: "getContext",
       value: function getContext(contextType) {
@@ -647,2 +805,3 @@ if (contextType === '2d') {
     }
+
     return new Element(null, String(type).toUpperCase());
@@ -673,3 +832,2 @@ }
     });
-
     assign(document, {
@@ -681,3 +839,2 @@ createComment: createComment,
     });
-
     document.appendChild(document.documentElement = createElement('html'));
@@ -690,63 +847,2 @@ document.documentElement.appendChild(document.head = createElement('head'));
   return createDocument();
-};
-
-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; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var IS_DATASET_REG = /^data\-/;
-function assign(obj, props) {
-  for (var i in props) {
-    obj[i] = props[i];
-  }
-}
-
-function toLower(str) {
-  return String(str).toLowerCase();
-}
-
-var CAMELCASE_REG = /\-[a-z]/g;
-var CamelCaseCache = {};
-function camelCase(str) {
-  return CamelCaseCache[str] || (CamelCaseCache[str] = str.replace(CAMELCASE_REG, function ($1) {
-    return $1.slice(1).toUpperCase();
-  }));
-}
-
-function splice(arr, item, add, byValueOnly) {
-  var i = arr ? findWhere(arr, item, true, byValueOnly) : -1;
-  if (~i) add ? arr.splice(i, 0, add) : arr.splice(i, 1);
-  return i;
-}
-
-function findWhere(arr, fn, returnIndex, byValueOnly) {
-  var i = arr.length;
-  while (i--) {
-    if (typeof fn === 'function' && !byValueOnly ? fn(arr[i]) : arr[i] === fn) break;
-  }return returnIndex ? i : arr[i];
-}
-
-function createAttributeFilter(ns, name) {
-  return function (o) {
-    return o.ns === ns && toLower(o.name) === toLower(name);
-  };
-}
-
-var resolved = typeof Promise !== 'undefined' && Promise.resolve();
-var setImmediate = resolved ? function (f) {
-  resolved.then(f);
-} : setTimeout;
-var ELEMENT_NODE = 1;
-var TEXT_NODE = 3;
-var COMMENT_NODE = 8;
-var DOCUMENT_NODE = 9;
-
-module.exports = exports['default'];
+}

lib/dom-renderer.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof 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); }
 
 // feature-detect support for event listener options
 var supportsPassive = false;
+
 try {
@@ -17,2 +19,3 @@ addEventListener('test', null, {
     }
+
   });
@@ -28,8 +31,12 @@ } catch (e) {}
 } : true;
+var UNBUBBLES = ['appear', 'disappear', 'scroll'];
 
-exports.default = function (_ref) {
+function isUnbubbleEvent(evtName) {
+  return UNBUBBLES.indexOf(evtName) !== -1;
+}
+
+var _default = function _default(_ref) {
   var worker = _ref.worker,
       _ref$tagNamePrefix = _ref.tagNamePrefix,
-      tagNamePrefix = _ref$tagNamePrefix === undefined ? '' : _ref$tagNamePrefix;
-
+      tagNamePrefix = _ref$tagNamePrefix === void 0 ? '' : _ref$tagNamePrefix;
   var NODES = new Map();
@@ -45,25 +52,94 @@ var registeredEventCounts = {};
 
-  function _addEvent(name) {
-    var registeredCount = registeredEventCounts[name];
+  function _addEvent(name, vnode) {
+    if (isUnbubbleEvent(name)) {
+      addUnbubbleEvent(name, vnode);
+    } else {
+      var registeredCount = registeredEventCounts[name];
 
-    if (!registeredCount) {
-      registeredEventCounts[name] = 1;
-      // Top-level register
-      document.addEventListener(name, eventProxyHandler, EVENT_OPTIONS);
+      if (!registeredCount) {
+        registeredEventCounts[name] = 1; // Top-level register
+
+        document.addEventListener(name, eventProxyHandler, EVENT_OPTIONS);
+      } else {
+        registeredEventCounts[name]++;
+      }
+    }
+  }
+
+  function _removeEvent(name, vnode) {
+    if (isUnbubbleEvent(name)) {
+      removeUnbubbleEvent(name, vnode);
     } else {
-      registeredEventCounts[name]++;
+      registeredEventCounts[name]--;
+
+      if (registeredEventCounts[name] === 0) {
+        document.removeEventListener(name, eventProxyHandler);
+      }
     }
   }
 
-  function _removeEvent() {
-    registeredEventCounts[name]--;
-    if (registeredEventCounts[name] === 0) {
-      document.removeEventListener(name, eventProxyHandler);
+  var unbubbleEventStore = {};
+
+  function addUnbubbleEvent(name, vnode) {
+    var evtStore = unbubbleEventStore[name] = unbubbleEventStore[name] || {}; // el may not add to DOM Tree
+
+    setTimeout(function () {
+      var el = getNode(vnode);
+
+      if (el) {
+        el.addEventListener(name, evtStore[vnode.$$id] = function (evt) {
+          var _evt$target$getBoundi = evt.target.getBoundingClientRect(),
+              bottom = _evt$target$getBoundi.bottom,
+              height = _evt$target$getBoundi.height,
+              left = _evt$target$getBoundi.left,
+              right = _evt$target$getBoundi.right,
+              top = _evt$target$getBoundi.top,
+              width = _evt$target$getBoundi.width,
+              x = _evt$target$getBoundi.x,
+              y = _evt$target$getBoundi.y;
+
+          var target = {
+            $$id: el.$$id
+          };
+          worker.postMessage({
+            type: 'event',
+            event: {
+              type: name,
+              target: target,
+              currentTarget: target,
+              detail: {
+                bottom: bottom,
+                height: height,
+                left: left,
+                right: right,
+                top: top,
+                width: width,
+                x: x,
+                y: y
+              }
+            }
+          });
+        });
+      }
+    }, 0);
+  }
+
+  function removeUnbubbleEvent(name, vnode) {
+    var evtStore = unbubbleEventStore[name] = unbubbleEventStore[name] || {};
+
+    if (evtStore[vnode.$$id]) {
+      var el = getNode(vnode);
+      el && el.removeEventListener(name, evtStore[vnode.$$id]);
+      delete evtStore[vnode.$$id];
     }
   }
 
-  var touch = void 0;
+  var touch;
+
   function getTouch(e) {
     var t = e.changedTouches && e.changedTouches[0] || e.touches && e.touches[0] || e;
-    return t && { pageX: t.pageX, pageY: t.pageY };
+    return t && {
+      pageX: t.pageX,
+      pageY: t.pageY
+    };
   }
@@ -73,2 +149,3 @@
     var touches = [];
+
     for (var i = 0, l = touchList.length; i < l; i++) {
@@ -82,7 +159,7 @@ var _touchList$i = touchList[i],
           target = _touchList$i.target;
-
-
       touches.push({
-        clientX: clientX, clientY: clientY,
-        pageX: pageX, pageY: pageY,
+        clientX: clientX,
+        clientY: clientY,
+        pageX: pageX,
+        pageY: pageY,
         identifier: identifier,
@@ -93,2 +170,3 @@ // instance id of changed target
     }
+
     return touches;
@@ -99,17 +177,22 @@ }
     if (e.type === 'click' && touch) return false;
+    var event = {
+      type: e.type
+    };
+    if (e.target) event.target = e.target.$$id;
 
-    var event = { type: e.type };
-    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
+      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
+    } // CustomEvent detail
+
+
     if (e.detail) event.detail = e.detail;
+
     for (var i in e) {
       var v = e[i];
-      if ((typeof v === 'undefined' ? 'undefined' : _typeof(v)) !== 'object' && typeof v !== 'function' && i !== i.toUpperCase() && !event.hasOwnProperty(i)) {
+
+      if (_typeof(v) !== 'object' && typeof v !== 'function' && i !== i.toUpperCase() && !event.hasOwnProperty(i)) {
         event[i] = v;
@@ -133,7 +216,12 @@ }
       var t = getTouch(e);
+
       if (t) {
         var delta = Math.sqrt(Math.pow(t.pageX - touch.pageX, 2) + Math.pow(t.pageY - touch.pageY, 2));
+
         if (delta < 10) {
           event.type = 'click';
-          worker.postMessage({ type: 'event', event: event });
+          worker.postMessage({
+            type: 'event',
+            event: event
+          });
         }
@@ -145,3 +233,4 @@ }
   function createNode(vnode) {
-    var node = void 0;
+    var node;
+
     if (vnode.nodeType === 3) {
@@ -151,2 +240,3 @@ node = document.createTextNode(vnode.data);
       node = document.createElement(tagNamePrefix + vnode.nodeName);
+
       if (vnode.className) {
@@ -184,3 +274,3 @@ node.className = vnode.className;
         for (var _i3 = 0; _i3 < vnode.events.length; _i3++) {
-          _addEvent(vnode.events[_i3]);
+          _addEvent(vnode.events[_i3], vnode);
         }
@@ -195,6 +285,7 @@ }
     return node;
-  }
-  // Returns "attributes" if it was an attribute mutation.
+  } // Returns "attributes" if it was an attribute mutation.
   // "characterData" if it was a mutation to a CharacterData node.
   // And "childList" if it was a mutation to the tree of nodes.
+
+
   var MUTATIONS = {
@@ -206,3 +297,2 @@ childList: function childList(_ref2) {
           nextSibling = _ref2.nextSibling;
-
       var vnode = target;
@@ -215,2 +305,3 @@
       var parent = getNode(vnode);
+
       if (removedNodes) {
@@ -225,5 +316,7 @@ for (var i = removedNodes.length; i--;) {
           var newNode = getNode(addedNodes[_i4]);
+
           if (!newNode) {
             newNode = createNode(addedNodes[_i4]);
           }
+
           parent.insertBefore(newNode, nextSibling && getNode(nextSibling) || null);
@@ -237,8 +330,8 @@ }
           newValue = _ref3.newValue;
-
       var vnode = target;
       var node = getNode(vnode);
+
       if (newValue == null) {
         node.removeAttribute(attributeName);
-      } else if ((typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === 'object') {
+      } else if (_typeof(newValue) === 'object') {
         node[attributeName] = newValue;
@@ -252,3 +345,2 @@ } else {
           newValue = _ref4.newValue;
-
       var vnode = target;
@@ -262,3 +354,3 @@ var node = getNode(vnode);
 
-      _addEvent(eventName);
+      _addEvent(eventName, target);
     },
@@ -269,3 +361,3 @@ removeEvent: function removeEvent(_ref6) {
 
-      _removeEvent(eventName);
+      _removeEvent(eventName, target);
     },
@@ -277,3 +369,2 @@ canvasRenderingContext2D: function canvasRenderingContext2D(_ref7) {
           properties = _ref7.properties;
-
       var vnode = target;
@@ -299,6 +390,7 @@ var canvas = getNode(vnode);
     var data = _ref8.data;
+    var type = data.type;
 
-    var type = data.type;
     if (type === 'MutationRecord') {
       var mutations = data.mutations;
+
       for (var i = 0; i < mutations.length; i++) {
@@ -319,2 +411,2 @@ // apply mutation
 
-module.exports = exports['default'];
+exports.default = _default;

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,19 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _styleUnit = require("style-unit");
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+var _styleToCss = _interopRequireDefault(require("./style-to-css"));
 
-var _styleUnit = require('style-unit');
+var _createDocument = _interopRequireDefault(require("./create-document"));
 
-var _styleToCss = require('./style-to-css');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _styleToCss2 = _interopRequireDefault(_styleToCss);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var _createDocument = require('./create-document');
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _createDocument2 = _interopRequireDefault(_createDocument);
+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); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var ELEMENT_NODE = 1;
@@ -38,9 +37,7 @@ var TEXT_NODE = 3;
 
-exports.default = function (_ref) {
+var _default = function _default(_ref) {
   var postMessage = _ref.postMessage,
       addEventListener = _ref.addEventListener;
-
-  var document = (0, _createDocument2.default)();
+  var document = (0, _createDocument.default)();
   var MutationObserver = document.defaultView.MutationObserver;
-
   var NODES = new Map();
@@ -50,4 +47,4 @@ var COUNTER = 0;
   function getNode(node) {
-    var id = void 0;
-    if (node && (typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object') id = node.$$id;
+    var id;
+    if (node && _typeof(node) === 'object') id = node.$$id;
     if (typeof node === 'string') id = node;
@@ -71,6 +68,7 @@ if (!id) return null;
   }
-
   /**
    * convert Touch#$$id to targetNode
    */
+
+
   function convertTouchTarget(evt) {
@@ -89,2 +87,3 @@ function extractTouchListTarget(touchList) {
     }
+
     if (evt.changedTouches) {
@@ -96,4 +95,3 @@ extractTouchListTarget(evt.changedTouches);
   function sanitize(obj, prop) {
-    if (!obj || (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object') return obj;
-
+    if (!obj || _typeof(obj) !== 'object') return obj;
     if (Array.isArray(obj)) return obj.map(function (o) {
@@ -118,3 +116,3 @@ return sanitize(o, prop);
       if (nodeType === ELEMENT_NODE) {
-        out = _extends({}, out, {
+        out = _objectSpread({}, out, {
           events: Object.keys(obj.eventListeners || {}),
@@ -138,2 +136,3 @@ attributes: obj.attributes,
       var mutation = mutations[i];
+
       for (var j = TO_SANITIZE.length; j--;) {
@@ -144,7 +143,11 @@ var prop = TO_SANITIZE[j];
     }
-    postMessage({ type: 'MutationRecord', mutations: mutations });
+
+    postMessage({
+      type: 'MutationRecord',
+      mutations: mutations
+    });
   });
-
-  mutationObserver.observe(document, { subtree: true });
-
+  mutationObserver.observe(document, {
+    subtree: true
+  });
   addEventListener('message', function (_ref2) {
@@ -158,2 +161,3 @@ var data = _ref2.data;
         break;
+
       case 'event':
@@ -164,3 +168,2 @@ handleEvent(data.event);
   });
-
   return {
@@ -171,3 +174,2 @@ document: document,
     eventRegistry: {},
-
     getDeviceWidth: function getDeviceWidth() {
@@ -206,5 +208,3 @@ return this.deviceWidth || document.documentElement.clientWidth;
       var props = component.props;
-
       this.setNativeProps(node, props);
-
       return node;
@@ -216,4 +216,4 @@ },
     removeChild: function removeChild(node, parent) {
-      parent = parent || node.parentNode;
-      // Maybe has been removed when remove child
+      parent = parent || node.parentNode; // Maybe has been removed when remove child
+
       if (parent) {
@@ -230,2 +230,3 @@ parent.removeChild(node);
       var nextSibling = after.nextSibling;
+
       if (nextSibling) {
@@ -255,4 +256,3 @@ parent.insertBefore(node, nextSibling);
     },
-    removeAllEventListeners: function removeAllEventListeners(node) {
-      // noop
+    removeAllEventListeners: function removeAllEventListeners(node) {// noop
     },
@@ -306,4 +306,4 @@ removeAttribute: function removeAttribute(node, propKey) {
       for (var _prop in tranformedStyles) {
-        var transformValue = tranformedStyles[_prop];
-        // hack handle compatibility issue
+        var transformValue = tranformedStyles[_prop]; // hack handle compatibility issue
+
         if (Array.isArray(transformValue)) {
@@ -316,5 +316,6 @@ for (var i = 0; i < transformValue.length; i++) {
         }
-      }
-      // For trigger attribute mutation
-      node.style.cssText = (0, _styleToCss2.default)(node.style);
+      } // For trigger attribute mutation
+
+
+      node.style.cssText = (0, _styleToCss.default)(node.style);
     },
@@ -328,2 +329,3 @@ beforeRender: function beforeRender() {
         var value = props[prop];
+
         if (prop === CHILDREN) {
@@ -348,2 +350,2 @@ continue;
 
-module.exports = exports['default'];
+exports.default = _default;

lib/style-to-css.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -12,9 +12,10 @@ Object.defineProperty(exports, "__esModule", {
   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 + ';');
+    css = css + "".concat(prop, ":").concat(val, ";");
   }
+
   return css;
-}
-module.exports = exports['default'];
+}

package.json

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

src/create-document.js

@@ -42,7 +42,11 @@ import styleToCSS from './style-to-css';
 let resolved = typeof Promise !== 'undefined' && Promise.resolve();
-const setImmediate = resolved
-  ? f => {
-    resolved.then(f);
-  }
-  : setTimeout;
+const setImmediate = self && typeof self.setImmediate === 'function' ? self.setImmediate :
+  resolved
+    ? f => {
+      resolved.then(f);
+    }
+    : function(cb) {
+      return setTimeout(cb, 0);
+    }
+;
 const ELEMENT_NODE = 1;
@@ -73,3 +77,3 @@ const TEXT_NODE = 3;
           pendingMutations = true;
-          setImmediate(flushMutations);
+          setImmediate(flushMutations, 0);
         }
@@ -130,3 +134,3 @@ }
     ];
-    let nextProperties = '';
+    let nextProperties = {};
     let nextTranfrom = '';
@@ -137,8 +141,21 @@ let transformActions = [];
     animationGroup.animation.map(prop => {
-      if (notBelongedToTransform.indexOf(prop[0]) > -1) {
-        nextProperties += prop[0] + ':' + prop[1][0] + ';';
+      let [name, value] = prop;
+
+      if (notBelongedToTransform.indexOf(name) > -1) {
+        let unit = '';
+        /**
+         * Tip:
+         * Currently, we are not supprt custom unit
+         */
+        if (['opacity', 'backgroundColor'].indexOf(name) < 0) {
+          unit = 'px';
+        } else if (name === 'backgroundColor') {
+          name = 'background-color';
+        }
+
+        nextProperties[name] = value + unit;
       } else {
         transformActions.push({
-          name: prop[0],
-          value: prop[1]
+          name,
+          value
         });
@@ -165,5 +182,3 @@ }
 
-      if (
-        ['rotate', 'scale', 'translate', 'skew'].indexOf(name) > -1
-      ) {
+      if (['rotate', 'scale', 'translate', 'skew'].indexOf(name) > -1) {
         // if the rotate only has one param, it equals to rotateZ
@@ -181,9 +196,10 @@ if (name === 'rotate' && value.length === 1) {
         patchTransform[`${name}Y`] = (value[1] || defaultVal) + unit;
-      } else if (
-        ['scale3d', 'translate3d'].indexOf(name) > -1
-      ) {
+      } else if (['scale3d', 'translate3d'].indexOf(name) > -1) {
         // three args
-        patchTransform[name] = value.map((i) => `${i || defaultVal}${unit}`).join(',');
+        patchTransform[name] = value
+          .map(i => `${i || defaultVal}${unit}`)
+          .join(',');
       } else if ('rotate3d' === name) {
-        patchTransform[name] = value.map((i) => `${i || defaultVal}${unit}`).join(',') + 'deg';
+        patchTransform[name] =
+          value.map(i => `${i || defaultVal}${unit}`).join(',') + 'deg';
       } else if (['matrix', 'matrix3d'].indexOf(name) > -1) {
@@ -205,10 +221,43 @@ nextTranfrom += ` ${name}(${value.join(',')})`;
      * before every animationGroup setTimeout 16ms
+     *
+     * it shouldn't just assignment cssText
+     * but parse cssText
      */
+
     setTimeout(() => {
-      const { duration, timeFunction, delay, transformOrigin } = animationGroup.config;
+      const {
+        duration,
+        timeFunction,
+        delay,
+        transformOrigin
+      } = animationGroup.config;
+      let properties = {};
 
+      if (node.style.cssText) {
+        const propList = node.style.cssText.replace(/;/g, ':').split(':');
+        const style = {};
+        const transformProperties = [
+          'transition',
+          'transform',
+          'transform-origin'
+        ];
+        // traverse all properties that aren't about transform
+        propList.forEach((prop, index) => {
+          if (
+            prop &&
+            index % 2 === 0 &&
+            transformProperties.indexOf(prop) < 0
+          ) {
+            style[prop] = propList[index + 1];
+          }
+        });
+        // merge nextProperties into style
+        properties = Object.assign(style, nextProperties);
+      }
+
       Object.assign(node.style, {
         transition: `all ${duration}ms ${timeFunction} ${delay}ms`,
         transformOrigin: transformOrigin,
-        transform: `${nextTranfrom} ${nextProperties}`,
+        transform: `${nextTranfrom}`,
+        ...properties
       });
@@ -215,0 +264,0 @@

src/dom-renderer.js

@@ -21,2 +21,11 @@ // feature-detect support for event listener options
 
+const UNBUBBLES = [
+  'appear',
+  'disappear',
+  'scroll'
+];
+function isUnbubbleEvent(evtName) {
+  return UNBUBBLES.indexOf(evtName) !== -1;
+}
+
 export default ({ worker, tagNamePrefix = '' }) => {
@@ -33,18 +42,69 @@ const NODES = new Map();
 
-  function addEvent(name) {
-    const registeredCount = registeredEventCounts[name];
+  function addEvent(name, vnode) {
+    if (isUnbubbleEvent(name)) {
+      addUnbubbleEvent(name, vnode);
+    } else {
+      const registeredCount = registeredEventCounts[name];
 
-    if (!registeredCount) {
-      registeredEventCounts[name] = 1;
-      // Top-level register
-      document.addEventListener(name, eventProxyHandler, EVENT_OPTIONS);
+      if (!registeredCount) {
+        registeredEventCounts[name] = 1;
+        // Top-level register
+        document.addEventListener(name, eventProxyHandler, EVENT_OPTIONS);
+      } else {
+        registeredEventCounts[name]++;
+      }
+    }
+  }
+
+  function removeEvent(name, vnode) {
+    if (isUnbubbleEvent(name)) {
+      removeUnbubbleEvent(name, vnode);
     } else {
-      registeredEventCounts[name]++;
+      registeredEventCounts[name]--;
+      if (registeredEventCounts[name] === 0) {
+        document.removeEventListener(name, eventProxyHandler);
+      }
     }
   }
 
-  function removeEvent() {
-    registeredEventCounts[name]--;
-    if (registeredEventCounts[name] === 0) {
-      document.removeEventListener(name, eventProxyHandler);
+  const unbubbleEventStore = {};
+  function addUnbubbleEvent(name, vnode) {
+    const evtStore = unbubbleEventStore[name] = unbubbleEventStore[name] || {};
+    // el may not add to DOM Tree
+    setTimeout(() => {
+      const el = getNode(vnode);
+      if (el) {
+        el.addEventListener(name, evtStore[vnode.$$id] = function(evt) {
+          const {
+            bottom, height,
+            left, right,
+            top, width,
+            x, y,
+          } = evt.target.getBoundingClientRect();
+          const target = { $$id: el.$$id };
+          worker.postMessage({
+            type: 'event',
+            event: {
+              type: name,
+              target,
+              currentTarget: target,
+              detail: {
+                bottom, height,
+                left, right,
+                top, width,
+                x, y,
+              }
+            }
+          });
+        });
+      }
+    }, 0);
+  }
+
+  function removeUnbubbleEvent(name, vnode) {
+    const evtStore = unbubbleEventStore[name] = unbubbleEventStore[name] || {};
+    if (evtStore[vnode.$$id]) {
+      const el = getNode(vnode);
+      el && el.removeEventListener(name, evtStore[vnode.$$id]);
+      delete evtStore[vnode.$$id];
     }
@@ -172,3 +232,3 @@ }
         for (let i = 0; i < vnode.events.length; i++) {
-          addEvent(vnode.events[i]);
+          addEvent(vnode.events[i], vnode);
         }
@@ -232,6 +292,6 @@ }
     addEvent({ target, eventName }) {
-      addEvent(eventName);
+      addEvent(eventName, target);
     },
     removeEvent({ target, eventName }) {
-      removeEvent(eventName);
+      removeEvent(eventName, target);
     },
@@ -238,0 +298,0 @@ canvasRenderingContext2D({ target, method, args, properties }) {

No alert changes

Improved metrics

Total package byte prevSize

82003

increased by11.76%

Lines of code

2511

increased by10.91%

No dependency changes