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

package/index.js

@@ -321,6 +321,49 @@ const SVGElements = /*#__PURE__*/new Set([
 "vkern"]);
 
 
+const MathMLElements = /*#__PURE__*/new Set([
+"annotation",
+"annotation-xml",
+"maction",
+"math",
+"menclose",
+"merror",
+"mfenced",
+"mfrac",
+"mi",
+"mmultiscripts",
+"mn",
+"mo",
+"mover",
+"mpadded",
+"mphantom",
+"mprescripts",
+"mroot",
+"mrow",
+"ms",
+"mspace",
+"msqrt",
+"mstyle",
+"msub",
+"msubsup",
+"msup",
+"mtable",
+"mtd",
+"mtext",
+"mtr",
+"munder",
+"munderover",
+"semantics"]);
+
+
+const MathMLTextIntegrationPoints = /*#__PURE__*/new Set([
+"mi",
+"mo",
+"mn",
+"ms",
+"mtext"]);
+
+
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -409,6 +452,58 @@ function isComponent(tagName) {
 
 }
 
+// <annotation-xml> is a MathML HTML integration point only when its encoding
+// is text/html or application/xhtml+xml
+function isHTMLEncodingAnnotationXML(node) {
+  const encoding = node.openingElement.attributes.find(
+  (attr) => t__namespace.isJSXAttribute(attr) && t__namespace.isJSXIdentifier(attr.name) && attr.name.name === "encoding");
+
+  return (
+    t__namespace.isStringLiteral(encoding?.value) &&
+    /^(?:text\/html|application\/xhtml\+xml)$/i.test(encoding.value.value));
+
+}
+
+// <script> and <style> are only raw text in HTML. Inside SVG or MathML the
+// parser decodes entities and treats `<` as markup, so their children still
+// need escaping. Integration points (<foreignObject> in SVG; the MathML text
+// integration points and <annotation-xml> with an HTML encoding in MathML)
+// switch their content back to HTML parsing.
+function isRawTextElement(path) {
+  const tagName = getTagName(path.node);
+  if (tagName !== "script" && tagName !== "style") return false;
+  const ancestors = [];
+  let parent = path.parentPath;
+  while (t__namespace.isJSXElement(parent.node)) {
+    if (isComponent(getTagName(parent.node))) break;
+    ancestors.push(parent.node);
+    parent = parent.parentPath;
+  }
+  const rootTag = ancestors.length ? getTagName(ancestors[ancestors.length - 1]) : undefined;
+  // a top-level SVG element is parsed inside an <svg> wrapper and a top-level
+  // MathML element inside a MathML template
+  let namespace = SVGElements.has(rootTag) ?
+  "svg" :
+  MathMLElements.has(rootTag) ?
+  "math" :
+  "html";
+  for (let i = ancestors.length - 1; i >= 0; i--) {
+    const parentTag = getTagName(ancestors[i]);
+    if (namespace === "html") {
+      if (parentTag === "svg") namespace = "svg";else
+      if (parentTag === "math") namespace = "math";
+    } else if (namespace === "svg") {
+      if (parentTag === "foreignObject") namespace = "html";
+    } else if (
+    MathMLTextIntegrationPoints.has(parentTag) ||
+    parentTag === "annotation-xml" && isHTMLEncodingAnnotationXML(ancestors[i]))
+    {
+      namespace = "html";
+    }
+  }
+  return namespace === "html";
+}
+
 function hasStaticMarker(object, path) {
   if (!object) return false;
   if (
@@ -1901,6 +1996,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 +2009,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 +2639,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)))
@@ -2625,26 +2722,38 @@ function setAttr$1(attribute, results, name, value, isSVG) {
   }
 }
 
