Refactor to improve bundle size

Author: wooorm

index.js

@@ -14,16 +14,14 @@ var root = convert('root')
 var element = convert('element')
 var text = convert('text')
 
-var dashes = /-([a-z])/g
-
 module.exports = wrapper
 
 function wrapper(h, node, options) {
   var settings = options || {}
+  var r = react(h)
+  var v = vue(h)
+  var vd = vdom(h)
   var prefix
-  var r
-  var v
-  var vd
 
   if (typeof h !== 'function') {
     throw new Error('h is not a function')
@@ -36,14 +34,6 @@ function wrapper(h, node, options) {
     prefix = settings.prefix
   }
 
-  r = react(h)
-  v = vue(h)
-  vd = vdom(h)
-
-  if (prefix === null || prefix === undefined) {
-    prefix = r === true || v === true || vd === true ? 'h-' : false
-  }
-
   if (root(node)) {
     node =
       node.children.length === 1 && element(node.children[0])
@@ -62,7 +52,7 @@ function wrapper(h, node, options) {
 
   return toH(h, node, {
     schema: settings.space === 'svg' ? svg : html,
-    prefix: prefix,
+    prefix: prefix == null ? (r || v || vd ? 'h-' : null) : prefix,
     key: 0,
     react: r,
     vue: v,
@@ -76,125 +66,105 @@ function toH(h, node, ctx) {
   var parentSchema = ctx.schema
   var schema = parentSchema
   var name = node.tagName
-  var properties
-  var attributes
-  var children
-  var property
-  var elements
-  var length
-  var index
+  var attributes = {}
+  var nodes = []
+  var index = -1
+  var key
   var value
-  var result
 
   if (parentSchema.space === 'html' && name.toLowerCase() === 'svg') {
     schema = svg
     ctx.schema = schema
   }
 
-  if (ctx.vdom === true && schema.space === 'html') {
-    name = name.toUpperCase()
+  for (key in node.properties) {
+    addAttribute(attributes, key, node.properties[key], ctx, name)
   }
 
-  properties = node.properties
-  attributes = {}
-
-  for (property in properties) {
-    addAttribute(attributes, property, properties[property], ctx)
-  }
-
-  if (
-    typeof attributes.style === 'string' &&
-    (ctx.vdom === true || ctx.vue === true || ctx.react === true)
-  ) {
-    // VDOM, Vue, and React accept `style` as object.
-    attributes.style = parseStyle(attributes.style, name)
+  if (ctx.vdom) {
+    if (schema.space === 'html') {
+      name = name.toUpperCase()
+    } else {
+      attributes.namespace = ns[schema.space]
+    }
   }
 
   if (ctx.prefix) {
     ctx.key++
     attributes.key = ctx.prefix + ctx.key
   }
 
-  if (ctx.vdom && schema.space !== 'html') {
-    attributes.namespace = ns[schema.space]
-  }
-
-  elements = []
-  children = node.children
-  length = children ? children.length : 0
-  index = -1
+  if (node.children) {
+    while (++index < node.children.length) {
+      value = node.children[index]
 
-  while (++index < length) {
-    value = children[index]
-
-    if (element(value)) {
-      elements.push(toH(h, value, ctx))
-    } else if (text(value)) {
-      elements.push(value.value)
+      if (element(value)) {
+        nodes.push(toH(h, value, ctx))
+      } else if (text(value)) {
+        nodes.push(value.value)
+      }
     }
   }
 
-  // Ensure no React warnings are triggered for void elements having children
-  // passed in.
-  result =
-    elements.length === 0
-      ? h.call(node, name, attributes)
-      : h.call(node, name, attributes, elements)
-
   // Restore parent schema.
   ctx.schema = parentSchema
 
-  return result
+  // Ensure no React warnings are triggered for void elements having children
+  // passed in.
+  return nodes.length
+    ? h.call(node, name, attributes, nodes)
+    : h.call(node, name, attributes)
 }
 
-function addAttribute(props, prop, value, ctx) {
-  var hyperlike = ctx.hyperscript || ctx.vdom || ctx.vue
-  var schema = ctx.schema
-  var info = find(schema, prop)
+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 === undefined ||
+    value == null ||
     value !== value ||
-    (hyperlike && value === false) ||
-    (hyperlike && info.boolean && !value)
+    (value === false && (ctx.vue || ctx.vdom || ctx.hyperscript)) ||
+    (!value && info.boolean && (ctx.vue || ctx.vdom || ctx.hyperscript))
   ) {
     return
   }
 
-  if (value !== null && typeof value === 'object' && 'length' in value) {
+  if (value && typeof value === 'object' && 'length' in value) {
     // Accept `array`.
     // Most props are space-separated.
     value = (info.commaSeparated ? commas : spaces).stringify(value)
   }
 
   // Treat `true` and truthy known booleans.
-  if (info.boolean && ctx.hyperscript === true) {
+  if (info.boolean && ctx.hyperscript) {
     value = ''
   }
 
+  // VDOM, Vue, and React accept `style` as object.
+  if (
+    info.property === 'style' &&
+    typeof value === 'string' &&
+    (ctx.react || ctx.vue || ctx.vdom)
+  ) {
+    value = parseStyle(value, name)
+  }
+
   if (ctx.vue) {
-    if (prop !== 'style') {
-      subprop = 'attrs'
-    }
+    if (info.property !== 'style') subprop = 'attrs'
   } else if (!info.mustUseProperty) {
-    if (ctx.vdom === true) {
-      subprop = 'attributes'
-    } else if (ctx.hyperscript === true) {
+    if (ctx.vdom) {
+      if (info.property !== 'style') subprop = 'attributes'
+    } else if (ctx.hyperscript) {
       subprop = 'attrs'
     }
   }
 
   if (subprop) {
-    if (props[subprop] === undefined) {
-      props[subprop] = {}
-    }
-
+    if (!props[subprop]) props[subprop] = {}
     props[subprop][info.attribute] = value
-  } else if (ctx.react && info.space) {
+  } else if (info.space && ctx.react) {
     props[hastToReact[info.property] || info.property] = value
   } else {
     props[info.attribute] = value
@@ -205,7 +175,7 @@ function addAttribute(props, prop, value, ctx) {
 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 == null
   )
 }
 
@@ -238,18 +208,11 @@ function parseStyle(value, tagName) {
   return result
 
   function iterator(name, value) {
-    result[styleCase(name)] = value
+    if (name.slice(0, 4) === '-ms-') name = 'ms-' + name.slice(4)
+    result[name.replace(/-([a-z])/g, styleReplacer)] = value
   }
 }
 
-function styleCase(value) {
-  if (value.slice(0, 4) === '-ms-') {
-    value = 'ms-' + value.slice(4)
-  }
-
-  return value.replace(dashes, styleReplacer)
-}
-
 function styleReplacer($0, $1) {
   return $1.toUpperCase()
 }

package.json

@@ -97,12 +97,21 @@
     "prettier": true,
     "esnext": false,
     "rules": {
-      "unicorn/no-fn-reference-in-iterator": "off",
-      "unicorn/prefer-type-error": "off",
-      "@typescript-eslint/prefer-readonly-parameter-types": "off",
+      "complexity": "off",
+      "eqeqeq": [
+        "error",
+        "always",
+        {
+          "null": "ignore"
+        }
+      ],
       "guard-for-in": "off",
+      "max-params": "off",
+      "no-eq-null": "off",
       "no-self-compare": "off",
-      "complexity": "off"
+      "unicorn/explicit-length-check": "off",
+      "unicorn/no-fn-reference-in-iterator": "off",
+      "unicorn/prefer-type-error": "off"
     }
   },
   "remarkConfig": {

test.js

@@ -186,7 +186,7 @@ test('hast-to-hyperscript', function (t) {
   })
 
   t.test('should support `virtual-dom/h`', function (t) {
-    var baseline = doc.replace(/color:red;/, 'color: red')
+    var baseline = doc.replace(/color:red;/, 'color: red;')
     var actual = toH(v, hast)
     var expected = v('div', {key: 'h-1'}, [
       v(
@@ -201,13 +201,15 @@ test('hast-to-hyperscript', function (t) {
             'strong',
             {
               key: 'h-3',
+              style: {
+                color: 'red'
+              },
               attributes: {
                 'aria-valuenow': '1',
                 foo: 'bar',
                 camelCase: 'on off',
                 'data-123': '456',
-                'data-some': 'yes',
-                style: 'color: red'
+                'data-some': 'yes'
               }
             },
             'charlie'
@@ -478,16 +480,6 @@ test('hast-to-hyperscript', function (t) {
       return expected
     }
 
-    function identity(value) {
-      return value
-    }
-
-    function vueToString(render) {
-      return VueSSR.createRenderer({template: identity}).renderToString(
-        new Vue({render: render}).$mount()
-      )
-    }
-
     function clean(node) {
       remove(node)
       return json(node)
@@ -526,13 +518,25 @@ test('hast-to-hyperscript', function (t) {
       'should patch `keys` on react'
     )
 
+    t.end()
+  })
+
+  t.test('should support style and other funky props', function (t) {
     t.deepEqual(
-      toH(v, u('element', {tagName: 'div', properties: {style: 'color: red'}}))
-        .properties.attributes.style,
-      'color: red',
+      vToString(
+        toH(v, u('element', {tagName: 'div', properties: {style: 'color:red'}}))
+      ),
+      '<div style="color: red;"></div>',
       'vdom: should patch a style declaration correctly'
     )
 
+    t.deepEqual(
+      toH(h, u('element', {tagName: 'div', properties: {style: 'color: red'}}))
+        .outerHTML,
+      '<div style="color:red;"></div>',
+      'hyperscript: should parse a style declaration'
+    )
+
     t.deepEqual(
       toH(r, u('element', {tagName: 'div', properties: {style: 'color: red'}}))
         .props.style,
@@ -743,3 +747,13 @@ function html(doc) {
 function json(value) {
   return JSON.parse(JSON.stringify(value))
 }
+
+function vueToString(render) {
+  return VueSSR.createRenderer({template: identity}).renderToString(
+    new Vue({render: render}).$mount()
+  )
+}
+
+function identity(value) {
+  return value
+}