Give context to nodes

Author: twifty

lib/component-helpers.js

@@ -10,6 +10,14 @@ function isValidVirtualNode (virtualNode) {
   return virtualNode != null && virtualNode !== false
 }
 
+function applyContext (context, virtualNode) {
+  virtualNode.context = context
+  virtualNode.ambiguous.forEach(node => {
+    node.context = context
+  })
+  delete virtualNode.ambiguous
+}
+
 // 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.
@@ -35,6 +43,8 @@ function initialize(component) {
     throw new Error('invalid falsy value ' + virtualNode + ' returned from render()' + namePart)
   }
 
+  applyContext(component, virtualNode)
+
   component.refs = {}
   component.virtualNode = virtualNode
   component.element = render(component.virtualNode, {
@@ -110,6 +120,8 @@ function updateSync (component, replaceNode=true) {
     throw new Error('invalid falsy value ' + newVirtualNode + ' returned from render()' + namePart)
   }
 
+  applyContext(component, newVirtualNode)
+
   syncUpdatesInProgressCounter++
   let oldVirtualNode = component.virtualNode
   let oldDomNode = component.element

lib/dom.js

@@ -2,6 +2,8 @@ const EVENT_LISTENER_PROPS = require('./event-listener-props')
 const SVG_TAGS = require('./svg-tags')
 
 function dom (tag, props, ...children) {
+  let ambiguous = []
+
   for (let i = 0; i < children.length;) {
     const child = children[i]
     switch (typeof child) {
@@ -17,6 +19,12 @@ function dom (tag, props, ...children) {
         } else if (!child) {
           children.splice(i, 1)
         } else {
+          if (!child.context) {
+            ambiguous.push(child)
+            if (child.ambiguous && child.ambiguous.length) {
+              ambiguous = ambiguous.concat(child.ambiguous)
+            }
+          }
           i++
         }
         break;
@@ -40,7 +48,7 @@ function dom (tag, props, ...children) {
     }
   }
 
-  return {tag, props, children}
+  return {tag, props, children, ambiguous}
 }
 
 const HTML_TAGS = [

lib/patch.js

@@ -49,7 +49,7 @@ function updateComponent (oldVirtualNode, newVirtualNode, options) {
       if (newRefName) refs[newRefName] = component
     }
   }
-  component.update(newProps || {}, newChildren, options)
+  component.update(newProps || {}, newChildren)
   return component.element
 }
 

lib/render.js

@@ -7,14 +7,18 @@ function render (virtualNode, options) {
     domNode = document.createTextNode(virtualNode.text)
   } else {
     const {tag, children} = virtualNode
-    let {props} = virtualNode
+    let {props, context} = virtualNode
+
+    if (context) {
+      options = {refs: context.refs, listenerContext: context}
+    }
 
     if (typeof tag === 'function') {
       let ref
       if (props && props.ref) {
         ref = props.ref
       }
-      const component = new tag(props || {}, children, options)
+      const component = new tag(props || {}, children)
       virtualNode.component = component
       domNode = component.element
       if (options && options.refs && ref) {

test/unit/initialize.test.js

@@ -54,6 +54,45 @@ describe('etch.initialize(component)', () => {
     expect(component.refs.selected.textContent).to.equal('one')
   })
 
+  it('nests references correctly', async () => {
+    class Component {
+      constructor(props, children) {
+        this.children = children
+        etch.initialize(this)
+      }
+
+      update() {}
+
+      render () {
+        return <div>{this.children}</div>
+      }
+    }
+
+    class TestHarness {
+      constructor() {
+        etch.initialize(this)
+      }
+
+      update() {}
+
+      render() {
+        return (
+          <Component ref="outer">
+            <Component ref="middle">
+              <div ref="inner" />
+            </Component>
+          </Component>
+        )
+      }
+    }
+
+    const harness = new TestHarness()
+    expect(harness.refs.outer).to.be.ok
+    expect(harness.refs.middle).to.be.ok
+    expect(harness.refs.inner).to.be.ok
+    expect(harness.refs.outer.refs.middle).to.be.undefined
+  })
+
   it('throws an exception if undefined is returned from render', () => {
     let component = {
       render () {},