Merge pull request #67 from jviide/remove-html-option

Cleanups to jsx-to-htm: remove html option & dependency to babel-plugin-jsx-pragmatic, update README.md

Author: jviide

package.json

@@ -64,7 +64,6 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.1.6",
     "babel-jest": "^24.1.0",
-    "babel-plugin-jsx-pragmatic": "^1.0.2",
     "babel-preset-env": "^1.7.0",
     "eslint": "^5.2.0",
     "eslint-config-developit": "^1.1.1",

packages/babel-plugin-transform-jsx-to-htm/README.md

@@ -1,6 +1,6 @@
 # babel-plugin-transform-jsx-to-htm
 
-This plugin converts JSX into Tagged Templates that work with things like [htm] and [lit-html].
+This plugin converts JSX into Tagged Templates that work with [htm].
 
 ```js
 // INPUT:
@@ -32,45 +32,42 @@ The following options are available:
 
 | Option | Type    | Default  | Description
 |--------|---------|----------|------------
-| `tag`  | String  | `"html"` | The "tag" function to prefix [Tagged Templates] with.<br> _Useful when [Auto-importing a tag function](#auto-importing-the-tag)._
-| `html` | Boolean | `false`  | `true` outputs HTML-like templates for use with [lit-html].<br> _The is default XML-like, with self-closing tags._
+| `tag`  | String  | `"html"` | The "tag" function to prefix [Tagged Templates] with.
+| `import`  | `false`\|String\|Object  | `false` | Auto-import a tag function, off by default.<br>_See [Auto-importing a tag function](#auto-importing-the-tag) for an example._
 
 Options are passed to a Babel plugin using a nested Array:
 
 ```js
 "plugins": [
   ["babel-plugin-transform-jsx-to-htm", {
-    "tag": "$$html",
-    "html": true
+    "tag": "$$html"
   }]
 ]
 ```
 
 ## Auto-importing the tag
 
-Want to automatically import `html` into any file that uses JSX?  It works the same as with JSX!
-Just use [babel-plugin-jsx-pragmatic]:
+Want to automatically import `html` into any file that uses JSX?
+Just use the `import` option:
 
 ```js
 "plugins": [
-  ["babel-plugin-jsx-pragmatic", {
-    // the module to import:
-    "module": "lit-html",
-    // a named export to use from that module:
-    "export": "html",
-    // what to call it locally: (should match your "tag" option)
-    "import": "$$html"
-  }],
   ["babel-plugin-transform-jsx-to-htm", {
-    "tag": "$$html"
+    "tag": "$$html",
+    "import": {
+      // the module to import:
+      "module": "htm/preact",
+      // a named export to use from that module:
+      "export": "html"
+    }
   }]
 ]
 ```
 
 The above will produce files that look like:
 
 ```js
-import { html as $$html } from 'lit-html';
+import { html as $$html } from 'htm/preact';
 
 export default $$html`<h1>hello</h1>`
 ```
@@ -80,5 +77,3 @@ export default $$html`<h1>hello</h1>`
 Apache 2
 
 [htm]: https://github.com/developit/htm
-[lit-html]: https://github.com/polymer/lit-html
-[babel-plugin-jsx-pragmatic]: https://github.com/jmm/babel-plugin-jsx-pragmatic

packages/babel-plugin-transform-jsx-to-htm/index.mjs

@@ -5,12 +5,10 @@ import jsx from '@babel/plugin-syntax-jsx';
  * @param {object} [options]
  * @param {string} [options.tag='html']  The tagged template "tag" function name to produce.
  * @param {string | boolean | object} [options.import=false]  Import the tag automatically
- * @param {string} [options.html=false]  If `true`, output HTML-like instead of XML-like (no self-closing tags, etc).
  */
 export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 	const tagString = options.tag || 'html';
 	const tag = dottedIdentifier(tagString);
-	const htmlOutput = !!options.html;
 	const importDeclaration = tagImport(options.import || false);
 
 	function tagImport(imp) {
@@ -130,7 +128,7 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 		}
 
 		const children = t.react.buildChildren(node);
-		if (htmlOutput || children && children.length !== 0) {
+		if (children && children.length !== 0) {
 			raw('>');
 			for (let i = 0; i < children.length; i++) {
 				let child = children[i];

test/babel-transform-jsx.test.mjs

@@ -101,22 +101,6 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 		});
 	});
 
-	describe('options.html = true', () => {
-		test('use explicit end tags instead of self-closing', () => {
-			expect(
-				compile('(<div />);', { html: true })
-			).toBe('html`<div></div>`;');
-
-			expect(
-				compile('(<div a />);', { html: true })
-			).toBe('html`<div a></div>`;');
-
-			expect(
-				compile('(<a>b</a>);', { html: true })
-			).toBe('html`<a>b</a>`;');
-		});
-	});
-
 	describe('props', () => {
 		test('static values', () => {
 			expect(
@@ -203,24 +187,4 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 			).toBe('html`<div/>`;');
 		});
 	});
-
-	describe('integration with babel-plugin-jsx-pragmatic', () => {
-		test('JSX is still identified and import added', () => {
-			expect(
-				compile('const Foo = props => <div>hello</div>;', {
-					tag: '$$html',
-					plugins: [
-						['babel-plugin-jsx-pragmatic', {
-							// module to import:
-							module: 'lit-html',
-							// the name of the export to use:
-							export: 'html',
-							// whatever you specified for the "tag" option:
-							import: '$$html'
-						}]
-					]
-				})
-			).toBe('import { html as $$html } from "lit-html";\n\nconst Foo = props => $$html`<div>hello</div>`;');
-		});
-	});
 });