Update: Reorganize code to be more efficient

Author: thomasthiebaud

src/ast.ts

@@ -0,0 +1,24 @@
+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,
+}
+
+export function getAttributes(elementAttributes: NamedNodeMap) {
+  const attributes: { [keyof: string]: string } = {}
+  for (let i = 0; i < elementAttributes.length; i++) {
+      const attribute = elementAttributes.item(i)
+      attributes[attribute.nodeName] = attribute.nodeValue
+  }
+  return attributes
+}
+
+export function parse(html: string): NodeListOf<Node & ChildNode> {
+  const parser = new DOMParser()
+  const document = parser.parseFromString(`<htmldomtoreactroot>${html}</htmldomtoreactroot>`, 'application/xml')
+  return document.childNodes.item(0).childNodes
+}

src/dom.ts

@@ -1,7 +1,10 @@
-import getAst from './ast'
-import { renderElements } from './react'
+import * as dom from './dom'
+import { render } from './react'
 
 export function parse(html: string): React.ReactNode[] {
-  const ast = getAst(html)
-  return renderElements(ast)
+  if (typeof html !== 'string') {
+    throw new TypeError('First argument must be a string.')
+  }
+
+  return render(dom.parse(html))
 }

src/index.ts

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { ASTElement, Attributes, NodeType } from './ast'
+import { getAttributes, NodeType } from './dom'
+
+export interface Attributes { [keyof: string]: string }
 
 const reactAttributesMap: Attributes = {
   acceptcharset: 'acceptCharset',
@@ -49,12 +51,10 @@ const reactAttributesMap: Attributes = {
   usemap: 'useMap',
 }
 
-function transformAttributes(attributes?: Attributes): Attributes {
-  if (!attributes) {
-    return null
-  }
-
+function transformAttributes(attributesMap: NamedNodeMap): Attributes {
+  const attributes = getAttributes(attributesMap)
   const transformedAttributes: Attributes = {}
+
   Object.keys(attributes).forEach((key) => {
     if (!key.startsWith('on')) {
       if (reactAttributesMap[key]) {
@@ -67,38 +67,40 @@ function transformAttributes(attributes?: Attributes): Attributes {
   return transformedAttributes
 }
 
-function transformChildren(children?: ASTElement[]) {
-  return children || []
+function renderTextNode(node: Node & ChildNode) {
+  return node.nodeValue
 }
 
-export function transform(element: ASTElement) {
-  return {
-    ...element,
-    attributes: transformAttributes(element.attributes),
-    children: transformChildren(element.children),
+function renderElementNode(node: Node & ChildNode) {
+  const element = transform(node as Element)
+
+  if (element.childNodes) {
+    return React.createElement(element.nodeName, element.attributes, render(element.childNodes))
   }
+  return React.createElement(element.nodeName, element.attributes)
 }
 
-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.attributes, children)
+function transform(element: Element) {
+  return {
+    attributes: transformAttributes(element.attributes),
+    childNodes: element.childNodes,
+    nodeName: element.nodeName,
+    nodeType: element.nodeType,
+    nodeValue: element.nodeValue,
   }
-
-  return null
 }
 
-export function renderElements(ast: ASTElement[]): React.ReactNode[] {
-  return ast.reduce((elements, element) => {
-    // Only keep text and tags. Remove everything else
-    if (element.type === NodeType.ELEMENT_NODE || element.type === NodeType.TEXT_NODE) {
-      elements.push(renderElement(transform(element)))
+export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
+  const elements = []
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes.item(i)
+
+    if (node.nodeType === NodeType.TEXT_NODE) {
+      elements.push(renderTextNode(node))
+    } else if (node.nodeType === NodeType.ELEMENT_NODE) {
+      elements.push(renderElementNode(node))
     }
-    return elements
-  }, [])
+  }
+
+  return elements
 }

src/react.ts

@@ -9,6 +9,14 @@ describe('Public API', () => {
   })
 
   describe('#parse', () => {
+    it('should throw an error if the first parameter is not a string', (done) => {
+      try {
+        htmldomToReact.parse(null)
+      } catch (err) {
+        done()
+      }
+    })
+
     it('should convert a string to an array of react nodes', () => {
       const elements = htmldomToReact.parse('<em key="1"><b key="2">It\' is working</b></em>')
       const wrapper = render(React.createElement('div', null, elements))