Quote props with double or single quotes, fall back to a string expr

Author: jviide

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

@@ -1,12 +1,5 @@
 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]
@@ -40,6 +33,21 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 		buffer += str;
 	}
 
+	function escapeStringLiteral(node) {
+		const value = node.value;
+		
+		if (value.match(/^[a-z0-9_'" ]*$/gi)) {
+			if (value.indexOf('"') < 0) {
+				return raw(`"${value}"`);
+			}
+			else if (value.indexOf("'") < 0) {
+				return raw(`'${value}'`);
+			}
+		}
+
+		return expr(node);
+	}
+	
 	function commit(force) {
 		if (!buffer && !force) return;
 		quasis.push(t.templateElement({
@@ -79,7 +87,7 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 						expr(value.expression);
 					}
 					else if (t.isStringLiteral(value)) {
-						raw(escapeValue(value.value));
+						escapeStringLiteral(value);
 					}
 					else {
 						expr(value);

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

@@ -56,7 +56,25 @@ describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
 				compile('(<div a="a" b="bb" c d />);')
 			).toBe('html`<div a="a" b="bb" c d/>`;');
 		});
-
+		
+		test('double quote values with single quotes', () => {
+			expect(
+				compile(`(<div a="'b'" />);`)
+			).toBe(`html\`<div a="'b'"/>\`;`);
+		});
+		
+		test('single quote values with double quotes', () => {
+			expect(
+				compile(`(<div a='"b"' />);`)
+			).toBe(`html\`<div a='"b"'/>\`;`);
+		});
+		
+		test('escape non-trivial values as expressions', () => {
+			expect(
+				compile(`(<div a="\x00" b="&abcd;" />);`)
+			).toBe('html`<div a=${"\x00"} b=${"&abcd;"}/>`;');
+		});
+		
 		test('expression values', () => {
 			expect(
 				compile('const Foo = (props, a) => <div a={a} b={"b"} c={{}} d={props.d} e />;')