New: Use browser DOMParser and drop external dependencies

Author: thomasthiebaud

package-lock.json

@@ -46,10 +46,7 @@
     "tslint-react": "3.6.0",
     "typescript": "2.9.2"
   },
-  "dependencies": {
-    "domhandler": "2.4.2",
-    "htmlparser2": "3.9.2"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": "^16.2.0"
   }

package.json

@@ -1,30 +1,77 @@
-import * as DomHandler from 'domhandler'
-import * as Parser from 'htmlparser2/lib/Parser'
-
 export interface Attributes { [keyof: string]: string }
 
-export interface Element {
-  attribs?: Attributes
-  children?: Element[]
-  data?: string
-  type: string
-  name?: string
+export interface ASTElement {
+  attributes?: Attributes
+  children?: ASTElement[]
+  name: string | null
+  type: NodeType
+  value: string | null
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+export enum NodeType {
+  ELEMENT_NODE = 1,
+  TEXT_NODE = 3,
+  PROCESSING_INSTRUCTION_NODE = 7,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11,
+}
+
+function getAttributes(elementAttributes: NamedNodeMap) {
+  const attributes: Attributes = {}
+  for (let i = 0; i < elementAttributes.length; i++) {
+      const attribute = elementAttributes.item(i)
+      attributes[attribute.nodeName] = attribute.nodeValue
+  }
+  return attributes
+}
+
+function nodeToElement(node: Node): ASTElement {
+  if (node.nodeType === NodeType.ELEMENT_NODE) {
+    const element = node as Element
+    return {
+      attributes: getAttributes(element.attributes),
+      children: nodesToElement(element.childNodes),
+      name: element.nodeName,
+      type: element.nodeType,
+      value: element.nodeValue,
+    }
+  } else if (node.nodeType === NodeType.TEXT_NODE) {
+    return {
+      children: nodesToElement(node.childNodes),
+      name: node.nodeName,
+      type: node.nodeType,
+      value: node.nodeValue,
+    }
+  }
+
+  return null
 }
 
-export interface AST extends Array<Element> {}
+function nodesToElement(nodes: NodeListOf<Node & ChildNode>): ASTElement[] {
+  const elements: ASTElement[] = []
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes.item(i)
+    const element = nodeToElement(node)
+
+    if (element) {
+      elements.push(element)
+    }
+  }
+  return elements
+}
 
-export default function getAst(html: string): AST {
+export default function getAst(html: string): ASTElement[] {
   if (typeof html !== 'string') {
     throw new TypeError('First argument must be a string.')
   }
-  const handler = new DomHandler()
-  const parser = new Parser(handler, {
-    decodeEntities: true,
-    lowerCaseAttributeNames: false,
-    lowerCaseTags: false,
-    recognizeSelfClosing: true,
-  })
-  parser.write(html)
-  parser.end()
-  return handler.dom
+
+  const parser = new DOMParser()
+  const document = parser.parseFromString(`<htmldomtoreactroot>${html}</htmldomtoreactroot>`, 'application/xml')
+
+  const astFromRoot = nodesToElement(document.childNodes)
+  return astFromRoot[0].children
 }

src/ast.ts

@@ -1,5 +1,5 @@
 import getAst from './ast'
-import { renderElements, transform } from './react'
+import { renderElements } from './react'
 
 export function parse(html: string): React.ReactNode[] {
   const ast = getAst(html)

src/domhandler.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Attributes, Element } from './ast'
+import { ASTElement, Attributes, NodeType } from './ast'
 
 const reactAttributesMap: Attributes = {
   acceptcharset: 'acceptCharset',
@@ -63,36 +63,36 @@ function transformAttributes(attributes?: Attributes): Attributes {
   return transformedAttributes
 }
 
-function transformChildren(children?: Element[]) {
+function transformChildren(children?: ASTElement[]) {
   return children || []
 }
 
-export function transform(element: Element) {
+export function transform(element: ASTElement) {
   return {
     ...element,
-    attribs: transformAttributes(element.attribs),
+    attributes: transformAttributes(element.attributes),
     children: transformChildren(element.children),
   }
 }
 
-export function renderElement(element: Element): React.ReactNode {
-  if (element.type === 'text') {
-    return element.data
-  } else if (element.type === 'tag') {
-    const children = element.data ? [
-      element.data,
+export function renderElement(element: ASTElement): React.ReactNode {
+  if (element.type === NodeType.TEXT_NODE) {
+    return element.value
+  } else if (element.type === NodeType.ELEMENT_NODE) {
+    const children = element.value ? [
+      element.value,
       ...renderElements(element.children),
     ] : renderElements(element.children)
-    return React.createElement(element.name, element.attribs, children)
+    return React.createElement(element.name, element.attributes, children)
   }
 
   return null
 }
 
-export function renderElements(ast: Element[]): React.ReactNode [] {
+export function renderElements(ast: ASTElement[]): React.ReactNode[] {
   return ast.reduce((elements, element) => {
-    // Only keep text and tags. Remove everything else like comments, scritps,...
-    if (element.type === 'tag' || element.type === 'text') {
+    // Only keep text and tags. Remove everything else
+    if (element.type === NodeType.ELEMENT_NODE || element.type === NodeType.TEXT_NODE) {
       elements.push(renderElement(transform(element)))
     }
     return elements

src/htmlparser2.d.ts

@@ -1,4 +1,4 @@
-import getAst from '../src/ast'
+import getAst, { NodeType } from '../src/ast'
 
 describe('AST', () => {
   describe('#getAst', () => {
@@ -13,37 +13,44 @@ describe('AST', () => {
     it('should convert a string to an ast', () => {
       const ast = getAst('This is a test')
       expect(ast).toHaveLength(1)
-      expect(ast[0].data).toEqual('This is a test')
-      expect(ast[0].type).toEqual('text')
+      expect(ast[0].value).toEqual('This is a test')
+      expect(ast[0].type).toEqual(NodeType.TEXT_NODE)
     })
 
     it('should correctly handle self closing tag', () => {
       const ast = getAst('This is <tag/> a test')
       expect(ast).toHaveLength(3)
 
-      expect(ast[0].data).toEqual('This is ')
-      expect(ast[0].type).toEqual('text')
+      expect(ast[0].value).toEqual('This is ')
+      expect(ast[0].type).toEqual(NodeType.TEXT_NODE)
 
       expect(ast[1].name).toEqual('tag')
-      expect(ast[1].type).toEqual('tag')
+      expect(ast[1].type).toEqual(NodeType.ELEMENT_NODE)
 
-      expect(ast[2].data).toEqual(' a test')
-      expect(ast[2].type).toEqual('text')
+      expect(ast[2].value).toEqual(' a test')
+      expect(ast[2].type).toEqual(NodeType.TEXT_NODE)
     })
 
     it('should not lowercase tag and attributes names', () => {
       const ast = getAst('This is <TAG ATT="test"/> a test')
       expect(ast).toHaveLength(3)
 
-      expect(ast[0].data).toEqual('This is ')
-      expect(ast[0].type).toEqual('text')
+      expect(ast[0].value).toEqual('This is ')
+      expect(ast[0].type).toEqual(NodeType.TEXT_NODE)
 
       expect(ast[1].name).toEqual('TAG')
-      expect(ast[1].attribs).toEqual({ ATT: 'test' })
-      expect(ast[1].type).toEqual('tag')
+      expect(ast[1].attributes).toEqual({ ATT: 'test' })
+      expect(ast[1].type).toEqual(NodeType.ELEMENT_NODE)
 
-      expect(ast[2].data).toEqual(' a test')
-      expect(ast[2].type).toEqual('text')
+      expect(ast[2].value).toEqual(' a test')
+      expect(ast[2].type).toEqual(NodeType.TEXT_NODE)
+    })
+
+    it('should ignore comments', () => {
+      const ast = getAst('This is a <!-- comment -->')
+      expect(ast).toHaveLength(1)
+      expect(ast[0].value).toEqual('This is a ')
+      expect(ast[0].type).toEqual(NodeType.TEXT_NODE)
     })
   })
 })

src/index.ts

@@ -1,80 +1,86 @@
 import { render, shallow } from 'enzyme'
 import * as React from 'react'
 
+import { NodeType } from '../src/ast'
 import { renderElement, renderElements, transform } from '../src/react'
 
 describe('React', () => {
   describe('#transform', () => {
     it('should remove event handler from attributes', () => {
       const element = {
-        attribs: {
+        attributes: {
           onclick: 'wazaaa',
         },
         name: 'button',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       }
 
       expect(transform(element)).toEqual({
-        attribs: {},
+        attributes: {},
         children: [],
         name: 'button',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       })
     })
 
     it('should rename attributes to match react syntax', () => {
       const element = {
-        attribs: {
+        attributes: {
           class: 'wazaaa',
           for: 'test',
         },
         name: 'button',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       }
 
       expect(transform(element)).toEqual({
-        attribs: {
+        attributes: {
           className: 'wazaaa',
           htmlFor: 'test',
         },
         children: [],
         name: 'button',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       })
     })
   })
 
   describe('#renderElement', () => {
     it('should render a text element', () => {
       const element = {
-        attribs: {},
-        data: 'Test',
-        type: 'text',
+        name: '#text',
+        type: NodeType.TEXT_NODE,
+        value: 'Test',
       }
 
       expect(renderElement(element)).toEqual('Test')
     })
 
     it('should render a tag element', () => {
       const element = {
-        attribs: {},
+        attributes: {},
         children: [],
-        data: 'Link',
         name: 'a',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: 'Link',
       }
       const link = shallow(React.createElement('div', null, renderElement(element)))
       expect(link.text()).toEqual('Link')
     })
 
     it('should render a tag element with attributes', () => {
       const element = {
-        attribs: {
+        attributes: {
           href: '#',
         },
         children: [],
         name: 'a',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       }
       const wrapper = shallow(React.createElement('div', null, renderElement(element)))
       const link = wrapper.find('a')
@@ -85,15 +91,17 @@ describe('React', () => {
       const element = {
         children: [{
           children: [{
-            attribs: {},
-            data: 'text',
-            type: 'text',
+            name: '#text',
+            type: NodeType.TEXT_NODE,
+            value: 'text',
           }],
           name: 'b',
-          type: 'tag',
+          type: NodeType.ELEMENT_NODE,
+          value: null,
         }],
         name: 'em',
-        type: 'tag',
+        type: NodeType.ELEMENT_NODE,
+        value: null,
       }
       const nested = render(React.createElement('div', null, renderElement(element)))
 
@@ -110,7 +118,8 @@ describe('React', () => {
     it('should ignore unknown type', () => {
       const element = {
         name: 'em',
-        type: '',
+        type: -1,
+        value: null,
       }
       expect(renderElement(element)).toBeNull()
     })
@@ -119,11 +128,9 @@ describe('React', () => {
   describe('#renderElements', () => {
     it('should only render text and tag elements', () => {
       const elements = [{
-        attribs: {},
-        children: [],
-        data: 'Link',
         name: 'a',
-        type: '',
+        type: -1,
+        value: 'Link',
       }]
       expect(renderElements(elements)).toEqual([])
     })