Add explanation & test for usage with jsx-pragmatic

Author: developit

packages/babel-plugin-transform-jsx-to-tagged-templates/README.md

@@ -23,7 +23,6 @@ npm i -D babel-plugin-transform-jsx-to-tagged-templates
 ```js
 "plugins": [
   "babel-plugin-transform-jsx-to-tagged-templates"
-  ]
 ]
 ```
 
@@ -33,15 +32,45 @@ There's only one option: `tag`. It lets you specify the function to use for pref
 
 ```js
 "plugins": [
-    [
-      "babel-plugin-transform-jsx-to-tagged-templates",
-      {
-        "tag": "custom.html"
-      }
-    ]
-  ]
+  ["babel-plugin-transform-jsx-to-tagged-templates", {
+    "tag": "custom.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]:
+
+```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-tagged-templates", {
+    "tag": "$$html"
+  }]
+]
+```
+
+The above will produce files that look like:
+
+```js
+import { html as $$html } from 'lit-html';
+
+export default $$html`<h1>hello</h1>`
+```
+
+### License
+
+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-tagged-templates/package.json

@@ -52,6 +52,7 @@
 		"@babel/preset-env": "^7.2.0",
 		"babel-core": "^7.0.0-bridge.0",
 		"babel-jest": "^23.6.0",
+		"babel-plugin-jsx-pragmatic": "^1.0.2",
 		"eslint": "^5.10.0",
 		"eslint-config-developit": "^1.1.1",
 		"jest": "^23.6.0",

packages/babel-plugin-transform-jsx-to-tagged-templates/test/index.test.js

@@ -45,4 +45,25 @@ describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
 			}).code
 		).toBe('const Foo = props => html`<ul>${props.items.map(item => html`<li>\n    ${item}\n  </li>`)}</ul>`;');
 	});
+
+	test('integration with babel-plugin-jsx-pragmatic', () => {
+		expect(
+			transform('const Foo = props => <div>hello</div>;', {
+				babelrc: false,
+				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'
+					}],
+					[transformJsxToTaggedTemplatesPlugin, {
+						tag: '$$html'
+					}]
+				]
+			}).code
+		).toBe('import { html as $$html } from "lit-html";\n\nconst Foo = props => $$html`<div>hello</div>`;');
+	});
 });