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">

packages/marko/test/render/fixtures/style-attr-object-units/expected.html

@@ -1 +1 @@
-<div style="left:0;margin-right:10px;"></div>
+<div style="left:0;margin-right:10px"></div>

packages/marko/test/render/fixtures/style-attr-object-units/vdom-expected.html

@@ -1 +1 @@
-<DIV style="left:0;margin-right:10px;">
+<DIV style="left:0;margin-right:10px">

packages/marko/test/render/fixtures/style-attr-object/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-object/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">

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

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

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

@@ -1 +1 @@
-<DIV style="font-weight: bold;">
+<DIV style="font-weight: bold">

packages/translator-default/src/placeholder/index[html].js

@@ -1,5 +1,10 @@
 import { types as t } from "@marko/compiler";
-import { getTagDef, importDefault, importNamed } from "@marko/babel-utils";
+import {
+  computeNode,
+  getTagDef,
+  importDefault,
+  importNamed,
+} from "@marko/babel-utils";
 import toString from "marko/src/runtime/helpers/to-string";
 import { x as escapeXML } from "marko/src/runtime/html/helpers/escape-xml";
 import escapeScript from "marko/src/runtime/html/helpers/escape-script-placeholder";
@@ -31,15 +36,15 @@ export default function (path) {
     node,
     hub: { file },
   } = path;
