Replace virtual-dom library with a custom reconciliation implementation

.npmignore

@@ -1,2 +1 @@
 test
-src

README.md

@@ -9,7 +9,7 @@ Etch components are ordinary JavaScript objects that conform to a minimal interf
 ```js
 /** @jsx etch.dom */
 
-import etch from 'etch'
+const etch = require('etch')
 
 class MyComponent {
   // Required: Define an ordinary constructor to initialize your component.
@@ -38,7 +38,7 @@ class MyComponent {
   async destroy () {
     // call etch.destroy to remove the element and destroy child components
     await etch.destroy(this)
-    // then perform custom teardown logic here...      
+    // then perform custom teardown logic here...
   }
 }
 ```
@@ -74,7 +74,7 @@ This function is typically called at the end of your component's constructor:
 ```js
 /** @jsx etch.dom */
 
-import etch from 'etch'
+const etch = require('etch')
 
 class MyComponent {
   constructor (properties) {
@@ -102,7 +102,7 @@ This function takes a component that is already associated with an `.element` pr
 ```js
 /** @jsx etch.dom */
 
-import etch from 'etch'
+const etch = require('etch')
 
 class MyComponent {
   constructor (properties) {
@@ -181,7 +181,7 @@ Components can be nested within other components by referencing a child componen
 ```js
 /** @jsx etch.dom */
 
-import etch from 'etch'
+const etch = require('etch')
 
 class ChildComponent {
   constructor () {
@@ -212,7 +212,7 @@ A constructor function can always take the place of a tag name in any Etch JSX e
 ```js
 /** @jsx etch.dom */
 
-import etch from 'etch'
+const etch = require('etch')
 
 class ChildComponent {
   constructor (properties, children) {
@@ -356,15 +356,37 @@ Read comments in the [scheduler assignment][scheduler-assignment] and [default s
 
 ### Handling Events
 
-This library doesn't currently prescribe or support a specific approach to binding event handlers. We are considering an API that integrates inline handlers directly into JSX expressions, but we're not convinced the utility warrants the added surface area.
+Etch supports listening to arbitrary events on DOM nodes via the special `on` property, which can be used to assign a hash of `eventName: listenerFunction` pairs:
 
-Compared to efficiently updating the DOM declaratively (the primary focus of this library), binding events is a pretty simple problem. You might try [dom-listener][dom-listener] if you're looking for a library that you could combine with Etch to deal with event binding.
+```js
+class ComponentWithEvents {
+  constructor () {
+    etch.initialize(this)
+  }
+
+  render () {
+    return <div on={click: this.didClick, focus: this.didFocus} />
+  }
+
+  didClick (event) {
+    console.log(event) // ==> MouseEvent {...}
+    console.log(this) // ==> ComponentWithEvents {...}
+  }
+
+  didFocus (event) {
+    console.log(event) // ==> FocusEvent {...}
+    console.log(this) // ==> ComponentWithEvents {...}
+  }
+}
+```
+
+As you can see, the listener function's `this` value is automatically bound to the parent component. You should rely on this auto-binding facility rather than using arrow functions or `Function.bind` to avoid complexity and extraneous closure allocations.
 
 ### Feature Requests
 
 Etch aims to stay small and focused. If you have a feature idea, consider implementing it as a library that either wraps Etch or, even better, that can be used in concert with it. If it's impossible to implement your feature outside of Etch, we can discuss adding a hook that makes your feature possible.
 
 [babel]: https://babeljs.io/
-[scheduler-assignment]: https://github.com/nathansobo/etch/blob/master/src/scheduler-assignment.js
-[default-scheduler]: https://github.com/nathansobo/etch/blob/master/src/default-scheduler.js
+[scheduler-assignment]: https://github.com/nathansobo/etch/blob/master/lib/scheduler-assignment.js
+[default-scheduler]: https://github.com/nathansobo/etch/blob/master/lib/default-scheduler.js
 [dom-listener]: https://github.com/atom/dom-listener

TASKS.md

@@ -0,0 +1,6 @@
+* Consolidate old tests with new tests... what can be simpler?
+* Boolean attributes
+* Props that shouldn't be converted to attributes
+* Support for objects as the `style` prop
+* SVG
+* Benchmark

src/component-helpers.js → lib/component-helpers.js

@@ -1,23 +1,20 @@
-import createElement from 'virtual-dom/create-element'
-import diff from 'virtual-dom/diff'
-import patch from 'virtual-dom/patch'
-
-import refsStack from './refs-stack'
-import {getScheduler} from './scheduler-assignment'
+const render = require('./render')
+const patch = require('./patch')
+const {getScheduler} = require('./scheduler-assignment')
 
 const componentsWithPendingUpdates = new WeakSet()
 let syncUpdatesInProgressCounter = 0
 let syncDestructionsInProgressCounter = 0
 
-function isValidVirtualElement (virtualElement) {
-  return virtualElement != null && virtualElement !== false
+function isValidVirtualNode (virtualNode) {
+  return virtualNode != null && virtualNode !== false
 }
 
 // This function associates a component object with a DOM element by calling
 // the components `render` method, assigning an `.element` property on the
 // object and also returning the element.
 //
-// It also assigns a `virtualElement` property based on the return value of the
+// It also assigns a `virtualNode` property based on the return value of the
 // `render` method. This will be used later by `performElementUpdate` to diff
 // the new results of `render` with the previous results when updating the
 // component's element.
@@ -27,21 +24,22 @@ function isValidVirtualElement (virtualElement) {
 // nodes of the `virtual-dom` tree. Before calling into `virtual-dom` to create
 // the DOM tree, it pushes this `refs` object to a shared stack so it can be
 // accessed by hooks during the creation of individual elements.
-export function initialize (component) {
+function initialize(component) {
   if (typeof component.update !== 'function') {
     throw new Error('Etch components must implement `update(props, children)`.')
   }
 
-  let virtualElement = component.render()
-  if (!isValidVirtualElement(virtualElement)) {
+  let virtualNode = component.render()
+  if (!isValidVirtualNode(virtualNode)) {
     let namePart = component.constructor && component.constructor.name ? ' in ' + component.constructor.name : ''
-    throw new Error('invalid falsy value ' + virtualElement + ' returned from render()' + namePart)
+    throw new Error('invalid falsy value ' + virtualNode + ' returned from render()' + namePart)
   }
+
   component.refs = {}
-  component.virtualElement = virtualElement
-  refsStack.push(component.refs)
-  component.element = createElement(component.virtualElement)
-  refsStack.pop()
+  component.virtualNode = virtualNode
+  component.element = render(component.virtualNode, {
+    refs: component.refs, listenerContext: component
+  })
 }
 
 // This function receives a component that has already been associated with an
@@ -59,7 +57,7 @@ export function initialize (component) {
 //
 // Returns a promise that will resolve when the requested update has been
 // completed.
-export function update (component, replaceNode = true) {
+function update (component, replaceNode=true) {
   if (syncUpdatesInProgressCounter > 0) {
     updateSync(component, replaceNode)
     return Promise.resolve()
@@ -79,7 +77,7 @@ export function update (component, replaceNode = true) {
 }
 
 // Synchronsly updates the DOM element associated with a component object. .
-// This method assumes the presence of `.element` and `.virtualElement`
+// This method assumes the presence of `.element` and `.virtualNode`
 // properties on the component, which are assigned in the `initialize`
 // function.
 //
@@ -97,20 +95,21 @@ export function update (component, replaceNode = true) {
 // For now, etch does not allow the root tag of the `render` method to change
 // between invocations, because we want to preserve a one-to-one relationship
 // between component objects and DOM elements for simplicity.
-export function updateSync (component, replaceNode = true) {
-  let newVirtualElement = component.render()
-  if (!isValidVirtualElement(newVirtualElement)) {
+function updateSync (component, replaceNode=true) {
+  let newVirtualNode = component.render()
+  if (!isValidVirtualNode(newVirtualNode)) {
     let namePart = component.constructor && component.constructor.name ? ' in ' + component.constructor.name : ''
-    throw new Error('invalid falsy value ' + newVirtualElement + ' returned from render()' + namePart)
+    throw new Error('invalid falsy value ' + newVirtualNode + ' returned from render()' + namePart)
   }
 
   syncUpdatesInProgressCounter++
-  let oldVirtualElement = component.virtualElement
+  let oldVirtualNode = component.virtualNode
   let oldDomNode = component.element
-  refsStack.push(component.refs)
-  let newDomNode = patch(component.element, diff(oldVirtualElement, newVirtualElement))
-  refsStack.pop()
-  component.virtualElement = newVirtualElement
+  let newDomNode = patch(oldVirtualNode, newVirtualNode, {
+    refs: component.refs,
+    listenerContext: component
+  })
+  component.virtualNode = newVirtualNode
   if (newDomNode !== oldDomNode && !replaceNode) {
     throw new Error('The root node type changed on update, but the update was performed with the replaceNode option set to false')
   } else {
@@ -142,7 +141,7 @@ export function updateSync (component, replaceNode = true) {
 // If called as the result of destroying a component higher in the DOM, the
 // element is not removed to avoid redundant DOM manipulation. Returns a promise
 // that resolves when the destruction is completed.
-export function destroy (component, removeNode = true) {
+function destroy (component, removeNode=true) {
   if (syncUpdatesInProgressCounter > 0 || syncDestructionsInProgressCounter > 0) {
     destroySync(component, removeNode)
     return Promise.resolve()
@@ -159,19 +158,23 @@ export function destroy (component, removeNode = true) {
 //
 // Note that we track whether `destroy` calls are in progress and only remove
 // the element if we are not a nested call.
-export function destroySync (component, removeNode = true) {
+function destroySync (component, removeNode=true) {
   syncDestructionsInProgressCounter++
-  destroyChildComponents(component.virtualElement)
+  destroyChildComponents(component.virtualNode)
   if (syncDestructionsInProgressCounter === 1 && removeNode) component.element.remove()
   syncDestructionsInProgressCounter--
 }
 
-function destroyChildComponents (virtualNode) {
-  if (virtualNode.type === 'Widget') {
-    if (virtualNode.component && typeof virtualNode.component.destroy === 'function') {
-      virtualNode.component.destroy()
-    }
+function destroyChildComponents(virtualNode) {
+  if (virtualNode.component && typeof virtualNode.component.destroy === 'function') {
+    virtualNode.component.destroy()
   } else if (virtualNode.children) {
     virtualNode.children.forEach(destroyChildComponents)
   }
 }
+
+module.exports = {
+  initialize,
+  update, updateSync,
+  destroy, destroySync
+}

src/default-scheduler.js → lib/default-scheduler.js

@@ -2,7 +2,7 @@
 // this class will be used to schedule updates to the document. The
 // `updateDocument` method accepts functions to be run at some point in the
 // future, then runs them on the next animation frame.
-export default class DefaultScheduler {
+module.exports = class DefaultScheduler {
   constructor () {
     this.updateRequests = []
     this.readRequests = []

lib/dom.js

@@ -0,0 +1,63 @@
+const EVENT_LISTENER_PROPS = require('./event-listener-props')
+const SVG_TAGS = require('./svg-tags')
+
+function dom (tag, props, ...children) {
+  for (let i = 0; i < children.length;) {
+    const child = children[i]
+    if (Array.isArray(child)) {
+      children.splice(i, 1, ...child)
+    } else if (typeof child === 'string' || typeof child === 'number') {
+      children.splice(i, 1, {text: child})
+      i++
+    } else {
+      i++
+    }
+  }
+
+  if (props) {
+    for (const propName in props) {
+      const eventName = EVENT_LISTENER_PROPS[propName]
+      if (eventName) {
+        if (!props.on) props.on = {}
+        props.on[eventName] = props[propName]
+      }
+    }
+
+    if (props.class) {
+      props.className = props.class
+    }
+  }
+
+  return {tag, props, children}
+}
+
+const HTML_TAGS = [
+  'a', 'abbr', 'address', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo',
+  'blockquote', 'body', 'button', 'canvas', 'caption', 'cite', 'code',
+  'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl',
+  'dt', 'em', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2',
+  'h3', 'h4', 'h5', 'h6', 'head', 'header', 'html', 'i', 'iframe', 'ins', 'kbd',
+  'label', 'legend', 'li', 'main', 'map', 'mark', 'menu', 'meter', 'nav',
+  'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre',
+  'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section',
+  'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup',
+  'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title',
+  'tr', 'u', 'ul', 'var', 'video', 'area', 'base', 'br', 'col', 'command',
+  'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source',
+  'track', 'wbr'
+]
+
+for (const tagName of HTML_TAGS) {
+  dom[tagName] = (props, ...children) => {
+    return dom(tagName, props, ...children)
+  }
+}
+
+for (const tagName of SVG_TAGS) {
+  dom[tagName] = (props, ...children) => {
+    return dom(tagName, props, ...children)
+  }
+}
+
+
+module.exports = dom

lib/event-listener-props.js

@@ -0,0 +1,70 @@
+module.exports = {
+  onCopy: 'copy',
+  onCut: 'cut',
+  onPaste: 'paste',
+  onCompositionEnd: 'compositionend',
+  onCompositionStart: 'compositionstart',
+  onCompositionUpdate: 'compositionupdate',
+  onKeyDown: 'keydown',
+  onKeyPress: 'keypress',
+  onKeyUp: 'keyup',
+  onFocus: 'focus',
+  onBlur: 'blur',
+  onChange: 'change',
+  onInput: 'input',
+  onSubmit: 'submit',
+  onClick: 'click',
+  onContextMenu: 'contextmenu',
+  onDoubleClick: 'doubleclick',
+  onDrag: 'drag',
+  onDragEnd: 'dragend',
+  onDragEnter: 'dragenter',
+  onDragExit: 'dragexit',
+  onDragLeave: 'dragleave',
+  onDragOver: 'dragover',
+  onDragStart: 'dragstart',
+  onDrop: 'drop',
+  onMouseDown: 'mousedown',
+  onMouseEnter: 'mousenter',
+  onMouseLeave: 'mouseleave',
+  onMouseMove: 'mousemove',
+  onMouseOut: 'mouseout',
+  onMouseOver: 'mouseover',
+  onMouseUp: 'mouseup',
+  onSelect: 'select',
+  onTouchCancel: 'touchcancel',
+  onTouchEnd: 'touchend',
+  onTouchMove: 'touchmove',
+  onTouchStart: 'touchstart',
+  onScroll: 'scroll',
+  onWheel: 'wheel',
+  onAbort: 'abort',
+  onCanPlay: 'canplay',
+  onCanPlayThrough: 'canplaythrough',
+  onDurationChange: 'durationchange',
+  onEmptied: 'emptied',
+  onEncrypted: 'encrypted',
+  onEnded: 'ended',
+  onError: 'error',
+  onLoadedData: 'loadeddata',
+  onLoadedMetadata: 'loadedmetadat',
+  onLoadStart: 'loadstart',
+  onPause: 'pause',
+  onPlay: 'play',
+  onPlaying: 'playing',
+  onProgress: 'progress',
+  onRateChange: 'ratechange',
+  onSeeked: 'seeked',
+  onSeeking: 'seeking',
+  onStalled: 'stalled',
+  onSuspend: 'suspend',
+  onTimeUpdate: 'timeupdate',
+  onVolumeChange: 'volumechange',
+  onWaiting: 'waiting',
+  onLoad: 'load',
+  onError: 'error',
+  onAnimationStart: 'animationstart',
+  onAnimationEnd: 'animationend',
+  onAnimationIteration: 'animationiteration',
+  onTransitionEnd: 'transitionend'
+}