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

package/README.md

@@ -184,6 +184,28 @@ When `true` (the default), the template output drops the whitespace between a qu
 
 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

@@ -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)))
           {
@@ -4310,6 +4325,7 @@ var config = {
   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.7",
+  "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": "3c01eb2ac61b193d4164319befe3f1b2634549cb"
+  "gitHead": "727298ff79a54ef5299d3649ab7f4105a326e9b3"
 }