feat: upgrade JSDOM

BREAKING CHANGE:

- An AST is now generate from the JSDOM tree.
- You can still access the originalNode using `node.originalNode`.
- You now have to call `fromHtmlAttribute` and `fromHtmlElement` to replace a node.

package.json

@@ -14,24 +14,25 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.3",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^22.4.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "chalk": "^2.1.0",
-    "codecov": "^3.0.0",
-    "eslint": "^4.12.1",
+    "babel-preset-env": "^1.7.0",
+    "chalk": "^2.4.1",
+    "codecov": "^3.0.2",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-import": "^2.11.0",
     "glob": "^7.1.2",
-    "jest": "^21.2.1",
-    "lerna": "^2.5.1",
-    "lerna-tools": "^0.0.3",
-    "micromatch": "^3.0.4",
+    "jest": "^22.4.3",
+    "lerna": "^2.11.0",
+    "lerna-tools": "^1.0.0",
+    "micromatch": "^3.1.10",
     "mkdirp": "^0.5.1",
-    "prettier": "^1.9.1",
+    "prettier": "^1.12.1",
     "string-length": "^2.0.0"
   },
   "workspaces": [

packages/h2x-parse/package.json

@@ -8,6 +8,7 @@
   "homepage": "https://github.com/smooth-code/h2x",
   "main": "lib/index.js",
   "dependencies": {
-    "jsdom": "11.1.0"
+    "h2x-types": "^0.1.0",
+    "jsdom": "^11.10.0"
   }
 }

packages/h2x-parse/src/index.js

@@ -1,11 +1,9 @@
 /* eslint-disable no-restricted-syntax */
 import { JSDOM } from 'jsdom'
+import { fromHtmlElement } from 'h2x-types'
 
 function parse(code) {
-  const { window } = new JSDOM()
-  const container = window.document.createElement('div')
-  container.innerHTML = code
-  return container
+  return fromHtmlElement(JSDOM.fragment(code))
 }
 
 export default parse

packages/h2x-parse/src/index.test.js

@@ -3,9 +3,9 @@ import parse from './'
 describe('parse', () => {
   it('should parse HTML code and return a wrapped node', () => {
     const ast = parse(`<div id="foo"></div>ddd`)
-    expect(ast.childNodes[0].tagName).toBe('DIV')
-    expect(ast.childNodes[1].textContent).toBe('ddd')
-    expect(ast.childNodes[0].attributes[0].name).toBe('id')
-    expect(ast.childNodes[0].attributes[0].value).toBe('foo')
+    expect(ast.childNodes[0].originalNode.tagName).toBe('DIV')
+    expect(ast.childNodes[1].originalNode.textContent).toBe('ddd')
+    expect(ast.childNodes[0].attributes[0].originalNode.name).toBe('id')
+    expect(ast.childNodes[0].attributes[0].originalNode.value).toBe('foo')
   })
 })

packages/h2x-traverse/src/NodePath.js

