babel-plugin-jsx-dom-expressions 0.40.6 → 0.40.10

package/README.md

@@ -175,6 +175,37 @@ Removes tags from the template output if they have no closing parents and are th
 
 Removes quotes for html attributes when possible from the template output. This may not work in all browser-like environments the same. The solution has been tested again Chrome/Edge/Firefox/Safari.
 
+### omitAttributeSpacing
+
+- Type: `boolean`
+- Default: `true`
+
+When `true` (the default), the template output drops the whitespace between a quoted attribute and the next attribute (`<svg width="12"height="13">`). This mirrors the prior behavior and relies on the browser's HTML parser to tolerate the missing space. Some strict parsers (notably XML/SVG-only or game-engine browser-likes such as Coherent Gameface) reject the resulting markup.
+
+Set this to `false` to emit a single space between attributes (`<svg width="12" height="13">`) so the generated HTML is strictly valid. This may also be desirable together with `omitQuotes: false` / `omitLastClosingTag: false` when targeting stricter parsers.
+
+### omitServerOnlyTemplates
+
+- Type: `boolean`
+- Default: `true`
+
+Only applies when `hydratable` is `true`. When `true` (the default), an element marked `$ServerOnly` has no template registered, so its markup is never shipped to the client and the generated code calls `getNextElement()` with no argument. That element can then only be obtained by hydrating against server-rendered DOM.
+
+Because `getNextElement` falls back to `template()` whenever it is not hydrating, such an element throws `TypeError: template is not a function` if it is ever re-created on the client. Hot module replacement does exactly that: it disposes the old root and re-runs the component outside of hydration, so editing any file containing `$ServerOnly` breaks the page in development.
+
+Set this to `false` to keep registering the template. The hydration path is unchanged, since `getNextElement` prefers the hydration registry and only calls `template()` when there is nothing to hydrate. The only cost is the template markup being present in the output, which makes this suitable for development builds:
+
+```js
+{
+  plugins: [
+    ["jsx-dom-expressions", {
+      hydratable: true,
+      omitServerOnlyTemplates: process.env.NODE_ENV === "production"
+    }]
+  ]
+}
+```
+
 ### requireImportSource
 
 - Type: `string | false`

package/index.js

@@ -1477,7 +1477,7 @@ function transformAttributes$2(path, results) {
     }
 
     if (needsQuoting) {
-      needsSpacing = false;
+      needsSpacing = !config.omitAttributeSpacing;
       results.template += `="${escapeHTML(text, true)}"`;
     } else {
       needsSpacing = true;
@@ -1856,7 +1856,7 @@ function transformAttributes$2(path, results) {
       }
     } else {
       if (config.hydratable && key === "$ServerOnly") {
-        results.skipTemplate = true;
+        if (config.omitServerOnlyTemplates) results.skipTemplate = true;
         return;
       }
       if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
@@ -2647,6 +2647,10 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
     } else expression.body = escapeExpression(path, expression.body, attr, escapeLiterals);
     return expression;
   } else if (t__namespace.isTemplateLiteral(expression)) {
+    // Interpolations are escaped recursively. The static quasis are not —
+    // `url("${x}")` would otherwise leave a raw `"` inside style="..." /
+    // attr="...", which HTML parses as attribute injection.
+    if (attr) escapeTemplateQuasis(expression, true);
     expression.expressions = expression.expressions.map((e) =>
     escapeExpression(path, e, attr, escapeLiterals));
 
@@ -2689,6 +2693,18 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
 
 }
 
+function escapeTemplateQuasis(expression, attr) {
+  for (const quasi of expression.quasis) {
+    const src = quasi.value.cooked != null ? quasi.value.cooked : quasi.value.raw;
+    const escaped = escapeHTML(src, attr);
+    if (typeof escaped !== "string" || escaped === src) continue;
+    quasi.value.cooked = escaped;
+    // Codegen prints `raw`. Re-escape template delimiters so `"` etc.
+    // stay literal text.
+    quasi.value.raw = escaped.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+  }
+}
+
 function transformToObject(attrName, attributes, selectedAttributes) {
   const properties = [];
   const existingAttribute = attributes.find((a) => a.node.name.name === attrName);
@@ -3785,8 +3801,7 @@ function transformComponent(path) {
         }))
         {
           if (
-          config.wrapConditionals &&
-          config.generate !== "ssr" && (
+          config.wrapConditionals && (
           t__namespace.isLogicalExpression(value.expression) ||
           t__namespace.isConditionalExpression(value.expression)))
           {
@@ -4308,7 +4323,9 @@ var config = {
   omitNestedClosingTags: false,
   omitLastClosingTag: true,
   omitQuotes: true,
+  omitAttributeSpacing: true,
   contextToCustomElements: false,
+  omitServerOnlyTemplates: true,
   staticMarker: "@once",
   effectWrapper: "effect",
   memoWrapper: "memo",

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.40.6",
+  "version": "0.40.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -33,5 +33,5 @@
     "@rollup/plugin-babel": "6.0.3",
     "@types/babel__core": "^7.20.5"
   },
-  "gitHead": "4f1ff795b280004134c0c3e16dec1dc0c9148141"
+  "gitHead": "727298ff79a54ef5299d3649ab7f4105a326e9b3"
 }