Merge pull request #207 from developit/support-namespaces

[transform-jsx-to-htm] Add support for namespaces in JSX

Author: developit

package.json

@@ -107,6 +107,7 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.1.6",
+    "@types/jest": "^26.0.24",
     "babel-jest": "^24.1.0",
     "babel-preset-env": "^1.7.0",
     "eslint": "^5.2.0",

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

@@ -89,10 +89,14 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 	}
 
 	function isComponentName(node) {
+		if (t.isJSXNamespacedName(node)) return false;
 		return !t.isIdentifier(node) || node.name.match(/^[$_A-Z]/);
 	}
 
 	function getNameExpr(node) {
+		if (t.isJSXNamespacedName(node)) {
+			return t.identifier(node.namespace.name + ':' + node.name.name);
+		}
 		if (!t.isJSXMemberExpression(node)) {
 			return t.identifier(node.name);
 		}
@@ -169,7 +173,12 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 						continue;
 					}
 					const { name, value } = attr;
-					raw(name.name);
+					if (t.isJSXNamespacedName(name)) {
+						raw(name.namespace.name + ':' + name.name.name);
+					}
+					else {
+						raw(name.name);
+					}
 					if (value) {
 						raw('=');
 						if (value.expression) {

test/babel-transform-jsx.test.mjs

@@ -137,6 +137,26 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 			).toBe('html`<${a.b.c}>a</${a.b.c}>`;');
 		});
 
+		test('namespaced element names', () => {
+			expect(
+				compile('(<a:b/>);')
+			).toBe('html`<a:b/>`;');
+
+			expect(
+				compile('(<a:b><x:y/></a:b>);')
+			).toBe('html`<a:b><x:y/></a:b>`;');
+		});
+
+		test('namespaced attributes', () => {
+			expect(
+				compile('(<a b:c="d"/>);')
+			).toBe('html`<a b:c="d"/>`;');
+
+			expect(
+				compile('(<a b:c="d" e:f={1} g>h</a>);')
+			).toBe('html`<a b:c="d" e:f=${1} g>h</a>`;');
+		});
+
 		test('static text', () => {
 			expect(
 				compile(`(<div>Hello</div>);`)