New: Add option to automatically generate keys

Author: thomasthiebaud

src/config.ts

@@ -63,7 +63,8 @@ export interface DOMConfig {
  */
 export interface Config {
   dom?: DOMConfig
-  overrides?: SelectorsToElement
+  overrides?: SelectorsToElement,
+  generatesKeys?: boolean,
 }
 
 /**
@@ -84,6 +85,7 @@ const defaultConfig: Config = {
   dom: {
     ADD_ATTR: ['key'],
   },
+  generatesKeys: false,
 }
 
 export function getConfig(config?: Partial<Config>): Config {

src/index.ts

@@ -15,5 +15,5 @@ export function parse(html: string, userOptions?: Config): React.ReactNode[] {
     override(document, options.overrides)
   }
 
-  return render(document.childNodes)
+  return render(document.childNodes, options)
 }

src/react.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import { Config } from './config'
 import { getAttributes, NodeType } from './dom'
 import { EnrichedElement } from './override'
 
@@ -53,7 +54,7 @@ const reactAttributesMap: { [keyof: string]: string } = {
   usemap: 'useMap',
 }
 
-function transformAttributes(attributesMap: NamedNodeMap): Attributes {
+function transformAttributes(attributesMap: NamedNodeMap, options: Config): Attributes {
   const attributes = getAttributes(attributesMap)
   const transformedAttributes: Attributes = {}
   Object.keys(attributes).forEach((key) => {
@@ -63,29 +64,32 @@ function transformAttributes(attributesMap: NamedNodeMap): Attributes {
       transformedAttributes[key] = attributes[key]
     }
   })
+  if (options.generatesKeys) {
+    transformedAttributes.key = attributes.key || attributes.id || Math.random().toString(36).substr(2, 5)
+  }
   return transformedAttributes
 }
 
 function renderTextNode(node: Node & ChildNode) {
   return node.nodeValue
 }
 
-function renderElementNode(node: Node & ChildNode) {
-  const element = transform(node as EnrichedElement)
+function renderElementNode(node: Node & ChildNode, options: Config) {
+  const element = transform(node as EnrichedElement, options)
 
   if (element.override) {
     return React.cloneElement(element.override(element.attributes, node.textContent))
   }
 
   if (element.childNodes) {
-    return React.createElement(element.nodeName, element.attributes, render(element.childNodes))
+    return React.createElement(element.nodeName, element.attributes, render(element.childNodes, options))
   }
   return React.createElement(element.nodeName, element.attributes)
 }
 
-function transform(element: EnrichedElement) {
+function transform(element: EnrichedElement, options: Config) {
   return {
-    attributes: transformAttributes(element.attributes),
+    attributes: transformAttributes(element.attributes, options),
     childNodes: element.childNodes,
     nodeName: element.nodeName.toLowerCase(),
     nodeType: element.nodeType,
@@ -94,7 +98,7 @@ function transform(element: EnrichedElement) {
   }
 }
 
-export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
+export function render(nodes: NodeListOf<Node & ChildNode>, options: Config): React.ReactNode[] {
   const elements = []
 
   for (let i = 0; i < nodes.length; i++) {
@@ -103,7 +107,7 @@ export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
     if (node.nodeType === NodeType.TEXT_NODE) {
       elements.push(renderTextNode(node))
     } else if (node.nodeType === NodeType.ELEMENT_NODE) {
-      elements.push(renderElementNode(node))
+      elements.push(renderElementNode(node, options))
     }
   }
 

tests/config.spec.ts

@@ -11,6 +11,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        generatesKeys: false,
       })
     })
 
@@ -28,6 +29,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        generatesKeys: false,
       })
     })
 
@@ -44,6 +46,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        generatesKeys: false,
       })
     })
   })

tests/react.spec.ts

@@ -9,14 +9,48 @@ function shallowWrapper(elements: React.ReactNode[]) {
 
 describe('React', () => {
   describe('#render', () => {
+    describe('generatesKeys', () => {
+      it('should use key if provided', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('key', 'link')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toEqual('link')
+      })
+
+      it('should use id if provided and key is not here', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('id', 'link')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toEqual('link')
+      })
+
+      it('should use a random key if key nor id are specified', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toHaveLength(5)
+      })
+    })
+
     it('should render a element node', () => {
       const div = document.createElement('div')
       const link = document.createElement('a')
       link.textContent = 'Link'
       link.setAttribute('key', 'link')
       div.appendChild(link)
 
-      const wrapper = shallowWrapper(render(div.childNodes))
+      const wrapper = shallowWrapper(render(div.childNodes, {}))
       expect(wrapper.find('a').text()).toEqual('Link')
     })
 
@@ -26,7 +60,7 @@ describe('React', () => {
       newLine.setAttribute('key', 'test')
       div.appendChild(newLine)
 
-      const wrapper = shallowWrapper(render(div.childNodes))
+      const wrapper = shallowWrapper(render(div.childNodes, {}))
       expect(wrapper.find('br')).toHaveLength(1)
     })
 
@@ -35,7 +69,7 @@ describe('React', () => {
       const text = document.createTextNode('Text')
       div.appendChild(text)
 
-      const wrapper = shallowWrapper(render(div.childNodes))
+      const wrapper = shallowWrapper(render(div.childNodes, {}))
       expect(wrapper.text()).toEqual('Text')
     })
 
@@ -44,7 +78,7 @@ describe('React', () => {
       const comment = document.createComment('Comment')
       div.appendChild(comment)
 
-      const wrapper = shallowWrapper(render(div.childNodes))
+      const wrapper = shallowWrapper(render(div.childNodes, {}))
       expect(wrapper.children()).toHaveLength(0)
     })
 
@@ -56,7 +90,7 @@ describe('React', () => {
       span.setAttribute('key', 'test')
       div.appendChild(span)
 
-      const wrapper = shallowWrapper(render(div.childNodes))
+      const wrapper = shallowWrapper(render(div.childNodes, {}))
       expect(wrapper.find('span')).toHaveLength(1)
       expect(wrapper.find('span').prop('htmlFor')).toEqual('test')
       expect(wrapper.find('span').prop('className')).toEqual('test')