feat: switch to new compute node helper

.changeset/light-snakes-design.md

@@ -0,0 +1,8 @@
+---
+"@marko/translator-default": minor
+"@marko/babel-utils": minor
+"@marko/compiler": minor
+"marko": minor
+---
+
+Add compute node helper to replace babels `evaluate` helper. This helper is less aggressive and doesn't suffer from the false positives that popped up with babels version.

.changeset/nice-comics-taste.md

@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Avoid adding trailing semicolon to style attribute output.

packages/babel-utils/index.d.ts

@@ -375,3 +375,15 @@ interface SelectFix {
   }[];
   initialValue?: string;
 }
+
+type Computed =
+  | undefined
+  | number
+  | string
+  | boolean
+  | RegExp
+  | bigint
+  | null
+  | { [x: string]: Computed }
+  | Computed[];
+export function computeNode(node: t.Node): undefined | { value: Computed };

packages/babel-utils/src/compute.js

@@ -0,0 +1,194 @@
+/**
+ * @param {import("@babel/types").Node} node
+ */
+export function computeNode(node) {
+  switch (node.type) {
+    case "StringLiteral":
+    case "NumericLiteral":
+    case "BooleanLiteral":
+      return { value: node.value };
+    case "RegExpLiteral":
+      return { value: new RegExp(node.pattern, node.flags) };
+    case "NullLiteral":
+      return { value: null };
+    case "Identifier":
+      switch (node.name) {
+        case "undefined":
+          return { value: undefined };
+        case "NaN":
+          return { value: NaN };
+        case "Infinity":
+          return { value: Infinity };
+        default:
+          return;
+      }
+    case "BigIntLiteral":
+      return { value: BigInt(node.value) };
+    case "BinaryExpression": {
+      const left = computeNode(node.left);
+      if (!left) return;
+      const right = computeNode(node.right);
+      if (!right) return;
+      switch (node.operator) {
+        case "+":
+          return { value: left.value + right.value };
+        case "-":
+          return { value: left.value - right.value };
+        case "*":
+          return { value: left.value * right.value };
+        case "/":
+          return { value: left.value / right.value };
+        case "%":
+          return { value: left.value % right.value };
+        case "**":
+          return { value: left.value ** right.value };
+        case "|":
+          return { value: left.value | right.value };
+        case "&":
+          return { value: left.value & right.value };
+        case "^":
+          return { value: left.value ^ right.value };
+        case "<<":
+          return { value: left.value << right.value };
+        case ">>":
+          return { value: left.value >> right.value };
+        case ">>>":
+          return { value: left.value >>> right.value };
+        case "==":
+          return { value: left.value == right.value };
+        case "!=":
+          return { value: left.value != right.value };
+        case "===":
+          return { value: left.value === right.value };
+        case "!==":
+          return { value: left.value !== right.value };
+        case "<":
+          return { value: left.value < right.value };
+        case "<=":
+          return { value: left.value <= right.value };
+        case ">":
+          return { value: left.value > right.value };
+        case ">=":
+          return { value: left.value >= right.value };
+        default:
+          return;
+      }
+    }
+    case "UnaryExpression": {
+      const arg = computeNode(node.argument);
+      if (!arg) return;
+      switch (node.operator) {
+        case "+":
+          return { value: +arg.value };
+        case "-":
+          return { value: -arg.value };
+        case "~":
+          return { value: ~arg.value };
+        case "!":
+          return { value: !arg.value };
+        case "typeof":
+          return { value: typeof arg.value };
+        case "void":
+          return { value: void arg.value };
+        default:
+          return;
+      }
+    }
+    case "LogicalExpression": {
+      const left = computeNode(node.left);
+      if (!left) return;
+      const right = computeNode(node.right);
+      if (!right) return;
+      switch (node.operator) {
+        case "&&":
+          return { value: left.value && right.value };
+        case "||":
+          return { value: left.value || right.value };
+        case "??":
+          return { value: left.value ?? right.value };
+        default:
+          return;
+      }
+    }
+    case "ConditionalExpression": {
+      const test = computeNode(node.test);
+      if (!test) return;
+      const consequent = computeNode(node.consequent);
+      if (!consequent) return;
+      const alternate = computeNode(node.alternate);
+      if (!alternate) return;
+      return { value: test.value ? consequent.value : alternate.value };
+    }
+    case "TemplateLiteral": {
+      let value = node.quasis[0].cooked;
+      for (let i = 0; i < node.expressions.length; i++) {
+        const expr = computeNode(node.expressions[i]);
+        if (!expr) return;
+        value += expr.value + node.quasis[i + 1].cooked;
+      }
+      return { value };
+    }
+    case "ObjectExpression": {
+      const value = {};
+      for (const prop of node.properties) {
+        if (prop.decorators) return;
+        switch (prop.type) {
+          case "ObjectProperty": {
+            let key;
+            if (prop.computed) {
+              const keyNode = computeNode(prop.key);
+              if (!keyNode) return;
+              key = keyNode.value + "";
+            } else {
+              switch (prop.key.type) {
+                case "Identifier":
+                  key = prop.key.name;
+                  break;
+                case "StringLiteral":
+                  key = prop.key.value;
+                  break;
+                default:
+                  return;
+              }
+            }
+
+            const propValue = computeNode(prop.value);
+            if (!propValue) return;
+            value[key] = propValue.value;
+            break;
+          }
+          case "SpreadElement": {
+            const arg = computeNode(prop.argument);
+            if (!arg) return;
+            Object.assign(value, arg.value);
+            break;
+          }
+        }
+      }
+
+      return { value };
+    }
+    case "ArrayExpression": {
+      const value = [];
+      for (const elem of node.elements) {
+        if (elem) {
+          if (elem.type === "SpreadElement") {
+            const arg = computeNode(elem.argument);
+            if (typeof arg?.value?.[Symbol.iterator] !== "function") return;
+            for (const item of arg.value) {
+              value.push(item);
+            }
+          } else {
+            const elemValue = computeNode(elem);
+            if (!elemValue) return;
+            value.push(elemValue.value);
+          }
+        } else {
+          value.length++;
+        }
+      }
+
+      return { value };
+    }
+  }
+}

