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

package/README.md

@@ -198,6 +198,13 @@ Example usage:
 const template = <div>Hello</div>;
 ```
 
+### inlineStyles
+
+- Type: `boolean`
+- Default: `true`
+
+Style attributes in templates are inlined when possible: value is a string, `Record<string, string>`, etc. Inlining styles may not be desired when using strong CSP configurations. Disabling `inlineStyles` will cause all of the style definitions to be set at runtime.
+
 ## Special Binding
 
 ### ref

package/index.js

@@ -436,7 +436,12 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
     return false;
   }
 
-  if (checkCallExpressions && (t__namespace.isCallExpression(expr) || t__namespace.isOptionalCallExpression(expr) || t__namespace.isTaggedTemplateExpression(expr))) {
+  if (
+  checkCallExpressions && (
+  t__namespace.isCallExpression(expr) ||
+  t__namespace.isOptionalCallExpression(expr) ||
+  t__namespace.isTaggedTemplateExpression(expr)))
+  {
     return true;
   }
 
@@ -770,6 +775,36 @@ const templateEscapes = new Map([
 ["\u2028", "\\u2028"],
 ["\u2029", "\\u2029"]]);
 
+
+function evaluateAndInline(value, valueNode) {
+  if (t__namespace.isJSXExpressionContainer(value)) {
+    evaluateAndInline(value.expression, valueNode.get("expression"));
+  } else if (t__namespace.isObjectProperty(value)) {
+    evaluateAndInline(value.value, valueNode.get("value"));
+  } else if (
+  t__namespace.isStringLiteral(value) ||
+  t__namespace.isNumericLiteral(value) ||
+  t__namespace.isBooleanLiteral(value) ||
+  t__namespace.isNullLiteral(value))
+  ; else if (t__namespace.isObjectExpression(value)) {const properties = value.properties;
+    const propertiesNode = valueNode.get("properties");
+    for (let i = 0; i < properties.length; i++) {
+      evaluateAndInline(properties[i], propertiesNode[i]);
+    }
+  } else {
+    const r = valueNode.evaluate();
+    if (r.confident) {
+      if (typeof r.value === "string") {
+        valueNode.replaceWith(t__namespace.stringLiteral(r.value));
+      } else if (typeof r.value === "number") {
+        valueNode.replaceWith(t__namespace.numericLiteral(r.value));
+      } else if (typeof r.value === "boolean") {
+        valueNode.replaceWith(t__namespace.booleanLiteral(r.value));
+      }
+    }
+  }
+}
+
 const InlineElements = [
 "a",
 "abbr",
@@ -887,6 +922,13 @@ const alwaysClose = [
 
 
 function transformElement$3(path, info) {
+  path.
+  get("openingElement").
+  get("attributes").
+  forEach((attr) => {
+    evaluateAndInline(attr.node.value, attr.get("value"));
+  });
+
   let tagName = getTagName(path.node),
     config = getConfig(path),
     wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
@@ -918,6 +960,27 @@ function transformElement$3(path, info) {
       skipTemplate: false
     };
 
+  if (!config.inlineStyles) {
+    path.
+    get("openingElement").
+    get("attributes").
+    forEach((a) => {
+      if (a.node.name?.name === "style") {
+        let value = a.node.value.expression ? a.node.value.expression : a.node.value;
+        if (t__namespace.isStringLiteral(value)) {
+          // jsx attribute value is a sting that may takes more than one line
+          value = t__namespace.templateLiteral(
+          [t__namespace.templateElement({ raw: value.value, cooked: value.value })],
+          []);
+
+        }
+        a.get("value").replaceWith(
+        t__namespace.jSXExpressionContainer(t__namespace.callExpression(t__namespace.arrowFunctionExpression([], value), [])));
+
+      }
+    });
+  }
+
   path.
   get("openingElement").
   get("attributes").
@@ -2470,6 +2533,13 @@ function appendToTemplate(template, value) {
 }
 
 function transformElement$2(path, info) {
+  path.
+  get("openingElement").
+  get("attributes").
+  forEach((attr) => {
+    evaluateAndInline(attr.node.value, attr.get("value"));
+  });
+
   const config = getConfig(path);
   const tagName = getTagName(path.node);
   if (tagName === "script" || tagName === "style") path.doNotEscape = true;
@@ -2592,11 +2662,12 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
     expression.alternate = escapeExpression(path, expression.alternate, attr, escapeLiterals);
     return expression;
   } else if (t__namespace.isLogicalExpression(expression)) {
-    expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
-    if (expression.operator !== "&&") {
-      expression.left = escapeExpression(path, expression.left, attr, escapeLiterals);
+    // 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);
+      return expression;
     }
-    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) => {
@@ -2752,8 +2823,10 @@ function transformAttributes$1(path, results, info) {
         children = value;
       } else {
         let doEscape = true;
+
         if (key.startsWith("attr:")) key = key.replace("attr:", "");
-        if (BooleanAttributes.has(key)) {
+        if (BooleanAttributes.has(key) || key.startsWith("bool:")) {
+          key = key.replace("bool:", "");
           results.template.push("");
           const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
           t__namespace.stringLiteral(key),
@@ -2769,14 +2842,23 @@ function transformAttributes$1(path, results, info) {
           t__namespace.isObjectExpression(value.expression) &&
           !value.expression.properties.some((p) => t__namespace.isSpreadElement(p)))
           {
-            const props = value.expression.properties.map((p, i) =>
-            t__namespace.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
-            t__namespace.stringLiteral(
-            (i ? ";" : "") + (t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value) + ":"),
+            if (value.expression.properties.length === 0) {
+              return;
+            }
+            const props = value.expression.properties.map((p, i) => {
+              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, true)]));
+              }
+              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)]);
 
+            });
 
             let res = props[0];
             for (let i = 1; i < props.length; i++) {
@@ -3047,6 +3129,13 @@ function createElement(path, { topLevel, hydratable }) {
 }
 
 function transformElement$1(path, info) {
+  path.
+  get("openingElement").
+  get("attributes").
+  forEach((attr) => {
+    evaluateAndInline(attr.node.value, attr.get("value"));
+  });
+
   let tagName = getTagName(path.node),
     results = {
       id: path.scope.generateUidIdentifier("el$"),
@@ -3133,9 +3222,7 @@ function transformAttributes(path, results) {
         if (!isConstant && t__namespace.isLVal(value.expression)) {
           const refIdentifier = path.scope.generateUidIdentifier("_ref$");
           results.exprs.unshift(
-          t__namespace.variableDeclaration("var", [
-          t__namespace.variableDeclarator(refIdentifier, value.expression)]),
-
+          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
           t__namespace.expressionStatement(
           t__namespace.conditionalExpression(
           t__namespace.binaryExpression(
@@ -3171,9 +3258,7 @@ function transformAttributes(path, results) {
         } else {
           const refIdentifier = path.scope.generateUidIdentifier("_ref$");
           results.exprs.unshift(
-          t__namespace.variableDeclaration("var", [
-          t__namespace.variableDeclarator(refIdentifier, value.expression)]),
-
+          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
           t__namespace.expressionStatement(
           t__namespace.logicalExpression(
           "&&",
@@ -3284,13 +3369,19 @@ function transformChildren(path, results) {
           t__namespace.variableDeclarator(
           child.id,
           t__namespace.callExpression(createTextNode, [
-          t__namespace.templateLiteral([t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })], [])])));
+          t__namespace.templateLiteral(
+          [t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })],
+          [])])));
+
 
 
 
         } else
         insert = t__namespace.callExpression(createTextNode, [
-        t__namespace.templateLiteral([t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })], [])]);
+        t__namespace.templateLiteral(
+        [t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })],
+        [])]);
+
 
       }
       appends.push(t__namespace.expressionStatement(t__namespace.callExpression(insertNode, [results.id, insert])));
@@ -4221,7 +4312,8 @@ var config = {
   staticMarker: "@once",
   effectWrapper: "effect",
   memoWrapper: "memo",
-  validate: true
+  validate: true,
+  inlineStyles: true
 };
 
 var preprocess = ((path, state) => {

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