-function escapeExpression(path, expression, attr, escapeLiterals) {
+/**
+ * How `escapeExpression` treats a string literal it reaches.
+ * - `undefined`: the hole itself. The caller escapes a literal when it
+ *   inlines it into the template, so it stays as written here.
+ * - `"escape"`: a position whose value the runtime writes as is.
+ * - `"keep"`: inside a function value in an attribute. `ssrAttribute`
+ *   stringifies the function's source, so literals stay as written.
+ */
+function escapeExpression(path, expression, attr, literals) {
+  if (!expression) return expression;
+  // A literal in a branch is the hole's value, which `ssr` and
+  // `ssrAttribute` write as is, so branches escape literals.
+  const branch = literals === "keep" ? "keep" : "escape";
+  // A function's returns escape like branches, except for a function value in
+  // an attribute: `ssrAttribute` stringifies its source, so its literals stay
+  // as written at every depth.
+  const returns = literals === undefined && attr ? "keep" : branch;
   if (
   t__namespace.isStringLiteral(expression) ||
   t__namespace.isNumericLiteral(expression) ||
   t__namespace.isTemplateLiteral(expression) && expression.expressions.length === 0)
   {
-    if (escapeLiterals) {
+    if (literals === "escape") {
       if (t__namespace.isStringLiteral(expression)) return t__namespace.stringLiteral(escapeHTML(expression.value, attr));else
       if (t__namespace.isTemplateLiteral(expression))
-      return t__namespace.stringLiteral(escapeHTML(expression.quasis[0].value.raw, attr));
+      return t__namespace.stringLiteral(
+      escapeHTML(expression.quasis[0].value.cooked ?? expression.quasis[0].value.raw, attr));
+
     }
     return expression;
   } else if (t__namespace.isFunction(expression)) {
-    if (t__namespace.isBlockStatement(expression.body)) {
-      expression.body.body = expression.body.body.map((e) => {
-        if (t__namespace.isReturnStatement(e))
-        e.argument = escapeExpression(path, e.argument, attr, escapeLiterals);
-        return e;
-      });
-    } else expression.body = escapeExpression(path, expression.body, attr, escapeLiterals);
+    escapeFunctionResult(path, expression, attr, returns);
     return expression;
   } else if (t__namespace.isTemplateLiteral(expression)) {
     // Interpolations are escaped recursively. The static quasis are not —
@@ -2652,35 +2761,30 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
     // attr="...", which HTML parses as attribute injection.
     if (attr) escapeTemplateQuasis(expression, true);
     expression.expressions = expression.expressions.map((e) =>
-    escapeExpression(path, e, attr, escapeLiterals));
+    escapeExpression(path, e, attr, literals));
 
     return expression;
   } else if (t__namespace.isUnaryExpression(expression)) {
     return expression;
   } else if (t__namespace.isBinaryExpression(expression)) {
-    expression.left = escapeExpression(path, expression.left, attr, escapeLiterals);
-    expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
+    expression.left = escapeExpression(path, expression.left, attr, literals);
+    expression.right = escapeExpression(path, expression.right, attr, literals);
     return expression;
   } else if (t__namespace.isConditionalExpression(expression)) {
-    expression.consequent = escapeExpression(path, expression.consequent, attr, escapeLiterals);
-    expression.alternate = escapeExpression(path, expression.alternate, attr, escapeLiterals);
+    expression.consequent = escapeExpression(path, expression.consequent, attr, branch);
+    expression.alternate = escapeExpression(path, expression.alternate, attr, branch);
     return expression;
   } else if (t__namespace.isLogicalExpression(expression)) {
     // Preserve the old short-circuit shape for && while still escaping the
     // selected result of || and ?? as a whole.
     if (expression.operator === "&&") {
-      expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
+      expression.right = escapeExpression(path, expression.right, attr, branch);
       return expression;
     }
   } else if (t__namespace.isCallExpression(expression) && t__namespace.isFunction(expression.callee)) {
-    if (t__namespace.isBlockStatement(expression.callee.body)) {
-      expression.callee.body.body = expression.callee.body.body.map((e) => {
-        if (t__namespace.isReturnStatement(e))
-        e.argument = escapeExpression(path, e.argument, attr, escapeLiterals);
-        return e;
-      });
-    } else
-    expression.callee.body = escapeExpression(path, expression.callee.body, attr, escapeLiterals);
+    // The call's result is the hole's value, so its returns escape like
+    // branches.
+    escapeFunctionResult(path, expression.callee, attr, branch);
     return expression;
   } else if (t__namespace.isJSXElement(expression) && !isComponent(getTagName(expression))) {
     expression.wontEscape = true;
@@ -2693,6 +2797,37 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
 
 }
 
+/** Escapes a function's expression body or its `return` arguments. */
+function escapeFunctionResult(path, fn, attr, literals) {
+  if (t__namespace.isBlockStatement(fn.body)) escapeReturns(path, fn.body, attr, literals);else
+  fn.body = escapeExpression(path, fn.body, attr, literals);
+}
+
+/**
+ * Escapes the `return` arguments in a statement at any depth, without
+ * entering nested functions or classes.
+ */
+function escapeReturns(path, statement, attr, literals) {
+  if (!statement) return;
+  if (t__namespace.isReturnStatement(statement)) {
+    statement.argument = escapeExpression(path, statement.argument, attr, literals);
+  } else if (t__namespace.isBlockStatement(statement)) {
+    for (const child of statement.body) escapeReturns(path, child, attr, literals);
+  } else if (t__namespace.isIfStatement(statement)) {
+    escapeReturns(path, statement.consequent, attr, literals);
+    escapeReturns(path, statement.alternate, attr, literals);
+  } else if (t__namespace.isSwitchStatement(statement)) {
+    for (const switchCase of statement.cases)
+    for (const child of switchCase.consequent) escapeReturns(path, child, attr, literals);
+  } else if (t__namespace.isTryStatement(statement)) {
+    escapeReturns(path, statement.block, attr, literals);
+    escapeReturns(path, statement.handler && statement.handler.body, attr, literals);
+    escapeReturns(path, statement.finalizer, attr, literals);
+  } else if (t__namespace.isLoop(statement) || t__namespace.isLabeledStatement(statement) || t__namespace.isWithStatement(statement)) {
+    escapeReturns(path, statement.body, attr, literals);
+  }
+}
+
 function escapeTemplateQuasis(expression, attr) {
   for (const quasi of expression.quasis) {
     const src = quasi.value.cooked != null ? quasi.value.cooked : quasi.value.raw;
@@ -2841,8 +2976,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),
@@ -2865,14 +3003,14 @@ function transformAttributes$1(path, results, info) {
               if (p.computed) {
                 return t__namespace.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
                 t__namespace.binaryExpression("+", p.key, t__namespace.stringLiteral(":")),
-                escapeExpression(path, p.value, true, true)]);
+                escapeExpression(path, p.value, true, "escape")]);
 
               }
               return t__namespace.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
               t__namespace.stringLiteral(
               (i ? ";" : "") + (t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value) + ":"),
 
-              escapeExpression(path, p.value, true, true)]);
+              escapeExpression(path, p.value, true, "escape")]);
 
             });
 
@@ -4068,7 +4206,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,

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