Merge pull request #98 from jviide/dotted-components

Add dotted component name support for babel-plugin-transform-jsx-to-htm
developit · Jul 4, 2019 · 8c3b084 · 8c3b084
2 parents 29a7fb8 + 5496db8
commit 8c3b084
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 20 deletions.
diff --git a/packages/babel-plugin-transform-jsx-to-htm/index.mjs b/packages/babel-plugin-transform-jsx-to-htm/index.mjs
@@ -87,23 +87,33 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 		}));
 		buffer = '';
 	}
+
+	const FRAGMENT_EXPR = dottedIdentifier('React.Fragment');
+
+	function isFragmentName(node) {
+		return t.isNodesEquivalent(FRAGMENT_EXPR, node);
+	}
 
-	function getName(node) {
-		switch (node.type) {
-			case 'JSXMemberExpression':
-				return `${node.object.name}.${node.property.name}`
-		
-			default:
-				return node.name;
+	function isComponentName(node) {
+		return !t.isIdentifier(node) || node.name.match(/^[$_A-Z]/);
+	}
+
+	function getNameExpr(node) {
+		if (!t.isJSXMemberExpression(node)) {
+			return t.identifier(node.name);
 		}
+		return t.memberExpression(
+			getNameExpr(node.object),
+			t.identifier(node.property.name)
+		);
 	}
 
 	function processChildren(node, name, isFragment) {
 		const children = t.react.buildChildren(node);
 		if (children && children.length !== 0) {
 			if (!isFragment) {
 				raw('>');
-			}			
+			}
 			for (let i = 0; i < children.length; i++) {
 				let child = children[i];
 				if (t.isStringLiteral(child)) {
@@ -119,17 +129,17 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 			}
 
 			if (!isFragment) {
-				if (name.match(/(^[$_A-Z]|\.)/)) {
+				if (isComponentName(name)) {
 					raw('</');
-					expr(t.identifier(name));
+					expr(name);
 					raw('>');
 				}
 				else {
 					raw('</');
-					raw(name);
+					raw(name.name);
 					raw('>');
 				}
-			}			
+			}
 		}
 		else if (!isFragment) {
 			raw('/>');
@@ -138,17 +148,17 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 
 	function processNode(node, path, isRoot) {
 		const open = node.openingElement;
-		const name = getName(open.name);
-		const isFragment = name === 'React.Fragment';
-
+		const name = getNameExpr(open.name);
+		const isFragment = isFragmentName(name);
+		
 		if (!isFragment) {
-			if (name.match(/(^[$_A-Z]|\.)/)) {
+			if (isComponentName(name)) {
 				raw('<');
-				expr(t.identifier(name));
+				expr(name);
 			}
 			else {
 				raw('<');
-				raw(name);
+				raw(name.name);
 			}
 
 			if (open.attributes) {
@@ -198,12 +208,13 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 		expressions.length = 0;
 
 		if (isFragment) {
-			processChildren(path.node, '', true);
+			processChildren(path.node, null, true);
 			commit();
 			const template = t.templateLiteral(quasis, expressions);
 			const replacement = t.taggedTemplateExpression(tag, template);
 			path.replaceWith(replacement);
-		} else {
+		}
+		else {
 			processNode(path.node, path, true);
 		}
 

diff --git a/test/babel-transform-jsx.test.mjs b/test/babel-transform-jsx.test.mjs
@@ -67,6 +67,22 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 			expect(
 				compile('(<div>a</div>);')
 			).toBe('html`<div>a</div>`;');
+
+			expect(
+				compile('(<div$ />);')
+			).toBe('html`<div$/>`;');
+
+			expect(
+				compile('(<div$>a</div$>);')
+			).toBe('html`<div$>a</div$>`;');
+
+			expect(
+				compile('(<div_ />);')
+			).toBe('html`<div_/>`;');
+
+			expect(
+				compile('(<div_>a</div_>);')
+			).toBe('html`<div_>a</div_>`;');
 		});
 
 		test('single component element', () => {
@@ -77,6 +93,48 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 			expect(
 				compile('(<Foo>a</Foo>);')
 			).toBe('html`<${Foo}>a</${Foo}>`;');
+
+			expect(
+				compile('(<$ />);')
+			).toBe('html`<${$}/>`;');
+
+			expect(
+				compile('(<$>a</$>);')
+			).toBe('html`<${$}>a</${$}>`;');
+
+			expect(
+				compile('(<_ />);')
+			).toBe('html`<${_}/>`;');
+
+			expect(
+				compile('(<_>a</_>);')
+			).toBe('html`<${_}>a</${_}>`;');
+
+			expect(
+				compile('(<_foo />);')
+			).toBe('html`<${_foo}/>`;');
+
+			expect(
+				compile('(<_foo>a</_foo>);')
+			).toBe('html`<${_foo}>a</${_foo}>`;');
+
+			expect(
+				compile('(<$foo />);')
+			).toBe('html`<${$foo}/>`;');
+
+			expect(
+				compile('(<$foo>a</$foo>);')
+			).toBe('html`<${$foo}>a</${$foo}>`;');
+		});
+
+		test('dotted component element', () => {
+			expect(
+				compile('(<a.b.c />);')
+			).toBe('html`<${a.b.c}/>`;');
+
+			expect(
+				compile('(<a.b.c>a</a.b.c>);')
+			).toBe('html`<${a.b.c}>a</${a.b.c}>`;');
 		});
 
 		test('static text', () => {