Skip to content

Commit 6582938

Browse files
thomasthiebaudthomasthiebaud
authored
Merge pull request #3 from thomasthiebaud/generate-keys
Generate keys
2 parents 7516c9e + faecda2 commit 6582938

File tree

8 files changed

+6575
-2889
lines changed

8 files changed

+6575
-2889
lines changed

‎package-lock.json‎

Lines changed: 6499 additions & 2856 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,29 @@
2626
"types"
2727
],
2828
"devDependencies": {
29-
"@semantic-release/changelog": "2.1.1",
30-
"@semantic-release/git": "6.0.1",
29+
"@semantic-release/changelog": "3.0.0",
30+
"@semantic-release/git": "7.0.1",
3131
"@types/dompurify": "0.0.31",
32-
"@types/enzyme": "3.1.11",
33-
"@types/jest": "23.1.4",
34-
"@types/react": "16.4.6",
32+
"@types/enzyme": "3.1.13",
33+
"@types/jest": "23.3.1",
34+
"@types/react": "16.4.11",
3535
"commitlint": "7.0.0",
3636
"conventional-changelog-eslint": "3.0.0",
37-
"enzyme": "3.3.0",
38-
"enzyme-adapter-react-16": "1.1.1",
37+
"enzyme": "3.4.4",
38+
"enzyme-adapter-react-16": "1.2.0",
3939
"husky": "0.14.3",
40-
"jest": "23.3.0",
41-
"react": "16.4.1",
42-
"react-dom": "16.4.1",
40+
"jest": "23.5.0",
41+
"react": "16.4.2",
42+
"react-dom": "16.4.2",
4343
"rimraf": "2.6.2",
44-
"semantic-release": "15.6.3",
45-
"ts-jest": "23.0.0",
46-
"tslint": "5.10.0",
44+
"semantic-release": "15.9.9",
45+
"ts-jest": "23.1.4",
46+
"tslint": "5.11.0",
4747
"tslint-react": "3.6.0",
48-
"typescript": "2.9.2"
48+
"typescript": "3.0.1"
4949
},
5050
"dependencies": {
51-
"dompurify": "1.0.5"
51+
"dompurify": "1.0.7"
5252
},
5353
"peerDependencies": {
5454
"react": "^16.2.0"

‎src/config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export interface DOMConfig {
6363
*/
6464
export interface Config {
6565
dom?: DOMConfig
66-
overrides?: SelectorsToElement
66+
overrides?: SelectorsToElement,
67+
generatesKeys?: boolean,
6768
}
6869

6970
/**
@@ -84,6 +85,7 @@ const defaultConfig: Config = {
8485
dom: {
8586
ADD_ATTR: ['key'],
8687
},
88+
generatesKeys: false,
8789
}
8890

8991
export function getConfig(config?: Partial<Config>): Config {

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@ export function parse(html: string, userOptions?: Config): React.ReactNode[] {
1515
override(document, options.overrides)
1616
}
1717

18-
return render(document.childNodes)
18+
return render(document.childNodes, options)
1919
}

‎src/react.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react'
22

3+
import { Config } from './config'
34
import { getAttributes, NodeType } from './dom'
45
import { EnrichedElement } from './override'
56

@@ -53,7 +54,7 @@ const reactAttributesMap: { [keyof: string]: string } = {
5354
usemap: 'useMap',
5455
}
5556

56-
function transformAttributes(attributesMap: NamedNodeMap): Attributes {
57+
function transformAttributes(attributesMap: NamedNodeMap, options: Config): Attributes {
5758
const attributes = getAttributes(attributesMap)
5859
const transformedAttributes: Attributes = {}
5960
Object.keys(attributes).forEach((key) => {
@@ -63,29 +64,32 @@ function transformAttributes(attributesMap: NamedNodeMap): Attributes {
6364
transformedAttributes[key] = attributes[key]
6465
}
6566
})
67+
if (options.generatesKeys) {
68+
transformedAttributes.key = attributes.key || attributes.id || Math.random().toString(36).substr(2, 5)
69+
}
6670
return transformedAttributes
6771
}
6872

6973
function renderTextNode(node: Node & ChildNode) {
7074
return node.nodeValue
7175
}
7276

73-
function renderElementNode(node: Node & ChildNode) {
74-
const element = transform(node as EnrichedElement)
77+
function renderElementNode(node: Node & ChildNode, options: Config) {
78+
const element = transform(node as EnrichedElement, options)
7579

7680
if (element.override) {
7781
return React.cloneElement(element.override(element.attributes, node.textContent))
7882
}
7983

8084
if (element.childNodes) {
81-
return React.createElement(element.nodeName, element.attributes, render(element.childNodes))
85+
return React.createElement(element.nodeName, element.attributes, render(element.childNodes, options))
8286
}
8387
return React.createElement(element.nodeName, element.attributes)
8488
}
8589

86-
function transform(element: EnrichedElement) {
90+
function transform(element: EnrichedElement, options: Config) {
8791
return {
88-
attributes: transformAttributes(element.attributes),
92+
attributes: transformAttributes(element.attributes, options),
8993
childNodes: element.childNodes,
9094
nodeName: element.nodeName.toLowerCase(),
9195
nodeType: element.nodeType,
@@ -94,7 +98,7 @@ function transform(element: EnrichedElement) {
9498
}
9599
}
96100

97-
export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
101+
export function render(nodes: NodeListOf<Node & ChildNode>, options: Config): React.ReactNode[] {
98102
const elements = []
99103

100104
for (let i = 0; i < nodes.length; i++) {
@@ -103,7 +107,7 @@ export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
103107
if (node.nodeType === NodeType.TEXT_NODE) {
104108
elements.push(renderTextNode(node))
105109
} else if (node.nodeType === NodeType.ELEMENT_NODE) {
106-
elements.push(renderElementNode(node))
110+
elements.push(renderElementNode(node, options))
107111
}
108112
}
109113

‎tests/api.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ describe('Public API', () => {
5151
const wrapper = shallow(React.createElement('div', null, elements))
5252
expect(wrapper.text()).toEqual('It is working')
5353
expect(wrapper.find('b')).toHaveLength(2)
54-
expect(wrapper.find('b').at(0).key()).toBeUndefined()
55-
expect(wrapper.find('b').at(1).key()).toBeUndefined()
54+
expect(wrapper.find('b').at(0).key()).toBeNull()
55+
expect(wrapper.find('b').at(1).key()).toBeNull()
5656
expect(wrapper.find('b').at(0).simulate('click'))
5757
expect(wrapper.find('b').at(1).simulate('click'))
5858
expect(spy).toHaveBeenCalledTimes(2)
@@ -68,7 +68,7 @@ describe('Public API', () => {
6868
const wrapper = shallow(React.createElement('div', null, elements))
6969
expect(wrapper.text()).toEqual('It is working')
7070
expect(wrapper.find('b')).toHaveLength(1)
71-
expect(wrapper.find('b').at(0).key()).toBeUndefined()
71+
expect(wrapper.find('b').at(0).key()).toBeNull()
7272
expect(wrapper.find('b').at(0).simulate('click'))
7373
expect(spy).toHaveBeenCalledTimes(1)
7474
})

‎tests/config.spec.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ describe('Options', () => {
1111
RETURN_DOM_FRAGMENT: true,
1212
RETURN_DOM_IMPORT: false,
1313
},
14+
generatesKeys: false,
1415
})
1516
})
1617

@@ -28,6 +29,7 @@ describe('Options', () => {
2829
RETURN_DOM_FRAGMENT: true,
2930
RETURN_DOM_IMPORT: false,
3031
},
32+
generatesKeys: false,
3133
})
3234
})
3335

@@ -44,6 +46,7 @@ describe('Options', () => {
4446
RETURN_DOM_FRAGMENT: true,
4547
RETURN_DOM_IMPORT: false,
4648
},
49+
generatesKeys: false,
4750
})
4851
})
4952
})

‎tests/react.spec.ts‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,48 @@ function shallowWrapper(elements: React.ReactNode[]) {
99

1010
describe('React', () => {
1111
describe('#render', () => {
12+
describe('generatesKeys', () => {
13+
it('should use key if provided', () => {
14+
const div = document.createElement('div')
15+
const link = document.createElement('a')
16+
link.textContent = 'Link'
17+
link.setAttribute('key', 'link')
18+
div.appendChild(link)
19+
20+
const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
21+
expect(wrapper.find('a').key()).toEqual('link')
22+
})
23+
24+
it('should use id if provided and key is not here', () => {
25+
const div = document.createElement('div')
26+
const link = document.createElement('a')
27+
link.textContent = 'Link'
28+
link.setAttribute('id', 'link')
29+
div.appendChild(link)
30+
31+
const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
32+
expect(wrapper.find('a').key()).toEqual('link')
33+
})
34+
35+
it('should use a random key if key nor id are specified', () => {
36+
const div = document.createElement('div')
37+
const link = document.createElement('a')
38+
link.textContent = 'Link'
39+
div.appendChild(link)
40+
41+
const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
42+
expect(wrapper.find('a').key()).toHaveLength(5)
43+
})
44+
})
45+
1246
it('should render a element node', () => {
1347
const div = document.createElement('div')
1448
const link = document.createElement('a')
1549
link.textContent = 'Link'
1650
link.setAttribute('key', 'link')
1751
div.appendChild(link)
1852

19-
const wrapper = shallowWrapper(render(div.childNodes))
53+
const wrapper = shallowWrapper(render(div.childNodes, {}))
2054
expect(wrapper.find('a').text()).toEqual('Link')
2155
})
2256

@@ -26,7 +60,7 @@ describe('React', () => {
2660
newLine.setAttribute('key', 'test')
2761
div.appendChild(newLine)
2862

29-
const wrapper = shallowWrapper(render(div.childNodes))
63+
const wrapper = shallowWrapper(render(div.childNodes, {}))
3064
expect(wrapper.find('br')).toHaveLength(1)
3165
})
3266

@@ -35,7 +69,7 @@ describe('React', () => {
3569
const text = document.createTextNode('Text')
3670
div.appendChild(text)
3771

38-
const wrapper = shallowWrapper(render(div.childNodes))
72+
const wrapper = shallowWrapper(render(div.childNodes, {}))
3973
expect(wrapper.text()).toEqual('Text')
4074
})
4175

@@ -44,7 +78,7 @@ describe('React', () => {
4478
const comment = document.createComment('Comment')
4579
div.appendChild(comment)
4680

47-
const wrapper = shallowWrapper(render(div.childNodes))
81+
const wrapper = shallowWrapper(render(div.childNodes, {}))
4882
expect(wrapper.children()).toHaveLength(0)
4983
})
5084

@@ -56,7 +90,7 @@ describe('React', () => {
5690
span.setAttribute('key', 'test')
5791
div.appendChild(span)
5892

59-
const wrapper = shallowWrapper(render(div.childNodes))
93+
const wrapper = shallowWrapper(render(div.childNodes, {}))
6094
expect(wrapper.find('span')).toHaveLength(1)
6195
expect(wrapper.find('span').prop('htmlFor')).toEqual('test')
6296
expect(wrapper.find('span').prop('className')).toEqual('test')

0 commit comments

Comments
 (0)