Breaking: Remove generatesKeys option

Remove this option that generates a random if "key" or "id" are not defined.
Radom keys can negatively impact performance and may cause issues with component state.

Author: thomasthiebaud

src/config.ts

@@ -64,7 +64,6 @@ export interface DOMConfig {
 export interface Config {
   dom?: DOMConfig
   overrides?: SelectorsToElement,
-  generatesKeys?: boolean,
   useFragment?: boolean,
 }
 
@@ -86,7 +85,6 @@ const defaultConfig: Config = {
   dom: {
     ADD_ATTR: ['key'],
   },
-  generatesKeys: false,
   useFragment: false,
 }
 

src/react.ts

@@ -54,7 +54,7 @@ const reactAttributesMap: { [keyof: string]: string } = {
   usemap: 'useMap',
 }
 
-function transformAttributes(attributesMap: NamedNodeMap, options: Config): Attributes {
+function transformAttributes(attributesMap: NamedNodeMap): Attributes {
   const attributes = getAttributes(attributesMap)
   const transformedAttributes: Attributes = {}
   Object.keys(attributes).forEach((key) => {
@@ -64,9 +64,6 @@ function transformAttributes(attributesMap: NamedNodeMap, options: Config): Attr
       transformedAttributes[key] = attributes[key]
     }
   })
-  if (options.generatesKeys) {
-    transformedAttributes.key = attributes.key || attributes.id || Math.random().toString(36).substr(2, 5)
-  }
   return transformedAttributes
 }
 
@@ -75,7 +72,7 @@ function renderTextNode(node: Node & ChildNode) {
 }
 
 function renderElementNode(node: Node & ChildNode, options: Config) {
-  const element = transform(node as EnrichedElement, options)
+  const element = transform(node as EnrichedElement)
 
   if (element.override) {
     return React.cloneElement(element.override(element.attributes, node.textContent))
@@ -87,9 +84,9 @@ function renderElementNode(node: Node & ChildNode, options: Config) {
   return React.createElement(element.nodeName, element.attributes)
 }
 
-function transform(element: EnrichedElement, options: Config) {
+function transform(element: EnrichedElement) {
   return {
-    attributes: transformAttributes(element.attributes, options),
+    attributes: transformAttributes(element.attributes),
     childNodes: element.childNodes,
     nodeName: element.nodeName.toLowerCase(),
     nodeType: element.nodeType,

tests/config.spec.ts

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

tests/react.spec.ts

@@ -76,39 +76,5 @@ describe('React', () => {
         expect(wrapper.find('a').text()).toEqual('Link')
       })
     })
-
-    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)
-      })
-    })
   })
 })