Use ESM

Author: wooorm

.gitignore

@@ -1,8 +1,5 @@
 .DS_Store
 *.log
-.nyc_output/
 coverage/
 node_modules/
-hast-to-hyperscript.js
-hast-to-hyperscript.min.js
 yarn.lock

.prettierignore

@@ -1,5 +1,2 @@
 coverage/
-hast-to-hyperscript.js
-hast-to-hyperscript.min.js
-*.json
 *.md

index.js

@@ -1,30 +1,25 @@
-'use strict'
-
-var html = require('property-information/html')
-var svg = require('property-information/svg')
-var find = require('property-information/find')
-var hastToReact = require('property-information/hast-to-react.json')
-var spaces = require('space-separated-tokens')
-var commas = require('comma-separated-tokens')
-var style = require('style-to-object')
-var ns = require('web-namespaces')
-var convert = require('unist-util-is/convert')
+import {html, svg, find, hastToReact} from 'property-information'
+import {stringify as spaces} from 'space-separated-tokens'
+import {stringify as commas} from 'comma-separated-tokens'
+import style from 'style-to-object'
+import {webNamespaces as ns} from 'web-namespaces'
+import {convert} from 'unist-util-is'
+
+var own = {}.hasOwnProperty
 
 var root = convert('root')
 var element = convert('element')
 var text = convert('text')
 
