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

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

@@ -409,6 +409,25 @@ function isComponent(tagName) {
 
 }
 
+// <script> and <style> are only raw text in HTML. Inside SVG the parser decodes
+// entities and treats `<` as markup, so their children still need escaping.
+function isRawTextElement(path) {
+  const tagName = getTagName(path.node);
+  if (tagName !== "script" && tagName !== "style") return false;
+  let parent = path.parentPath,
+    rootTag;
+  while (t__namespace.isJSXElement(parent.node)) {
+    const parentTag = getTagName(parent.node);
+    if (isComponent(parentTag)) break;
+    if (parentTag === "foreignObject") return true;
+    if (parentTag === "svg") return false;
+    rootTag = parentTag;
+    parent = parent.parentPath;
+  }
+  // a top-level SVG element is parsed inside an <svg> wrapper
+  return !rootTag || !SVGElements.has(rootTag);
+}
+
 function hasStaticMarker(object, path) {
   if (!object) return false;
   if (
@@ -1856,7 +1875,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;
@@ -1901,6 +1920,7 @@ function findLastElement(children, hydratable) {
 function transformChildren$2(path, results, config) {
   let tempPath = results.id && results.id.name,
     tagName = getTagName(path.node),
+    doNotEscape = isRawTextElement(path),
     nextPlaceholder,
     childPostExprs = [],
     i = 0;
@@ -1913,6 +1933,7 @@ function transformChildren$2(path, results, config) {
 
       }
       const transformed = transformNode(child, {
+        doNotEscape,
         toBeClosed: results.toBeClosed,
         lastElement: index === lastElement,
         skipId: !results.id || !detectExpressions(filteredChildren, index, config)
@@ -2542,7 +2563,7 @@ function transformElement$2(path, info) {
 
   const config = getConfig(path);
   const tagName = getTagName(path.node);
-  if (tagName === "script" || tagName === "style") path.doNotEscape = true;
+  if (isRawTextElement(path)) path.doNotEscape = true;
 
   // contains spread attributes
   if (path.node.openingElement.attributes.some((a) => t__namespace.isJSXSpreadAttribute(a)))
@@ -2647,6 +2668,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 +2714,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 `&quot;` 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);
@@ -2825,8 +2862,11 @@ function transformAttributes$1(path, results, info) {
         let doEscape = true;
 
         if (key.startsWith("attr:")) key = key.replace("attr:", "");
-        if (BooleanAttributes.has(key) || key.startsWith("bool:")) {
-          key = key.replace("bool:", "");
+        // preservesPitch is a boolean property, but not an HTML boolean attribute.
+        const isBooleanAttribute =
+        key !== "preservesPitch" && BooleanAttributes.has(toAttribute(key, isSVG));
+        if (isBooleanAttribute || key.startsWith("bool:")) {
+          key = toAttribute(key.replace("bool:", ""), isSVG);
           results.template.push("");
           const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
           t__namespace.stringLiteral(key),
@@ -3785,8 +3825,7 @@ function transformComponent(path) {
         }))
         {
           if (
-          config.wrapConditionals &&
-          config.generate !== "ssr" && (
+          config.wrapConditionals && (
           t__namespace.isLogicalExpression(value.expression) ||
           t__namespace.isConditionalExpression(value.expression)))
           {
@@ -4053,7 +4092,7 @@ function transformNode(path, info = {}) {
     info.doNotEscape ?
     staticValue.toString() :
     escapeHTML(staticValue.toString()) :
-    trimWhitespace(node.extra.raw);
+    trimWhitespace(info.doNotEscape ? node.value : node.extra.raw);
     if (!text.length) return null;
     const results = {
       template: text,
@@ -4310,6 +4349,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.11",
   "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": "3eba17b37754abaae2346c0237a4a65de802a316"
 }