Add packages/babel-plugin-transform-jsx-to-tagged-templates

Author: developit

packages/babel-plugin-transform-jsx-to-tagged-templates/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "babel-plugin-transform-jsx-to-tagged-templates",
+	"version": "0.1.0",
+	"description": "Babel plugin to compile JSX to Tagged Templates.",
+	"main": "dist/babel-plugin-transform-jsx-to-tagged-templates.js",
+	"module": "dist/babel-plugin-transform-jsx-to-tagged-templates.mjs",
+	"scripts": {
+		"build": "microbundle src/index.mjs -f es,cjs --target node --no-compress --no-sourcemap",
+		"test": "jest",
+		"prepare": "npm run build"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"eslintConfig": {
+		"extends": "developit"
+	},
+	"babel": {
+		"presets": [
+			"env"
+		]
+	},
+	"jest": {
+		"moduleFileExtensions": [
+			"mjs",
+			"js",
+			"json"
+		],
+		"transform": {
+			"^.+\\.m?js$": "babel-jest"
+		}
+	},
+	"repository": "developit/htm",
+	"keywords": [
+		"tagged template",
+		"template literals",
+		"html",
+		"htm",
+		"jsx",
+		"virtual dom",
+		"hyperscript",
+		"babel",
+		"babel plugin",
+		"babel-plugin"
+	],
+	"author": "Jason Miller <[email protected]>",
+	"license": "Apache-2.0",
+	"homepage": "https://github.com/developit/htm/tree/master/packages/babel-plugin-transform-jsx-to-tagged-templates",
+	"devDependencies": {
+		"babel-core": "^6.26.3",
+		"babel-jest": "^23.6.0",
+		"babel-preset-env": "^1.7.0",
+		"eslint": "^5.10.0",
+		"eslint-config-developit": "^1.1.1",
+		"jest": "^23.6.0",
+		"microbundle": "^0.8.3"
+	},
+	"dependencies": {
+		"@babel/plugin-syntax-jsx": "^7.2.0",
+		"babel-plugin-syntax-jsx": "^6.18.0"
+	}
+}

packages/babel-plugin-transform-jsx-to-tagged-templates/src/index.mjs

@@ -0,0 +1,148 @@
+import jsx from 'babel-plugin-syntax-jsx';
+// import jsx from '@babel/plugin-syntax-jsx';
+
+function escapeValue(value) {
+	if (value.match(/^[a-z0-9_' &]+$/gi)) {
+		return `"${value}"`;
+	}
+	return JSON.stringify(value);
+}
+
+/**
+ * @param {Babel} babel
+ * @param {object} [options]
+ * @param {string} [options.tag='html']  The tagged template "tag" function name to produce.
+ */
+export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options = {}) {
+	const tag = dottedIdentifier(options.tag || 'html');
+
+	function dottedIdentifier(keypath) {
+		const path = keypath.split('.');
+		let out;
+		for (let i = 0; i < path.length; i++) {
+			const ident = t.identifier(path[i]);
+			out = i === 0 ? ident : t.memberExpression(out, ident);
+		}
+		return out;
+	}
+
+	let quasis = [];
+	let expressions = [];
+	let buffer = '';
+
+	function expr(value) {
+		commit(true);
+		expressions.push(value);
+	}
+
+	function raw(str) {
+		buffer += str;
+	}
+
+	function commit(force) {
+		if (!buffer && !force) return;
+		quasis.push(t.templateElement({
+			raw: buffer,
+			cooked: buffer
+		}));
+		buffer = '';
+	}
+
+	function processNode(node, path, isRoot) {
+		const open = node.openingElement;
+		const { name } = open.name;
+
+		const toProcess = [];
+
+		if (name.match(/^[A-Z]/)) {
+			raw('<');
+			expr(t.identifier(name));
+		}
+		else {
+			raw('<');
+			raw(name);
+		}
+
+		if (open.attributes) {
+			for (let i = 0; i < open.attributes.length; i++) {
+				const { name, value } = open.attributes[i];
+				raw(' ');
+				raw(name.name);
+				if (value) {
+					raw('=');
+					if (value.expression) {
+						expr(value.expression);
+					}
+					else if (t.isStringLiteral(value)) {
+						raw(escapeValue(value.value));
+					}
+					else {
+						expr(value);
+					}
+				}
+			}
+		}
+		raw('>');
+
+		if (node.children) {
+			for (let i = 0; i < node.children.length; i++) {
+				let child = node.children[i];
+				if (t.isJSXText(child)) {
+					raw(child.value);
+				}
+				else {
+					if (t.isJSXExpressionContainer(child)) {
+						child = child.expression;
+					}
+					if (t.isJSXElement(child)) {
+						processNode(child);
+					}
+					else {
+						expr(child);
+						toProcess.push(child);
+					}
+				}
+			}
+		}
+
+		if (name.match(/^[A-Z]/)) {
+			raw('</');
+			expr(t.identifier(name));
+			raw('>');
+		}
+		else {
+			raw('</');
+			raw(name);
+			raw('>');
+		}
+
+		if (isRoot) {
+			commit();
+			const template = t.templateLiteral(quasis, expressions);
+			const replacement = t.taggedTemplateExpression(tag, template);
+			path.replaceWith(replacement);
+		}
+	}
+
+	return {
+		name: 'transform-jsx-to-tagged-templates',
+		inherits: jsx,
+		visitor: {
+			JSXElement(path) {
+				let quasisBefore = quasis.slice();
+				let expressionsBefore = expressions.slice();
+				let bufferBefore = buffer;
+
+				buffer = '';
+				quasis.length = 0;
+				expressions.length = 0;
+
+				processNode(path.node, path, true);
+
+				quasis = quasisBefore;
+				expressions = expressionsBefore;
+				buffer = bufferBefore;
+			}
+		}
+	};
+}

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

@@ -0,0 +1,48 @@
+import { transform } from '@babel/core';
+import transformJsxToTaggedTemplatesPlugin from '../src/index.mjs';
+
+describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
+	test('basic transformation', () => {
+		expect(
+			transform('(<div id="hello">hello</div>);', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('html`<div id="hello">hello</div>`;');
+	});
+
+	test('nested children transformation', () => {
+		expect(
+			transform('const Foo = () => <div class="foo" draggable>\n  <h1>Hello</h1>\n  <p>world.</p>\n</div>;', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('const Foo = () => html`<div class="foo" draggable>\n  <h1>Hello</h1>\n  <p>world.</p>\n</div>`;');
+	});
+
+	test('whitespace', () => {
+		expect(
+			transform('const Foo = props => <div a b> a <em> b </em> c <strong> d </strong> e </div>;', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('const Foo = props => html`<div a b> a <em> b </em> c <strong> d </strong> e </div>`;');
+	});
+
+	test('nested templates', () => {
+		expect(
+			transform('const Foo = props => <ul>{props.items.map(item =>\n  <li>\n    {item}\n  </li>\n)}</ul>;', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('const Foo = props => html`<ul>${props.items.map(item => html`<li>\n    ${item}\n  </li>`)}</ul>`;');
+	});
+});