Merge pull request #1 from aduth/master

Assign and reuse element key by child index

index.js

@@ -110,8 +110,14 @@ export function attributeListToReact (attributeList) {
   }, {})
 }
 
+let keyCounter = 0
+
 export function nodeListToReact (nodeList, createElement) {
   return [...nodeList].reduce((accumulator, node) => {
+    if (!node._domReactKey) {
+      node._domReactKey = '_domReact' + String(keyCounter++)
+    }
+
     const child = nodeToReact(node, createElement)
 
     if (Array.isArray(child)) {
@@ -146,6 +152,10 @@ export function nodeToReact (node, createElement) {
     props = attributeListToReact(node.attributes)
   }
 
+  if (node._domReactKey) {
+    props.key = node._domReactKey
+  }
+
   if (node.hasChildNodes()) {
     children = nodeListToReact(node.childNodes, createElement)
   }

index.test.js

@@ -1,10 +1,10 @@
 import { describe, it } from 'mocha'
-import { equal } from 'assert'
+import { equal, ok, deepEqual } from 'assert'
 import { JSDOM } from 'jsdom'
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 
-import { nodeToReact } from '.'
+import { nodeListToReact, nodeToReact } from './index'
 
 const { window } = new JSDOM()
 const { document } = window
@@ -95,4 +95,36 @@ describe('nodeToReact()', () => {
       }
     })))
   })
+
+  describe('nodeListToReact', () => {
+    const rxKey = /^_domReact\d+$/
+    function assertKey (key) {
+      ok(rxKey.test(key), 'expected to match key pattern ' + rxKey.toString())
+    }
+
+    it('should return array of React element with key assigned by child index', () => {
+      document.body.innerHTML = '<p>test <span>test</span></p><strong>test</strong>'
+      const elements = nodeListToReact(document.body.childNodes, createElement)
+
+      assertKey(elements[0].key)
+      equal('string', typeof elements[0].props.children[0])
+      assertKey(elements[0].props.children[1].key)
+      assertKey(elements[1].key)
+    })
+
+    it('should reuse assigned key for same elements reference', () => {
+      document.body.innerHTML = '<ul><li>one</li><li>two</li></ul>'
+      const list = document.body.firstChild
+      const before = nodeListToReact(list.childNodes, createElement)
+
+      // Rearrange second list item before first
+      list.insertBefore(list.lastChild, list.firstChild)
+
+      const after = nodeListToReact(list.childNodes, createElement)
+      deepEqual(
+        before.map(({key}) => key),
+        after.map(({key}) => key).reverse()
+      )
+    })
+  })
 })