@@ -66,11 +66,7 @@ class NodePath {
 
   remove() {
     this.shouldStop = true
-    if (this.type === 'HTMLElement') {
-      this.parent.removeChild(this.node)
-    } else if (this.type === 'HTMLAttribute') {
-      this.parent.removeAttribute(this.node.name)
-    } else if (Array.isArray(this.container)) {
+    if (Array.isArray(this.container)) {
       this.container.splice(this.key, 1)
     } else {
       this.container[this.key] = null

packages/h2x-traverse/src/index.test.js

@@ -1,4 +1,5 @@
 import parse from 'h2x-parse'
+import { fromHtmlElement } from 'h2x-types'
 import traverse from './'
 
 describe('traverse', () => {
@@ -110,7 +111,9 @@ describe('traverse', () => {
   it('should be possible to replace', () => {
     const enter = jest.fn(path => {
       if (path.node.tagName === 'DIV') {
-        path.replace(path.node.ownerDocument.createElement('header'))
+        path.replace(
+          fromHtmlElement(path.node.ownerDocument.createElement('header')),
+        )
       }
 
       // Bug with visiting container instead of parent

packages/h2x-types/src/HTMLNodeTypes.js

@@ -1,3 +1,4 @@
 export const ELEMENT_NODE = 1
 export const TEXT_NODE = 3
 export const COMMENT_NODE = 8
+export const FRAGMENT_NODE = 11

packages/h2x-types/src/fromHtmlAttribute.js

@@ -0,0 +1,20 @@
+import { VISITOR_KEYS } from './symbols'
+
+const HTML_ELEMENT_PROPERTIES = ['name', 'value']
+
+class HTMLAttributeNode {
+  static [VISITOR_KEYS] = null
+
+  constructor(originalNode) {
+    this.originalNode = originalNode
+    HTML_ELEMENT_PROPERTIES.forEach(property => {
+      this[property] = originalNode[property]
+    })
+  }
+}
+
+function fromHtmlAttribute(attribute) {
+  return new HTMLAttributeNode(attribute)
+}
+
+export default fromHtmlAttribute

packages/h2x-types/src/fromHtmlElement.js

@@ -0,0 +1,31 @@
+import { VISITOR_KEYS } from './symbols'
+import fromHtmlAttribute from './fromHtmlAttribute'
+
+const HTML_ELEMENT_PROPERTIES = ['tagName', 'ownerDocument', 'textContent']
+
+class HTMLElementNode {
+  static [VISITOR_KEYS] = ['childNodes', 'attributes']
+
+  constructor(originalNode) {
+    this.originalNode = originalNode
+    this.childNodes = originalNode.childNodes
+      ? Array.from(originalNode.childNodes).map(childNode =>
+          fromHtmlElement(childNode),
+        )
+      : null
+    this.attributes = originalNode.attributes
+      ? Array.from(originalNode.attributes).map(attribute =>
+          fromHtmlAttribute(attribute),
+        )
+      : null
+    HTML_ELEMENT_PROPERTIES.forEach(property => {
+      this[property] = originalNode[property]
+    })
+  }
+}
+
+function fromHtmlElement(htmlNode) {
+  return new HTMLElementNode(htmlNode)
+}
+
+export default fromHtmlElement

packages/h2x-types/src/getNodeType.js

@@ -2,12 +2,15 @@ import * as HTMLNodeTypes from './HTMLNodeTypes'
 import { NODE_TYPE } from './symbols'
 
 const getHTMLNodeType = node => {
-  if (node.constructor.name === 'Attr') return 'HTMLAttribute'
+  const { originalNode } = node
+  if (!originalNode) return null
+  if (originalNode.constructor.name === 'Attr') return 'HTMLAttribute'
 
-  switch (node.nodeType) {
+  switch (originalNode.nodeType) {
     case HTMLNodeTypes.TEXT_NODE:
       return 'HTMLText'
     case HTMLNodeTypes.ELEMENT_NODE:
+    case HTMLNodeTypes.FRAGMENT_NODE:
       return 'HTMLElement'
     case HTMLNodeTypes.COMMENT_NODE:
       return 'HTMLComment'

packages/h2x-types/src/getNodeType.test.js

@@ -16,6 +16,6 @@ describe('getNodeType', () => {
       <div id="foo"></div>
     `)
     expect(getNodeType(ast)).toBe('HTMLElement')
-    expect(getNodeType(ast.children[0].attributes[0])).toBe('HTMLAttribute')
+    expect(getNodeType(ast.childNodes[1].attributes[0])).toBe('HTMLAttribute')
   })
 })

packages/h2x-types/src/getNodeVisitorKeys.js

@@ -1,13 +1,7 @@
 import { VISITOR_KEYS } from './symbols'
 
-const getHTMLVisitorKeys = node => {
-  if (node.constructor.name === 'Attr') return null
-  return ['childNodes', 'attributes']
-}
-
 function getNodeVisitorKeys(node) {
-  if (node.constructor[VISITOR_KEYS]) return node.constructor[VISITOR_KEYS]
-  return getHTMLVisitorKeys(node)
+  return node.constructor[VISITOR_KEYS] || null
 }
 
 export default getNodeVisitorKeys

packages/h2x-types/src/getNodeVisitorKeys.test.js

@@ -16,6 +16,5 @@ describe('getNodeVisitorKeys', () => {
       <div id="foo"></div>
     `)
     expect(getNodeVisitorKeys(ast)).toEqual(['childNodes', 'attributes'])
-    expect(getNodeVisitorKeys(ast.children[0].attributes[0])).toBe(null)
   })
 })

packages/h2x-types/src/index.js

@@ -1,3 +1,5 @@
 export * from './symbols'
 export { default as getNodeType } from './getNodeType'
 export { default as getNodeVisitorKeys } from './getNodeVisitorKeys'
+export { default as fromHtmlElement } from './fromHtmlElement'
+export { default as fromHtmlAttribute } from './fromHtmlAttribute'

packages/h2x-types/src/symbols.js

@@ -1,2 +1,2 @@
-export const NODE_TYPE = Symbol('NODE_TYPE')
-export const VISITOR_KEYS = Symbol('VISITOR_KEYS')
+export const NODE_TYPE = Symbol.for('NODE_TYPE')
+export const VISITOR_KEYS = Symbol.for('VISITOR_KEYS')