babel-plugin-jsx-dom-expressions 0.40.11 → 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,23 +452,56 @@ 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.
+// <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;
-  let parent = path.parentPath,
-    rootTag;
+  const ancestors = [];
+  let parent = path.parentPath;
   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;
+    if (isComponent(getTagName(parent.node))) break;
+    ancestors.push(parent.node);
     parent = parent.parentPath;
   }
-  // a top-level SVG element is parsed inside an <svg> wrapper
-  return !rootTag || !SVGElements.has(rootTag);
+  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) {
@@ -2646,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 —
@@ -2673,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;
@@ -2714,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;
@@ -2889,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")]);
 
             });
 

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.11",
+  "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": "3eba17b37754abaae2346c0237a4a65de802a316"
+  "gitHead": "f6fecdf9e455d03cfa90aaba0323ea3d4686ada6"
 }