-module.exports = wrapper
-
-function wrapper(h, node, options) {
+export function toH(h, node, options) {
   var settings = options || {}
   var r = react(h)
   var v = vue(h)
   var vd = vdom(h)
   var prefix
 
   if (typeof h !== 'function') {
-    throw new Error('h is not a function')
+    throw new TypeError('h is not a function')
   }
 
   if (typeof settings === 'string' || typeof settings === 'boolean') {
@@ -50,9 +45,14 @@ function wrapper(h, node, options) {
     )
   }
 
-  return toH(h, node, {
+  return transform(h, node, {
     schema: settings.space === 'svg' ? svg : html,
-    prefix: prefix == null ? (r || v || vd ? 'h-' : null) : prefix,
+    prefix:
+      prefix === undefined || prefix === null
+        ? r || v || vd
+          ? 'h-'
+          : null
+        : prefix,
     key: 0,
     react: r,
     vue: v,
@@ -62,7 +62,7 @@ function wrapper(h, node, options) {
 }
 
 // Transform a hast node through a hyperscript interface to *anything*!
-function toH(h, node, ctx) {
+function transform(h, node, ctx) {
   var parentSchema = ctx.schema
   var schema = parentSchema
   var name = node.tagName
@@ -78,7 +78,9 @@ function toH(h, node, ctx) {
   }
 
   for (key in node.properties) {
-    addAttribute(attributes, key, node.properties[key], ctx, name)
+    if (own.call(node.properties, key)) {
+      addAttribute(attributes, key, node.properties[key], ctx, name)
+    }
   }
 
   if (ctx.vdom) {
@@ -99,7 +101,7 @@ function toH(h, node, ctx) {
       value = node.children[index]
 
       if (element(value)) {
-        nodes.push(toH(h, value, ctx))
+        nodes.push(transform(h, value, ctx))
       } else if (text(value)) {
         nodes.push(value.value)
       }
@@ -111,20 +113,22 @@ function toH(h, node, ctx) {
 
   // Ensure no React warnings are triggered for void elements having children
   // passed in.
-  return nodes.length
+  return nodes.length > 0
     ? h.call(node, name, attributes, nodes)
     : h.call(node, name, attributes)
 }
 
+// eslint-disable-next-line complexity, max-params
 function addAttribute(props, prop, value, ctx, name) {
   var info = find(ctx.schema, prop)
   var subprop
 
   // Ignore nullish and `NaN` values.
   // Ignore `false` and falsey known booleans for hyperlike DSLs.
   if (
-    value == null ||
-    value !== value ||
+    value === undefined ||
+    value === null ||
+    (typeof value === 'number' && Number.isNaN(value)) ||
     (value === false && (ctx.vue || ctx.vdom || ctx.hyperscript)) ||
     (!value && info.boolean && (ctx.vue || ctx.vdom || ctx.hyperscript))
   ) {
@@ -134,7 +138,7 @@ function addAttribute(props, prop, value, ctx, name) {
   if (value && typeof value === 'object' && 'length' in value) {
     // Accept `array`.
     // Most props are space-separated.
-    value = (info.commaSeparated ? commas : spaces).stringify(value)
+    value = info.commaSeparated ? commas(value) : spaces(value)
   }
 
   // Treat `true` and truthy known booleans.
@@ -175,7 +179,9 @@ function addAttribute(props, prop, value, ctx, name) {
 function react(h) {
   var node = h && h('div')
   return Boolean(
-    node && ('_owner' in node || '_store' in node) && node.key == null
+    node &&
+      ('_owner' in node || '_store' in node) &&
+      (node.key === undefined || node.key === null)
   )
 }
 

package.json

@@ -32,58 +32,48 @@
     "Koto Hajime <[email protected]>",
     "Christian Murphy <[email protected]>"
   ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "index.js",
+  "types": "types/index.d.ts",
   "files": [
-    "index.js",
-    "types/index.d.ts"
+    "types/index.d.ts",
+    "index.js"
   ],
-  "types": "types/index.d.ts",
   "dependencies": {
     "@types/unist": "^2.0.3",
-    "comma-separated-tokens": "^1.0.0",
-    "property-information": "^5.3.0",
-    "space-separated-tokens": "^1.0.0",
+    "comma-separated-tokens": "^2.0.0",
+    "property-information": "^6.0.0",
+    "space-separated-tokens": "^2.0.0",
     "style-to-object": "^0.3.0",
-    "unist-util-is": "^4.0.0",
-    "web-namespaces": "^1.0.0"
+    "unist-util-is": "^5.0.0",
+    "web-namespaces": "^2.0.0"
   },
   "devDependencies": {
     "@types/hyperscript": "0.0.4",
     "@types/react": "^17.0.0",
     "@types/virtual-dom": "^2.0.0",
-    "browserify": "^17.0.0",
-    "dtslint": "^4.0.0",
+    "c8": "^7.0.0",
     "hyperscript": "^2.0.0",
-    "nyc": "^15.0.0",
     "prettier": "^2.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "rehype": "^11.0.0",
     "remark-cli": "^9.0.0",
     "remark-preset-wooorm": "^8.0.0",
     "tape": "^5.0.0",
-    "tinyify": "^3.0.0",
-    "unist-builder": "^2.0.0",
+    "unist-builder": "^3.0.0",
     "vdom-to-html": "^2.0.0",
     "virtual-dom": "^2.0.0",
     "vue": "^2.0.0",
     "vue-server-renderer": "^2.0.0",
-    "xo": "^0.38.0"
+    "xo": "^0.39.0"
   },
   "scripts": {
     "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
-    "build-bundle": "browserify index.js -s hastToHyperscript -o hast-to-hyperscript.js",
-    "build-mangle": "browserify index.js -s hastToHyperscript -o hast-to-hyperscript.min.js -p tinyify",
-    "build": "npm run build-bundle && npm run build-mangle",
-    "test-api": "node test",
-    "test-coverage": "nyc --reporter lcov tape test.js",
-    "test-types": "dtslint types",
-    "test": "npm run format && npm run build && npm run test-coverage && npm run test-types"
-  },
-  "nyc": {
-    "check-coverage": true,
-    "lines": 100,
-    "functions": 100,
-    "branches": 100
+    "test-api": "node test.js",
+    "test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov node test.js",
+    "test": "npm run format && npm run test-coverage"
   },
   "prettier": {
     "tabWidth": 2,
@@ -95,24 +85,13 @@
   },
   "xo": {
     "prettier": true,
-    "esnext": false,
     "rules": {
-      "complexity": "off",
-      "eqeqeq": [
-        "error",
-        "always",
-        {
-          "null": "ignore"
-        }
-      ],
-      "guard-for-in": "off",
-      "max-params": "off",
-      "no-eq-null": "off",
-      "no-self-compare": "off",
-      "unicorn/explicit-length-check": "off",
-      "unicorn/no-fn-reference-in-iterator": "off",
-      "unicorn/prefer-type-error": "off"
-    }
+      "no-var": "off",
+      "prefer-arrow-callback": "off"
+    },
+    "ignore": [
+      "types/"
+    ]
   },
   "remarkConfig": {
     "plugins": [

readme.md

@@ -13,6 +13,9 @@ a [hyperscript][] interface.
 
 ## Install
 
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
+Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
+
 [npm][]:
 
 ```sh
@@ -22,8 +25,8 @@ npm install hast-to-hyperscript
 ## Use
 
 ```js
-var toH = require('hast-to-hyperscript')
-var h = require('hyperscript')
+import {toH} from 'hast-to-hyperscript'
+import h from 'hyperscript'
 
 var tree = {
   type: 'element',
@@ -55,6 +58,9 @@ Yields:
 
 ## API
 
+This package exports the following identifiers: `toH`.
+There is no default export.
+
 ### `toH(h, tree[, options|prefix])`
 
 Transform a [**hast**][hast] [*tree*][tree] to something else through a

test.js

@@ -1,18 +1,16 @@
-'use strict'
-
-var test = require('tape')
-var namespaces = require('web-namespaces')
-var u = require('unist-builder')
-var h = require('hyperscript')
-var v = require('virtual-dom/h')
-var vs = require('virtual-dom/virtual-hyperscript/svg')
-var r = require('react').createElement
-var rehype = require('rehype')
-var vToString = require('vdom-to-html')
-var rToString = require('react-dom/server').renderToStaticMarkup
-var Vue = require('vue')
-var VueSSR = require('vue-server-renderer')
-var toH = require('.')
+import test from 'tape'
+import {webNamespaces as ns} from 'web-namespaces'
+import {u} from 'unist-builder'
+import h from 'hyperscript'
+import v from 'virtual-dom/h.js'
+import vs from 'virtual-dom/virtual-hyperscript/svg.js'
+import rehype from 'rehype'
+import vToString from 'vdom-to-html'
+import {createElement as r} from 'react'
+import {renderToStaticMarkup as rToString} from 'react-dom/server.js'
+import Vue from 'vue'
+import VueSSR from 'vue-server-renderer'
+import {toH} from './index.js'
 
 var processor = rehype().data('settings', {fragment: true, position: false})
 
@@ -226,7 +224,7 @@ test('hast-to-hyperscript', function (t) {
         'svg',
         {
           key: 'h-5',
-          namespace: namespaces.svg,
+          namespace: ns.svg,
           attributes: {
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: '0 0 500 500'
@@ -235,7 +233,7 @@ test('hast-to-hyperscript', function (t) {
         [
           vs('circle', {
             key: 'h-6',
-            namespace: namespaces.svg,
+            namespace: ns.svg,
             attributes: {cx: 120, cy: 120, r: 100}
           })
         ]
@@ -617,13 +615,13 @@ test('hast-to-hyperscript', function (t) {
 
     t.equal(
       toH(v, u('element', {tagName: 'div'}), {space: 'svg'}).namespace,
-      namespaces.svg,
+      ns.svg,
       'should support `space: "svg"`'
     )
 
     t.equal(
       toH(v, u('element', {tagName: 'svg'})).namespace,
-      namespaces.svg,
+      ns.svg,
       'should infer `space: "svg"`'
     )
 
@@ -753,7 +751,7 @@ function json(value) {
 
 function vueToString(render) {
   return VueSSR.createRenderer({template: identity}).renderToString(
-    new Vue({render: render}).$mount()
+    new Vue({render}).$mount()
   )
 }