Add support using x as a JSX pragma

This PR tests that `xastscript` can be used as the pragma for JSX with bublé
and babel.

Code-wise, this adds support for using `x` to generate root nodes.
This is done by omitting the tag name (like so: `x()`, `x(null, 'child')`).
Previously, omitting a `name` resulted in an exception.

Another aspect of supporting JSX is supporting fragments as children.
As fragments yield root nodes, we unravel them and use only their children.
While this could be seen a change, xast prohibits roots occurring in nodes,
so the unraveling instead fixes what would otherwise be a broken tree.

Related to: GH-3.

Author: wooorm

.gitignore

@@ -3,4 +3,5 @@
 .nyc_output/
 coverage/
 node_modules/
+test/jsx-*.js
 yarn.lock

index.js

@@ -4,17 +4,21 @@ module.exports = x
 
 // Creating xast elements.
 function x(name, attributes) {
-  var node = {type: 'element', name: name, attributes: {}, children: []}
+  var node =
+    name == null
+      ? {type: 'root', children: []}
+      : {type: 'element', name: name, attributes: {}, children: []}
   var index = 1
   var key
 
-  if (typeof name !== 'string' || !name) {
+  if (name != null && typeof name !== 'string') {
     throw new Error('Expected element name, got `' + name + '`')
   }
 
   // Handle props.
   if (attributes) {
     if (
+      name == null ||
       typeof attributes === 'string' ||
       typeof attributes === 'number' ||
       'length' in attributes
@@ -51,7 +55,8 @@ function addChild(nodes, value) {
       addChild(nodes, value[index])
     }
   } else if (typeof value === 'object' && value.type) {
-    nodes.push(value)
+    if (value.type === 'root') addChild(nodes, value.children)
+    else nodes.push(value)
   } else {
     throw new TypeError('Expected node, nodes, string, got `' + value + '`')
   }

package.json

@@ -34,20 +34,26 @@
     "@types/xast": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "buble": "^0.20.0",
     "dtslint": "^4.0.0",
     "nyc": "^15.0.0",
     "prettier": "^2.0.0",
     "remark-cli": "^9.0.0",
     "remark-preset-wooorm": "^8.0.0",
     "tape": "^5.0.0",
+    "unist-builder": "^2.0.3",
     "xo": "^0.34.0"
   },
   "scripts": {
+    "generate": "node script/generate-jsx",
     "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
     "test-api": "node test",
-    "test-coverage": "nyc --reporter lcov tape test.js",
+    "test-coverage": "nyc --reporter lcov tape test/index.js",
     "test-types": "dtslint types",
-    "test": "npm run format && npm run test-coverage && npm run test-types"
+    "test": "npm run generate && npm run format && npm run test-coverage && npm run test-types"
   },
   "nyc": {
     "check-coverage": true,

script/generate-jsx.js

@@ -0,0 +1,25 @@
+'use strict'
+
+var fs = require('fs')
+var path = require('path')
+var buble = require('buble')
+var babel = require('@babel/core')
+
+var doc = String(fs.readFileSync(path.join('test', 'jsx.jsx')))
+
+fs.writeFileSync(
+  path.join('test', 'jsx-buble.js'),
+  buble.transform(doc.replace(/'name'/, "'jsx (buble)'"), {
+    jsx: 'x',
+    jsxFragment: 'null'
+  }).code
+)
+
+fs.writeFileSync(
+  path.join('test', 'jsx-babel.js'),
+  babel.transform(doc.replace(/'name'/, "'jsx (babel)'"), {
+    plugins: [
+      ['@babel/plugin-transform-react-jsx', {pragma: 'x', pragmaFrag: 'null'}]
+    ]
+  }).code
+)

test.js renamed to test/core.js

@@ -1,17 +1,23 @@
 'use strict'
 
 var test = require('tape')
-var x = require('.')
+var x = require('..')
 
 test('xastscript', function (t) {
   t.equal(typeof x, 'function', 'should expose a function')
 
+  t.deepEqual(
+    x(),
+    {type: 'root', children: []},
+    'should create a root when w/o `name`'
+  )
+
   t.throws(
     function () {
-      x()
+      x(1)
     },
-    /Expected element name, got `undefined`/,
-    'should throw without `name`'
+    /Expected element name, got `1`/,
+    'should throw w/ incorrect `name`'
   )
 
   t.deepEqual(
@@ -156,5 +162,37 @@ test('xastscript', function (t) {
     'should support omitting attributes when given an array for a child'
   )
 
+  t.deepEqual(
+    x(null, '1'),
+    {type: 'root', children: [{type: 'text', value: '1'}]},
+    'should create a root with a textual child'
+  )
+
+  t.deepEqual(
+    x(null, 1),
+    {type: 'root', children: [{type: 'text', value: '1'}]},
+    'should create a root with a numerical child'
+  )
+
+  t.deepEqual(
+    x(null, x('a')),
+    {
+      type: 'root',
+      children: [{type: 'element', name: 'a', attributes: {}, children: []}]
+    },
+    'should create a root with a node child'
+  )
+
+  t.deepEqual(
+    x('a', {}, [x(null, x('b'))]),
+    {
+      type: 'element',
+      name: 'a',
+      attributes: {},
+      children: [{type: 'element', name: 'b', attributes: {}, children: []}]
+    },
+    'should create a node w/ by unraveling roots'
+  )
+
   t.end()
 })

test/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+/* eslint-disable import/no-unassigned-import */
+require('./core')
+require('./jsx-babel')
+require('./jsx-buble')
+/* eslint-enable import/no-unassigned-import */

test/jsx.jsx

@@ -0,0 +1,102 @@
+'use strict'
+
+var test = require('tape')
+var u = require('unist-builder')
+var x = require('..')
+
+test('name', function (t) {
+  t.deepEqual(<a />, x('a'), 'should support a self-closing element')
+
+  t.deepEqual(<a>b</a>, x('a', 'b'), 'should support a value as a child')
+
+  var A = 'a'
+
+  t.deepEqual(<A />, x(A), 'should support an uppercase tag name')
+
+  t.deepEqual(
+    <a>{1 + 1}</a>,
+    x('a', '2'),
+    'should support expressions as children'
+  )
+
+  t.deepEqual(<></>, u('root', []), 'should support a fragment')
+
+  t.deepEqual(
+    <>a</>,
+    u('root', [u('text', 'a')]),
+    'should support a fragment with text'
+  )
+
+  t.deepEqual(
+    <>
+      <a />
+    </>,
+    u('root', [x('a')]),
+    'should support a fragment with an element'
+  )
+
+  t.deepEqual(
+    <>{-1}</>,
+    u('root', [u('text', '-1')]),
+    'should support a fragment with an expression'
+  )
+
+  var com = {acme: {a: 'A', b: 'B'}}
+
+  t.deepEqual(
+    <com.acme.a />,
+    x(com.acme.a),
+    'should support members as names (`a.b`)'
+  )
+
+  t.deepEqual(
+    <a b />,
+    x('a', {b: 'true'}),
+    'should support a boolean attribute'
+  )
+
+  t.deepEqual(
+    <a b="" />,
+    x('a', {b: ''}),
+    'should support a double quoted attribute'
+  )
+
+  t.deepEqual(
+    <a b='"' />,
+    x('a', {b: '"'}),
+    'should support a single quoted attribute'
+  )
+
+  t.deepEqual(
+    <a b={1 + 1} />,
+    x('a', {b: '2'}),
+    'should support expression value attributes'
+  )
+
+  var props = {a: 1, b: 2}
+
+  t.deepEqual(
+    <a {...props} />,
+    x('a', props),
+    'should support expression spread attributes'
+  )
+
+  t.deepEqual(
+    <a>
+      <b />c<d>e</d>
+      {1 + 1}
+    </a>,
+    x('a', [x('b'), 'c', x('d', 'e'), '2']),
+    'should support text, elements, and expressions in jsx'
+  )
+
+  t.deepEqual(
+    <a>
+      <>{1}</>
+    </a>,
+    x('a', '1'),
+    'should support a fragment in an element'
+  )
+
+  t.end()
+})