Add dom.js to allow custom document object (#165)

* Add dom.js to allow custom document object

* fix test by keeping require()

* node version check

* fix standardjs errors

* unconditional html.js

* Also detect ./html in the babel plugin

dom.js

@@ -0,0 +1 @@
+module.exports = require('./lib/dom')

lib/append-child.js

@@ -51,7 +51,7 @@ module.exports = function appendChild (el, childs) {
 
       // We didn't have a text node yet, create one
       } else {
-        node = document.createTextNode(node)
+        node = el.ownerDocument.createTextNode(node)
         el.appendChild(node)
         lastChild = node
       }

lib/browser.js

@@ -1,113 +1 @@
-'use strict'
-
-var hyperx = require('hyperx')
-var appendChild = require('./append-child')
-var SVG_TAGS = require('./svg-tags')
-var BOOL_PROPS = require('./bool-props')
-// Props that need to be set directly rather than with el.setAttribute()
-var DIRECT_PROPS = require('./direct-props')
-
-var SVGNS = 'http://www.w3.org/2000/svg'
-var XLINKNS = 'http://www.w3.org/1999/xlink'
-
-var COMMENT_TAG = '!--'
-
-function nanoHtmlCreateElement (tag, props, children) {
-  var el
-
-  // If an svg tag, it needs a namespace
-  if (SVG_TAGS.indexOf(tag) !== -1) {
-    props.namespace = SVGNS
-  }
-
-  // If we are using a namespace
-  var ns = false
-  if (props.namespace) {
-    ns = props.namespace
-    delete props.namespace
-  }
-
-  // If we are extending a builtin element
-  var isCustomElement = false
-  if (props.is) {
-    isCustomElement = props.is
-    delete props.is
-  }
-
-  // Create the element
-  if (ns) {
-    if (isCustomElement) {
-      el = document.createElementNS(ns, tag, { is: isCustomElement })
-    } else {
-      el = document.createElementNS(ns, tag)
-    }
-  } else if (tag === COMMENT_TAG) {
-    return document.createComment(props.comment)
-  } else if (isCustomElement) {
-    el = document.createElement(tag, { is: isCustomElement })
-  } else {
-    el = document.createElement(tag)
-  }
-
-  // Create the properties
-  for (var p in props) {
-    if (props.hasOwnProperty(p)) {
-      var key = p.toLowerCase()
-      var val = props[p]
-      // Normalize className
-      if (key === 'classname') {
-        key = 'class'
-        p = 'class'
-      }
-      // The for attribute gets transformed to htmlFor, but we just set as for
-      if (p === 'htmlFor') {
-        p = 'for'
-      }
-      // If a property is boolean, set itself to the key
-      if (BOOL_PROPS.indexOf(key) !== -1) {
-        if (String(val) === 'true') val = key
-        else if (String(val) === 'false') continue
-      }
-      // If a property prefers being set directly vs setAttribute
-      if (key.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(key) !== -1) {
-        el[p] = val
-      } else {
-        if (ns) {
-          if (p === 'xlink:href') {
-            el.setAttributeNS(XLINKNS, p, val)
-          } else if (/^xmlns($|:)/i.test(p)) {
-            // skip xmlns definitions
-          } else {
-            el.setAttributeNS(null, p, val)
-          }
-        } else {
-          el.setAttribute(p, val)
-        }
-      }
-    }
-  }
-
-  appendChild(el, children)
-  return el
-}
-
-function createFragment (nodes) {
-  var fragment = document.createDocumentFragment()
-  for (var i = 0; i < nodes.length; i++) {
-    if (nodes[i] == null) continue
-    if (Array.isArray(nodes[i])) {
-      fragment.appendChild(createFragment(nodes[i]))
-    } else {
-      if (typeof nodes[i] === 'string') nodes[i] = document.createTextNode(nodes[i])
-      fragment.appendChild(nodes[i])
-    }
-  }
-  return fragment
-}
-
-module.exports = hyperx(nanoHtmlCreateElement, {
-  comments: true,
-  createFragment: createFragment
-})
-module.exports.default = module.exports
-module.exports.createElement = nanoHtmlCreateElement
+module.exports = require('./dom')(document)

lib/dom.js

@@ -0,0 +1,116 @@
+'use strict'
+
+var hyperx = require('hyperx')
+var appendChild = require('./append-child')
+var SVG_TAGS = require('./svg-tags')
+var BOOL_PROPS = require('./bool-props')
+// Props that need to be set directly rather than with el.setAttribute()
+var DIRECT_PROPS = require('./direct-props')
+
+var SVGNS = 'http://www.w3.org/2000/svg'
+var XLINKNS = 'http://www.w3.org/1999/xlink'
+
+var COMMENT_TAG = '!--'
+
+module.exports = function (document) {
+  function nanoHtmlCreateElement (tag, props, children) {
+    var el
+
+    // If an svg tag, it needs a namespace
+    if (SVG_TAGS.indexOf(tag) !== -1) {
+      props.namespace = SVGNS
+    }
+
+    // If we are using a namespace
+    var ns = false
+    if (props.namespace) {
+      ns = props.namespace
+      delete props.namespace
+    }
+
+    // If we are extending a builtin element
+    var isCustomElement = false
+    if (props.is) {
+      isCustomElement = props.is
+      delete props.is
+    }
+
+    // Create the element
+    if (ns) {
+      if (isCustomElement) {
+        el = document.createElementNS(ns, tag, { is: isCustomElement })
+      } else {
+        el = document.createElementNS(ns, tag)
+      }
+    } else if (tag === COMMENT_TAG) {
+      return document.createComment(props.comment)
+    } else if (isCustomElement) {
+      el = document.createElement(tag, { is: isCustomElement })
+    } else {
+      el = document.createElement(tag)
+    }
+
+    // Create the properties
+    for (var p in props) {
+      if (props.hasOwnProperty(p)) {
+        var key = p.toLowerCase()
+        var val = props[p]
+        // Normalize className
+        if (key === 'classname') {
+          key = 'class'
+          p = 'class'
+        }
+        // The for attribute gets transformed to htmlFor, but we just set as for
+        if (p === 'htmlFor') {
+          p = 'for'
+        }
+        // If a property is boolean, set itself to the key
+        if (BOOL_PROPS.indexOf(key) !== -1) {
+          if (String(val) === 'true') val = key
+          else if (String(val) === 'false') continue
+        }
+        // If a property prefers being set directly vs setAttribute
+        if (key.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(key) !== -1) {
+          el[p] = val
+        } else {
+          if (ns) {
+            if (p === 'xlink:href') {
+              el.setAttributeNS(XLINKNS, p, val)
+            } else if (/^xmlns($|:)/i.test(p)) {
+              // skip xmlns definitions
+            } else {
+              el.setAttributeNS(null, p, val)
+            }
+          } else {
+            el.setAttribute(p, val)
+          }
+        }
+      }
+    }
+
+    appendChild(el, children)
+    return el
+  }
+
+  function createFragment (nodes) {
+    var fragment = document.createDocumentFragment()
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i] == null) continue
+      if (Array.isArray(nodes[i])) {
+        fragment.appendChild(createFragment(nodes[i]))
+      } else {
+        if (typeof nodes[i] === 'string') nodes[i] = document.createTextNode(nodes[i])
+        fragment.appendChild(nodes[i])
+      }
+    }
+    return fragment
+  }
+
+  var exports = hyperx(nanoHtmlCreateElement, {
+    comments: true,
+    createFragment: createFragment
+  })
+  exports.default = exports
+  exports.createComment = nanoHtmlCreateElement
+  return exports
+}