-  const { confident, value: computed } = path.get("value").evaluate();
+  const computed = computeNode(node.value);
   let { escape, value } = node;
 
   if (escape) {
     const tagName = findParentTagName(path);
     const escapeType = ESCAPE_TYPES[tagName] || ESCAPE_TYPES.html;
 
-    value = confident
-      ? t.stringLiteral(escapeType.fn(computed))
+    value = computed
+      ? t.stringLiteral(escapeType.fn(computed.value))
       : t.callExpression(
           escapeType.name
             ? importNamed(
@@ -52,8 +57,8 @@ export default function (path) {
           [value]
         );
   } else {
-    value = confident
-      ? t.stringLiteral(toString(computed))
+    value = computed
+      ? t.stringLiteral(toString(computed.value))
       : t.callExpression(
           importDefault(
             file,

packages/translator-default/src/placeholder/index[vdom].js

@@ -1,3 +1,4 @@
+import { computeNode } from "@marko/babel-utils";
 import write from "../util/vdom-out-write";
 import withPreviousLocation from "../util/with-previous-location";
 
@@ -5,9 +6,9 @@ export default function (path) {
   const { node } = path;
   const { escape, value } = node;
   const method = escape ? "t" : "h";
-  const { confident, value: computed } = path.get("value").evaluate();
+  const computed = computeNode(value);
 
-  if (confident && !computed) {
+  if (computed && computed.value == null) {
     path.remove();
   } else {
     path.replaceWith(

packages/translator-default/src/tag/attribute/directives/class.js

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault, isNativeTag } from "@marko/babel-utils";
+import { computeNode, importDefault, isNativeTag } from "@marko/babel-utils";
 import classToString from "marko/src/runtime/helpers/class-value";
 import withPreviousLocation from "../../../util/with-previous-location";
 
@@ -9,27 +9,29 @@ export default {
       hub: { file },
     } = tag;
     if (!isNativeTag(tag)) return;
-    if (value.isStringLiteral()) return;
 
-    const { confident, value: computed } = value.evaluate();
-
-    const s = classToString(computed);
-    value.replaceWith(
-      confident
-        ? s
-          ? t.stringLiteral(s)
-          : t.nullLiteral()
-        : withPreviousLocation(
-            t.callExpression(
-              importDefault(
-                file,
-                "marko/src/runtime/helpers/class-value.js",
-                "marko_class_merge"
-              ),
-              [value.node]
+    const computed = computeNode(value.node);
+    if (computed) {
+      const str = classToString(computed.value);
+      if (str) {
+        value.replaceWith(t.stringLiteral(str));
+      } else {
+        value.parentPath.remove();
+      }
+    } else {
+      value.replaceWith(
+        withPreviousLocation(
+          t.callExpression(
+            importDefault(
+              file,
+              "marko/src/runtime/helpers/class-value.js",
+              "marko_class_merge"
             ),
-            value.node
-          )
-    );
+            [value.node]
+          ),
+          value.node
+        )
+      );
+    }
   },
 };

packages/translator-default/src/tag/attribute/directives/style.js

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault, isNativeTag } from "@marko/babel-utils";
+import { computeNode, importDefault, isNativeTag } from "@marko/babel-utils";
 import styleToString from "marko/src/runtime/helpers/style-value";
 import withPreviousLocation from "../../../util/with-previous-location";
 
@@ -8,24 +8,30 @@ export default {
     const {
       hub: { file },
     } = tag;
-    if (value.isStringLiteral()) return;
     if (!isNativeTag(tag)) return;
 
-    const { confident, value: computed } = value.evaluate();
-    value.replaceWith(
-      withPreviousLocation(
-        confident
-          ? t.stringLiteral(styleToString(computed) || "")
-          : t.callExpression(
-              importDefault(
-                file,
-                "marko/src/runtime/helpers/style-value.js",
-                "marko_style_merge"
-              ),
-              [value.node]
+    const computed = computeNode(value.node);
+    if (computed) {
+      const str = styleToString(computed.value);
+      if (str) {
+        value.replaceWith(t.stringLiteral(str));
+      } else {
+        value.parentPath.remove();
+      }
+    } else {
+      value.replaceWith(
+        withPreviousLocation(
+          t.callExpression(
+            importDefault(
+              file,
+              "marko/src/runtime/helpers/style-value.js",
+              "marko_style_merge"
             ),
-        value.node
-      )
-    );
+            [value.node]
+          ),
+          value.node
+        )
+      );
+    }
   },
 };

packages/translator-default/src/tag/native-tag[html]/attributes.js

@@ -50,12 +50,21 @@ export default function (path, attrs) {
       const attr = attrs[i];
       const { name, value } = attr.node;
       if (attrValues.has(name)) continue;
-      const { confident, computed } = evaluateAttr(attr);
-      attrValues.set(name, {
-        confident,
-        computed,
-        value,
-      });
+      const computed = evaluateAttr(attr);
+      attrValues.set(
+        name,
+        computed
+          ? {
+              confident: true,
+              computed: computed.value,
+              value,
+            }
+          : {
+              confident: false,
+              computed: undefined,
+              value,
+            }
+      );
     }
 
     for (const [name, { confident, computed, value }] of [

packages/translator-default/src/tag/native-tag[vdom]/index.js

@@ -44,13 +44,13 @@ export function tagArguments(path, isStatic) {
     }
 
     seen.add(name);
-    const { confident, computed } = evaluateAttr(attr);
+    const computed = evaluateAttr(attr);
 
-    if (confident) {
-      if (computed == null || computed === false) {
+    if (computed) {
+      if (computed.value === undefined) {
         if (!hasSpread) attr.remove();
       } else {
-        attr.set("value", t.stringLiteral(computed));
+        attr.set("value", t.stringLiteral(computed.value));
       }
     }
   }

packages/translator-default/src/tag/util.js

@@ -1,5 +1,7 @@
 import { types as t } from "@marko/compiler";
-import { getTagDef } from "@marko/babel-utils";
+import { computeNode, getTagDef } from "@marko/babel-utils";
+import classToString from "marko/src/runtime/helpers/class-value";
+import styleToString from "marko/src/runtime/helpers/style-value";
 
 export function getAttrs(path, preserveNames, skipRenderBody) {
   const { node } = path;
@@ -156,31 +158,47 @@ export function buildEventHandlerArray(path) {
 }
 
 export function evaluateAttr(attr) {
-  const name = attr.get("name").node;
-  const value = attr.get("value");
-  let confident = false;
-  let computed = undefined;
-
-  if (name) {
-    if (value.isRegExpLiteral()) {
-      confident = true;
-      computed = value.get("pattern").node;
-    } else {
-      const evaluated = value.evaluate();
-      ({ confident, value: computed } = evaluated);
-
-      if (computed === true) {
-        computed = "";
-      } else if (computed != null && computed !== false) {
-        computed = computed + "";
+  if (attr.node.name) {
+    const computed = computeNode(attr.node.value);
+    if (computed) {
+      const { value } = computed;
+      switch (attr.node.name) {
+        case "class":
+          return {
+            value: classToString(value)
+              ?.replace(/(\s)\s/, "$1")
+              .trim(),
+          };
+        case "style":
+          return {
+            value: styleToString(value)
+              ?.replace(/(\s)\s/, "$1")
+              .trim()
+              .replace(/;$/, ""),
+          };
       }
+
+      if (value == null || value === false) {
+        return { value: undefined };
+      }
+
+      if (value === true) {
+        return { value: "" };
+      }
+
+      if (typeof value === "object") {
+        switch (value.toString) {
+          case Object.prototype.toString:
+          case Array.prototype.toString:
+            return { value: JSON.stringify(value) };
+          case RegExp.prototype.toString:
+            return { value: value.source };
+        }
+      }
+
+      return { value: value + "" };
     }
   }
-
-  return {
-    confident,
-    computed,
-  };
 }
 
 function camelCase(string) {

packages/translator-default/src/util/optimize-vdom-create.js

@@ -1,6 +1,7 @@
 import { decode } from "he";
 import { types as t } from "@marko/compiler";
 import {
+  computeNode,
   getTagDef,
   importDefault,
   isLoopTag,
@@ -9,8 +10,13 @@ import {
 import { getKeyManager } from "./key-manager";
 import write from "./vdom-out-write";
 import { tagArguments } from "../tag/native-tag[vdom]";
-import directives from "../tag/attribute/directives";
 
+const skipDirectives = new Set([
+  "no-update",
+  "no-update-if",
+  "no-update-body",
+  "no-update-body-if",
+]);
 const staticNodes = new WeakSet();
 
 const mergeStaticCreateVisitor = {
@@ -22,10 +28,14 @@ const mergeStaticCreateVisitor = {
     );
   },
   MarkoPlaceholder(path, state) {
-    const { value } = path.get("value").evaluate();
+    const computed = computeNode(path.node.value);
     state.currentRoot = t.callExpression(
       t.memberExpression(state.currentRoot, t.identifier("t")),
-      [t.stringLiteral(value != null ? value.toString() : "")]
+      [
+        t.stringLiteral(
+          computed && computed.value != null ? `${computed.value}` : ""
+        ),
+      ]
     );
   },
   MarkoTag(path, state) {
@@ -44,8 +54,8 @@ const analyzeStaticVisitor = {
   },
   MarkoPlaceholder(path) {
     if (path.node.escape) {
-      const { confident } = path.get("value").evaluate();
-      if (confident) {
+      const computed = computeNode(path.node.value);
+      if (computed) {
         staticNodes.add(path.node);
       }
     }
@@ -68,24 +78,18 @@ const analyzeStaticVisitor = {
       // check attributes
       isStatic =
         isStatic &&
-        path.get("attributes").every((attr) => {
-          if (
-            !t.isMarkoAttribute(attr) ||
-            attr.node.arguments ||
-            attr.node.modifier ||
-            directives[attr.node.name]
-          )
-            return false;
-
-          const attrValue = attr.get("value");
-          const exclude =
-            t.isObjectExpression(attrValue) ||
-            t.isArrayExpression(attrValue) ||
-            t.isRegExpLiteral(attrValue);
-          if (exclude) return false;
-          const { confident } = attrValue.evaluate();
-          return confident;
-        });
+        path
+          .get("attributes")
+          .every(
+            (attr) =>
+              t.isMarkoAttribute(attr) &&
+              !(
+                attr.node.arguments ||
+                attr.node.modifier ||
+                skipDirectives.has(attr.node.name) ||
+                !computeNode(attr.node.value)
+              )
+          );
 
       // check children
       isStatic =

packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js

@@ -3,6 +3,13 @@ const _marko_componentType = "TKoJdMQb",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import _marko_class_merge from "marko/dist/runtime/helpers/class-value.js";
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "class": "a b"
+}, "1", null, 0, 1);
+const _marko_node2 = _marko_createElement("div", {
+  "class": "a b c"
+}, "2", null, 0, 1);
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
@@ -18,12 +25,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       d
     }])
   }, "0", _component, 0, 1);
-  out.e("div", {
-    "class": "a b"
-  }, "1", _component, 0, 1);
-  out.e("div", {
-    "class": "a b c"
-  }, "2", _component, 0, 1);
+  out.n(_marko_node, _component);
+  out.n(_marko_node2, _component);
   _marko_tag(_customTag, {
     "class": ["a", {
       b: c,

packages/translator-default/test/fixtures/attr-style/snapshots/cjs-expected.js

@@ -20,7 +20,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   out.w(`<div${(0, _attr.default)("style", (0, _styleValue.default)({
     color: input.color
   }))}></div>`);
-  out.w("<div style=width:100px;></div>");
+  out.w("<div style=width:100px></div>");
   out.w("<div style=\"color: green\"></div>");
   (0, _renderTag.default)(_customTag2.default, {
     "style": {

packages/translator-default/test/fixtures/attr-style/snapshots/html-expected.js

@@ -14,7 +14,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w(`<div${_marko_attr("style", _marko_style_merge({
     color: input.color
   }))}></div>`);
-  out.w("<div style=width:100px;></div>");
+  out.w("<div style=width:100px></div>");
   out.w("<div style=\"color: green\"></div>");
   _marko_tag(_customTag, {
     "style": {

packages/translator-default/test/fixtures/attr-style/snapshots/htmlProduction-expected.js

@@ -13,7 +13,7 @@ const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
   out.w(`<div${_marko_attr("style", _marko_style_merge({
     color: input.color
-  }))}></div><div style=width:100px;></div><div style="color: green"></div>`);
+  }))}></div><div style=width:100px></div><div style="color: green"></div>`);
   _marko_tag(_customTag, {
     "style": {
       color: input.color

packages/translator-default/test/fixtures/attr-style/snapshots/vdom-expected.js

@@ -18,7 +18,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     })
   }, "0", _component, 0, 1);
   out.e("div", {
-    "style": "width:100px;"
+    "style": "width:100px"
   }, "1", _component, 0, 1);
   out.e("div", {
     "style": "color: green"

packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js

@@ -3,6 +3,13 @@ const _marko_componentType = "Up7A+MWi",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import _marko_style_merge from "marko/dist/runtime/helpers/style-value.js";
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "style": "width:100px"
+}, "1", null, 0, 1);
+const _marko_node2 = _marko_createElement("div", {
+  "style": "color: green"
+}, "2", null, 0, 1);
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
@@ -17,12 +24,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       color: input.color
     })
   }, "0", _component, 0, 1);
-  out.e("div", {
-    "style": "width:100px;"
-  }, "1", _component, 0, 1);
-  out.e("div", {
-    "style": "color: green"
-  }, "2", _component, 0, 1);
+  out.n(_marko_node, _component);
+  out.n(_marko_node2, _component);
   _marko_tag(_customTag, {
     "style": {
       color: input.color

packages/translator-default/test/fixtures/custom-tag-transform/snapshots/vdomProduction-expected.js

@@ -2,14 +2,16 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "5fhDZgMT",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("span", {
+  "style": "display:block"
+}, "0", null, 0, 1);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.e("span", {
-    "style": "display:block"
-  }, "0", _component, 0, 1);
+  out.n(_marko_node, _component);
 }, {
   t: _marko_componentType,
   i: true

packages/translator-default/test/fixtures/data-migration/snapshots/cjs-expected.js

@@ -36,7 +36,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   if (true) {
     const data = "bar";
     out.w("Hello ");
-    out.w("bar");
+    out.w((0, _escapeXml.x)(data));
   }
   out.w("</div>");
 }, {

packages/translator-default/test/fixtures/data-migration/snapshots/html-expected.js

@@ -30,7 +30,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   if (true) {
     const data = "bar";
     out.w("Hello ");
-    out.w("bar");
+    out.w(_marko_escapeXml(data));
   }
   out.w("</div>");
 }, {

packages/translator-default/test/fixtures/data-migration/snapshots/htmlProduction-expected.js

@@ -23,7 +23,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w(`Hello ${_marko_escapeXml(input)}</span>`);
   if (true) {
     const data = "bar";
-    out.w("Hello bar");
+    out.w(`Hello ${_marko_escapeXml(data)}`);
   }
   out.w("</div>");
 }, {

packages/translator-default/test/fixtures/error-at-tags-top-level/snapshots/vdomProduction-expected.js

@@ -0,0 +1,24 @@
+import { t as _t } from "marko/dist/runtime/vdom/index.js";
+const _marko_componentType = "DvY2Lw0O",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("@header", {
+  "class": "my-header"
+}, null, null, 1, 1).t("Header content");
+const _marko_node2 = _marko_createElement("@footer", {
+  "class": "my-footer"
+}, null, null, 1, 1).t("Footer content");
+import _marko_renderer from "marko/dist/runtime/components/renderer.js";
+import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
+_marko_registerComponent(_marko_componentType, () => _marko_template);
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  out.n(_marko_node, _component);
+  out.n(_marko_node2, _component);
+}, {
+  t: _marko_componentType,
+  i: true
+}, _marko_component);
+import _marko_defineComponent from "marko/dist/runtime/components/defineComponent.js";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js

@@ -58,7 +58,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   out.w(`<div${(0, _attr.default)("class", (0, _classValue.default)(["a", {
     b: c,
     d
-  }]))} style=a:b;></div>`);
+  }]))} style=a:b></div>`);
   out.w("<input type=text>");
   (0, _dynamicTag.default)(out, _b.default, null, out => {
     out.w("<div></div>");

packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js

@@ -52,7 +52,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w(`<div${_marko_attr("class", _marko_class_merge(["a", {
     b: c,
     d
-  }]))} style=a:b;></div>`);
+  }]))} style=a:b></div>`);
   out.w("<input type=text>");
   _marko_dynamic_tag(out, a, null, out => {
     out.w("<div></div>");

packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js

@@ -40,7 +40,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w(`</div><div></div><div${_marko_attr("id", _componentDef.elId("1"))}></div><div${_marko_attr("class", _marko_class_merge(["a", {
     b: c,
     d
-  }]))} style=a:b;></div><input type=text>`);
+  }]))} style=a:b></div><input type=text>`);
   _marko_dynamic_tag(out, a, null, out => {
     out.w("<div></div>");
   }, null, null, _componentDef, "@x");

packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js

@@ -66,7 +66,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       b: c,
       d
     }]),
-    "style": "a:b;"
+    "style": "a:b"
   }, "8", _component, 0, 1);
   out.e("input", {
     "type": "text"
@@ -109,7 +109,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   }, out, _componentDef, "14");
   out.be("div", _marko_attrs({
     "class": "b c",
-    "a": "[object Object]",
+    "a": "{\"a\":1}",
     "c": "${d}",
     ...e,
     ...f(),

packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js

@@ -85,7 +85,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       b: c,
       d
     }]),
-    "style": "a:b;"
+    "style": "a:b"
   }, "8", _component, 0, 1);
   out.n(_marko_node, _component);
   _marko_dynamic_tag(out, a, null, out => {
@@ -126,7 +126,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   }, out, _componentDef, "14");
   out.be("div", _marko_attrs({
     "class": "b c",
-    "a": "[object Object]",
+    "a": "{\"a\":1}",
     "c": "${d}",
     ...e,
     ...f(),

packages/translator-default/test/fixtures/shorthand-classname/snapshots/vdomProduction-expected.js

@@ -2,21 +2,25 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "WqUsRyBC",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "class": "shorthand"
+}, "0", null, 0, 1);
+const _marko_node2 = _marko_createElement("div", {
+  "class": "shorthand1 shorthand2"
+}, "1", null, 0, 1);
+const _marko_node3 = _marko_createElement("div", {
+  "class": "shorthand1 shorthand2 inline"
+}, "2", null, 0, 1);
 import _marko_class_merge from "marko/dist/runtime/helpers/class-value.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.e("div", {
-    "class": "shorthand"
-  }, "0", _component, 0, 1);
-  out.e("div", {
-    "class": "shorthand1 shorthand2"
-  }, "1", _component, 0, 1);
-  out.e("div", {
-    "class": "shorthand1 shorthand2 inline"
-  }, "2", _component, 0, 1);
+  out.n(_marko_node, _component);
+  out.n(_marko_node2, _component);
+  out.n(_marko_node3, _component);
   out.e("div", {
     "class": _marko_class_merge(["shorthand1 shorthand2", dynamic1])
   }, "3", _component, 0, 1);

packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/cjs-expected.js

@@ -12,13 +12,13 @@ var _default = _marko_template;
 exports.default = _default;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  out.w("<div style=c:1px; class=b id=a></div>");
-  out.w("<div style=c:1px; id=a></div>");
-  out.w("<div style=c:1px;></div>");
+  out.w("<div style=c:1px class=b id=a></div>");
+  out.w("<div style=c:1px id=a></div>");
+  out.w("<div style=c:1px></div>");
   out.w(`<div${(0, _dataMarko.default)(out, _componentDef, {
     pa: ["style"]
-  })} style=c:1px;></div>`);
-  out.w("<div a=1 style=c:1px;></div>");
+  })} style=c:1px></div>`);
+  out.w("<div a=1 style=c:1px></div>");
 }, {
   t: _marko_componentType,
   i: true,

packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/html-expected.js

@@ -6,13 +6,13 @@ import _marko_props from "marko/src/runtime/html/helpers/data-marko.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w("<div style=c:1px; class=b id=a></div>");
-  out.w("<div style=c:1px; id=a></div>");
-  out.w("<div style=c:1px;></div>");
+  out.w("<div style=c:1px class=b id=a></div>");
+  out.w("<div style=c:1px id=a></div>");
+  out.w("<div style=c:1px></div>");
   out.w(`<div${_marko_props(out, _componentDef, {
     pa: ["style"]
-  })} style=c:1px;></div>`);
-  out.w("<div a=1 style=c:1px;></div>");
+  })} style=c:1px></div>`);
+  out.w("<div a=1 style=c:1px></div>");
 }, {
   t: _marko_componentType,
   i: true,

packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/htmlProduction-expected.js

@@ -6,9 +6,9 @@ import _marko_props from "marko/dist/runtime/html/helpers/data-marko.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div style=c:1px; class=b id=a></div><div style=c:1px; id=a></div><div style=c:1px;></div><div${_marko_props(out, _componentDef, {
+  out.w(`<div style=c:1px class=b id=a></div><div style=c:1px id=a></div><div style=c:1px></div><div${_marko_props(out, _componentDef, {
     pa: ["style"]
-  })} style=c:1px;></div><div a=1 style=c:1px;></div>`);
+  })} style=c:1px></div><div a=1 style=c:1px></div>`);
 }, {
   t: _marko_componentType,
   i: true

packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdom-expected.js

@@ -9,25 +9,25 @@ _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
   out.e("div", {
-    "style": "c:1px;",
+    "style": "c:1px",
     "class": "b",
     "id": "a"
   }, "0", _component, 0, 1);
   out.e("div", {
-    "style": "c:1px;",
+    "style": "c:1px",
     "id": "a"
   }, "1", _component, 0, 1);
   out.e("div", {
-    "style": "c:1px;"
+    "style": "c:1px"
   }, "2", _component, 0, 1);
   out.e("div", {
-    "style": "c:1px;"
+    "style": "c:1px"
   }, "3", _component, 0, 0, {
     pa: ["style"]
   });
   out.e("div", {
     "a": "1",
-    "style": "c:1px;"
+    "style": "c:1px"
   }, "4", _component, 0, 0);
 }, {
   t: _marko_componentType,

packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js

@@ -2,33 +2,38 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "YUZPhHIa",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "style": "c:1px",
+  "class": "b",
+  "id": "a"
+}, "0", null, 0, 1);
+const _marko_node2 = _marko_createElement("div", {
+  "style": "c:1px",
+  "id": "a"
+}, "1", null, 0, 1);
+const _marko_node3 = _marko_createElement("div", {
+  "style": "c:1px"
+}, "2", null, 0, 1);
 import "marko/dist/runtime/vdom/preserve-attrs.js";
+const _marko_node4 = _marko_createElement("div", {
+  "a": "1",
+  "style": "c:1px"
+}, "4", null, 0, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  out.n(_marko_node, _component);
+  out.n(_marko_node2, _component);
+  out.n(_marko_node3, _component);
   out.e("div", {
-    "style": "c:1px;",
-    "class": "b",
-    "id": "a"
-  }, "0", _component, 0, 1);
-  out.e("div", {
-    "style": "c:1px;",
-    "id": "a"
-  }, "1", _component, 0, 1);
-  out.e("div", {
-    "style": "c:1px;"
-  }, "2", _component, 0, 1);
-  out.e("div", {
-    "style": "c:1px;"
+    "style": "c:1px"
   }, "3", _component, 0, 0, {
     pa: ["style"]
   });
-  out.e("div", {
-    "a": "1",
-    "style": "c:1px;"
-  }, "4", _component, 0, 0);
+  out.n(_marko_node4, _component);
 }, {
   t: _marko_componentType,
   i: true

packages/translator-default/test/fixtures/style-block-empty/snapshots/vdomProduction-expected.js

@@ -2,14 +2,16 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "iTWeM9Hv",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "class": "test"
+}, "0", null, 0, 1);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.e("div", {
-    "class": "test"
-  }, "0", _component, 0, 1);
+  out.n(_marko_node, _component);
 }, {
   t: _marko_componentType,
   i: true

packages/translator-default/test/fixtures/style-block-with-styles/snapshots/vdomProduction-expected.js

@@ -2,14 +2,16 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "ZsW3uNOB",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
+import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
+const _marko_node = _marko_createElement("div", {
+  "class": "test"
+}, "0", null, 0, 1);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.e("div", {
-    "class": "test"
-  }, "0", _component, 0, 1);
+  out.n(_marko_node, _component);
 }, {
   t: _marko_componentType,
   i: true