Merge pull request #2 from thomasthiebaud/reduce-bundle-size

Reduce bundle size

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',
@@ -56,43 +56,47 @@ function transformAttributes(attributes?: Attributes): Attributes {
 
   const transformedAttributes: Attributes = {}
   Object.keys(attributes).forEach((key) => {
-    if (!attributes[key].startsWith('on') && reactAttributesMap[key]) {
-      transformedAttributes[reactAttributesMap[key]] = attributes[key]
+    if (!key.startsWith('on')) {
+      if (reactAttributesMap[key]) {
+        transformedAttributes[reactAttributesMap[key]] = attributes[key]
+      } else {
+        transformedAttributes[key] = attributes[key]
+      }
     }
   })
   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 { render, shallow } from 'enzyme'
+import { render } from 'enzyme'
 import * as React from 'react'
 
 import * as htmldomToReact from '../src/index'
@@ -10,7 +10,7 @@ describe('Public API', () => {
 
   describe('#parse', () => {
     it('should convert a string to an array of react nodes', () => {
-      const elements = htmldomToReact.parse('<em><b>It\' is working</b></em>')
+      const elements = htmldomToReact.parse('<em key="1"><b key="2">It\' is working</b></em>')
       const wrapper = render(React.createElement('div', null, elements))
       expect(wrapper.text()).toEqual('It\' is working')
       expect(wrapper.find('em')).toHaveLength(1)

src/index.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)
     })
   })
 })