Don't pass ref and key properties to child components

src/component-widget.js

@@ -11,9 +11,21 @@ export default class ComponentWidget {
     this.properties = properties
     this.children = children
 
+    let sanitizedProperties
+
+    if (this.properties && this.properties.ref) {
+      if (!sanitizedProperties) sanitizedProperties = Object.assign({}, this.properties)
+      this.ref = sanitizedProperties.ref
+      delete sanitizedProperties.ref
+    }
+
     if (this.properties && this.properties.key) {
-      this.key = this.properties.key
+      if (!sanitizedProperties) sanitizedProperties = Object.assign({}, this.properties)
+      this.key = sanitizedProperties.key
+      delete sanitizedProperties.key
     }
+
+    if (sanitizedProperties) this.properties = sanitizedProperties
   }
 
   // The `virtual-dom` library expects this method to return a DOM node. It
@@ -24,8 +36,8 @@ export default class ComponentWidget {
   // element.
   init () {
     this.component = new this.componentConstructor(this.properties, this.children)
-    if (this.properties && this.properties.ref && refsStack.length > 0) {
-      refsStack[refsStack.length - 1][this.properties.ref] = this.component
+    if (this.ref && refsStack.length > 0) {
+      refsStack[refsStack.length - 1][this.ref] = this.component
     }
     return this.component.element
   }
@@ -40,15 +52,8 @@ export default class ComponentWidget {
   // widgets have *different* component constructors, we destroy the old
   // component and build a new one in its place.
   update (oldWidget, oldElement) {
-    let oldRef, newRef
-
-    if (oldWidget.properties && oldWidget.properties.ref) {
-      oldRef = oldWidget.properties.ref
-    }
-
-    if (this.properties && this.properties.ref) {
-      newRef = this.properties.ref
-    }
+    const oldRef = oldWidget.ref
+    const newRef = this.ref
 
     if (this.componentConstructor === oldWidget.componentConstructor) {
       this.component = oldWidget.component
@@ -85,10 +90,10 @@ export default class ComponentWidget {
   destroy () {
     // Clean up the reference to this component if it is not now referencing a
     // different component.
-    if (this.properties && this.properties.ref && refsStack.length > 0) {
+    if (this.ref && refsStack.length > 0) {
       const refs = refsStack[refsStack.length - 1]
-      if (refs[this.properties.ref] === this.component) {
-        delete refs[this.properties.ref]
+      if (refs[this.ref] === this.component) {
+        delete refs[this.ref]
       }
     }
 

test/unit/dom.test.js

@@ -275,7 +275,7 @@ describe('etch.dom', () => {
     })
 
     describe('when the child component constructor tag has a ref property', () => {
-      it('creates a reference to the child component object on the parent component', async () => {
+      it('creates a reference to the child component object on the parent component and does not pass the ref as a prop to the child component', async () => {
         class ChildComponentA {
           constructor (properties) {
             this.properties = properties
@@ -324,15 +324,15 @@ describe('etch.dom', () => {
         etch.initialize(parentComponent)
 
         expect(parentComponent.refs.child instanceof ChildComponentA).to.be.true
-        expect(parentComponent.refs.child.properties.ref).to.equal('child')
+        expect(parentComponent.refs.child.properties.ref).to.be.undefined
         expect(parentComponent.refs.child.refs.self.textContent).to.equal('A')
 
         parentComponent.refName = 'kid'
         await etch.update(parentComponent)
 
         expect(parentComponent.refs.child).to.be.undefined
         expect(parentComponent.refs.kid instanceof ChildComponentA).to.be.true
-        expect(parentComponent.refs.kid.properties.ref).to.equal('kid')
+        expect(parentComponent.refs.kid.properties.ref).to.be.undefined
         expect(parentComponent.refs.kid.refs.self.textContent).to.equal('A')
 
         parentComponent.refName = 'child'
@@ -342,7 +342,7 @@ describe('etch.dom', () => {
 
         expect(parentComponent.refs.kid).to.be.undefined
         expect(parentComponent.refs.child instanceof ChildComponentB).to.be.true
-        expect(parentComponent.refs.child.properties.ref).to.equal('child')
+        expect(parentComponent.refs.child.properties.ref).to.be.undefined
         expect(parentComponent.refs.child.refs.self.textContent).to.equal('B')
 
         parentComponent.renderB = false
@@ -405,5 +405,38 @@ describe('etch.dom', () => {
         expect(parentComponent.refs.child.constructor).to.equal(ChildComponentB)
       })
     })
+
+    describe('when the child component constructor tag has a key property', () => {
+      it('does not pass the key to the child component', async function () {
+        class ChildComponentA {
+          constructor (properties) {
+            this.properties = properties
+            etch.initialize(this)
+          }
+
+          render () {
+            return <div>A</div>
+          }
+
+          update (properties) {
+            this.properties = properties
+          }
+        }
+
+        let parentComponent = {
+          render () {
+             return <div><ChildComponentA key='A' ref='child'></ChildComponentA></div>
+          },
+
+          update () {}
+        }
+
+        etch.initialize(parentComponent)
+
+        expect(parentComponent.refs.child.properties.key).to.be.undefined
+        await etch.update(parentComponent)
+        expect(parentComponent.refs.child.properties.key).to.be.undefined
+      })
+    })
   })
 })