[main] use evaluate().confident recursively for all attributes values for dom, ssr and universal

packages/babel-plugin-jsx-dom-expressions/src/dom/element.js

@@ -11,6 +11,7 @@ import {
 } from "dom-expressions/src/constants";
 import VoidElements from "../VoidElements";
 import {
+  evaluateAndInline,
   getTagName,
   isDynamic,
   isComponent,
@@ -59,6 +60,13 @@ const alwaysClose = [
 ];
 
 export function transformElement(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),

packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js

@@ -104,7 +104,12 @@ export function isDynamic(path, { checkMember, checkTags, checkCallExpressions =
     return false;
   }
 
-  if (checkCallExpressions && (t.isCallExpression(expr) || t.isOptionalCallExpression(expr) || t.isTaggedTemplateExpression(expr))) {
+  if (
+    checkCallExpressions &&
+    (t.isCallExpression(expr) ||
+      t.isOptionalCallExpression(expr) ||
+      t.isTaggedTemplateExpression(expr))
+  ) {
     return true;
   }
 
@@ -442,3 +447,35 @@ const templateEscapes = new Map([
   ["\u2028", "\\u2028"],
   ["\u2029", "\\u2029"]
 ]);
+
+export function evaluateAndInline(value, valueNode) {
+  if (t.isJSXExpressionContainer(value)) {
+    evaluateAndInline(value.expression, valueNode.get("expression"));
+  } else if (t.isObjectProperty(value)) {
+    evaluateAndInline(value.value, valueNode.get("value"));
+  } else if (
+    t.isStringLiteral(value) ||
+    t.isNumericLiteral(value) ||
+    t.isBooleanLiteral(value) ||
+    t.isNullLiteral(value)
+  ) {
+    // already native literal
+  } else if (t.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.stringLiteral(r.value));
+      } else if (typeof r.value === "number") {
+        valueNode.replaceWith(t.numericLiteral(r.value));
+      } else if (typeof r.value === "boolean") {
+        valueNode.replaceWith(t.booleanLiteral(r.value));
+      }
+    }
+  }
+}

packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js