packages/babel-utils/src/index.js

@@ -27,6 +27,7 @@ export {
   assertNoVar,
   assertNoAttributeTags,
 } from "./assert";
+export { computeNode } from "./compute";
 export { normalizeTemplateString } from "./template-string";
 
 export { getLoc, getLocRange, withLoc } from "./loc";

packages/marko/src/runtime/helpers/style-value.js

@@ -14,11 +14,15 @@ module.exports = function styleHelper(style) {
 
   if (type !== "string") {
     var styles = "";
+    var sep = "";
 
     if (Array.isArray(style)) {
       for (var i = 0, len = style.length; i < len; i++) {
         var next = styleHelper(style[i]);
-        if (next) styles += next + (next[next.length - 1] !== ";" ? ";" : "");
+        if (next) {
+          styles += sep + next;
+          sep = ";";
+        }
       }
     } else if (type === "object") {
       for (var name in style) {
@@ -28,7 +32,8 @@ module.exports = function styleHelper(style) {
             value += "px";
           }
 
-          styles += changeCase.___camelToDashCase(name) + ":" + value + ";";
+          styles += sep + changeCase.___camelToDashCase(name) + ":" + value;
+          sep = ";";
         }
       }
     }

packages/marko/test/components-browser/fixtures/input-persisted-nested-component/test.js

@@ -5,9 +5,9 @@ module.exports = function (helpers) {
     color: "red",
   });
 
