driver-worker - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

lib/create-document.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,8 +6,92 @@ 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 global = typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : new Function('return this')();
+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 setImmediate = global.setImmediate || 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 +107,3 @@ var pendingMutations = false;
           match = target === ob._target;
+
       if (!match && ob._options.subtree) {
@@ -29,7 +114,9 @@ do {
       }
+
       if (match) {
         ob._records.push(record);
+
         if (!pendingMutations) {
           pendingMutations = true;
-          setImmediate(flushMutations);
+          setImmediate(flushMutations, 0);
         }
@@ -42,4 +129,6 @@ }
     pendingMutations = false;
+
     for (var i = observers.length; i--;) {
       var ob = observers[i];
+
       if (ob._records.length) {
@@ -51,3 +140,5 @@ ob.callback(ob.takeRecords());
 
-  var MutationObserver = function () {
+  var MutationObserver =
+  /*#__PURE__*/
+  function () {
     function MutationObserver(callback) {
@@ -61,3 +152,3 @@ _classCallCheck(this, MutationObserver);
     _createClass(MutationObserver, [{
-      key: 'observe',
+      key: "observe",
       value: function observe(target, options) {
@@ -70,3 +161,3 @@ this.disconnect();
     }, {
-      key: 'disconnect',
+      key: "disconnect",
       value: function disconnect() {
@@ -77,3 +168,3 @@ this._target = null;
     }, {
-      key: 'takeRecords',
+      key: "takeRecords",
       value: function takeRecords() {
@@ -91,3 +182,136 @@ return this._records.splice(0, this._records.length);
 
-  var Node = function () {
+  function isDataset(attr) {
+    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 nextTranfrom = '';
+    var transformActions = []; // actions about transform
+
+    animationGroup.animation.map(function (prop) {
+      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: name,
+          value: value
+        });
+      }
+    }); // match actions and update patchTransform
+
+    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["".concat(name, "Z")] = (value[0] || defaultVal) + unit;
+          return;
+        }
+
+        if (value.length === 3) {
+          patchTransform["".concat(name, "Z")] = (value[2] || 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 "".concat(i || defaultVal).concat(unit);
+        }).join(',');
+      } else if ('rotate3d' === name) {
+        patchTransform[name] = value.map(function (i) {
+          return "".concat(i || defaultVal).concat(unit);
+        }).join(',') + 'deg';
+      } else if (['matrix', 'matrix3d'].indexOf(name) > -1) {
+        nextTranfrom += " ".concat(name, "(").concat(value.join(','), ")");
+      } else {
+        // key = val
+        patchTransform[name] = value[0] + unit;
+      }
+    }); // stitching patchTransform into a string
+
+    Object.keys(patchTransform).forEach(function (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 () {
+      var _animationGroup$confi = animationGroup.config,
+          duration = _animationGroup$confi.duration,
+          timeFunction = _animationGroup$confi.timeFunction,
+          delay = _animationGroup$confi.delay,
+          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
+
+        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: "".concat(nextTranfrom)
+      }, properties));
+      node.style.cssText = (0, _styleToCss.default)(node.style);
+    }, 16);
+  }
+
+  var Node =
+  /*#__PURE__*/
+  function () {
     function Node(nodeType, nodeName) {
@@ -102,3 +326,3 @@ _classCallCheck(this, Node);
     _createClass(Node, [{
-      key: 'appendChild',
+      key: "appendChild",
       value: function appendChild(child) {
@@ -109,3 +333,3 @@ this.insertBefore(child);
     }, {
-      key: 'insertBefore',
+      key: "insertBefore",
       value: function insertBefore(child, ref) {
@@ -117,6 +341,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]
+          });
         }
@@ -127,3 +356,3 @@
     }, {
-      key: 'replaceChild',
+      key: "replaceChild",
       value: function replaceChild(child, ref) {
@@ -137,10 +366,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() {
@@ -150,3 +381,3 @@ if (this.parentNode) this.parentNode.removeChild(this);
     }, {
-      key: 'nextSibling',
+      key: "nextSibling",
       get: function get() {
@@ -157,3 +388,3 @@ var p = this.parentNode;
     }, {
-      key: 'previousSibling',
+      key: "previousSibling",
       get: function get() {
@@ -164,3 +395,3 @@ var p = this.parentNode;
     }, {
-      key: 'firstChild',
+      key: "firstChild",
       get: function get() {
@@ -170,3 +401,3 @@ return this.childNodes[0];
     }, {
-      key: 'lastChild',
+      key: "lastChild",
       get: function get() {
@@ -180,10 +411,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
 
@@ -195,5 +429,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;
@@ -209,10 +445,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
 
@@ -222,3 +461,3 @@ _this2.attributes = [];
       _this2.style = {};
-      Object.defineProperty(_this2, 'className', {
+      Object.defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), 'className', {
         set: function set(val) {
@@ -231,2 +470,25 @@ _this2.setAttribute('class', val);
       });
+      Object.defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), 'animation', {
+        set: function set(queues) {
+          var _this3 = this;
+
+          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(this, queues.shift());
+              this.addEventListener('transitionend', handleAnimationQueue);
+            }
+          }
+        },
+        get: function get() {
+          return _this2.getAttribute('animation');
+        }
+      });
       Object.defineProperty(_this2.style, 'cssText', {
@@ -244,3 +506,3 @@ set: function set(val) {
     _createClass(Element, [{
-      key: 'setAttribute',
+      key: "setAttribute",
       value: function setAttribute(key, value) {
@@ -252,3 +514,3 @@ if (value !== this.getAttribute(key)) {
     }, {
-      key: 'getAttribute',
+      key: "getAttribute",
       value: function getAttribute(key) {
@@ -258,3 +520,3 @@ return this.getAttributeNS(null, key);
     }, {
-      key: 'removeAttribute',
+      key: "removeAttribute",
       value: function removeAttribute(key) {
@@ -264,11 +526,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;
@@ -278,6 +542,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) {
@@ -288,26 +556,37 @@ 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) {
-        var t = event.currentTarget = this;
+        event.stopPropagation = function () {
+          event.bubbles = false;
+        };
+
+        var t = event.target = event.currentTarget = this;
         var c = event.cancelable;
-        var l = void 0;
-        var i = void 0;
+        var l;
+        var i;
+
         do {
@@ -318,10 +597,22 @@ l = t.eventListeners && t.eventListeners[toLower(event.type)];
           }
-        } while (event.bubbles && !(c && event._stop) && (event.target = t = t.parentNode));
+        } while (event.bubbles && !(c && event._stop) && (event.currentTarget = t = t.parentNode));
+
         return !event.defaultPrevented;
       }
     }, {
-      key: 'children',
+      key: "children",
       get: function get() {
         return this.childNodes.filter(isElement);
       }
+    }, {
+      key: "dataset",
+      get: function get() {
+        var dataset = {};
+        this.attributes.filter(isDataset).forEach(function (_ref2) {
+          var name = _ref2.name,
+              value = _ref2.value;
+          dataset[camelCase(name.slice(5))] = value;
+        });
+        return dataset;
+      }
     }]);
@@ -332,3 +623,5 @@
 
-  var Document = function (_Element) {
+  var Document =
+  /*#__PURE__*/
+  function (_Element) {
     _inherits(Document, _Element);
@@ -339,3 +632,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
     }
@@ -346,10 +639,13 @@
 
-  var Comment = function (_Node3) {
+  var Comment =
+  /*#__PURE__*/
+  function (_Node3) {
     _inherits(Comment, _Node3);
 
     function Comment(text) {
+      var _this4;
+
       _classCallCheck(this, Comment);
 
-      var _this4 = _possibleConstructorReturn(this, (Comment.__proto__ || Object.getPrototypeOf(Comment)).call(this, COMMENT_NODE, '#comment'));
-
+      _this4 = _possibleConstructorReturn(this, _getPrototypeOf(Comment).call(this, COMMENT_NODE, '#comment'));
       _this4.data = text;
@@ -362,3 +658,5 @@ return _this4;
 
-  var Event = function () {
+  var Event =
+  /*#__PURE__*/
+  function () {
     function Event(type, opts) {
@@ -373,3 +671,3 @@ _classCallCheck(this, Event);
     _createClass(Event, [{
-      key: 'stopPropagation',
+      key: "stopPropagation",
       value: function stopPropagation() {
@@ -379,3 +677,3 @@ this._stop = true;
     }, {
-      key: 'stopImmediatePropagation',
+      key: "stopImmediatePropagation",
       value: function stopImmediatePropagation() {
@@ -385,3 +683,3 @@ this._end = this._stop = true;
     }, {
-      key: 'preventDefault',
+      key: "preventDefault",
       value: function preventDefault() {
@@ -401,3 +699,2 @@ this.defaultPrevented = true;
     this.canvas = vnode;
-
     var propertyValues = {
@@ -423,7 +720,5 @@ 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) {
@@ -438,10 +733,8 @@ Object.defineProperty(_this5, 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) {
       _this5[method] = function () {
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
@@ -453,3 +746,3 @@ }
           args: args,
-          properties: propertyValues
+          properties: Object.assign({}, propertyValues)
         });
@@ -460,19 +753,21 @@ };
 
-  var CanvasElement = function (_Element2) {
+  var CanvasElement =
+  /*#__PURE__*/
+  function (_Element2) {
     _inherits(CanvasElement, _Element2);
 
     function CanvasElement() {
-      var _ref;
+      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, (_ref = CanvasElement.__proto__ || Object.getPrototypeOf(CanvasElement)).call.apply(_ref, [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) {
@@ -498,2 +793,3 @@ if (contextType === '2d') {
     }
+
     return new Element(null, String(type).toUpperCase());
@@ -524,3 +820,2 @@ }
     });
-
     assign(document, {
@@ -532,3 +827,2 @@ createComment: createComment,
     });
-
     document.appendChild(document.documentElement = createElement('html'));
@@ -541,48 +835,2 @@ document.documentElement.appendChild(document.head = createElement('head'));
   return createDocument();
-};
-
-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"); } }
-
-function assign(obj, props) {
-  for (var i in props) {
-    obj[i] = props[i];
-  }
-}
-
-function toLower(str) {
-  return String(str).toLowerCase();
-}
-
-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, {
     }
+
   });
@@ -23,2 +26,3 @@ } catch (e) {}
 var TEXT_CONTENT_ATTR = TEXT_CONTENT in document ? TEXT_CONTENT : 'nodeValue';
+var TOUCH_EVENTS = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
 var EVENT_OPTIONS = supportsPassive ? {
@@ -28,8 +32,12 @@ capture: true,
 } : 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,37 +53,143 @@ 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
+    };
   }
 
+  function serializeTouchList(touchList) {
+    var touches = [];
+
+    for (var i = 0, l = touchList.length; i < l; i++) {
+      var _touchList$i = touchList[i],
+          clientX = _touchList$i.clientX,
+          clientY = _touchList$i.clientY,
+          pageX = _touchList$i.pageX,
+          pageY = _touchList$i.pageY,
+          identifier = _touchList$i.identifier,
+          target = _touchList$i.target;
+      touches.push({
+        clientX: clientX,
+        clientY: clientY,
+        pageX: pageX,
+        pageY: pageY,
+        identifier: identifier,
+        // instance id of changed target
+        $$id: target.$$id
+      });
+    }
+
+    return touches;
+  }
+
   function eventProxyHandler(e) {
     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;
-    // CustomEvent detail
+    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
+
+
     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;
@@ -85,2 +199,7 @@ }
 
+    if (TOUCH_EVENTS.indexOf(e.type) !== -1) {
+      event.touches = serializeTouchList(e.touches);
+      event.changedTouches = serializeTouchList(e.changedTouches);
+    }
+
     worker.postMessage({
@@ -95,7 +214,12 @@ type: 'event',
       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
+          });
         }
@@ -107,3 +231,4 @@ }
   function createNode(vnode) {
-    var node = void 0;
+    var node;
+
     if (vnode.nodeType === 3) {
@@ -113,2 +238,3 @@ node = document.createTextNode(vnode.data);
       node = document.createElement(tagNamePrefix + vnode.nodeName);
+
       if (vnode.className) {
@@ -146,3 +272,3 @@ node.className = vnode.className;
         for (var _i3 = 0; _i3 < vnode.events.length; _i3++) {
-          _addEvent(vnode.events[_i3]);
+          _addEvent(vnode.events[_i3], vnode);
         }
@@ -157,6 +283,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 = {
@@ -168,5 +295,10 @@ childList: function childList(_ref2) {
           nextSibling = _ref2.nextSibling;
+      var vnode = target;
 
-      var vnode = target;
+      if (vnode && vnode.nodeName === 'BODY') {
+        document.body.$$id = vnode.$$id;
+      }
+
       var parent = getNode(vnode);
+
       if (removedNodes) {
@@ -181,5 +313,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);
@@ -193,8 +327,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;
@@ -208,3 +342,2 @@ } else {
           newValue = _ref4.newValue;
-
       var vnode = target;
@@ -218,3 +351,3 @@ var node = getNode(vnode);
 
-      _addEvent(eventName);
+      _addEvent(eventName, target);
     },
@@ -225,3 +358,3 @@ removeEvent: function removeEvent(_ref6) {
 
-      _removeEvent(eventName);
+      _removeEvent(eventName, target);
     },
@@ -233,3 +366,2 @@ canvasRenderingContext2D: function canvasRenderingContext2D(_ref7) {
           properties = _ref7.properties;
-
       var vnode = target;
@@ -255,6 +387,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++) {
@@ -275,2 +408,2 @@ // apply mutation
 
-module.exports = exports['default'];
+exports.default = _default;

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,15 +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 _createDocument = require('./create-document');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _createDocument2 = _interopRequireDefault(_createDocument);
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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); }
+
 var ELEMENT_NODE = 1;
@@ -34,22 +37,7 @@ var TEXT_NODE = 3;
 
-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) {
+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();
@@ -59,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;
@@ -70,2 +58,7 @@ if (!id) return null;
     var target = getNode(event.target);
+
+    if (/^touch/.test(event.type)) {
+      convertTouchTarget(event);
+    }
+
     if (target) {
@@ -76,6 +69,28 @@ event.target = target;
   }
+  /**
+   * convert Touch#$$id to targetNode
+   */
 
+
+  function convertTouchTarget(evt) {
+    function extractTouchListTarget(touchList) {
+      for (var i = 0, l = touchList.length; i < l; i++) {
+        if ('$$id' in touchList[i]) {
+          touchList[i].target = getNode(touchList[i].$$id);
+          delete touchList[i].$$id;
+        }
+      }
+    }
+
+    if (evt.touches) {
+      extractTouchListTarget(evt.touches);
+    }
+
+    if (evt.changedTouches) {
+      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) {
@@ -100,3 +115,3 @@ return sanitize(o, prop);
       if (nodeType === ELEMENT_NODE) {
-        out = _extends({}, out, {
+        out = _objectSpread({}, out, {
           events: Object.keys(obj.eventListeners || {}),
@@ -120,2 +135,3 @@ attributes: obj.attributes,
       var mutation = mutations[i];
+
       for (var j = TO_SANITIZE.length; j--;) {
@@ -126,7 +142,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) {
@@ -140,2 +160,3 @@ var data = _ref2.data;
         break;
+
       case 'event':
@@ -146,8 +167,7 @@ handleEvent(data.event);
   });
-
   return {
+    document: document,
     deviceWidth: null,
     viewportWidth: 750,
     eventRegistry: {},
-
     getDeviceWidth: function getDeviceWidth() {
@@ -186,5 +206,3 @@ return this.deviceWidth || document.documentElement.clientWidth;
       var props = component.props;
-
       this.setNativeProps(node, props);
-
       return node;
@@ -196,4 +214,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) {
@@ -210,2 +228,3 @@ parent.removeChild(node);
       var nextSibling = after.nextSibling;
+
       if (nextSibling) {
@@ -235,4 +254,3 @@ parent.insertBefore(node, nextSibling);
     },
-    removeAllEventListeners: function removeAllEventListeners(node) {
-      // noop
+    removeAllEventListeners: function removeAllEventListeners(node) {// noop
     },
@@ -286,4 +304,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)) {
@@ -296,5 +314,6 @@ for (var i = 0; i < transformValue.length; i++) {
         }
-      }
-      // For trigger attribute mutation
-      node.style.cssText = styleToCSS(node.style);
+      } // For trigger attribute mutation
+
+
+      node.style.cssText = (0, _styleToCss.default)(node.style);
     },
@@ -308,2 +327,3 @@ beforeRender: function beforeRender() {
         var value = props[prop];
+
         if (prop === CHILDREN) {
@@ -328,2 +348,2 @@ continue;
 
-module.exports = exports['default'];
+exports.default = _default;

package.json

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

src/create-document.js

@@ -0,1 +1,6 @@
+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\-/;
 function assign(obj, props) {
@@ -9,2 +14,13 @@ for (let i in props) obj[i] = props[i];
 
+const CAMELCASE_REG = /\-[a-z]/g;
+const CamelCaseCache = {};
+function camelCase(str) {
+  return (
+    CamelCaseCache[str] ||
+    (CamelCaseCache[str] = str.replace(CAMELCASE_REG, $1 =>
+      $1.slice(1).toUpperCase()
+    ))
+  );
+}
+
 function splice(arr, item, add, byValueOnly) {
@@ -28,8 +44,6 @@ let i = arr ? findWhere(arr, item, true, byValueOnly) : -1;
 
-let resolved = typeof Promise !== 'undefined' && Promise.resolve();
-const setImmediate = resolved
-  ? f => {
-    resolved.then(f);
-  }
-  : setTimeout;
+const setImmediate = global.setImmediate || function(cb) {
+  return setTimeout(cb, 0);
+};
+
 const ELEMENT_NODE = 1;
@@ -48,3 +62,3 @@ const TEXT_NODE = 3;
 
-    for (let i = observers.length; i--; ) {
+    for (let i = observers.length; i--;) {
       let ob = observers[i],
@@ -61,3 +75,3 @@ match = target === ob._target;
           pendingMutations = true;
-          setImmediate(flushMutations);
+          setImmediate(flushMutations, 0);
         }
@@ -70,3 +84,3 @@ }
     pendingMutations = false;
-    for (let i = observers.length; i--; ) {
+    for (let i = observers.length; i--;) {
       let ob = observers[i];
@@ -102,3 +116,149 @@ if (ob._records.length) {
   }
+  function isDataset(attr) {
+    return IS_DATASET_REG.test(attr.name);
+  }
 
+  const patchTransform = {};
+  function dispatchAnimationToStyle(node, animationGroup) {
+    // properties aren't belonged to transform
+    const notBelongedToTransform = [
+      'opacity',
+      'backgroundColor',
+      'width',
+      'height',
+      'top',
+      'left',
+      'bottom',
+      'right'
+    ];
+    let nextProperties = {};
+    let nextTranfrom = '';
+    let transformActions = [];
+
+    // actions about transform
+    animationGroup.animation.map(prop => {
+      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,
+          value
+        });
+      }
+    });
+
+    // match actions and update patchTransform
+    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 {
+        // key = val
+        patchTransform[name] = value[0] + unit;
+      }
+    });
+
+    // stitching patchTransform into a string
+    Object.keys(patchTransform).forEach(name => {
+      nextTranfrom += ` ${name}(${patchTransform[name]})`;
+    });
+
+    /**
+     * Merge onto style cssText
+     * before every animationGroup setTimeout 16ms
+     *
+     * it shouldn't just assignment cssText
+     * but parse cssText
+     */
+
+    setTimeout(() => {
+      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}`,
+        ...properties
+      });
+
+      node.style.cssText = styleToCSS(node.style);
+    }, 16);
+  }
+
   class Node {
@@ -185,2 +345,20 @@ constructor(nodeType, nodeName) {
       });
+      Object.defineProperty(this, 'animation', {
+        set(queues) {
+          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());
+              this.addEventListener('transitionend', handleAnimationQueue);
+            }
+          }
+        },
+        get: () => this.getAttribute('animation')
+      });
       Object.defineProperty(this.style, 'cssText', {
@@ -198,2 +376,10 @@ set: val => {
 
+    get dataset() {
+      const dataset = {};
+      this.attributes.filter(isDataset).forEach(({ name, value }) => {
+        dataset[camelCase(name.slice(5))] = value;
+      });
+      return dataset;
+    }
+
     setAttribute(key, value) {
@@ -252,3 +438,6 @@ if (value !== this.getAttribute(key)) {
     dispatchEvent(event) {
-      let t = event.currentTarget = this;
+      event.stopPropagation = () => {
+        event.bubbles = false;
+      };
+      let t = event.target = event.currentTarget = this;
       let c = event.cancelable;
@@ -260,3 +449,3 @@ let l;
         if (l)
-          for (i = l.length; i--; ) {
+          for (i = l.length; i--;) {
             if ((l[i].call(t, event) === false || event._end) && c) break;
@@ -267,3 +456,3 @@ }
         !(c && event._stop) &&
-        (event.target = t = t.parentNode)
+        (event.currentTarget = t = t.parentNode)
       );
@@ -331,5 +520,26 @@ return !event.defaultPrevented;
       // context properties
-      const properties = ['direction', 'fillStyle', 'filter', 'font', 'globalAlpha', 'globalCompositeOperation', 'imageSmoothingEnabled', 'imageSmoothingQuality', 'lineCap', 'lineDashOffset', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseline'];
+      const properties = [
+        'direction',
+        'fillStyle',
+        'filter',
+        'font',
+        'globalAlpha',
+        'globalCompositeOperation',
+        'imageSmoothingEnabled',
+        'imageSmoothingQuality',
+        'lineCap',
+        'lineDashOffset',
+        'lineJoin',
+        'lineWidth',
+        'miterLimit',
+        'shadowBlur',
+        'shadowColor',
+        'shadowOffsetX',
+        'shadowOffsetY',
+        'strokeStyle',
+        'textAlign',
+        'textBaseline'
+      ];
 
-      properties.forEach((property) => {
+      properties.forEach(property => {
         Object.defineProperty(this, property, {
@@ -346,5 +556,51 @@ get: function() {
       // context api
-      const 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'];
+      const 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((method) => {
+      methods.forEach(method => {
         this[method] = (...args) => {
@@ -354,3 +610,3 @@ mutation(vnode, 'canvasRenderingContext2D', {
             args: args,
-            properties: propertyValues
+            properties: Object.assign({}, propertyValues)
           });
@@ -357,0 +613,0 @@ };

src/dom-renderer.js

@@ -9,6 +9,7 @@ // feature-detect support for event listener options
   });
-} catch (e) {}
+} catch (e) { }
 
 const TEXT_CONTENT = 'textContent';
 const TEXT_CONTENT_ATTR = TEXT_CONTENT in document ? TEXT_CONTENT : 'nodeValue';
+const TOUCH_EVENTS = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
 const EVENT_OPTIONS = supportsPassive
@@ -21,2 +22,11 @@ ? {
 
+const UNBUBBLES = [
+  'appear',
+  'disappear',
+  'scroll'
+];
+function isUnbubbleEvent(evtName) {
+  return UNBUBBLES.indexOf(evtName) !== -1;
+}
+
 export default ({ worker, tagNamePrefix = '' }) => {
@@ -33,18 +43,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];
     }
@@ -62,2 +123,22 @@ }
 
+  function serializeTouchList(touchList) {
+    const touches = [];
+    for (let i = 0, l = touchList.length; i < l; i++) {
+      const {
+        clientX, clientY,
+        pageX, pageY,
+        identifier, target
+      } = touchList[i];
+
+      touches.push({
+        clientX, clientY,
+        pageX, pageY,
+        identifier,
+        // instance id of changed target
+        $$id: target.$$id,
+      });
+    }
+    return touches;
+  }
+
   function eventProxyHandler(e) {
@@ -68,2 +149,9 @@ if (e.type === 'click' && touch) return false;
     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
@@ -83,2 +171,7 @@ if (e.detail) event.detail = e.detail;
 
+    if (TOUCH_EVENTS.indexOf(e.type) !== -1) {
+      event.touches = serializeTouchList(e.touches);
+      event.changedTouches = serializeTouchList(e.changedTouches);
+    }
+
     worker.postMessage({
@@ -96,3 +189,3 @@ type: 'event',
           Math.pow(t.pageX - touch.pageX, 2) +
-            Math.pow(t.pageY - touch.pageY, 2)
+          Math.pow(t.pageY - touch.pageY, 2)
         );
@@ -144,3 +237,3 @@ if (delta < 10) {
         for (let i = 0; i < vnode.events.length; i++) {
-          addEvent(vnode.events[i]);
+          addEvent(vnode.events[i], vnode);
         }
@@ -162,5 +255,10 @@ }
       let vnode = target;
+
+      if (vnode && vnode.nodeName === 'BODY') {
+        document.body.$$id = vnode.$$id;
+      }
+
       let parent = getNode(vnode);
       if (removedNodes) {
-        for (let i = removedNodes.length; i--; ) {
+        for (let i = removedNodes.length; i--;) {
           parent.removeChild(getNode(removedNodes[i]));
@@ -200,6 +298,6 @@ }
     addEvent({ target, eventName }) {
-      addEvent(eventName);
+      addEvent(eventName, target);
     },
     removeEvent({ target, eventName }) {
-      removeEvent(eventName);
+      removeEvent(eventName, target);
     },
@@ -206,0 +304,0 @@ canvasRenderingContext2D({ target, method, args, properties }) {

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 }) => {
@@ -56,2 +45,7 @@ let document = createDocument();
     let target = getNode(event.target);
+
+    if (/^touch/.test(event.type)) {
+      convertTouchTarget(event);
+    }
+
     if (target) {
@@ -63,2 +57,23 @@ event.target = target;
 
+  /**
+   * convert Touch#$$id to targetNode
+   */
+  function convertTouchTarget(evt) {
+    function extractTouchListTarget(touchList) {
+      for (let i = 0, l = touchList.length; i < l; i++) {
+        if ('$$id' in touchList[i]) {
+          touchList[i].target = getNode(touchList[i].$$id);
+          delete touchList[i].$$id;
+        }
+      }
+    }
+
+    if (evt.touches) {
+      extractTouchListTarget(evt.touches);
+    }
+    if (evt.changedTouches) {
+      extractTouchListTarget(evt.changedTouches);
+    }
+  }
+
   function sanitize(obj, prop) {
@@ -102,5 +117,5 @@ if (!obj || typeof obj !== 'object') return obj;
   let mutationObserver = new MutationObserver(mutations => {
-    for (let i = mutations.length; i--; ) {
+    for (let i = mutations.length; i--;) {
       let mutation = mutations[i];
-      for (let j = TO_SANITIZE.length; j--; ) {
+      for (let j = TO_SANITIZE.length; j--;) {
         let prop = TO_SANITIZE[j];
@@ -128,2 +143,3 @@ mutation[prop] = sanitize(mutation[prop], prop);
   return {
+    document,
     deviceWidth: null,
@@ -259,3 +275,3 @@ viewportWidth: 750,
           node[propKey] = null;
-        } catch (e) {}
+        } catch (e) { }
       }
@@ -262,0 +278,0 @@

New 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

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

81901

increased by37.34%

Number of package files

10

increased by25%

Lines of code

2503

increased by37.75%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes