babel-plugin-jsx-dom-expressions 0.36.18 → 0.37.0-beta.2

package/index.js

@@ -1068,6 +1068,8 @@ function transformAttributes$2(path, results) {
     attributes.map(a => a.node)
   );
 
+  let needsSpacing = true;
+
   path
     .get("openingElement")
     .get("attributes")
@@ -1365,16 +1367,51 @@ function transformAttributes$2(path, results) {
           );
         } else {
           !isSVG && (key = key.toLowerCase());
-          results.template += ` ${key}`;
+          results.template += `${needsSpacing ? ' ' : ''}${key}`;
           if (!value) return;
+
           let text = value.value;
+          let needsQuoting = false;
+
           if (key === "style" || key === "class") {
             text = trimWhitespace(text);
             if (key === "style") {
               text = text.replace(/; /g, ";").replace(/: /g, ":");
             }
           }
-          results.template += `="${escapeBackticks(escapeHTML(text, true))}"`;
+
+          if (!text.length) {
+            results.template += `=""`;
+            return;
+          }
+
+          for (let i = 0, len = text.length; i < len; i++) {
+            let char = text[i];
+
+            if (
+              char === "'" ||
+              char === '"' ||
+              char === " " ||
+              char === "\t" ||
+              char === "\n" ||
+              char === "\r" ||
+              char === "`" ||
+              char === "=" ||
+              char === "<" ||
+              char === ">"
+            ) {
+              needsQuoting = true;
+            }
+          }
+
+          if (needsQuoting) {
+
+            needsSpacing = false;
+            results.template += `="${escapeBackticks(escapeHTML(text, true))}"`;
+          } else {
+            needsSpacing = true;
+            results.template += `=${escapeBackticks(escapeHTML(text, true))}`;
+          }
         }
       }
     });
@@ -1496,7 +1533,7 @@ function transformChildren$2(path, results, config) {
       // boxed by textNodes
       if (markers || wrappedByText(childNodes, index)) {
         let exprId, contentId;
-        if (markers) tempPath = createPlaceholder(path, results, tempPath, i++, "#")[0].name;
+        if (markers) tempPath = createPlaceholder(path, results, tempPath, i++, "$")[0].name;
         if (nextPlaceholder) {
           exprId = nextPlaceholder;
         } else {
@@ -2421,7 +2458,7 @@ function transformChildren$1(path, results, { hydratable }) {
 
       // boxed by textNodes
       if (markers && !child.spreadElement) {
-        appendToTemplate(results.template, `<!--#-->`);
+        appendToTemplate(results.template, `<!--$-->`);
         results.template.push("");
         results.templateValues.push(child.exprs[0]);
         appendToTemplate(results.template, `<!--/-->`);
@@ -2448,7 +2485,7 @@ function createElement(path, { topLevel, hydratable }) {
       } else {
         const child = transformNode(path);
         if (markers && child.exprs.length && !child.spreadElement)
-          memo.push(t__namespace.stringLiteral("<!--#-->"));
+          memo.push(t__namespace.stringLiteral("<!--$-->"));
         if (child.exprs.length && !child.spreadElement)
           child.exprs[0] = escapeExpression(path, child.exprs[0]);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.36.18",
+  "version": "0.37.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "70ab5bf1b167c0a3cefd0a3582c0b97f502bb92b"
+  "gitHead": "bc79e4f6f883b6a1f6f1a68482f5720945c6dcc0"
 }