Merge branch 'master' into megamix

Author: jviide

package.json

@@ -68,7 +68,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

@@ -4,11 +4,35 @@ import jsx from '@babel/plugin-syntax-jsx';
  * @param {Babel} babel
  * @param {object} [options]
  * @param {string} [options.tag='html']  The tagged template "tag" function name to produce.
- * @param {string} [options.html=false]  If `true`, output HTML-like instead of XML-like (no self-closing tags, etc).
+ * @param {string | boolean | object} [options.import=false]  Import the tag automatically
  */
 export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
-	const tag = dottedIdentifier(options.tag || 'html');
-	const htmlOutput = !!options.html;
+	const tagString = options.tag || 'html';
+	const tag = dottedIdentifier(tagString);
+	const importDeclaration = tagImport(options.import || false);
+
+	function tagImport(imp) {
+		if (imp === false) {
+			return null;
+		}
+		const tagRoot = t.identifier(tagString.split('.')[0]);
+		const { module, export: export_ } = typeof imp !== 'string' ? imp : {
+			module: imp,
+			export: null
+		};
+
+		let specifier;
+		if (export_ === '*') {
+			specifier = t.importNamespaceSpecifier(tagRoot);
+		}
+		else if (export_ === 'default') {
+			specifier = t.importDefaultSpecifier(tagRoot);
+		}
+		else {
+			specifier = t.importSpecifier(tagRoot, export_ ? t.identifier(export_) : tagRoot);
+		}
+		return t.importDeclaration([specifier], t.stringLiteral(module));
+	}
 
 	function dottedIdentifier(keypath) {
 		const path = keypath.split('.');
@@ -104,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];
@@ -147,7 +171,15 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 		name: 'transform-jsx-to-htm',
 		inherits: jsx,
 		visitor: {
-			JSXElement(path) {
+			Program: {
+				exit(path, state) {
+					if (state.get('jsxElement') && importDeclaration) {
+						path.unshiftContainer('body', importDeclaration);
+					}
+				}
+			},
+
+			JSXElement(path, state) {
 				let quasisBefore = quasis.slice();
 				let expressionsBefore = expressions.slice();
 				let bufferBefore = buffer;
@@ -161,6 +193,8 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 				quasis = quasisBefore;
 				expressions = expressionsBefore;
 				buffer = bufferBefore;
+
+				state.set('jsxElement', true);
 			}
 		}
 	};

test/babel-transform-jsx.test.mjs

@@ -5,7 +5,7 @@ function compile(code, { plugins = [], ...options } = {}) {
 	return transform(code, {
 		babelrc: false,
 		configFile: false,
-		sourceType: 'script',
+		sourceType: 'module',
 		plugins: [
 			...plugins,
 			[transformJsxToHtmPlugin, options]
@@ -14,6 +14,50 @@ function compile(code, { plugins = [], ...options } = {}) {
 }
 
 describe('babel-plugin-transform-jsx-to-htm', () => {
+	describe('import', () => {
+		test('import shortcut', () => {
+			expect(
+				compile(`(<div />);`, { import: 'htm/preact' })
+			).toBe('import { html } from "htm/preact";\nhtml`<div/>`;');
+		});
+
+		test('import shortcut, dotted tag', () => {
+			expect(
+				compile(`(<div />);`, { tag: 'html.bound', import: 'htm/preact' })
+			).toBe('import { html } from "htm/preact";\nhtml.bound`<div/>`;');
+		});
+
+		test('named import', () => {
+			expect(
+				compile(`(<div />);`, { import: { module: 'htm/preact', export: '$html' } })
+			).toBe('import { $html as html } from "htm/preact";\nhtml`<div/>`;');
+		});
+
+		test('named import, dotted tag', () => {
+			expect(
+				compile(`(<div />);`, { tag: 'html.bound', import: { module: 'htm/preact', export: '$html' } })
+			).toBe('import { $html as html } from "htm/preact";\nhtml.bound`<div/>`;');
+		});
+
+		test('default import', () => {
+			expect(
+				compile(`(<div />);`, { import: { module: 'htm/preact', export: 'default' } })
+			).toBe('import html from "htm/preact";\nhtml`<div/>`;');
+		});
+
+		test('namespace import', () => {
+			expect(
+				compile(`(<div />);`, { import: { module: 'htm/preact', export: '*' } })
+			).toBe('import * as html from "htm/preact";\nhtml`<div/>`;');
+		});
+
+		test('no import without JSX', () => {
+			expect(
+				compile(`false;`, { import: 'htm/preact' })
+			).toBe('false;');
+		});
+	});
+
 	describe('elements and text', () => {
 		test('single named element', () => {
 			expect(
@@ -57,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(
@@ -159,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>`;');
-		});
-	});
 });