@@ -8,6 +8,7 @@ import {
 } from "dom-expressions/src/constants";
 import VoidElements from "../VoidElements";
 import {
+  evaluateAndInline,
   getTagName,
   registerImportMethod,
   filterChildren,
@@ -33,6 +34,13 @@ function appendToTemplate(template, value) {
 }
 
 export function transformElement(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;

packages/babel-plugin-jsx-dom-expressions/src/universal/element.js

@@ -1,5 +1,6 @@
 import * as t from "@babel/types";
 import {
+  evaluateAndInline,
   getTagName,
   isDynamic,
   registerImportMethod,
@@ -15,6 +16,13 @@ import {
 import { transformNode } from "../shared/transform";
 
 export function transformElement(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$"),
@@ -101,9 +109,7 @@ function transformAttributes(path, results) {
           if (!isConstant && t.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t.variableDeclaration("var", [
-                t.variableDeclarator(refIdentifier, value.expression)
-              ]),
+              t.variableDeclaration("var", [t.variableDeclarator(refIdentifier, value.expression)]),
               t.expressionStatement(
                 t.conditionalExpression(
                   t.binaryExpression(
@@ -139,9 +145,7 @@ function transformAttributes(path, results) {
           } else {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t.variableDeclaration("var", [
-                t.variableDeclarator(refIdentifier, value.expression)
-              ]),
+              t.variableDeclaration("var", [t.variableDeclarator(refIdentifier, value.expression)]),
               t.expressionStatement(
                 t.logicalExpression(
                   "&&",
@@ -252,13 +256,19 @@ function transformChildren(path, results) {
             t.variableDeclarator(
               child.id,
               t.callExpression(createTextNode, [
-                t.templateLiteral([t.templateElement({ raw: escapeStringForTemplate(child.template) })], [])
+                t.templateLiteral(
+                  [t.templateElement({ raw: escapeStringForTemplate(child.template) })],
+                  []
+                )
               ])
             )
           );
         } else
           insert = t.callExpression(createTextNode, [
-            t.templateLiteral([t.templateElement({ raw: escapeStringForTemplate(child.template) })], [])
+            t.templateLiteral(
+              [t.templateElement({ raw: escapeStringForTemplate(child.template) })],
+              []
+            )
           ]);
       }
       appends.push(t.expressionStatement(t.callExpression(insertNode, [results.id, insert])));

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js

@@ -275,4 +275,6 @@ const template90 = <video playsinline={true}/>
 const template91 = <video playsinline={false}/>
 const template92 = <video playsInline={value}/>
 const template93 = <video playsInline={true}/>
-const template94 = <video playsInline={false}/>
+const template94 = <video playsInline={false}/>
+
+const template95 = <video something={{value:{value:1+1}}}/>

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js

@@ -132,7 +132,7 @@ const template = (() => {
       get classList() {
         return {
           dynamic: dynamic(),
-          selected
+          selected: true
         };
       }
     }),
@@ -498,11 +498,7 @@ const template55 = (() => {
   _$setBoolAttribute(_el$73, "quack", boolTest);
   return _el$73;
 })();
-const template56 = (() => {
-  var _el$74 = _tmpl$38();
-  _$setBoolAttribute(_el$74, "quack", boolTestBinding);
-  return _el$74;
-})();
+const template56 = _tmpl$38();
 const template57 = (() => {
   var _el$75 = _tmpl$39();
   _$effect(() => _$setBoolAttribute(_el$75, "quack", boolTestObjBinding.value));
@@ -624,4 +620,13 @@ const template94 = (() => {
   _el$112.playsInline = false;
   return _el$112;
 })();
+const template95 = (() => {
+  var _el$113 = _tmpl$59();
+  _$setAttribute(_el$113, "something", {
+    value: {
+      value: 2
+    }
+  });
+  return _el$113;
+})();
 _$delegateEvents(["click", "input"]);

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js

@@ -120,7 +120,7 @@ const template = (() => {
       get classList() {
         return {
           dynamic: dynamic(),
-          selected
+          selected: true
         };
       }
     }),
@@ -486,11 +486,7 @@ const template55 = (() => {
   _$setBoolAttribute(_el$73, "quack", boolTest);
   return _el$73;
 })();
-const template56 = (() => {
-  var _el$74 = _tmpl$38();
-  _$setBoolAttribute(_el$74, "quack", boolTestBinding);
-  return _el$74;
-})();
+const template56 = _tmpl$38();
 const template57 = (() => {
   var _el$75 = _tmpl$39();
   _$effect(() => _$setBoolAttribute(_el$75, "quack", boolTestObjBinding.value));

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/customElements/output.js

@@ -173,7 +173,6 @@ const template55 = (() => {
 })();
 const template56 = (() => {
   var _el$20 = _tmpl$19();
-  _$setBoolAttribute(_el$20, "quack", boolTestBinding);
   _el$20._$owner = _$getOwner();
   return _el$20;
 })();

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js

@@ -81,7 +81,7 @@ const template = (() => {
       get classList() {
         return {
           dynamic: dynamic(),
-          selected
+          selected: true
         };
       }
     }),

packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/attributeExpressions/output.js

@@ -55,7 +55,7 @@ const template = (() => {
       get classList() {
         return {
           dynamic: dynamic(),
-          selected
+          selected: true
         };
       }
     }),

packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js

@@ -60,9 +60,9 @@ const template = _$ssrElement(
     _$mergeProps(
       {
         get ["class"]() {
-          return `base ${dynamic() ? "dynamic" : ""} ${selected ? "selected" : ""}`;
+          return `base ${dynamic() ? "dynamic" : ""}  selected`;
         },
-        id: id
+        id: "my-h1"
       },
       results,
       {

packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js

@@ -59,9 +59,9 @@ const template = _$ssrElement(
       _$mergeProps(
         {
           get ["class"]() {
-            return `base ${dynamic() ? "dynamic" : ""} ${selected ? "selected" : ""}`;
+            return `base ${dynamic() ? "dynamic" : ""}  selected`;
           },
-          id: id
+          id: "my-h1"
         },
         results,
         {

packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js

@@ -45,7 +45,7 @@ const template = (() => {
       get classList() {
         return {
           dynamic: dynamic(),
-          selected
+          selected: true
         };
       }
     }),