package.json

@@ -7,6 +7,7 @@
   "files": [
     "index.js",
     "raw.js",
+    "dom.js",
     "lib",
     "types",
     "dist"
@@ -16,7 +17,7 @@
     "bench": "node bench/server.js && browserify bench/client.js | tape-run",
     "build": "mkdir -p dist/ && browserify index -s html -p bundle-collapser/plugin > dist/bundle.js && browserify index -p tinyify > dist/bundle.min.js && cat dist/bundle.min.js | gzip --best --stdout | wc -c | pretty-bytes",
     "prepublishOnly": "npm run build",
-    "test": "npm run test:standard && npm run test:node && npm run test:browser && npm run test:browser && npm run test:transform-browser && npm run test:babel-browser",
+    "test": "npm run test:standard && npm run test:node && npm run test:browser && npm run test:transform-browser && npm run test:babel-browser",
     "test:standard": "standard",
     "test:node": "node tests",
     "test:browser": "browserify tests/browser | tape-run",
@@ -46,6 +47,7 @@
     "bubleify": "^1.2.0",
     "bundle-collapser": "^1.3.0",
     "choo": "^6.9.0",
+    "jsdom": "^15.2.0",
     "pify": "^3.0.0",
     "standard": "^10.0.3",
     "tape": "^4.8.0",

tests/babel/build.js

@@ -3,7 +3,10 @@ const nanohtml = require('../../')
 
 browserify(require.resolve('../browser'))
   .transform('aliasify', {
-    aliases: { '../../': 'nanohtml' }
+    aliases: {
+      '../../': 'nanohtml',
+      './html': 'nanohtml'
+    }
   })
   .transform('babelify', {
     plugins: [

tests/browser/api.js

@@ -1,5 +1,9 @@
 var test = require('tape')
-var html = require('../../')
+if (typeof window !== 'undefined') {
+  var html = require('../../')
+} else {
+  html = require('./html').html
+}
 
 test('creates an element', function (t) {
   t.plan(3)

tests/browser/elements.js

@@ -1,5 +1,12 @@
 var test = require('tape')
-var html = require('../../')
+if (typeof window !== 'undefined') {
+  var document = window.document
+  var html = require('../../')
+} else {
+  var nano = require('./html')
+  document = nano.document
+  html = nano.html
+}
 
 test('create inputs', function (t) {
   t.plan(7)

tests/browser/events.js

@@ -1,5 +1,12 @@
 let test = require('tape')
-var html = require('../../')
+if (typeof window !== 'undefined') {
+  var document = window.document
+  var html = require('../../')
+} else {
+  var nano = require('./html')
+  document = nano.document
+  html = nano.html
+}
 
 /* Note:
 Failing tests have been commented. They include the following:

tests/browser/html.js

@@ -0,0 +1,4 @@
+var doc = new (require('js' + 'dom').JSDOM)().window.document
+
+module.exports.document = doc
+module.exports.html = require('../../dom')(doc)

tests/browser/multiple.js

@@ -1,5 +1,12 @@
 var test = require('tape')
-var html = require('../../')
+if (typeof window !== 'undefined') {
+  var document = window.document
+  var html = require('../../')
+} else {
+  var nano = require('./html')
+  document = nano.document
+  html = nano.html
+}
 
 test('multiple elements', function (t) {
   var multiple = html`<li>Hamburg</li><li>Helsinki</li>haha<li>Berlin<div>test</div></li>`

tests/browser/raw.js

@@ -2,12 +2,14 @@ var test = require('tape')
 var html = require('../../')
 var raw = require('../../raw')
 
-test('unescape html', function (t) {
-  t.plan(1)
+if (typeof window !== 'undefined') {
+  test('unescape html', function (t) {
+    t.plan(1)
 
-  var expected = html`<span>Hello there</span>`.toString()
-  var result = raw('<span>Hello&nbsp;there</span>').toString()
+    var expected = html`<span>Hello there</span>`.toString()
+    var result = raw('<span>Hello&nbsp;there</span>').toString()
 
-  t.equal(expected, result)
-  t.end()
-})
+    t.equal(expected, result)
+    t.end()
+  })
+}

tests/index.js

@@ -1,6 +1,12 @@
-if (typeof window !== 'undefined') {
+function getNodeMajor () {
+  return process.version.split('.')[0].slice(1)
+}
+
+if (typeof process === 'undefined' || getNodeMajor() >= 8) {
   require('./browser')
-} else {
+}
+
+if (typeof window === 'undefined') {
   require('./server')
   require('./transform')
   require('./babel')

tests/transform/build.js

@@ -3,7 +3,10 @@ const nanohtml = require('../../')
 
 browserify(require.resolve('../browser'))
   .transform('aliasify', {
-    aliases: { '../../': 'nanohtml' }
+    aliases: {
+      './html': 'nanohtml',
+      '../../': 'nanohtml'
+    }
   })
   .transform(nanohtml)
   .bundle()