driver-worker - npm Package Compare versions

Comparing version 0.1.0 to 0.6.1-1

lib/dom-renderer.js

@@ -69,2 +69,4 @@ 'use strict';
     if (e.target) event.target = e.target.$$id;
+    // CustomEvent detail
+    if (e.detail) event.detail = e.detail;
     for (var i in e) {
@@ -71,0 +73,0 @@ var v = e[i];

lib/index.js

@@ -17,269 +17,274 @@ 'use strict';
 
-var document = (0, _createDocument2.default)();
-var MutationObserver = document.defaultView.MutationObserver;
-var COUNTER = 0;
-var NODES = new Map();
 var TO_SANITIZE = ['addedNodes', 'removedNodes', 'nextSibling', 'previousSibling', 'target'];
 
-function getNode(node) {
-  var id = void 0;
-  if (node && (typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object') id = node.$$id;
-  if (typeof node === 'string') id = node;
-  if (!id) return null;
-  if (node.nodeName === 'BODY') return document.body;
-  return NODES.get(id);
-}
+var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
+var CLASS_NAME = 'className';
+var CLASS = 'class';
+var STYLE = 'style';
+var CHILDREN = 'children';
+var EVENT_PREFIX_REGEXP = /^on[A-Z]/;
 
-function handleEvent(event) {
-  var target = getNode(event.target);
-  if (target) {
-    event.target = target;
-    event.bubbles = true;
-    target.dispatchEvent(event);
-  }
-}
+var ADD_EVENT = 'addEvent';
+var REMOVE_EVENT = 'removeEvent';
 
-function sanitize(obj) {
-  if (!obj || (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object') return obj;
+exports.default = function (_ref) {
+  var postMessage = _ref.postMessage,
+      addEventListener = _ref.addEventListener;
 
-  if (Array.isArray(obj)) return obj.map(sanitize);
+  var document = (0, _createDocument2.default)();
+  var MutationObserver = document.defaultView.MutationObserver;
 
-  if (obj instanceof document.defaultView.Node) {
-    var id = obj.$$id;
-    if (!id) {
-      id = obj.$$id = String(++COUNTER);
+  var NODES = new Map();
+  var COUNTER = 0;
+
+  function getNode(node) {
+    var id = void 0;
+    if (node && (typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object') id = node.$$id;
+    if (typeof node === 'string') id = node;
+    if (!id) return null;
+    if (node.nodeName === 'BODY') return document.body;
+    return NODES.get(id);
+  }
+
+  function handleEvent(event) {
+    var target = getNode(event.target);
+    if (target) {
+      event.target = target;
+      target.dispatchEvent(event);
     }
-    NODES.set(id, obj);
   }
 
-  var out = {
-    $$id: obj.$$id,
-    events: Object.keys(obj.eventListeners || {}),
-    attributes: obj.attributes,
-    nodeName: obj.nodeName,
-    nodeType: obj.nodeType,
-    style: obj.style,
-    childNodes: obj.childNodes,
-    data: obj.data
-  };
+  function sanitize(obj) {
+    if (!obj || (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object') return obj;
 
-  if (out.childNodes && out.childNodes.length) {
-    out.childNodes = sanitize(out.childNodes);
-  }
+    if (Array.isArray(obj)) return obj.map(sanitize);
 
-  return out;
-}
+    if (obj instanceof document.defaultView.Node) {
+      var id = obj.$$id;
+      if (!id) {
+        id = obj.$$id = String(++COUNTER);
+      }
+      NODES.set(id, obj);
+    }
 
-var mutationObserver = new MutationObserver(function (mutations) {
-  for (var i = mutations.length; i--;) {
-    var mutation = mutations[i];
-    for (var j = TO_SANITIZE.length; j--;) {
-      var prop = TO_SANITIZE[j];
-      mutation[prop] = sanitize(mutation[prop]);
+    var out = {
+      $$id: obj.$$id,
+      events: Object.keys(obj.eventListeners || {}),
+      attributes: obj.attributes,
+      nodeName: obj.nodeName,
+      nodeType: obj.nodeType,
+      style: obj.style,
+      childNodes: obj.childNodes,
+      data: obj.data
+    };
+
+    if (out.childNodes && out.childNodes.length) {
+      out.childNodes = sanitize(out.childNodes);
     }
+
+    return out;
   }
-  send({ type: 'MutationRecord', mutations: mutations });
-});
 
-mutationObserver.observe(document, { subtree: true });
+  var mutationObserver = new MutationObserver(function (mutations) {
+    for (var i = mutations.length; i--;) {
+      var mutation = mutations[i];
+      for (var j = TO_SANITIZE.length; j--;) {
+        var prop = TO_SANITIZE[j];
+        mutation[prop] = sanitize(mutation[prop]);
+      }
+    }
+    send({ type: 'MutationRecord', mutations: mutations });
+  });
 
-function send(message) {
-  postMessage(JSON.parse(JSON.stringify(message)));
-}
+  mutationObserver.observe(document, { subtree: true });
 
-addEventListener('message', function (_ref) {
-  var data = _ref.data;
-
-  switch (data.type) {
-    case 'init':
-      document.URL = data.url;
-      document.documentElement.clientWidth = data.width;
-      break;
-    case 'event':
-      handleEvent(data.event);
-      break;
+  function send(message) {
+    postMessage(JSON.parse(JSON.stringify(message)));
   }
-});
 
-var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
-var CLASS_NAME = 'className';
-var CLASS = 'class';
-var STYLE = 'style';
-var CHILDREN = 'children';
-var EVENT_PREFIX_REGEXP = /^on[A-Z]/;
+  addEventListener('message', function (_ref2) {
+    var data = _ref2.data;
 
-var ADD_EVENT = 'addEvent';
-var REMOVE_EVENT = 'removeEvent';
+    switch (data.type) {
+      case 'init':
+        document.URL = data.url;
+        document.documentElement.clientWidth = data.width;
+        break;
+      case 'event':
+        handleEvent(data.event);
+        break;
+    }
+  });
 
-var Driver = {
-  deviceWidth: null,
-  viewportWidth: 750,
-  eventRegistry: {},
+  return {
+    deviceWidth: null,
+    viewportWidth: 750,
+    eventRegistry: {},
 
-  getDeviceWidth: function getDeviceWidth() {
-    return this.deviceWidth || document.documentElement.clientWidth;
-  },
-  setDeviceWidth: function setDeviceWidth(width) {
-    this.deviceWidth = width;
-  },
-  getViewportWidth: function getViewportWidth() {
-    return this.viewportWidth;
-  },
-  setViewportWidth: function setViewportWidth(width) {
-    this.viewportWidth = width;
-  },
-  getElementById: function getElementById(id) {
-    return document.getElementById(id);
-  },
-  createBody: function createBody() {
-    return document.body;
-  },
-  createComment: function createComment(content) {
-    return document.createComment(content);
-  },
-  createEmpty: function createEmpty() {
-    return this.createComment(' empty ');
-  },
-  createText: function createText(text) {
-    return document.createTextNode(text);
-  },
-  updateText: function updateText(node, text) {
-    node.textContent = text;
-  },
-  createElement: function createElement(component) {
-    var node = document.createElement(component.type);
-    var props = component.props;
+    getDeviceWidth: function getDeviceWidth() {
+      return this.deviceWidth || document.documentElement.clientWidth;
+    },
+    setDeviceWidth: function setDeviceWidth(width) {
+      this.deviceWidth = width;
+    },
+    getViewportWidth: function getViewportWidth() {
+      return this.viewportWidth;
+    },
+    setViewportWidth: function setViewportWidth(width) {
+      this.viewportWidth = width;
+    },
+    getElementById: function getElementById(id) {
+      return document.getElementById(id);
+    },
+    createBody: function createBody() {
+      return document.body;
+    },
+    createComment: function createComment(content) {
+      return document.createComment(content);
+    },
+    createEmpty: function createEmpty() {
+      return this.createComment(' empty ');
+    },
+    createText: function createText(text) {
+      return document.createTextNode(text);
+    },
+    updateText: function updateText(node, text) {
+      node.textContent = text;
+    },
+    createElement: function createElement(component) {
+      var node = document.createElement(component.type);
+      var props = component.props;
 
-    this.setNativeProps(node, props);
+      this.setNativeProps(node, props);
 
-    return node;
-  },
-  appendChild: function appendChild(node, parent) {
-    return parent.appendChild(node);
-  },
-  removeChild: function removeChild(node, parent) {
-    parent = parent || node.parentNode;
-    // Maybe has been removed when remove child
-    if (parent) {
-      parent.removeChild(node);
-    }
-  },
-  replaceChild: function replaceChild(newChild, oldChild, parent) {
-    parent = parent || oldChild.parentNode;
-    parent.replaceChild(newChild, oldChild);
-  },
-  insertAfter: function insertAfter(node, after, parent) {
-    parent = parent || after.parentNode;
-    var nextSibling = after.nextSibling;
-    if (nextSibling) {
-      parent.insertBefore(node, nextSibling);
-    } else {
-      parent.appendChild(node);
-    }
-  },
-  insertBefore: function insertBefore(node, before, parent) {
-    parent = parent || before.parentNode;
-    parent.insertBefore(node, before);
-  },
-  addEventListener: function addEventListener(node, eventName, eventHandler, props) {
-    if (this.eventRegistry[eventName]) {
-      return this.eventRegistry[eventName](ADD_EVENT, node, eventName, eventHandler, props);
-    } else {
-      return node.addEventListener(eventName, eventHandler);
-    }
-  },
-  removeEventListener: function removeEventListener(node, eventName, eventHandler, props) {
-    if (this.eventRegistry[eventName]) {
-      return this.eventRegistry[eventName](REMOVE_EVENT, node, eventName, eventHandler, props);
-    } else {
-      return node.removeEventListener(eventName, eventHandler);
-    }
-  },
-  removeAllEventListeners: function removeAllEventListeners(node) {
-    // noop
-  },
-  removeAttribute: function removeAttribute(node, propKey) {
-    if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      return node.innerHTML = null;
-    }
+      return node;
+    },
+    appendChild: function appendChild(node, parent) {
+      return parent.appendChild(node);
+    },
+    removeChild: function removeChild(node, parent) {
+      parent = parent || node.parentNode;
+      // Maybe has been removed when remove child
+      if (parent) {
+        parent.removeChild(node);
+      }
+    },
+    replaceChild: function replaceChild(newChild, oldChild, parent) {
+      parent = parent || oldChild.parentNode;
+      parent.replaceChild(newChild, oldChild);
+    },
+    insertAfter: function insertAfter(node, after, parent) {
+      parent = parent || after.parentNode;
+      var nextSibling = after.nextSibling;
+      if (nextSibling) {
+        parent.insertBefore(node, nextSibling);
+      } else {
+        parent.appendChild(node);
+      }
+    },
+    insertBefore: function insertBefore(node, before, parent) {
+      parent = parent || before.parentNode;
+      parent.insertBefore(node, before);
+    },
+    addEventListener: function addEventListener(node, eventName, eventHandler, props) {
+      if (this.eventRegistry[eventName]) {
+        return this.eventRegistry[eventName](ADD_EVENT, node, eventName, eventHandler, props);
+      } else {
+        return node.addEventListener(eventName, eventHandler);
+      }
+    },
+    removeEventListener: function removeEventListener(node, eventName, eventHandler, props) {
+      if (this.eventRegistry[eventName]) {
+        return this.eventRegistry[eventName](REMOVE_EVENT, node, eventName, eventHandler, props);
+      } else {
+        return node.removeEventListener(eventName, eventHandler);
+      }
+    },
+    removeAllEventListeners: function removeAllEventListeners(node) {
+      // noop
+    },
+    removeAttribute: function removeAttribute(node, propKey) {
+      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        return node.innerHTML = null;
+      }
 
-    if (propKey === CLASS_NAME) {
-      propKey = CLASS;
-    }
+      if (propKey === CLASS_NAME) {
+        propKey = CLASS;
+      }
 
-    if (propKey in node) {
-      try {
-        // Some node property is readonly when in strict mode
-        node[propKey] = null;
-      } catch (e) {}
-    }
+      if (propKey in node) {
+        try {
+          // Some node property is readonly when in strict mode
+          node[propKey] = null;
+        } catch (e) {}
+      }
 
-    node.removeAttribute(propKey);
-  },
-  setAttribute: function setAttribute(node, propKey, propValue) {
-    if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      return node.innerHTML = propValue.__html;
-    }
+      node.removeAttribute(propKey);
+    },
+    setAttribute: function setAttribute(node, propKey, propValue) {
+      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        return node.innerHTML = propValue.__html;
+      }
 
-    if (propKey === CLASS_NAME) {
-      propKey = CLASS;
-    }
-
-    if (propKey in node) {
-      try {
-        // Some node property is readonly when in strict mode
-        node[propKey] = propValue;
-      } catch (e) {
-        node.setAttribute(propKey, propValue);
+      if (propKey === CLASS_NAME) {
+        propKey = CLASS;
       }
-    } else {
-      node.setAttribute(propKey, propValue);
-    }
-  },
-  setStyles: function setStyles(node, styles) {
-    var tranformedStyles = {};
 
-    for (var prop in styles) {
-      var val = styles[prop];
-      tranformedStyles[prop] = (0, _styleUnit.convertUnit)(val, prop);
-    }
-
-    for (var _prop in tranformedStyles) {
-      var transformValue = tranformedStyles[_prop];
-      // hack handle compatibility issue
-      if (Array.isArray(transformValue)) {
-        for (var i = 0; i < transformValue.length; i++) {
-          node.style[_prop] = transformValue[i];
+      if (propKey in node) {
+        try {
+          // Some node property is readonly when in strict mode
+          node[propKey] = propValue;
+        } catch (e) {
+          node.setAttribute(propKey, propValue);
         }
       } else {
-        node.style[_prop] = transformValue;
+        node.setAttribute(propKey, propValue);
       }
-    }
-  },
-  beforeRender: function beforeRender() {
-    // Init rem unit
-    (0, _styleUnit.setRem)(this.getDeviceWidth() / this.getViewportWidth());
-  },
-  setNativeProps: function setNativeProps(node, props) {
-    for (var prop in props) {
-      var value = props[prop];
-      if (prop === CHILDREN) {
-        continue;
+    },
+    setStyles: function setStyles(node, styles) {
+      var tranformedStyles = {};
+
+      for (var prop in styles) {
+        var val = styles[prop];
+        tranformedStyles[prop] = (0, _styleUnit.convertUnit)(val, prop);
       }
 
-      if (value != null) {
-        if (prop === STYLE) {
-          this.setStyles(node, value);
-        } else if (EVENT_PREFIX_REGEXP.test(prop)) {
-          var eventName = prop.slice(2).toLowerCase();
-          this.addEventListener(node, eventName, value);
+      for (var _prop in tranformedStyles) {
+        var transformValue = tranformedStyles[_prop];
+        // hack handle compatibility issue
+        if (Array.isArray(transformValue)) {
+          for (var i = 0; i < transformValue.length; i++) {
+            node.style[_prop] = transformValue[i];
+          }
         } else {
-          this.setAttribute(node, prop, value);
+          node.style[_prop] = transformValue;
         }
       }
+    },
+    beforeRender: function beforeRender() {
+      // Init rem unit
+      (0, _styleUnit.setRem)(this.getDeviceWidth() / this.getViewportWidth());
+    },
+    setNativeProps: function setNativeProps(node, props) {
+      for (var prop in props) {
+        var value = props[prop];
+        if (prop === CHILDREN) {
+          continue;
+        }
+
+        if (value != null) {
+          if (prop === STYLE) {
+            this.setStyles(node, value);
+          } else if (EVENT_PREFIX_REGEXP.test(prop)) {
+            var eventName = prop.slice(2).toLowerCase();
+            this.addEventListener(node, eventName, value);
+          } else {
+            this.setAttribute(node, prop, value);
+          }
+        }
+      }
     }
-  }
+  };
 };
 
-exports.default = Driver;
 module.exports = exports['default'];

package.json

 {
   "name": "driver-worker",
-  "version": "0.1.0",
+  "version": "0.6.1-1",
   "description": "Worker driver for Rax",
@@ -16,4 +16,4 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "style-unit": "^0.6.0"
+    "style-unit": "^0.6.1"
   }
 }

README.md

@@ -15,3 +15,3 @@ # driver-worker
 ```js
-import WorkerDirver from 'driver-worker';
+import createDriver from 'driver-worker';
 import { render } from 'rax';
@@ -24,3 +24,3 @@ import App from './App';
   {
-    driver: WorkerDriver
+    driver: createDriver({ postMessage, addEventListener })
   }
@@ -35,5 +35,5 @@ );
 
-let worker = spawnWorker();
-let tagNamePrefix = 'a-';
+const worker = spawnWorker();
+const tagNamePrefix = 'a-';
 domRenderer({ worker, tagNamePrefix });
-```
+```

src/dom-renderer.js

@@ -62,2 +62,4 @@ // feature-detect support for event listener options
     if (e.target) event.target = e.target.$$id;
+    // CustomEvent detail
+    if (e.detail) event.detail = e.detail;
     for (let i in e) {
@@ -64,0 +66,0 @@ let v = e[i];

src/index.js

 import { convertUnit, setRem } from 'style-unit';
 import createDocument from './create-document';
 
-let document = createDocument();
-let MutationObserver = document.defaultView.MutationObserver;
-let COUNTER = 0;
-const NODES = new Map();
 const TO_SANITIZE = [
@@ -16,295 +12,300 @@ 'addedNodes',
 
-function getNode(node) {
-  let id;
-  if (node && typeof node === 'object') id = node.$$id;
-  if (typeof node === 'string') id = node;
-  if (!id) return null;
-  if (node.nodeName === 'BODY') return document.body;
-  return NODES.get(id);
-}
+const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
+const CLASS_NAME = 'className';
+const CLASS = 'class';
+const STYLE = 'style';
+const CHILDREN = 'children';
+const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
 
-function handleEvent(event) {
-  let target = getNode(event.target);
-  if (target) {
-    event.target = target;
-    event.bubbles = true;
-    target.dispatchEvent(event);
-  }
-}
+const ADD_EVENT = 'addEvent';
+const REMOVE_EVENT = 'removeEvent';
 
-function sanitize(obj) {
-  if (!obj || typeof obj !== 'object') return obj;
+export default ({ postMessage, addEventListener }) => {
+  let document = createDocument();
+  let MutationObserver = document.defaultView.MutationObserver;
 
-  if (Array.isArray(obj)) return obj.map(sanitize);
+  const NODES = new Map();
+  let COUNTER = 0;
 
-  if (obj instanceof document.defaultView.Node) {
-    let id = obj.$$id;
-    if (!id) {
-      id = obj.$$id = String(++COUNTER);
+  function getNode(node) {
+    let id;
+    if (node && typeof node === 'object') id = node.$$id;
+    if (typeof node === 'string') id = node;
+    if (!id) return null;
+    if (node.nodeName === 'BODY') return document.body;
+    return NODES.get(id);
+  }
+
+  function handleEvent(event) {
+    let target = getNode(event.target);
+    if (target) {
+      event.target = target;
+      target.dispatchEvent(event);
     }
-    NODES.set(id, obj);
   }
 
-  let out = {
-    $$id: obj.$$id,
-    events: Object.keys(obj.eventListeners || {}),
-    attributes: obj.attributes,
-    nodeName: obj.nodeName,
-    nodeType: obj.nodeType,
-    style: obj.style,
-    childNodes: obj.childNodes,
-    data: obj.data
-  };
+  function sanitize(obj) {
+    if (!obj || typeof obj !== 'object') return obj;
 
-  if (out.childNodes && out.childNodes.length) {
-    out.childNodes = sanitize(out.childNodes);
-  }
+    if (Array.isArray(obj)) return obj.map(sanitize);
 
-  return out;
-}
-
-let mutationObserver = new MutationObserver(mutations => {
-  for (let i = mutations.length; i--; ) {
-    let mutation = mutations[i];
-    for (let j = TO_SANITIZE.length; j--; ) {
-      let prop = TO_SANITIZE[j];
-      mutation[prop] = sanitize(mutation[prop]);
+    if (obj instanceof document.defaultView.Node) {
+      let id = obj.$$id;
+      if (!id) {
+        id = obj.$$id = String(++COUNTER);
+      }
+      NODES.set(id, obj);
     }
-  }
-  send({ type: 'MutationRecord', mutations });
-});
 
-mutationObserver.observe(document, { subtree: true });
+    let out = {
+      $$id: obj.$$id,
+      events: Object.keys(obj.eventListeners || {}),
+      attributes: obj.attributes,
+      nodeName: obj.nodeName,
+      nodeType: obj.nodeType,
+      style: obj.style,
+      childNodes: obj.childNodes,
+      data: obj.data
+    };
 
-function send(message) {
-  postMessage(JSON.parse(JSON.stringify(message)));
-}
+    if (out.childNodes && out.childNodes.length) {
+      out.childNodes = sanitize(out.childNodes);
+    }
 
-addEventListener('message', ({ data }) => {
-  switch (data.type) {
-    case 'init':
-      document.URL = data.url;
-      document.documentElement.clientWidth = data.width;
-      break;
-    case 'event':
-      handleEvent(data.event);
-      break;
+    return out;
   }
-});
 
-const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
-const CLASS_NAME = 'className';
-const CLASS = 'class';
-const STYLE = 'style';
-const CHILDREN = 'children';
-const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
+  let mutationObserver = new MutationObserver(mutations => {
+    for (let i = mutations.length; i--; ) {
+      let mutation = mutations[i];
+      for (let j = TO_SANITIZE.length; j--; ) {
+        let prop = TO_SANITIZE[j];
+        mutation[prop] = sanitize(mutation[prop]);
+      }
+    }
+    send({ type: 'MutationRecord', mutations });
+  });
 
-const ADD_EVENT = 'addEvent';
-const REMOVE_EVENT = 'removeEvent';
+  mutationObserver.observe(document, { subtree: true });
 
-const Driver = {
-  deviceWidth: null,
-  viewportWidth: 750,
-  eventRegistry: {},
+  function send(message) {
+    postMessage(JSON.parse(JSON.stringify(message)));
+  }
 
-  getDeviceWidth() {
-    return this.deviceWidth || document.documentElement.clientWidth;
-  },
+  addEventListener('message', ({ data }) => {
+    switch (data.type) {
+      case 'init':
+        document.URL = data.url;
+        document.documentElement.clientWidth = data.width;
+        break;
+      case 'event':
+        handleEvent(data.event);
+        break;
+    }
+  });
 
-  setDeviceWidth(width) {
-    this.deviceWidth = width;
-  },
+  return {
+    deviceWidth: null,
+    viewportWidth: 750,
+    eventRegistry: {},
 
-  getViewportWidth() {
-    return this.viewportWidth;
-  },
+    getDeviceWidth() {
+      return this.deviceWidth || document.documentElement.clientWidth;
+    },
 
-  setViewportWidth(width) {
-    this.viewportWidth = width;
-  },
+    setDeviceWidth(width) {
+      this.deviceWidth = width;
+    },
 
-  getElementById(id) {
-    return document.getElementById(id);
-  },
+    getViewportWidth() {
+      return this.viewportWidth;
+    },
 
-  createBody() {
-    return document.body;
-  },
+    setViewportWidth(width) {
+      this.viewportWidth = width;
+    },
 
-  createComment(content) {
-    return document.createComment(content);
-  },
+    getElementById(id) {
+      return document.getElementById(id);
+    },
 
-  createEmpty() {
-    return this.createComment(' empty ');
-  },
+    createBody() {
+      return document.body;
+    },
 
-  createText(text) {
-    return document.createTextNode(text);
-  },
+    createComment(content) {
+      return document.createComment(content);
+    },
 
-  updateText(node, text) {
-    node.textContent = text;
-  },
+    createEmpty() {
+      return this.createComment(' empty ');
+    },
 
-  createElement(component) {
-    let node = document.createElement(component.type);
-    let props = component.props;
+    createText(text) {
+      return document.createTextNode(text);
+    },
 
-    this.setNativeProps(node, props);
+    updateText(node, text) {
+      node.textContent = text;
+    },
 
-    return node;
-  },
+    createElement(component) {
+      let node = document.createElement(component.type);
+      let props = component.props;
 
-  appendChild(node, parent) {
-    return parent.appendChild(node);
-  },
+      this.setNativeProps(node, props);
 
-  removeChild(node, parent) {
-    parent = parent || node.parentNode;
-    // Maybe has been removed when remove child
-    if (parent) {
-      parent.removeChild(node);
-    }
-  },
+      return node;
+    },
 
-  replaceChild(newChild, oldChild, parent) {
-    parent = parent || oldChild.parentNode;
-    parent.replaceChild(newChild, oldChild);
-  },
+    appendChild(node, parent) {
+      return parent.appendChild(node);
+    },
 
-  insertAfter(node, after, parent) {
-    parent = parent || after.parentNode;
-    const nextSibling = after.nextSibling;
-    if (nextSibling) {
-      parent.insertBefore(node, nextSibling);
-    } else {
-      parent.appendChild(node);
-    }
-  },
+    removeChild(node, parent) {
+      parent = parent || node.parentNode;
+      // Maybe has been removed when remove child
+      if (parent) {
+        parent.removeChild(node);
+      }
+    },
 
-  insertBefore(node, before, parent) {
-    parent = parent || before.parentNode;
-    parent.insertBefore(node, before);
-  },
+    replaceChild(newChild, oldChild, parent) {
+      parent = parent || oldChild.parentNode;
+      parent.replaceChild(newChild, oldChild);
+    },
 
-  addEventListener(node, eventName, eventHandler, props) {
-    if (this.eventRegistry[eventName]) {
-      return this.eventRegistry[eventName](
-        ADD_EVENT,
-        node,
-        eventName,
-        eventHandler,
-        props
-      );
-    } else {
-      return node.addEventListener(eventName, eventHandler);
-    }
-  },
+    insertAfter(node, after, parent) {
+      parent = parent || after.parentNode;
+      const nextSibling = after.nextSibling;
+      if (nextSibling) {
+        parent.insertBefore(node, nextSibling);
+      } else {
+        parent.appendChild(node);
+      }
+    },
 
-  removeEventListener(node, eventName, eventHandler, props) {
-    if (this.eventRegistry[eventName]) {
-      return this.eventRegistry[eventName](
-        REMOVE_EVENT,
-        node,
-        eventName,
-        eventHandler,
-        props
-      );
-    } else {
-      return node.removeEventListener(eventName, eventHandler);
-    }
-  },
+    insertBefore(node, before, parent) {
+      parent = parent || before.parentNode;
+      parent.insertBefore(node, before);
+    },
 
-  removeAllEventListeners(node) {
-    // noop
-  },
+    addEventListener(node, eventName, eventHandler, props) {
+      if (this.eventRegistry[eventName]) {
+        return this.eventRegistry[eventName](
+          ADD_EVENT,
+          node,
+          eventName,
+          eventHandler,
+          props
+        );
+      } else {
+        return node.addEventListener(eventName, eventHandler);
+      }
+    },
 
-  removeAttribute(node, propKey) {
-    if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      return node.innerHTML = null;
-    }
+    removeEventListener(node, eventName, eventHandler, props) {
+      if (this.eventRegistry[eventName]) {
+        return this.eventRegistry[eventName](
+          REMOVE_EVENT,
+          node,
+          eventName,
+          eventHandler,
+          props
+        );
+      } else {
+        return node.removeEventListener(eventName, eventHandler);
+      }
+    },
 
-    if (propKey === CLASS_NAME) {
-      propKey = CLASS;
-    }
+    removeAllEventListeners(node) {
+      // noop
+    },
 
-    if (propKey in node) {
-      try {
-        // Some node property is readonly when in strict mode
-        node[propKey] = null;
-      } catch (e) {}
-    }
+    removeAttribute(node, propKey) {
+      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        return node.innerHTML = null;
+      }
 
-    node.removeAttribute(propKey);
-  },
+      if (propKey === CLASS_NAME) {
+        propKey = CLASS;
+      }
 
-  setAttribute(node, propKey, propValue) {
-    if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      return node.innerHTML = propValue.__html;
-    }
+      if (propKey in node) {
+        try {
+          // Some node property is readonly when in strict mode
+          node[propKey] = null;
+        } catch (e) {}
+      }
 
-    if (propKey === CLASS_NAME) {
-      propKey = CLASS;
-    }
+      node.removeAttribute(propKey);
+    },
 
-    if (propKey in node) {
-      try {
-        // Some node property is readonly when in strict mode
-        node[propKey] = propValue;
-      } catch (e) {
-        node.setAttribute(propKey, propValue);
+    setAttribute(node, propKey, propValue) {
+      if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        return node.innerHTML = propValue.__html;
       }
-    } else {
-      node.setAttribute(propKey, propValue);
-    }
-  },
 
-  setStyles(node, styles) {
-    let tranformedStyles = {};
+      if (propKey === CLASS_NAME) {
+        propKey = CLASS;
+      }
 
-    for (let prop in styles) {
-      let val = styles[prop];
-      tranformedStyles[prop] = convertUnit(val, prop);
-    }
-
-    for (let prop in tranformedStyles) {
-      const transformValue = tranformedStyles[prop];
-      // hack handle compatibility issue
-      if (Array.isArray(transformValue)) {
-        for (let i = 0; i < transformValue.length; i++) {
-          node.style[prop] = transformValue[i];
+      if (propKey in node) {
+        try {
+          // Some node property is readonly when in strict mode
+          node[propKey] = propValue;
+        } catch (e) {
+          node.setAttribute(propKey, propValue);
         }
       } else {
-        node.style[prop] = transformValue;
+        node.setAttribute(propKey, propValue);
       }
-    }
-  },
+    },
 
-  beforeRender() {
-    // Init rem unit
-    setRem(this.getDeviceWidth() / this.getViewportWidth());
-  },
+    setStyles(node, styles) {
+      let tranformedStyles = {};
 
-  setNativeProps(node, props) {
-    for (let prop in props) {
-      let value = props[prop];
-      if (prop === CHILDREN) {
-        continue;
+      for (let prop in styles) {
+        let val = styles[prop];
+        tranformedStyles[prop] = convertUnit(val, prop);
       }
 
-      if (value != null) {
-        if (prop === STYLE) {
-          this.setStyles(node, value);
-        } else if (EVENT_PREFIX_REGEXP.test(prop)) {
-          let eventName = prop.slice(2).toLowerCase();
-          this.addEventListener(node, eventName, value);
+      for (let prop in tranformedStyles) {
+        const transformValue = tranformedStyles[prop];
+        // hack handle compatibility issue
+        if (Array.isArray(transformValue)) {
+          for (let i = 0; i < transformValue.length; i++) {
+            node.style[prop] = transformValue[i];
+          }
         } else {
-          this.setAttribute(node, prop, value);
+          node.style[prop] = transformValue;
         }
       }
+    },
+
+    beforeRender() {
+      // Init rem unit
+      setRem(this.getDeviceWidth() / this.getViewportWidth());
+    },
+
+    setNativeProps(node, props) {
+      for (let prop in props) {
+        let value = props[prop];
+        if (prop === CHILDREN) {
+          continue;
+        }
+
+        if (value != null) {
+          if (prop === STYLE) {
+            this.setStyles(node, value);
+          } else if (EVENT_PREFIX_REGEXP.test(prop)) {
+            let eventName = prop.slice(2).toLowerCase();
+            this.addEventListener(node, eventName, value);
+          } else {
+            this.setAttribute(node, prop, value);
+          }
+        }
+      }
     }
-  }
+  };
 };
-
-export default Driver;

No alert changes

Improved metrics

Total package byte prevSize

52767

increased by2.31%

Lines of code

1668

increased by0.42%

Number of lines in readme file

37

increased by2.78%

Dependency changes

• Updatedstyle-unit@^0.6.1