-  expect(component.el.getAttribute("style")).to.equal("color:red;");
+  expect(component.el.getAttribute("style")).to.equal("color:red");
   expect(component.getComponent("counter").el.getAttribute("style")).to.equal(
-    "color:red;"
+    "color:red"
   );
   expect(
     component.getComponent("counter").el.querySelector(".count").innerHTML
@@ -16,9 +16,9 @@ module.exports = function (helpers) {
   component.getComponent("counter").increment();
   component.getComponent("counter").update();
 
-  expect(component.el.getAttribute("style")).to.equal("color:red;");
+  expect(component.el.getAttribute("style")).to.equal("color:red");
   expect(component.getComponent("counter").el.getAttribute("style")).to.equal(
-    "color:red;"
+    "color:red"
   );
   expect(
     component.getComponent("counter").el.querySelector(".count").innerHTML

packages/marko/test/components-browser/fixtures/input-persisted/test.js

@@ -6,13 +6,13 @@ module.exports = function (helpers) {
   });
 
   expect(component.getEl("current").getAttribute("style")).to.equal(
-    "color:#09c;"
+    "color:#09c"
   );
 
   component.increment();
   component.update();
 
   expect(component.getEl("current").getAttribute("style")).to.equal(
-    "color:#09c;"
+    "color:#09c"
   );
 };

packages/marko/test/components-pages/fixtures/component-input-ref/tests.js

@@ -4,10 +4,10 @@ it("should serialize component input down to the browser", function () {
   expect(window.barComponent.getComponent("foo")).to.equal(window.fooComponent);
   expect(window.fooComponent.input.color).to.equal("#800");
   expect(window.fooComponent.el.textContent).to.equal("The current count is 0");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
   window.fooComponent.increment();
   window.fooComponent.update();
   expect(window.fooComponent.el.textContent).to.equal("The current count is 1");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
   expect(window.barComponent.getComponent("foo")).to.equal(window.fooComponent);
 });

packages/marko/test/components-pages/fixtures/component-input/tests.js

@@ -3,9 +3,9 @@ var expect = require("chai").expect;
 it("should serialize component input down to the browser", function () {
   expect(window.fooComponent.input.color).to.equal("#800");
   expect(window.fooComponent.el.textContent).to.equal("The current count is 0");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
   window.fooComponent.increment();
   window.fooComponent.update();
   expect(window.fooComponent.el.textContent).to.equal("The current count is 1");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
 });

packages/marko/test/components-pages/fixtures/runtime-id/tests.js

@@ -7,9 +7,9 @@ it("should serialize component input down to the browser", function () {
 
   expect(window.fooComponent.input.color).to.equal("#800");
   expect(window.fooComponent.el.textContent).to.equal("The current count is 0");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
   window.fooComponent.increment();
   window.fooComponent.update();
   expect(window.fooComponent.el.textContent).to.equal("The current count is 1");
-  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800;");
+  expect(window.fooComponent.el.getAttribute("style")).to.equal("color:#800");
 });

packages/marko/test/render/fixtures/attrs-normalize-for-native-tag/expected.html

@@ -1 +1 @@
-<svg data-dash="case" viewBox="0 0 0 100" class="a" style="color:green;"></svg>
+<svg data-dash=case viewBox="0 0 0 100" class=a style=color:green />

packages/marko/test/render/fixtures/attrs-normalize-for-native-tag/vdom-expected.html

@@ -1 +1 @@
-<svg:svg class="a" data-dash="case" style="color:green;" viewBox="0 0 0 100">
+<svg:svg class="a" data-dash="case" style="color:green" viewBox="0 0 0 100">

packages/marko/test/render/fixtures/dynamic-tag-object-class-style/expected.html

@@ -1 +1 @@
-<hello-world class="foo bar" style="color:blue;">My nested content</hello-world>
+<hello-world class="foo bar" style=color:blue>My nested content</hello-world>

packages/marko/test/render/fixtures/dynamic-tag-object-class-style/vdom-expected.html

@@ -1,2 +1,2 @@
-<HELLO-WORLD class="foo bar" style="color:blue;">
+<HELLO-WORLD class="foo bar" style="color:blue">
   "My nested content"

packages/marko/test/render/fixtures/shorthand-div-id-dynamic/expected.html

@@ -1 +1 @@
-<div style="color: red;" id="foo-Frank">Hello Frank!</div>
+<div style="color: red" id="foo-Frank">Hello Frank!</div>

packages/marko/test/render/fixtures/shorthand-div-id-dynamic/vdom-expected.html

@@ -1,2 +1,2 @@
-<DIV id="foo-Frank" style="color: red;">
+<DIV id="foo-Frank" style="color: red">
   "Hello Frank!"

packages/marko/test/render/fixtures/shorthand-div-id/expected.html

@@ -1 +1 @@
-<div style="color: red;" id="foo">Hello Frank!</div>
+<div style="color: red" id="foo">Hello Frank!</div>

packages/marko/test/render/fixtures/shorthand-div-id/vdom-expected.html

@@ -1,2 +1,2 @@
-<DIV id="foo" style="color: red;">
+<DIV id="foo" style="color: red">
   "Hello Frank!"

packages/marko/test/render/fixtures/shorthand-div.foo/expected.html

@@ -1 +1 @@
-<div style="color: red;" class="foo">Hello Frank!</div>
+<div style="color: red" class="foo">Hello Frank!</div>

packages/marko/test/render/fixtures/shorthand-div.foo/vdom-expected.html

@@ -1,2 +1,2 @@
-<DIV class="foo" style="color: red;">
+<DIV class="foo" style="color: red">
   "Hello Frank!"

packages/marko/test/render/fixtures/spread-attribute-class-style-html-tag/expected.html

@@ -1 +1 @@
-<div class="foo bar" style="color:blue;">Hello spread</div>
+<div class="foo bar" style="color:blue">Hello spread</div>

packages/marko/test/render/fixtures/spread-attribute-class-style-html-tag/vdom-expected.html

@@ -1,2 +1,2 @@
-<DIV class="foo bar" style="color:blue;">
+<DIV class="foo bar" style="color:blue">
   "Hello spread"

packages/marko/test/render/fixtures/style-attr-array-mixed/expected.html

@@ -1 +1 @@
-<div style="color:red;font-weight:bold;background-color:blue;"></div>
+<div style="color:red;font-weight:bold;background-color:blue"></div>

packages/marko/test/render/fixtures/style-attr-array-mixed/vdom-expected.html

@@ -1 +1 @@
-<DIV style="color:red;font-weight:bold;background-color:blue;">
+<DIV style="color:red;font-weight:bold;background-color:blue">