Remove broken coercion of prop values

...and add better tests

Related to remarkjs/remark-react/issues/41.

Author: wooorm

index.js

@@ -118,6 +118,7 @@ function toH(h, node, ctx) {
 /* Add `name` and its `value` to `props`. */
 function addAttribute(props, name, value, ctx) {
   var info = information(name) || {};
+  var subprop;
 
   /* Ignore nully, `false`, `NaN`, and falsey known
    * booleans. */
@@ -133,28 +134,32 @@ function addAttribute(props, name, value, ctx) {
 
   name = info.name || paramCase(name);
 
-  if (info.boolean) {
-    /* Treat `true` and truthy known booleans. */
-    value = '';
-  } else if (typeof value === 'object' && 'length' in value) {
+  if (value !== null && typeof value === 'object' && 'length' in value) {
     /* Accept `array`.  Most props are space-separater. */
     value = (info.commaSeparated ? commas : spaces).stringify(value);
   }
 
-  value = String(value || '');
+  /* Treat `true` and truthy known booleans. */
+  if (info.boolean && ctx.hyperscript) {
+    value = '';
+  }
 
-  if (
-    ctx.vdom &&
-    info.name !== 'class' &&
-    (info.mustUseAttribute || !info.name)
-  ) {
-    if (!props.attributes) {
-      props.attributes = {};
+  if (info.name !== 'class' && (info.mustUseAttribute || !info.name)) {
+    if (ctx.vdom) {
+      subprop = 'attributes';
+    } else if (ctx.hyperscript) {
+      subprop = 'attrs';
     }
 
-    props.attributes[name] = value;
+    if (subprop) {
+      if (props[subprop] === undefined) {
+        props[subprop] = {};
+      }
 
-    return;
+      props[subprop][name] = value;
+
+      return;
+    }
   }
 
   props[info.propertyName || name] = value;

package.json

@@ -33,15 +33,17 @@
   },
   "devDependencies": {
     "browserify": "^14.0.0",
-    "circular.js": "^2.0.3",
     "esmangle": "^1.0.0",
     "hyperscript": "^2.0.2",
     "nyc": "^10.0.0",
     "react": "^15.1.0",
+    "react-dom": "^15.5.4",
+    "rehype": "^4.0.0",
     "remark-cli": "^3.0.0",
     "remark-preset-wooorm": "^2.0.0",
     "tape": "^4.0.0",
     "unist-builder": "^1.0.1",
+    "vdom-to-html": "^2.3.1",
     "virtual-dom": "^2.1.1",
     "xo": "^0.18.0"
   },

test.js

@@ -1,15 +1,17 @@
 'use strict';
 
-/* Dependencies. */
 var test = require('tape');
 var u = require('unist-builder');
 var h = require('hyperscript');
 var v = require('virtual-dom/h');
 var r = require('react').createElement;
-var circular = require('circular.js');
-var toH = require('../hast-to-hyperscript/index.js');
+var rehype = require('rehype');
+var vToString = require('vdom-to-html');
+var rToString = require('react-dom/server').renderToStaticMarkup;
+var toH = require('./');
+
+var processor = rehype().data('settings', {fragment: true, position: false});
 
-/* Tests. */
 test('hast-to-hyperscript', function (t) {
   var hast;
 
@@ -56,66 +58,120 @@ test('hast-to-hyperscript', function (t) {
         // Unknown props are dash-cased.
         // Unknown lists are space-separated.
         camelCase: ['on', 'off'],
+        // Data properties.
+        dataSome: 'yes',
+        // ARIA props.
+        ariaValuenow: '1'
+      }
+    }, [u('text', 'charlie')]),
+    u('text', ' delta'),
+    u('element', {
+      tagName: 'input',
+      properties: {
+        type: 'file',
         // Known comma-separated lists:
         accept: ['.jpg', '.jpeg']
       }
-    }, [u('text', 'charlie')]),
-    u('text', ' delta')
+    }, [])
   ]);
 
-  t.deepEqual(
-    clean(toH(h, hast)),
-    clean(h('h1#a.b.c', {hidden: '', height: '2'}, [
+  var doc = [
+    '<h1',
+    ' id="a"',
+    ' class="b c"',
+    ' hidden',
+    ' height="2"',
+    '>bravo ',
+    '<strong',
+    ' style="color:red;"',
+    ' camel-case="on off"',
+    ' data-some="yes"',
+    ' aria-valuenow="1"',
+    '>charlie</strong> ',
+    'delta',
+    '<input type="file" accept=".jpg, .jpeg">',
+    '</h1>'
+  ].join('');
+
+  t.test('should support `hyperscript`', function (st) {
+    var actual = toH(h, hast);
+    var expected = h('h1#a.b.c', {hidden: '', attrs: {height: '2'}}, [
       'bravo ',
       h('strong', {
         style: {color: 'red'},
-        'camel-case': 'on off',
-        accept: '.jpg, .jpeg'
+        'data-some': 'yes',
+        attrs: {
+          'camel-case': 'on off',
+          'aria-valuenow': '1'
+        }
       }, 'charlie'),
-      ' delta'
-    ])),
-    'should support `hyperscript`'
-  );
-
-  t.deepEqual(
-    clean(toH(v, hast)),
-    clean(v('h1#a.b.c', {
-      key: 'h-1',
-      attributes: {hidden: '', height: '2'}
-    }, [
+      ' delta',
+      h('input', {type: 'file', accept: '.jpg, .jpeg'})
+    ]);
+
+    st.deepEqual(html(actual.outerHTML), html(doc), 'equal output');
+    st.deepEqual(html(expected.outerHTML), html(doc), 'equal output baseline');
+    st.end();
+  });
+
+  t.test('should support `virtual-dom/h`', function (st) {
+    var baseline = doc.replace(/color:red;/, 'color: red');
+    var actual = toH(v, hast);
+    var expected = v('h1#a.b.c', {key: 'h-1', attributes: {hidden: true, height: 2}}, [
       'bravo ',
       v('strong', {
         key: 'h-2',
-        accept: '.jpg, .jpeg',
-        attributes: {style: 'color: red', 'camel-case': 'on off'}
+        attributes: {
+          'aria-valuenow': '1',
+          'camel-case': 'on off',
+          'data-some': 'yes',
+          style: 'color: red'
+        }
       }, 'charlie'),
-      ' delta'
-    ])),
-    'should support `virtual-dom/h`'
-  );
-
-  t.deepEqual(
-    clean(toH(r, hast)),
-    clean(r(
+      ' delta',
+      v('input', {
+        key: 'h-3',
+        type: 'file',
+        accept: '.jpg, .jpeg'
+      })
+    ]);
+
+    st.deepEqual(html(vToString(actual)), html(baseline), 'equal output');
+    st.deepEqual(html(vToString(expected)), html(baseline), 'equal output baseline');
+    st.end();
+  });
+
+  t.test('should support `React.createElement`', function (st) {
+    var baseline = doc.replace(/ camel-case="on off"/, '');
+    var actual = toH(r, hast);
+    var expected = r(
       'h1',
       {
         key: 'h-1',
         id: 'a',
         className: 'b c',
-        hidden: '',
+        hidden: true,
         height: '2'
       },
       'bravo ',
       r('strong', {
         key: 'h-2',
         style: {color: 'red'},
-        'camel-case': 'on off',
-        accept: '.jpg, .jpeg'
+        'aria-valuenow': '1',
+        'data-some': 'yes'
       }, ['charlie']),
-      ' delta'
-    )),
-    'should support `React.createElement`'
-  );
+      ' delta',
+      r('input', {
+        key: 'h-3',
+        type: 'file',
+        accept: '.jpg, .jpeg'
+      })
+    );
+
+    st.deepEqual(html(rToString(actual)), html(baseline), 'equal output');
+    st.deepEqual(html(rToString(expected)), html(baseline), 'equal output baseline');
+    st.end();
+  });
 
   t.test('should support keys', function (st) {
     st.equal(
@@ -179,7 +235,6 @@ test('hast-to-hyperscript', function (t) {
   t.end();
 });
 
-/** Clean. */
-function clean(node) {
-  return JSON.parse(JSON.stringify(node, circular()));
+function html(doc) {
+  return processor.parse(doc);
 }