chore: support IE11 without polyfills and transpiling

Author: gkubisa

benchmark/index.js

@@ -0,0 +1,21 @@
+const benchmark = require('benchmark')
+const fs = require('fs')
+const jsdom = require('jsdom')
+const path = require('path')
+const diff = require('../lib/diff')
+
+const oldPath = path.join(__dirname, 'old.html')
+const newPath = path.join(__dirname, 'new.html')
+const oldHtml = fs.readFileSync(oldPath, 'utf8')
+const newHtml = fs.readFileSync(newPath, 'utf8')
+const oldNode = new jsdom.JSDOM(oldHtml).window.document.body
+const newNode = new jsdom.JSDOM(newHtml).window.document.body
+
+const suite = new benchmark.Suite()
+suite.add('diff', () => {
+    diff.visualDomDiff(oldNode, newNode)
+})
+suite.on('cycle', function(event) {
+    console.log(String(event.target))
+})
+suite.run({ async: true })

benchmark/new.html

@@ -3,30 +3,30 @@ import 'regenerator-runtime/runtime'
 import { visualDomDiff } from '../lib'
 import './main.css'
 
-window.addEventListener('load', () => {
+window.addEventListener('load', function() {
     const input1Html = document.getElementById('input1-html')
     const input1 = document.getElementById('input1')
     const input2Html = document.getElementById('input2-html')
     const input2 = document.getElementById('input2')
     const outputHtml = document.getElementById('output-html')
     const output = document.getElementById('output')
-    const updateInput1 = () => {
+    const updateInput1 = function() {
         input1.firstChild.innerHTML = input1Html.value
     }
-    const updateInput2 = () => {
+    const updateInput2 = function() {
         input2.firstChild.innerHTML = input2Html.value
     }
-    const updateDiff = () => {
+    const updateDiff = function() {
         output.innerHTML = ''
         output.appendChild(visualDomDiff(input1.firstChild, input2.firstChild))
         outputHtml.value = output.innerHTML
     }
 
-    input1Html.addEventListener('input', () => {
+    input1Html.addEventListener('input', function() {
         updateInput1()
         updateDiff()
     })
-    input2Html.addEventListener('input', () => {
+    input2Html.addEventListener('input', function() {
         updateInput2()
         updateDiff()
     })

benchmark/old.html

@@ -2,14 +2,15 @@ module.exports = {
     preset: 'ts-jest',
     setupFiles: ['<rootDir>/scripts/jestSetUp'],
     testMatch: [`<rootDir>/src/**/*.test.ts`],
+    testEnvironment: 'node',
     collectCoverage: true,
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.test.{ts,tsx}'],
     coverageThreshold: {
         global: {
             branches: 100,
             functions: 100,
             lines: 100,
-            statements: 100
-        }
-    }
+            statements: 100,
+        },
+    },
 }

demo/main.js

@@ -11,6 +11,7 @@
   ],
   "scripts": {
     "clean": "rimraf lib",
+    "prettier-fix": "prettier \"./src/**/*\" \"./demo/**/*\" \"!./**/*.jpg\" --list-different --write",
     "prettier": "prettier \"./src/**/*\" \"./demo/**/*\" \"!./**/*.jpg\" --list-different",
     "tslint": "tslint --project .",
     "tsc": "tsc -b .",
@@ -21,7 +22,8 @@
     "start:demo": "webpack-dev-server -d",
     "start:tsc": "tsc -b -w .",
     "preversion": "npm outdated && run-s build demo && git add docs",
-    "postversion": "git push && git push origin v${npm_package_version}"
+    "postversion": "git push && git push origin v${npm_package_version}",
+    "benchmark": "node benchmark"
   },
   "repository": {
     "type": "git",
@@ -48,6 +50,7 @@
     "@types/jest": "^24.0.18",
     "@types/jsdom": "^12.2.4",
     "babel-loader": "^8.0.6",
+    "benchmark": "^2.1.4",
     "clean-webpack-plugin": "^3.0.0",
     "core-js": "^3.2.1",
     "css-loader": "^3.2.0",

jest.config.js

@@ -1,7 +1,9 @@
 import { Diff } from 'diff-match-patch'
+import { JSDOM } from 'jsdom'
 import { optionsToConfig } from './config'
 import { diffText, isComment, isDocumentFragment, isText } from './util'
 
+const document = new JSDOM('').window.document
 const text = document.createTextNode('text')
 const span = document.createElement('SPAN')
 const div = document.createElement('DIV')

package-lock.json

@@ -6,6 +6,7 @@ import { areNodesEqual, charForNodeName, isElement, isText } from './util'
 
 jest.setTimeout(2000)
 
+const document = new JSDOM('').window.document
 const pChar = charForNodeName('P')
 
 function fragmentToHtml(documentFragment: DocumentFragment): string {