From 9a18ced27b04b6fbd391d84c61d97269bcf7f851 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Thu, 15 Feb 2024 15:58:20 -0700
Subject: [PATCH 01/20] fix: vdom hoisting id bug

---
 .changeset/gentle-dogs-hammer.md              |   6 +
 .../src/runtime/vdom/helpers/const-element.js |  25 +++
 .../marko/src/runtime/vdom/helpers/const.js   |   8 -
 .../src/runtime/vdom/helpers/v-element.js     |  15 --
 .../marko/src/runtime/vdom/helpers/v-text.js  |   7 -
 packages/translator-default/src/index.js      |   4 +-
 .../src/tag/native-tag[vdom]/index.js         | 190 +++++++++---------
 .../src/util/optimize-vdom-create.js          |  26 ++-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |  10 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |  10 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |  10 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |  18 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |  30 +--
 .../snapshots/vdomProduction-expected.js      |  14 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |  18 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 .../snapshots/vdomProduction-expected.js      |  20 +-
 .../snapshots/vdomProduction-expected.js      |   8 +-
 .../snapshots/vdomProduction-expected.js      |   4 +-
 .../snapshots/vdomProduction-expected.js      |   6 +-
 42 files changed, 271 insertions(+), 266 deletions(-)
 create mode 100644 .changeset/gentle-dogs-hammer.md
 create mode 100644 packages/marko/src/runtime/vdom/helpers/const-element.js
 delete mode 100644 packages/marko/src/runtime/vdom/helpers/const.js
 delete mode 100644 packages/marko/src/runtime/vdom/helpers/v-element.js
 delete mode 100644 packages/marko/src/runtime/vdom/helpers/v-text.js

diff --git a/.changeset/gentle-dogs-hammer.md b/.changeset/gentle-dogs-hammer.md
new file mode 100644
index 000000000..7a9ad9c74
--- /dev/null
+++ b/.changeset/gentle-dogs-hammer.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Fix and optimize the output for vdom hoisting.
diff --git a/packages/marko/src/runtime/vdom/helpers/const-element.js b/packages/marko/src/runtime/vdom/helpers/const-element.js
new file mode 100644
index 000000000..42c0ba1cc
--- /dev/null
+++ b/packages/marko/src/runtime/vdom/helpers/const-element.js
@@ -0,0 +1,25 @@
+"use strict";
+
+var VElement = require("../vdom").___VElement;
+var i = 0;
+
+module.exports = function (tagName, attrs, childCount) {
+  return new ConstVElement(tagName, attrs, childCount);
+};
+
+function ConstVElement(tagName, attrs, childCount) {
+  VElement.call(this, tagName, attrs, null, null, childCount, null, { i: i++ });
+}
+
+ConstVElement.prototype = Object.create(VElement.prototype);
+ConstVElement.prototype.e = function (tagName, attrs, childCount) {
+  var child = this.___appendChild(
+    new ConstVElement(tagName, attrs, childCount),
+  );
+
+  if (childCount === 0) {
+    return this.___finishChild();
+  } else {
+    return child;
+  }
+};
diff --git a/packages/marko/src/runtime/vdom/helpers/const.js b/packages/marko/src/runtime/vdom/helpers/const.js
deleted file mode 100644
index d7c6a4075..000000000
--- a/packages/marko/src/runtime/vdom/helpers/const.js
+++ /dev/null
@@ -1,8 +0,0 @@
-"use strict";
-
-module.exports = function (id) {
-  var i = 0;
-  return function () {
-    return id + i++;
-  };
-};
diff --git a/packages/marko/src/runtime/vdom/helpers/v-element.js b/packages/marko/src/runtime/vdom/helpers/v-element.js
deleted file mode 100644
index 92b336bb4..000000000
--- a/packages/marko/src/runtime/vdom/helpers/v-element.js
+++ /dev/null
@@ -1,15 +0,0 @@
-"use strict";
-
-var VElement = require("../vdom").___VElement;
-
-module.exports = function (
-  tagName,
-  attrs,
-  key,
-  component,
-  childCount,
-  flags,
-  props,
-) {
-  return new VElement(tagName, attrs, key, component, childCount, flags, props);
-};
diff --git a/packages/marko/src/runtime/vdom/helpers/v-text.js b/packages/marko/src/runtime/vdom/helpers/v-text.js
deleted file mode 100644
index e027ad71b..000000000
--- a/packages/marko/src/runtime/vdom/helpers/v-text.js
+++ /dev/null
@@ -1,7 +0,0 @@
-"use strict";
-
-var VText = require("../vdom").___VText;
-
-module.exports = function (value) {
-  return new VText(value);
-};
diff --git a/packages/translator-default/src/index.js b/packages/translator-default/src/index.js
index 2ba396e0c..19d5ad321 100644
--- a/packages/translator-default/src/index.js
+++ b/packages/translator-default/src/index.js
@@ -505,9 +505,7 @@ export function getRuntimeEntryFiles(output, optimize) {
           `${base}runtime/vdom/index.js`,
           `${base}runtime/vdom/hot-reload.js`,
           `${base}runtime/vdom/helpers/attrs.js`,
-          `${base}runtime/vdom/helpers/const.js`,
-          `${base}runtime/vdom/helpers/v-element.js`,
-          `${base}runtime/vdom/helpers/v-text.js`,
+          `${base}runtime/vdom/helpers/const-element.js`,
           `${base}runtime/vdom/preserve-attrs.js`,
         ]),
   ];
diff --git a/packages/translator-default/src/tag/native-tag[vdom]/index.js b/packages/translator-default/src/tag/native-tag[vdom]/index.js
index 60e36e975..21f6405af 100644
--- a/packages/translator-default/src/tag/native-tag[vdom]/index.js
+++ b/packages/translator-default/src/tag/native-tag[vdom]/index.js
@@ -7,102 +7,6 @@ import translateAttributes from "./attributes";
 
 const SIMPLE_ATTRS = ["id", "class", "style"];
 
-export function tagArguments(path, isStatic) {
-  const {
-    hub: { file },
-    node,
-  } = path;
-  const {
-    name,
-    key,
-    body: { body },
-    handlers,
-  } = node;
-  const tagProperties = (path.node.extra && path.node.extra.properties) || [];
-  const attrsObj = translateAttributes(path, path.get("attributes"));
-  let runtimeFlags = 0;
-
-  if (!t.isNullLiteral(attrsObj) && !t.isObjectExpression(attrsObj)) {
-    runtimeFlags |= FLAGS.SPREAD_ATTRS;
-  }
-
-  const writeArgs = [
-    name,
-    attrsObj,
-    !key && isStatic ? t.nullLiteral() : key,
-    isStatic ? t.nullLiteral() : file._componentInstanceIdentifier,
-    isStatic
-      ? t.numericLiteral(body.length)
-      : body.length
-        ? t.nullLiteral()
-        : t.numericLiteral(0),
-  ];
-
-  if (node.preserveAttrs) {
-    tagProperties.push(
-      t.objectProperty(
-        t.identifier("pa"),
-        t.arrayExpression(
-          node.preserveAttrs.map((name) => t.stringLiteral(name)),
-        ),
-      ),
-    );
-  }
-
-  if (handlers) {
-    Object.entries(handlers).forEach(
-      ([eventName, { arguments: args, once }]) => {
-        const delegateArgs = [t.stringLiteral(eventName), args[0]];
-
-        // TODO: look into only sending this if once is true.
-        delegateArgs.push(t.booleanLiteral(once));
-
-        if (args.length > 1) {
-          delegateArgs.push(t.arrayExpression(args.slice(1)));
-        }
-
-        // TODO: why do we output eventName twice.
-        tagProperties.push(
-          t.objectProperty(
-            t.stringLiteral(`on${eventName}`),
-            t.callExpression(
-              t.memberExpression(
-                file._componentDefIdentifier,
-                t.identifier("d"),
-              ),
-              delegateArgs,
-            ),
-          ),
-        );
-      },
-    );
-  }
-
-  if (
-    t.isObjectExpression(attrsObj) &&
-    attrsObj.properties.every((n) => isPropertyName(n, SIMPLE_ATTRS)) &&
-    !node.preserveAttrs
-  ) {
-    runtimeFlags |= FLAGS.HAS_SIMPLE_ATTRS;
-  }
-
-  const tagDef = getTagDef(path);
-
-  if (tagDef) {
-    const { htmlType } = tagDef;
-    if (htmlType === "custom-element") {
-      runtimeFlags |= FLAGS.IS_CUSTOM_ELEMENT;
-    }
-  }
-
-  writeArgs.push(t.numericLiteral(runtimeFlags));
-
-  if (tagProperties.length) {
-    writeArgs.push(t.objectExpression(tagProperties));
-  }
-  return writeArgs;
-}
-
 /**
  * Translates the html streaming version of a standard html element.
  */
@@ -180,3 +84,97 @@ function isPropertyName({ key }, names) {
     return names.includes(key.name);
   }
 }
+
+function tagArguments(path) {
+  const {
+    hub: { file },
+    node,
+  } = path;
+  const {
+    name,
+    key,
+    body: { body },
+    handlers,
+  } = node;
+  const tagProperties = (path.node.extra && path.node.extra.properties) || [];
+  const attrsObj = translateAttributes(path, path.get("attributes"));
+  let runtimeFlags = 0;
+
+  if (!t.isNullLiteral(attrsObj) && !t.isObjectExpression(attrsObj)) {
+    runtimeFlags |= FLAGS.SPREAD_ATTRS;
+  }
+
+  const writeArgs = [
+    name,
+    attrsObj,
+    key,
+    file._componentInstanceIdentifier,
+       body.length
+        ? t.nullLiteral()
+        : t.numericLiteral(0),
+  ];
+
+  if (node.preserveAttrs) {
+    tagProperties.push(
+      t.objectProperty(
+        t.identifier("pa"),
+        t.arrayExpression(
+          node.preserveAttrs.map((name) => t.stringLiteral(name)),
+        ),
+      ),
+    );
+  }
+
+  if (handlers) {
+    Object.entries(handlers).forEach(
+      ([eventName, { arguments: args, once }]) => {
+        const delegateArgs = [t.stringLiteral(eventName), args[0]];
+
+        // TODO: look into only sending this if once is true.
+        delegateArgs.push(t.booleanLiteral(once));
+
+        if (args.length > 1) {
+          delegateArgs.push(t.arrayExpression(args.slice(1)));
+        }
+
+        // TODO: why do we output eventName twice.
+        tagProperties.push(
+          t.objectProperty(
+            t.stringLiteral(`on${eventName}`),
+            t.callExpression(
+              t.memberExpression(
+                file._componentDefIdentifier,
+                t.identifier("d"),
+              ),
+              delegateArgs,
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  if (
+    t.isObjectExpression(attrsObj) &&
+    attrsObj.properties.every((n) => isPropertyName(n, SIMPLE_ATTRS)) &&
+    !node.preserveAttrs
+  ) {
+    runtimeFlags |= FLAGS.HAS_SIMPLE_ATTRS;
+  }
+
+  const tagDef = getTagDef(path);
+
+  if (tagDef) {
+    const { htmlType } = tagDef;
+    if (htmlType === "custom-element") {
+      runtimeFlags |= FLAGS.IS_CUSTOM_ELEMENT;
+    }
+  }
+
+  writeArgs.push(t.numericLiteral(runtimeFlags));
+
+  if (tagProperties.length) {
+    writeArgs.push(t.objectExpression(tagProperties));
+  }
+  return writeArgs;
+}
diff --git a/packages/translator-default/src/util/optimize-vdom-create.js b/packages/translator-default/src/util/optimize-vdom-create.js
index ef7fba115..fd5cdb1c0 100644
--- a/packages/translator-default/src/util/optimize-vdom-create.js
+++ b/packages/translator-default/src/util/optimize-vdom-create.js
@@ -7,8 +7,8 @@ import {
 } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
 import { decode } from "he";
-import { tagArguments } from "../tag/native-tag[vdom]";
-import { getKeyManager } from "./key-manager";
+import translateAttributes from "../tag/native-tag[vdom]/attributes";
+import { getKeyManager, hasUserKey } from "./key-manager";
 import write from "./vdom-out-write";
 
 const skipDirectives = new Set([
@@ -40,10 +40,9 @@ const mergeStaticCreateVisitor = {
   },
   MarkoTag(path, state) {
     getKeyManager(path).resolveKey(path);
-    const writeArgs = tagArguments(path, true);
     state.currentRoot = t.callExpression(
       t.memberExpression(state.currentRoot, t.identifier("e")),
-      writeArgs,
+      getConstElementArgs(path),
     );
   },
 };
@@ -70,7 +69,8 @@ const analyzeStaticVisitor = {
       let isStatic =
         isNativeTag(path) &&
         !path.node.body.params.length &&
-        !path.node.arguments;
+        !path.node.arguments &&
+        !hasUserKey(path);
 
       const tagDef = getTagDef(path);
       isStatic = isStatic && !tagDef.translator;
@@ -118,15 +118,14 @@ export function optimizeStaticVDOM(path) {
   }
 
   const identifier = path.scope.generateUidIdentifier("marko_node");
-  const writeArgs = tagArguments(path, true);
   const state = {
     currentRoot: t.callExpression(
       importDefault(
         file,
-        "marko/src/runtime/vdom/helpers/v-element.js",
-        "marko_createElement",
+        "marko/src/runtime/vdom/helpers/const-element.js",
+        "marko_constElement",
       ),
-      writeArgs,
+      getConstElementArgs(path),
     ),
   };
 
@@ -149,3 +148,12 @@ export function analyzeStaticVDOM(path) {
 function shouldRun(markoOpts) {
   return markoOpts.optimize && markoOpts.output !== "html";
 }
+
+function getConstElementArgs(path) {
+  const { node } = path;
+  return [
+    node.name,
+    translateAttributes(path, path.get("attributes")),
+    t.numericLiteral(node.body.body.length),
+  ];
+}
diff --git a/packages/translator-default/test/fixtures/attr-boolean/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-boolean/snapshots/vdomProduction-expected.js
index 1d907c454..c805c5ecf 100644
--- a/packages/translator-default/test/fixtures/attr-boolean/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-boolean/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "CtqnD7TI",
   _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("input", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("input", {
   "checked": ""
-}, "0", null, 0, 0);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
index 8916ac807..fb47c5496 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
@@ -3,13 +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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "class": "a b"
-}, "1", null, 0, 1);
-const _marko_node2 = _marko_createElement("div", {
+}, 0);
+const _marko_node2 = _marko_constElement("div", {
   "class": "a b c"
-}, "2", null, 0, 1);
+}, 0);
 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";
diff --git a/packages/translator-default/test/fixtures/attr-falsey/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-falsey/snapshots/vdomProduction-expected.js
index 86fb2f63d..28068b4ab 100644
--- a/packages/translator-default/test/fixtures/attr-falsey/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-falsey/snapshots/vdomProduction-expected.js
@@ -2,11 +2,11 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "9WNpCPpT",
   _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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "d": "0",
   "y": "1"
-}, "0", null, 0, 0);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
index a82e275f8..37fd30159 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
@@ -3,13 +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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "style": "width:100px"
-}, "1", null, 0, 1);
-const _marko_node2 = _marko_createElement("div", {
+}, 0);
+const _marko_node2 = _marko_constElement("div", {
   "style": "color: green"
-}, "2", null, 0, 1);
+}, 0);
 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";
diff --git a/packages/translator-default/test/fixtures/class-external-component-index/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/class-external-component-index/snapshots/vdomProduction-expected.js
index d25883724..28797b03d 100644
--- a/packages/translator-default/test/fixtures/class-external-component-index/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/class-external-component-index/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "ErZDLFTk",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_component from "./component.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
diff --git a/packages/translator-default/test/fixtures/class-external-component/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/class-external-component/snapshots/vdomProduction-expected.js
index 4ee4c9ccf..207239ac0 100644
--- a/packages/translator-default/test/fixtures/class-external-component/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/class-external-component/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "cQ4BiZgz",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_component from "./template.component.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
diff --git a/packages/translator-default/test/fixtures/class-inline-class-props-without-on-create/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/class-inline-class-props-without-on-create/snapshots/vdomProduction-expected.js
index 441cd6d97..ed244a12a 100644
--- a/packages/translator-default/test/fixtures/class-inline-class-props-without-on-create/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/class-inline-class-props-without-on-create/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "rmgp0gbX",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/class-inline/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/class-inline/snapshots/vdomProduction-expected.js
index 395941583..1ccdefc11 100644
--- a/packages/translator-default/test/fixtures/class-inline/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/class-inline/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "F7GLatBK",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/custom-element-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/custom-element-tag/snapshots/vdomProduction-expected.js
index 6f53c16bd..193d2710f 100644
--- a/packages/translator-default/test/fixtures/custom-element-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/custom-element-tag/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "O83mlmop",
   _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("hello", null, "0", null, 0, 2);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("hello", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/custom-tag-separate-assets/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/custom-tag-separate-assets/snapshots/vdomProduction-expected.js
index 912d27836..6f22263d1 100644
--- a/packages/translator-default/test/fixtures/custom-tag-separate-assets/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/custom-tag-separate-assets/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "WET+Vfy4",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_component from "./template.component.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
diff --git a/packages/translator-default/test/fixtures/custom-tag-transform/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/custom-tag-transform/snapshots/vdomProduction-expected.js
index bfc16cbe1..995ff9694 100644
--- a/packages/translator-default/test/fixtures/custom-tag-transform/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/custom-tag-transform/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("span", {
   "style": "display:block"
-}, "0", null, 0, 1);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/declaration/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/declaration/snapshots/vdomProduction-expected.js
index 109cc9103..97706d9c6 100644
--- a/packages/translator-default/test/fixtures/declaration/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/declaration/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "p0+/pj8a",
   _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("contact-info", null, "0", null, 1, 0).e("name", null, "1", null, 1, 0).t("Hello World");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("contact-info", null, 1).e("name", null, 1).t("Hello World");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/doctype/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/doctype/snapshots/vdomProduction-expected.js
index 615dfc520..d2ae6d602 100644
--- a/packages/translator-default/test/fixtures/doctype/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/doctype/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "VJrYycFN",
   _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("head", null, "1", null, 1, 0).e("title", null, "2", null, 1, 0).t("Title of the document");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("head", null, 1).e("title", null, 1).t("Title of the document");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/error-at-tags-top-level/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/error-at-tags-top-level/snapshots/vdomProduction-expected.js
index b89860592..a11d0b7a0 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-top-level/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-top-level/snapshots/vdomProduction-expected.js
@@ -2,13 +2,13 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("@header", {
   "class": "my-header"
-}, null, null, 1, 1).t("Header content");
-const _marko_node2 = _marko_createElement("@footer", {
+}, 1).t("Header content");
+const _marko_node2 = _marko_constElement("@footer", {
   "class": "my-footer"
-}, null, null, 1, 1).t("Footer content");
+}, 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.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/error-body-only-if-no-condition/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/error-body-only-if-no-condition/snapshots/vdomProduction-expected.js
index 52caf17f3..643d5b14d 100644
--- a/packages/translator-default/test/fixtures/error-body-only-if-no-condition/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/error-body-only-if-no-condition/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "QPcOe9nt",
   _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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "body-only-if": ""
-}, "0", null, 0, 0);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-expected.js
index 0c243e9a9..a89e35d08 100644
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "/7Yakras",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/html-entity/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/html-entity/snapshots/vdomProduction-expected.js
index 6b9488aaa..c7b5e3f4d 100644
--- a/packages/translator-default/test/fixtures/html-entity/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/html-entity/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "PF20NQ88",
   _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", null, "0", null, 1, 0).t("<div>");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 1).t("<div>");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/macro-non-root/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/macro-non-root/snapshots/vdomProduction-expected.js
index f6ba629c8..de6b00cf5 100644
--- a/packages/translator-default/test/fixtures/macro-non-root/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/macro-non-root/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "R6eF4gGA",
   _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", null, "2", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/no-update-directives/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/no-update-directives/snapshots/vdomProduction-expected.js
index 43f24f441..a7eb54339 100644
--- a/packages/translator-default/test/fixtures/no-update-directives/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-directives/snapshots/vdomProduction-expected.js
@@ -4,16 +4,16 @@ const _marko_componentType = "qUg9ApxN",
 export default _marko_template;
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
-import _marko_createElement from "marko/dist/runtime/vdom/helpers/v-element.js";
-const _marko_node = _marko_createElement("div", null, "2", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _preserve from "marko/dist/core-tags/components/preserve-tag.js";
-const _marko_node2 = _marko_createElement("div", null, "5", null, 0, 0);
-const _marko_node3 = _marko_createElement("div", null, "8", null, 0, 0);
-const _marko_node4 = _marko_createElement("div", null, "11", null, 0, 0);
-const _marko_node5 = _marko_createElement("div", null, "13", null, 0, 0);
-const _marko_node6 = _marko_createElement("div", null, "14", null, 0, 0);
-const _marko_node7 = _marko_createElement("div", null, "16", null, 0, 0);
-const _marko_node8 = _marko_createElement("div", null, "17", null, 0, 0);
+const _marko_node2 = _marko_constElement("div", null, 0);
+const _marko_node3 = _marko_constElement("div", null, 0);
+const _marko_node4 = _marko_constElement("div", null, 0);
+const _marko_node5 = _marko_constElement("div", null, 0);
+const _marko_node6 = _marko_constElement("div", null, 0);
+const _marko_node7 = _marko_constElement("div", null, 0);
+const _marko_node8 = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/placeholders/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/placeholders/snapshots/vdomProduction-expected.js
index 3b276561d..fdf22803e 100644
--- a/packages/translator-default/test/fixtures/placeholders/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/placeholders/snapshots/vdomProduction-expected.js
@@ -2,9 +2,9 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "jxXJawbJ",
   _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("script", null, "1", null, 3, 0).t("\n    ").t("Hello <b> </script>").t("\n  ");
-const _marko_node2 = _marko_createElement("style", null, "2", null, 3, 0).t("\n    ").t("Hello <b> </style>").t("\n  ");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("script", null, 3).t("\n    ").t("Hello <b> </script>").t("\n  ");
+const _marko_node2 = _marko_constElement("style", null, 3).t("\n    ").t("Hello <b> </style>").t("\n  ");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/prevent-override-component-def/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/prevent-override-component-def/snapshots/vdomProduction-expected.js
index 2a607623b..9a4692295 100644
--- a/packages/translator-default/test/fixtures/prevent-override-component-def/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/prevent-override-component-def/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "AWlOZ9B/",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
index 0503a8f12..213d04620 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
@@ -9,30 +9,30 @@ function more() {
   abc();
 }
 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("input", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("input", {
   "type": "text"
-}, "9", null, 0, 0);
-const _marko_node2 = _marko_createElement("div", null, "10", null, 0, 0);
+}, 0);
+const _marko_node2 = _marko_constElement("div", null, 0);
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
-const _marko_node3 = _marko_createElement("div", null, "13", null, 0, 0);
+const _marko_node3 = _marko_constElement("div", null, 0);
 import _other from "./components/other/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
-const _marko_node4 = _marko_createElement("div", null, "15", null, 0, 0);
-const _marko_node5 = _marko_createElement("div", null, "16", null, 0, 0);
-const _marko_node6 = _marko_createElement("div", null, "17", null, 0, 0);
+const _marko_node4 = _marko_constElement("div", null, 0);
+const _marko_node5 = _marko_constElement("div", null, 0);
+const _marko_node6 = _marko_constElement("div", null, 0);
 import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
-const _marko_node7 = _marko_createElement("div", {
+const _marko_node7 = _marko_constElement("div", {
   "c": "1"
-}, "19", null, 0, 0);
-const _marko_node8 = _marko_createElement("div", {
+}, 0);
+const _marko_node8 = _marko_constElement("div", {
   "d": "1"
-}, "20", null, 0, 0);
+}, 0);
 import _marko_merge_attrs from "marko/dist/runtime/vdom/helpers/merge-attrs.js";
-const _marko_node9 = _marko_createElement("div", {
+const _marko_node9 = _marko_constElement("div", {
   "b": "1"
-}, "21", null, 0, 0);
-const _marko_node10 = _marko_createElement("div", null, "22", null, 1, 0).t("123 abc 123");
+}, 0);
+const _marko_node10 = _marko_constElement("div", null, 1).t("123 abc 123");
 import _marko_attrs from "marko/dist/runtime/vdom/helpers/attrs.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
diff --git a/packages/translator-default/test/fixtures/shorthand-classname/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/shorthand-classname/snapshots/vdomProduction-expected.js
index 8b98d9694..94bf0c4be 100644
--- a/packages/translator-default/test/fixtures/shorthand-classname/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/shorthand-classname/snapshots/vdomProduction-expected.js
@@ -2,16 +2,16 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "class": "shorthand"
-}, "0", null, 0, 1);
-const _marko_node2 = _marko_createElement("div", {
+}, 0);
+const _marko_node2 = _marko_constElement("div", {
   "class": "shorthand1 shorthand2"
-}, "1", null, 0, 1);
-const _marko_node3 = _marko_createElement("div", {
+}, 0);
+const _marko_node3 = _marko_constElement("div", {
   "class": "shorthand1 shorthand2 inline"
-}, "2", null, 0, 1);
+}, 0);
 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.js";
diff --git a/packages/translator-default/test/fixtures/shorthand-id/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/shorthand-id/snapshots/vdomProduction-expected.js
index 4588634c9..5bd4ce6cd 100644
--- a/packages/translator-default/test/fixtures/shorthand-id/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/shorthand-id/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "wUxkdMJU",
   _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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "id": "shorthand"
-}, "0", null, 0, 1);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
index d6a207810..a34b0a701 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
@@ -2,24 +2,24 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "style": "c:1px",
   "class": "b",
   "id": "a"
-}, "0", null, 0, 1);
-const _marko_node2 = _marko_createElement("div", {
+}, 0);
+const _marko_node2 = _marko_constElement("div", {
   "style": "c:1px",
   "id": "a"
-}, "1", null, 0, 1);
-const _marko_node3 = _marko_createElement("div", {
+}, 0);
+const _marko_node3 = _marko_constElement("div", {
   "style": "c:1px"
-}, "2", null, 0, 1);
+}, 0);
 import "marko/dist/runtime/vdom/preserve-attrs.js";
-const _marko_node4 = _marko_createElement("div", {
+const _marko_node4 = _marko_constElement("div", {
   "a": "1",
   "style": "c:1px"
-}, "4", null, 0, 0);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/simple/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/simple/snapshots/vdomProduction-expected.js
index 13bb3703a..8c8f10f68 100644
--- a/packages/translator-default/test/fixtures/simple/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/simple/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "NRekT+g6",
   _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", null, "2", null, 1, 0).t("No colors!");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 1).t("No colors!");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/split-component-with-component/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/split-component-with-component/snapshots/vdomProduction-expected.js
index 72094877a..cd5b400fe 100644
--- a/packages/translator-default/test/fixtures/split-component-with-component/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/split-component-with-component/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "Wgq3cfjm",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_component from "./template.component.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
diff --git a/packages/translator-default/test/fixtures/split-component/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/split-component/snapshots/vdomProduction-expected.js
index b760b4d79..99750ad8f 100644
--- a/packages/translator-default/test/fixtures/split-component/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/split-component/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "tgVjO8nX",
   _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", null, "0", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 import _marko_split_component from "./template.component-browser.js";
diff --git a/packages/translator-default/test/fixtures/style-block-empty/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/style-block-empty/snapshots/vdomProduction-expected.js
index 577df77d6..1564cc9db 100644
--- a/packages/translator-default/test/fixtures/style-block-empty/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/style-block-empty/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "class": "test"
-}, "0", null, 0, 1);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/style-block-with-styles/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/style-block-with-styles/snapshots/vdomProduction-expected.js
index 942f26ac2..5c66b550a 100644
--- a/packages/translator-default/test/fixtures/style-block-with-styles/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/style-block-with-styles/snapshots/vdomProduction-expected.js
@@ -2,10 +2,10 @@ 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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "class": "test"
-}, "0", null, 0, 1);
+}, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/svg-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/svg-tag/snapshots/vdomProduction-expected.js
index 61a1e9455..be3100984 100644
--- a/packages/translator-default/test/fixtures/svg-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/svg-tag/snapshots/vdomProduction-expected.js
@@ -2,24 +2,24 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "LOy6P2CY",
   _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("circle", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("circle", {
   "cx": "50",
   "cy": "50",
   "r": "40",
   "stroke": "black",
   "stroke-width": "3",
   "fill": "red"
-}, "1", null, 0, 0);
-const _marko_node2 = _marko_createElement("a", null, "2", null, 0, 0);
-const _marko_node3 = _marko_createElement("style", null, "3", null, 1, 0).t("div { color: green }");
-const _marko_node4 = _marko_createElement("script", null, "4", null, 1, 0).t("alert(\"Hello\");");
-const _marko_node5 = _marko_createElement("title", null, "5", null, 1, 0).t("Test");
-const _marko_node6 = _marko_createElement("text", {
+}, 0);
+const _marko_node2 = _marko_constElement("a", null, 0);
+const _marko_node3 = _marko_constElement("style", null, 1).t("div { color: green }");
+const _marko_node4 = _marko_constElement("script", null, 1).t("alert(\"Hello\");");
+const _marko_node5 = _marko_constElement("title", null, 1).t("Test");
+const _marko_node6 = _marko_constElement("text", {
   "x": "10",
   "y": "25"
-}, "7", null, 1, 0).t("MDN Web Docs");
-const _marko_node7 = _marko_createElement("a", null, "8", null, 0, 0);
+}, 1).t("MDN Web Docs");
+const _marko_node7 = _marko_constElement("a", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/tag-with-default-attr/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/tag-with-default-attr/snapshots/vdomProduction-expected.js
index cdaf73807..0c91ed5a7 100644
--- a/packages/translator-default/test/fixtures/tag-with-default-attr/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/tag-with-default-attr/snapshots/vdomProduction-expected.js
@@ -2,11 +2,11 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "d4MwwGDt",
   _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", {
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", {
   "value": ""
-}, "0", null, 0, 0);
-const _marko_node2 = _marko_createElement("div", null, "1", null, 0, 0);
+}, 0);
+const _marko_node2 = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/textarea-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/textarea-tag/snapshots/vdomProduction-expected.js
index 8518aa048..43c7193ec 100644
--- a/packages/translator-default/test/fixtures/textarea-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/textarea-tag/snapshots/vdomProduction-expected.js
@@ -2,8 +2,8 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "or1T1BHP",
   _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("textarea", null, "0", null, 1, 0).t("\n  hello world\n");
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("textarea", null, 1).t("\n  hello world\n");
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
diff --git a/packages/translator-default/test/fixtures/white-space-test/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/white-space-test/snapshots/vdomProduction-expected.js
index d5602b2b9..985ad8239 100644
--- a/packages/translator-default/test/fixtures/white-space-test/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/white-space-test/snapshots/vdomProduction-expected.js
@@ -2,9 +2,9 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "TRrwGTtp",
   _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", null, "0", null, 4, 0).e("div", null, "1", null, 3, 0).t("Hello ").e("div", null, "2", null, 1, 0).t(" ").t(" World").e("div", null, "3", null, 1, 0).t(" Hello").e("pre", null, "4", null, 1, 0).t("\n    This should  \n      be preserved\n  ").e("div", null, "5", null, 1, 0).e("div", null, "6", null, 1, 0).t("Hello ");
-const _marko_node2 = _marko_createElement("div", null, "8", null, 0, 0);
+import _marko_constElement from "marko/dist/runtime/vdom/helpers/const-element.js";
+const _marko_node = _marko_constElement("div", null, 4).e("div", null, 3).t("Hello ").e("div", null, 1).t(" ").t(" World").e("div", null, 1).t(" Hello").e("pre", null, 1).t("\n    This should  \n      be preserved\n  ").e("div", null, 1).e("div", null, 1).t("Hello ");
+const _marko_node2 = _marko_constElement("div", null, 0);
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);

From a87b69212f8b204dbe3d5a1396d95ddafd1adb85 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Thu, 15 Feb 2024 15:59:15 -0700
Subject: [PATCH 02/20] fix: diffing edge cases

---
 .changeset/red-panthers-own.md                |  6 ++
 .../marko/src/runtime/vdom/morphdom/index.js  | 55 ++++++++++++++-----
 .../components/app-hello/index.marko          |  1 +
 .../index.marko                               | 19 +++++++
 .../test.js                                   | 17 ++++++
 .../components/app-hello/index.marko          |  1 +
 .../index.marko                               | 19 +++++++
 .../test.js                                   | 21 +++++++
 8 files changed, 125 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/red-panthers-own.md
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/components/app-hello/index.marko
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/index.marko
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/test.js
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/components/app-hello/index.marko
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/index.marko
 create mode 100644 packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js

diff --git a/.changeset/red-panthers-own.md b/.changeset/red-panthers-own.md
new file mode 100644
index 000000000..57bc70799
--- /dev/null
+++ b/.changeset/red-panthers-own.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Fix diffing issues when swapping keyed elements between native tags, custom tags and fragments.
diff --git a/packages/marko/src/runtime/vdom/morphdom/index.js b/packages/marko/src/runtime/vdom/morphdom/index.js
index 666597c19..4c7c89d3c 100644
--- a/packages/marko/src/runtime/vdom/morphdom/index.js
+++ b/packages/marko/src/runtime/vdom/morphdom/index.js
@@ -281,13 +281,26 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           if (!curToNodeChild.___preserve) {
             // We just skip over the fromNode if it is preserved
 
-            if (compareNodeNames(curToNodeChild, curVFromNodeChild)) {
-              morphEl(
-                curFromNodeChild,
-                curVFromNodeChild,
-                curToNodeChild,
-                parentComponent,
-              );
+            if (
+              curVFromNodeChild &&
+              curToNodeType === curVFromNodeChild.___nodeType &&
+              (curToNodeType !== ELEMENT_NODE ||
+                compareNodeNames(curToNodeChild, curVFromNodeChild))
+            ) {
+              if (curToNodeType === ELEMENT_NODE) {
+                morphEl(
+                  curFromNodeChild,
+                  curVFromNodeChild,
+                  curToNodeChild,
+                  parentComponent,
+                );
+              } else {
+                morphChildren(
+                  curFromNodeChild,
+                  curToNodeChild,
+                  parentComponent,
+                );
+              }
             } else {
               // Remove the old node
               detachNode(curFromNodeChild, fromNode, ownerComponent);
@@ -404,7 +417,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             if (!curToNodeChild.___preserve) {
               curVFromNodeChild = vElementByDOMNode.get(matchingFromEl);
 
-              if (compareNodeNames(curVFromNodeChild, curToNodeChild)) {
+              if (
+                curVFromNodeChild &&
+                curToNodeType === curVFromNodeChild.___nodeType &&
+                (curToNodeType !== ELEMENT_NODE ||
+                  compareNodeNames(curVFromNodeChild, curToNodeChild))
+              ) {
                 if (fromNextSibling === matchingFromEl) {
                   // Single element removal:
                   // A <-> A
@@ -455,12 +473,21 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                   }
                 }
 
-                morphEl(
-                  matchingFromEl,
-                  curVFromNodeChild,
-                  curToNodeChild,
-                  parentComponent,
-                );
+                if (curToNodeType === ELEMENT_NODE) {
+                  morphEl(
+                    matchingFromEl,
+                    curVFromNodeChild,
+                    curToNodeChild,
+                    parentComponent
+                  );
+                } else {
+                  morphChildren(
+                    matchingFromEl,
+                    curToNodeChild,
+                    parentComponent,
+                  );
+                }
+
               } else {
                 insertVirtualNodeBefore(
                   curToNodeChild,
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/components/app-hello/index.marko b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/components/app-hello/index.marko
new file mode 100644
index 000000000..0fd9beb67
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/components/app-hello/index.marko
@@ -0,0 +1 @@
+<div>Hello</div>
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/index.marko b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/index.marko
new file mode 100644
index 000000000..75253a6b6
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/index.marko
@@ -0,0 +1,19 @@
+import Hello from "./components/app-hello/index.marko"
+class {
+    onCreate() {
+        this.state = {
+            tagName: Hello
+        }
+    }
+    toggle() {
+        this.state.tagName = this.state.tagName === Hello ? "div" : Hello;
+    }
+}
+
+<div key="renderTarget">
+    <${state.tagName}/>
+    <${state.tagName} key="a"/>
+    <if(state.tagName === "div")>
+        <div key="d"/>
+    </>
+</div>
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/test.js b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/test.js
new file mode 100644
index 000000000..600c828b6
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-element/test.js
@@ -0,0 +1,17 @@
+var expect = require("chai").expect;
+
+module.exports = function (helpers) {
+  var component = helpers.mount(require.resolve("./index.marko"));
+
+  var renderTarget = component.getEl("renderTarget");
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div><div>Hello</div>");
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal("<div></div><div></div><div></div>");
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div><div>Hello</div>");
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal("<div></div><div></div><div></div>");
+};
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/components/app-hello/index.marko b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/components/app-hello/index.marko
new file mode 100644
index 000000000..0fd9beb67
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/components/app-hello/index.marko
@@ -0,0 +1 @@
+<div>Hello</div>
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/index.marko b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/index.marko
new file mode 100644
index 000000000..e6ca4ef92
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/index.marko
@@ -0,0 +1,19 @@
+class {
+    onCreate() {
+        this.state = {
+            toggle: false
+        }
+    }
+    toggle() {
+        this.state.toggle = !this.state.toggle;
+    }
+}
+
+<macro|{ renderBody }| name="content">
+    <app-hello key=state.toggle ? "b" : "c"/>
+    <${renderBody} key=state.toggle ? "c" : "b"/>
+</>
+
+<div key="renderTarget">
+    <content>A</>
+</div>
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js
new file mode 100644
index 000000000..1c31a25f7
--- /dev/null
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js
@@ -0,0 +1,21 @@
+var expect = require("chai").expect;
+
+module.exports = function (helpers) {
+  var component = helpers.mount(require.resolve("./index.marko"));
+
+  var renderTarget = component.getEl("renderTarget");
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal(
+    "<div>Hello</div>A",
+  );
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
+  component.toggle();
+  component.update();
+  expect(renderTarget.innerHTML).to.equal(
+    "<div>Hello</div>A",
+  );
+};

From 9648f0fb852c16ba0033d4b97f5ed00b2db85888 Mon Sep 17 00:00:00 2001
From: DylanPiercey <DylanPiercey@users.noreply.github.com>
Date: Thu, 15 Feb 2024 23:03:07 +0000
Subject: [PATCH 03/20] [ci] format

---
 packages/marko/src/runtime/vdom/morphdom/index.js         | 3 +--
 .../diffpatch-existing-key-component-to-fragment/test.js  | 8 ++------
 .../translator-default/src/tag/native-tag[vdom]/index.js  | 4 +---
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/marko/src/runtime/vdom/morphdom/index.js b/packages/marko/src/runtime/vdom/morphdom/index.js
index 4c7c89d3c..7c580788c 100644
--- a/packages/marko/src/runtime/vdom/morphdom/index.js
+++ b/packages/marko/src/runtime/vdom/morphdom/index.js
@@ -478,7 +478,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                     matchingFromEl,
                     curVFromNodeChild,
                     curToNodeChild,
-                    parentComponent
+                    parentComponent,
                   );
                 } else {
                   morphChildren(
@@ -487,7 +487,6 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                     parentComponent,
                   );
                 }
-
               } else {
                 insertVirtualNodeBefore(
                   curToNodeChild,
diff --git a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js
index 1c31a25f7..3f59b4385 100644
--- a/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js
+++ b/packages/marko/test/components-browser/fixtures/diffpatch-existing-key-component-to-fragment/test.js
@@ -7,15 +7,11 @@ module.exports = function (helpers) {
   expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
   component.toggle();
   component.update();
-  expect(renderTarget.innerHTML).to.equal(
-    "<div>Hello</div>A",
-  );
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
   component.toggle();
   component.update();
   expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
   component.toggle();
   component.update();
-  expect(renderTarget.innerHTML).to.equal(
-    "<div>Hello</div>A",
-  );
+  expect(renderTarget.innerHTML).to.equal("<div>Hello</div>A");
 };
diff --git a/packages/translator-default/src/tag/native-tag[vdom]/index.js b/packages/translator-default/src/tag/native-tag[vdom]/index.js
index 21f6405af..ca3f712f3 100644
--- a/packages/translator-default/src/tag/native-tag[vdom]/index.js
+++ b/packages/translator-default/src/tag/native-tag[vdom]/index.js
@@ -109,9 +109,7 @@ function tagArguments(path) {
     attrsObj,
     key,
     file._componentInstanceIdentifier,
-       body.length
-        ? t.nullLiteral()
-        : t.numericLiteral(0),
+    body.length ? t.nullLiteral() : t.numericLiteral(0),
   ];
 
   if (node.preserveAttrs) {

From 0c6b9bd569adf188771d741b9c33924d3f50d632 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 23:14:46 +0000
Subject: [PATCH 04/20] [ci] release

---
 .changeset/gentle-dogs-hammer.md         |  6 ------
 .changeset/red-panthers-own.md           |  6 ------
 package-lock.json                        |  8 ++++----
 packages/marko/CHANGELOG.md              | 11 +++++++++++
 packages/marko/package.json              |  4 ++--
 packages/translator-default/CHANGELOG.md |  8 ++++++++
 packages/translator-default/package.json |  4 ++--
 7 files changed, 27 insertions(+), 20 deletions(-)
 delete mode 100644 .changeset/gentle-dogs-hammer.md
 delete mode 100644 .changeset/red-panthers-own.md

diff --git a/.changeset/gentle-dogs-hammer.md b/.changeset/gentle-dogs-hammer.md
deleted file mode 100644
index 7a9ad9c74..000000000
--- a/.changeset/gentle-dogs-hammer.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Fix and optimize the output for vdom hoisting.
diff --git a/.changeset/red-panthers-own.md b/.changeset/red-panthers-own.md
deleted file mode 100644
index 57bc70799..000000000
--- a/.changeset/red-panthers-own.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Fix diffing issues when swapping keyed elements between native tags, custom tags and fragments.
diff --git a/package-lock.json b/package-lock.json
index cf17cc5d5..05ad35a88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,11 +11940,11 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.7",
+      "version": "5.32.8",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.6",
-        "@marko/translator-default": "^5.31.13",
+        "@marko/translator-default": "^5.31.14",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
@@ -11968,7 +11968,7 @@
     },
     "packages/translator-default": {
       "name": "@marko/translator-default",
-      "version": "5.31.13",
+      "version": "5.31.14",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.8",
@@ -11978,7 +11978,7 @@
       },
       "devDependencies": {
         "@marko/compiler": "^5.34.6",
-        "marko": "^5.32.7"
+        "marko": "^5.32.8"
       },
       "peerDependencies": {
         "@marko/compiler": "^5.16.1",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index fb0c4fa9e..868105fab 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Change Log
 
+## 5.32.8
+
+### Patch Changes
+
+- [#2108](https://github.com/marko-js/marko/pull/2108) [`9a18ced`](https://github.com/marko-js/marko/commit/9a18ced27b04b6fbd391d84c61d97269bcf7f851) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix and optimize the output for vdom hoisting.
+
+- [#2108](https://github.com/marko-js/marko/pull/2108) [`a87b692`](https://github.com/marko-js/marko/commit/a87b69212f8b204dbe3d5a1396d95ddafd1adb85) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix diffing issues when swapping keyed elements between native tags, custom tags and fragments.
+
+- Updated dependencies [[`9a18ced`](https://github.com/marko-js/marko/commit/9a18ced27b04b6fbd391d84c61d97269bcf7f851), [`a87b692`](https://github.com/marko-js/marko/commit/a87b69212f8b204dbe3d5a1396d95ddafd1adb85)]:
+  - @marko/translator-default@5.31.14
+
 ## 5.32.7
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index e43bfc6d5..86e169061 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.7",
+    "version": "5.32.8",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",
@@ -65,7 +65,7 @@
     },
     "dependencies": {
         "@marko/compiler": "^5.34.6",
-        "@marko/translator-default": "^5.31.13",
+        "@marko/translator-default": "^5.31.14",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
diff --git a/packages/translator-default/CHANGELOG.md b/packages/translator-default/CHANGELOG.md
index e32f373a5..fc3f863bd 100644
--- a/packages/translator-default/CHANGELOG.md
+++ b/packages/translator-default/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+## 5.31.14
+
+### Patch Changes
+
+- [#2108](https://github.com/marko-js/marko/pull/2108) [`9a18ced`](https://github.com/marko-js/marko/commit/9a18ced27b04b6fbd391d84c61d97269bcf7f851) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix and optimize the output for vdom hoisting.
+
+- [#2108](https://github.com/marko-js/marko/pull/2108) [`a87b692`](https://github.com/marko-js/marko/commit/a87b69212f8b204dbe3d5a1396d95ddafd1adb85) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix diffing issues when swapping keyed elements between native tags, custom tags and fragments.
+
 ## 5.31.13
 
 ### Patch Changes
diff --git a/packages/translator-default/package.json b/packages/translator-default/package.json
index ee3dfd07d..f8f81d7ab 100644
--- a/packages/translator-default/package.json
+++ b/packages/translator-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marko/translator-default",
-  "version": "5.31.13",
+  "version": "5.31.14",
   "description": "Translates Marko templates to the default Marko runtime.",
   "keywords": [
     "babel",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@marko/compiler": "^5.34.6",
-    "marko": "^5.32.7"
+    "marko": "^5.32.8"
   },
   "peerDependencies": {
     "@marko/compiler": "^5.16.1",

From 022879da1a7589f6207d7bbf47b97d1a2d596781 Mon Sep 17 00:00:00 2001
From: Luke LaValva <lukelavalva@gmail.com>
Date: Fri, 16 Feb 2024 13:26:49 -0800
Subject: [PATCH 05/20] feat: add componentIdPrefix to await id (#2111)

* feat: add componentIdPrefix to await id

* chore: add changeset

* fix: update to also use runtimeId

* chore: change to patch
---
 .changeset/modern-tigers-cheat.md             |  5 +++
 .../src/core-tags/core/await/renderer.js      | 10 ++++--
 .../core/await/reorderer-renderer.js          | 14 ++++++---
 .../expected.html                             |  2 +-
 .../expected.html                             |  2 +-
 .../await-client-reorder-mixed/expected.html  |  2 +-
 .../await-client-reorder/expected.html        |  2 +-
 .../expected.html                             |  2 +-
 .../expected.html                             |  2 +-
 .../await-client-reorder-mixed/expected.html  |  2 +-
 .../expected-events-vdom.json                 | 24 ++++++++++++++
 .../expected-events.json                      | 30 ++++++++++++++++++
 .../expected.html                             |  1 +
 .../template.marko                            |  8 +++++
 .../test.js                                   | 31 +++++++++++++++++++
 .../await-client-reorder/expected.html        |  2 +-
 16 files changed, 124 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/modern-tigers-cheat.md
 create mode 100644 packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events-vdom.json
 create mode 100644 packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events.json
 create mode 100644 packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected.html
 create mode 100644 packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/template.marko
 create mode 100644 packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js

diff --git a/.changeset/modern-tigers-cheat.md b/.changeset/modern-tigers-cheat.md
new file mode 100644
index 000000000..62655f5da
--- /dev/null
+++ b/.changeset/modern-tigers-cheat.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+add componentIdPrefix to id of await client-reorder
diff --git a/packages/marko/src/core-tags/core/await/renderer.js b/packages/marko/src/core-tags/core/await/renderer.js
index 89a2e8a2a..673e47d4e 100644
--- a/packages/marko/src/core-tags/core/await/renderer.js
+++ b/packages/marko/src/core-tags/core/await/renderer.js
@@ -115,8 +115,14 @@ module.exports = function awaitTag(input, out) {
         nextId: 0,
       });
 
-    var id = (awaitInfo.id = input.name || clientReorderContext.nextId++);
-    var placeholderIdAttrValue = "afph" + id;
+    /** SHOULD MATCH THE reorder-renderer.js IMPLEMENTATION */
+    var reorderFunctionId =
+      out.global.runtimeId !== "M" ? "af" + out.global.runtimeId : "af";
+
+    var id = (awaitInfo.id =
+      input.name ||
+      (out.global.componentIdPrefix || 0) + clientReorderContext.nextId++);
+    var placeholderIdAttrValue = reorderFunctionId + "ph" + id;
 
     if (placeholderRenderer) {
       out.write('<span id="' + placeholderIdAttrValue + '">');
diff --git a/packages/marko/src/core-tags/core/await/reorderer-renderer.js b/packages/marko/src/core-tags/core/await/reorderer-renderer.js
index 4b8ecedce..671f67f61 100644
--- a/packages/marko/src/core-tags/core/await/reorderer-renderer.js
+++ b/packages/marko/src/core-tags/core/await/reorderer-renderer.js
@@ -24,6 +24,10 @@ module.exports = function (input, out) {
     out.flush();
   }
 
+  /** SHOULD MATCH THE renderer.js IMPLEMENTATION */
+  var reorderFunctionId =
+    out.global.runtimeId !== "M" ? "af" + out.global.runtimeId : "af";
+
   var asyncOut = out.beginAsync({
     last: true,
     timeout: -1,
@@ -52,7 +56,7 @@ module.exports = function (input, out) {
           if (!global._afRuntime) {
             // Minified version of ./client-reorder-runtime.js
             asyncOut.script(
-              `function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}}`,
+              `function $${reorderFunctionId}(d,a,e,l,g,h,k,b,f,c){c=$${reorderFunctionId};if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("${reorderFunctionId}"+d);g=e.getElementById("${reorderFunctionId}ph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}}`,
             );
             global._afRuntime = true;
           }
@@ -62,11 +66,11 @@ module.exports = function (input, out) {
               '<style nonce="' +
                 escapeDoubleQuotes(global.cspNonce) +
                 '">' +
-                "#af" +
+                `#${reorderFunctionId}` +
                 awaitInfo.id +
                 "{display:none;}" +
                 "</style>" +
-                '<div id="af' +
+                `<div id="${reorderFunctionId}` +
                 awaitInfo.id +
                 '">' +
                 result.toString() +
@@ -74,7 +78,7 @@ module.exports = function (input, out) {
             );
           } else {
             asyncOut.write(
-              '<div id="af' +
+              `<div id="${reorderFunctionId}` +
                 awaitInfo.id +
                 '" style="display:none">' +
                 result.toString() +
@@ -83,7 +87,7 @@ module.exports = function (input, out) {
           }
 
           asyncOut.script(
-            "$af(" +
+            `$${reorderFunctionId}(` +
               (typeof awaitInfo.id === "number"
                 ? awaitInfo.id
                 : '"' + awaitInfo.id + '"') +
diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/expected.html b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/expected.html
index c24e9d485..dd8fe2793 100644
--- a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/expected.html
+++ b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/expected.html
@@ -1 +1 @@
-<noscript id="afph0"></noscript><!--FLUSH--><style nonce="xyz">#af0{display:none;}</style><div id="af0"><div class="foo"><h1>Foo</h1> Hello World</div></div><script nonce="xyz">function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
+<noscript id="afph0"></noscript><!--FLUSH--><style nonce="xyz">#af0{display:none;}</style><div id="af0"><div class=foo><h1>Foo</h1> Hello World</div></div><script nonce="xyz">function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/expected.html b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/expected.html
index 20a1c20b1..4c4be995f 100644
--- a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/expected.html
+++ b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/expected.html
@@ -1 +1 @@
-<body><noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class="foo"><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
+<body><noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class=foo><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/expected.html b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/expected.html
index 71b7a8a70..54ecac224 100644
--- a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/expected.html
+++ b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/expected.html
@@ -1 +1 @@
-<body><noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class="outer"><h1>Outer</h1><div class="inner"><h2>Inner 1</h2></div></div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
+<body><noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class=outer><h1>Outer</h1><div class=inner><h2>Inner 1</h2></div></div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder/expected.html b/packages/marko/test/render/fixtures-async-callback/await-client-reorder/expected.html
index ec952c653..0526d7890 100644
--- a/packages/marko/test/render/fixtures-async-callback/await-client-reorder/expected.html
+++ b/packages/marko/test/render/fixtures-async-callback/await-client-reorder/expected.html
@@ -1 +1 @@
-<noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class="foo"><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file
+<noscript id="afph0"></noscript><!--FLUSH--><div id="af0" style="display:none"><div class=foo><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/expected.html b/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/expected.html
index 50c49dc66..4713146e2 100644
--- a/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/expected.html
+++ b/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/expected.html
@@ -1 +1 @@
-<noscript id="afph0"></noscript><style nonce="xyz">#af0{display:none;}</style><div id="af0"><div class="foo"><h1>Foo</h1> Hello World</div></div><script nonce="xyz">function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
+<noscript id="afph0"></noscript><style nonce="xyz">#af0{display:none;}</style><div id="af0"><div class=foo><h1>Foo</h1> Hello World</div></div><script nonce="xyz">function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/expected.html b/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/expected.html
index cb7a25c92..1f88c7e48 100644
--- a/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/expected.html
+++ b/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/expected.html
@@ -1 +1 @@
-<body><noscript id="afph0"></noscript><div id="af0" style="display:none"><div class="foo"><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
+<body><noscript id="afph0"></noscript><div id="af0" style="display:none"><div class=foo><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-mixed/expected.html b/packages/marko/test/render/fixtures/await-client-reorder-mixed/expected.html
index 3a2c00ce8..1b774fba2 100644
--- a/packages/marko/test/render/fixtures/await-client-reorder-mixed/expected.html
+++ b/packages/marko/test/render/fixtures/await-client-reorder-mixed/expected.html
@@ -1 +1 @@
-<body><noscript id="afph0"></noscript><div id="af0" style="display:none"><div class="outer"><h1>Outer</h1><div class="inner"><h2>Inner 1</h2></div></div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
+<body><noscript id="afph0"></noscript><div id="af0" style="display:none"><div class=outer><h1>Outer</h1><div class=inner><h2>Inner 1</h2></div></div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script></body>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events-vdom.json b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events-vdom.json
new file mode 100644
index 000000000..028b3e174
--- /dev/null
+++ b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events-vdom.json
@@ -0,0 +1,24 @@
+[
+    {
+        "event": "await:begin",
+        "arg": {
+            "name": "data.outer",
+            "clientReorder": false
+        }
+    },
+    {
+        "event": "await:beforeRender",
+        "arg": {
+            "name": "data.outer",
+            "clientReorder": false
+        }
+    },
+    {
+        "event": "await:finish",
+        "arg": {
+            "name": "data.outer",
+            "clientReorder": false,
+            "finished": true
+        }
+    }
+]
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events.json b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events.json
new file mode 100644
index 000000000..f5369d5e3
--- /dev/null
+++ b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected-events.json
@@ -0,0 +1,30 @@
+[
+    {
+        "event": "await:begin",
+        "arg": {
+            "name": "input.outer",
+            "clientReorder": true,
+            "dataProvider": {},
+            "id": "testComponentIdPrefix0"
+        }
+    },
+    {
+        "event": "await:beforeRender",
+        "arg": {
+            "name": "input.outer",
+            "clientReorder": true,
+            "dataProvider": {},
+            "id": "testComponentIdPrefix0"
+        }
+    },
+    {
+        "event": "await:finish",
+        "arg": {
+            "name": "input.outer",
+            "clientReorder": true,
+            "dataProvider": {},
+            "id": "testComponentIdPrefix0",
+            "finished": true
+        }
+    }
+]
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected.html b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected.html
new file mode 100644
index 000000000..c876ea2e0
--- /dev/null
+++ b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/expected.html
@@ -0,0 +1 @@
+<noscript id="aftestRuntimeIdphtestComponentIdPrefix0"></noscript><div id="aftestRuntimeIdtestComponentIdPrefix0" style="display:none"><div class=foo><h1>Foo</h1> Hello World</div></div><script>function $aftestRuntimeId(d,a,e,l,g,h,k,b,f,c){c=$aftestRuntimeId;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("aftestRuntimeId"+d);g=e.getElementById("aftestRuntimeIdph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$aftestRuntimeId("testComponentIdPrefix0")</script>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/template.marko b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/template.marko
new file mode 100644
index 000000000..269a2dab6
--- /dev/null
+++ b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/template.marko
@@ -0,0 +1,8 @@
+<await(data.outer) client-reorder>
+    <@then|outer|>
+        <div class="foo">
+            <h1>Foo</h1> Hello World
+        </div>
+    </@then>
+</await>
+<await-reorderer/>
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js
new file mode 100644
index 000000000..0ab3b7f61
--- /dev/null
+++ b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js
@@ -0,0 +1,31 @@
+var expect = require("chai").expect;
+var extend = require("raptor-util/extend");
+
+exports.templateData = {
+  outer: Promise.resolve(),
+  inner1: Promise.resolve(),
+  inner2: Promise.resolve(),
+  $global: {
+    runtimeId: "testRuntimeId",
+    componentIdPrefix: "testComponentIdPrefix",
+  },
+};
+
+exports.checkEvents = function (events, snapshot, out) {
+  events = events.map(function (eventInfo) {
+    var arg = extend({}, eventInfo.arg);
+    expect(arg.out != null).to.equal(true);
+
+    delete arg.out; // Not serializable
+    delete arg.asyncValue; // Not serializable
+
+    return {
+      event: eventInfo.event,
+      arg: arg,
+    };
+  });
+
+  snapshot(events, out.isVDOM ? "-events-vdom.json" : "-events.json");
+};
+
+exports.skip_vdom = "client-reorder/placeholders are not supported in vdom";
diff --git a/packages/marko/test/render/fixtures/await-client-reorder/expected.html b/packages/marko/test/render/fixtures/await-client-reorder/expected.html
index 4b1c46884..8ae017f18 100644
--- a/packages/marko/test/render/fixtures/await-client-reorder/expected.html
+++ b/packages/marko/test/render/fixtures/await-client-reorder/expected.html
@@ -1 +1 @@
-<noscript id="afph0"></noscript><div id="af0" style="display:none"><div class="foo"><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file
+<noscript id="afph0"></noscript><div id="af0" style="display:none"><div class=foo><h1>Foo</h1> Hello World</div></div><script>function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}};$af(0)</script>
\ No newline at end of file

From 5d74f754811f30171df592ee76b3c4a87c381151 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 16 Feb 2024 13:32:01 -0800
Subject: [PATCH 06/20] [ci] release (#2112)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/modern-tigers-cheat.md | 5 -----
 package-lock.json                 | 2 +-
 packages/marko/CHANGELOG.md       | 6 ++++++
 packages/marko/package.json       | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/modern-tigers-cheat.md

diff --git a/.changeset/modern-tigers-cheat.md b/.changeset/modern-tigers-cheat.md
deleted file mode 100644
index 62655f5da..000000000
--- a/.changeset/modern-tigers-cheat.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"marko": patch
----
-
-add componentIdPrefix to id of await client-reorder
diff --git a/package-lock.json b/package-lock.json
index 05ad35a88..56347ff3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,7 +11940,7 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.8",
+      "version": "5.32.9",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.6",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 868105fab..18441d908 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.32.9
+
+### Patch Changes
+
+- [#2111](https://github.com/marko-js/marko/pull/2111) [`022879d`](https://github.com/marko-js/marko/commit/022879da1a7589f6207d7bbf47b97d1a2d596781) Thanks [@LuLaValva](https://github.com/LuLaValva)! - add componentIdPrefix to id of await client-reorder
+
 ## 5.32.8
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 86e169061..d8d232e46 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.8",
+    "version": "5.32.9",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",

From a55fb06ec638eb830eb72c71cb766fc05b6ea8cb Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Thu, 22 Feb 2024 13:33:32 -0700
Subject: [PATCH 07/20] feat: improve attr tag handling with scriptlets

---
 .changeset/friendly-doors-sit.md              |   7 +
 .../marko/src/runtime/helpers/attr-tag.js     |  40 +++
 .../src/runtime/helpers/load-nested-tag.js    |  17 -
 .../src/runtime/helpers/self-iterator.js      |   3 -
 packages/translator-default/src/index.js      |   3 +-
 .../src/tag/attribute-tag.js                  | 290 +++++++++---------
 packages/translator-default/src/tag/index.js  |   6 +-
 packages/translator-default/src/tag/util.js   |  99 +++---
 8 files changed, 259 insertions(+), 206 deletions(-)
 create mode 100644 .changeset/friendly-doors-sit.md
 create mode 100644 packages/marko/src/runtime/helpers/attr-tag.js
 delete mode 100644 packages/marko/src/runtime/helpers/load-nested-tag.js
 delete mode 100644 packages/marko/src/runtime/helpers/self-iterator.js

diff --git a/.changeset/friendly-doors-sit.md b/.changeset/friendly-doors-sit.md
new file mode 100644
index 000000000..591b80816
--- /dev/null
+++ b/.changeset/friendly-doors-sit.md
@@ -0,0 +1,7 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+"@marko/compiler": patch
+---
+
+Improve nested attribute tag handling with scriptlets.
diff --git a/packages/marko/src/runtime/helpers/attr-tag.js b/packages/marko/src/runtime/helpers/attr-tag.js
new file mode 100644
index 000000000..089879b78
--- /dev/null
+++ b/packages/marko/src/runtime/helpers/attr-tag.js
@@ -0,0 +1,40 @@
+"use strict";
+
+var ownerInput;
+
+exports.r = function repeatedAttrTag(targetProperty, attrTagInput) {
+  var prev = ownerInput[targetProperty];
+  if (prev) {
+    prev.push(attrTagInput);
+  } else {
+    ownerInput[targetProperty] = [attrTagInput];
+  }
+};
+exports.a = function repeatableAttrTag(targetProperty, attrTagInput) {
+  var prev = ownerInput[targetProperty];
+  if (prev) {
+    if (Array.isArray(prev)) {
+      prev.push(attrTagInput);
+    } else {
+      ownerInput[targetProperty] = [prev, attrTagInput];
+    }
+  } else {
+    attrTagInput[Symbol.iterator] = selfIterator;
+    ownerInput[targetProperty] = attrTagInput;
+  }
+};
+
+exports.i = function attrTagInput(render, input) {
+  var prevOwnerInput = ownerInput;
+  ownerInput = input || {};
+  try {
+    ownerInput.renderBody = render();
+    return ownerInput;
+  } finally {
+    ownerInput = prevOwnerInput;
+  }
+};
+
+function* selfIterator() {
+  yield this;
+}
diff --git a/packages/marko/src/runtime/helpers/load-nested-tag.js b/packages/marko/src/runtime/helpers/load-nested-tag.js
deleted file mode 100644
index bf0cabe4d..000000000
--- a/packages/marko/src/runtime/helpers/load-nested-tag.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-
-module.exports = function loadNestedTagHelper(targetProperty, isRepeated) {
-  return function (input, parent) {
-    // If we are nested tag then we do not have a renderer
-    if (isRepeated) {
-      var existingArray = parent[targetProperty];
-      if (existingArray) {
-        existingArray.push(input);
-      } else {
-        parent[targetProperty] = [input];
-      }
-    } else {
-      parent[targetProperty] = input;
-    }
-  };
-};
diff --git a/packages/marko/src/runtime/helpers/self-iterator.js b/packages/marko/src/runtime/helpers/self-iterator.js
deleted file mode 100644
index 217ff1b79..000000000
--- a/packages/marko/src/runtime/helpers/self-iterator.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function* selfIterator() {
-  yield this;
-};
diff --git a/packages/translator-default/src/index.js b/packages/translator-default/src/index.js
index 19d5ad321..aa79be769 100644
--- a/packages/translator-default/src/index.js
+++ b/packages/translator-default/src/index.js
@@ -472,10 +472,9 @@ export function getRuntimeEntryFiles(output, optimize) {
     `${base}runtime/helpers/assign.js`,
     `${base}runtime/helpers/class-value.js`,
     `${base}runtime/helpers/dynamic-tag.js`,
-    `${base}runtime/helpers/load-nested-tag.js`,
+    `${base}runtime/helpers/attr-tag.js`,
     `${base}runtime/helpers/merge.js`,
     `${base}runtime/helpers/repeatable.js`,
-    `${base}runtime/helpers/self-iterator.js`,
     `${base}runtime/helpers/render-tag.js`,
     `${base}runtime/helpers/style-value.js`,
     `${base}runtime/helpers/to-string.js`,
diff --git a/packages/translator-default/src/tag/attribute-tag.js b/packages/translator-default/src/tag/attribute-tag.js
index 3ff3280d9..74a488863 100644
--- a/packages/translator-default/src/tag/attribute-tag.js
+++ b/packages/translator-default/src/tag/attribute-tag.js
@@ -1,188 +1,186 @@
 import {
   assertNoArgs,
   findParentTag,
+  getFullyResolvedTagName,
   getTagDef,
-  importDefault,
+  importNamed,
   isAttributeTag,
   isTransparentTag,
 } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
-import withPreviousLocation from "../util/with-previous-location";
 import { getAttrs } from "./util";
 
-const EMPTY_OBJECT = {};
-const parentIdentifierLookup = new WeakMap();
+const contentTypeCache = new WeakMap();
+const ContentType = {
+  attribute: 0,
+  render: 1,
+  mixed: 2,
+};
 
-// TODO: optimize inline repeated @tags.
+export function analyzeAttributeTags(rootTag) {
+  const visit = [rootTag];
+  const parentTags = [rootTag];
+  let i = 0;
+  let attributeTags;
 
-export default function (tag) {
-  const { node } = tag;
-  const namePath = tag.get("name");
-  const tagName = namePath.node.value;
-  const parentPath = findParentTag(tag);
+  while (i < visit.length) {
+    const tag = visit[i++];
+    for (const child of tag.get("body").get("body")) {
+      if (isAttributeTag(child)) {
+        assertNoArgs(child);
+        const tagDef = getTagDef(child) || {};
+        const name = getFullyResolvedTagName(child);
+        let {
+          targetProperty = child.node.name.value.slice(1),
+          isRepeated = false,
+        } = tagDef;
 
-  assertNoArgs(tag);
+        const preserveName =
+          tagDef.preserveName === true || tagDef.removeDashes === false;
 
-  if (!parentPath) {
-    throw namePath.buildCodeFrameError(
-      "@tags must be nested within another element.",
-    );
-  }
+        if (!preserveName) {
+          targetProperty = removeDashes(targetProperty);
+        }
 
-  const parentAttributes = parentPath.get("attributes");
-  const tagDef = getTagDef(tag);
-  const { isRepeated, targetProperty = tagName.slice(1) } =
-    tagDef || EMPTY_OBJECT;
-  const isDynamic = isRepeated || parentPath !== tag.parentPath.parentPath;
-  parentPath.node.exampleAttributeTag = node;
+        const attrTagMeta = ((attributeTags ||= {})[name] ||= {
+          targetProperty,
+          isRepeated,
+        });
 
-  if (isDynamic) {
-    if (!parentPath.node.hasDynamicAttrTags) {
-      const body = parentPath.get("body").get("body");
-      parentPath.node.hasDynamicAttrTags = true;
+        (child.node.extra ||= {}).attributeTag = attrTagMeta;
 
-      for (let i = body.length; i--; ) {
-        const child = body[i];
-        if (isAttributeTagChild(child)) {
-          child.insertAfter(t.stringLiteral("END_ATTRIBUTE_TAGS"));
-          break;
+        const parentTag = findParentTag(child);
+        const parentTagExtra = (parentTag.node.extra ||= {});
+        parentTagExtra.hasAttributeTags = true;
+        parentTags.push(child);
+        visit.push(child);
+      } else if (isTransparentTag(child)) {
+        switch (getContentType(child)) {
+          case ContentType.mixed:
+            throw child.buildCodeFrameError(
+              "Cannot mix @tags with other content when under a control flow.",
+            );
+          case ContentType.attribute:
+            visit.push(child);
+            break;
+          case ContentType.render:
+            break;
         }
       }
     }
-  } else {
-    const previousAttr = parentAttributes.find(
-      (attr) => attr.get("name").node === targetProperty,
-    );
+  }
 
-    if (previousAttr) {
-      const previousValue = previousAttr.get("value").node;
-      if (t.isObjectExpression(previousValue)) {
-        previousAttr.set(
-          "value",
-          t.arrayExpression([previousValue, getAttrTagObject(tag)]),
-        );
-      } else if (t.isArrayExpression(previousAttr)) {
-        previousAttr.elements.push(getAttrTagObject(tag));
-      } else {
-        previousAttr.set(
-          "value",
-          t.callExpression(
-            importDefault(
-              tag.hub.file,
-              "marko/src/runtime/helpers/repeatable.js",
-              "marko_repeatable",
-            ),
-            [previousValue, getAttrTagObject(tag)],
-          ),
-        );
+  if (attributeTags) {
+    (rootTag.node.extra ??= {}).attributeTags = attributeTags;
+
+    for (const parentTag of parentTags) {
+      if (getContentType(parentTag) === ContentType.mixed) {
+        // move all non scriptlet / attribute tag children to the end of the renderbody
+        const renderBody = [
+          t.expressionStatement(t.stringLiteral("END_ATTRIBUTE_TAGS")),
+        ];
+        const body = parentTag.get("body");
+        for (const child of body.get("body")) {
+          if (
+            child.isMarkoScriptlet() ||
+            isAttributeTag(child) ||
+            (isTransparentTag(child) &&
+              getContentType(child) === ContentType.attribute)
+          ) {
+            continue;
+          }
+
+          renderBody.push(child.node);
+          child.remove();
+        }
+
+        body.node.body = body.node.body.concat(renderBody);
       }
-    } else {
-      parentPath.pushContainer(
-        "attributes",
-        t.markoAttribute(targetProperty, getAttrTagObject(tag)),
-      );
     }
+  }
+}
 
-    tag.remove();
-    return;
+export default function translateAttributeTag(tag) {
+  const { node } = tag;
+  const meta = node.extra?.attributeTag;
+  if (!meta) {
+    throw tag
+      .get("name")
+      .buildCodeFrameError("@tags must be nested within another element.");
   }
 
-  let identifiers = parentIdentifierLookup.get(parentPath);
+  assertNoArgs(tag);
 
-  if (!identifiers) {
-    parentIdentifierLookup.set(parentPath, (identifiers = {}));
-  }
-
-  let identifier = identifiers[targetProperty];
-
-  if (!identifier) {
-    identifier = identifiers[targetProperty] =
-      tag.scope.generateUidIdentifier(targetProperty);
-    parentPath
-      .get("body")
-      .unshiftContainer(
-        "body",
-        t.variableDeclaration(isRepeated ? "const" : "let", [
-          t.variableDeclarator(
-            identifier,
-            isRepeated ? t.arrayExpression([]) : t.nullLiteral(),
-          ),
-        ]),
-      );
-    parentPath.pushContainer(
-      "attributes",
-      t.markoAttribute(targetProperty, identifier),
-    );
-  }
-
-  if (isRepeated) {
-    tag.replaceWith(
-      withPreviousLocation(
-        t.expressionStatement(
-          t.callExpression(
-            t.memberExpression(identifier, t.identifier("push")),
-            [getAttrTagObject(tag)],
-          ),
+  tag.replaceWith(
+    t.expressionStatement(
+      t.callExpression(
+        importNamed(
+          tag.hub.file,
+          "marko/src/runtime/helpers/attr-tag.js",
+          meta.isRepeated ? "r" : "a",
+          meta.isRepeated
+            ? "marko_repeated_attr_tag"
+            : "marko_repeatable_attr_tag",
         ),
-        node,
+        [t.stringLiteral(meta.targetProperty), getAttrTagObject(tag)],
       ),
-    );
-  } else {
-    tag.replaceWith(
-      withPreviousLocation(
-        t.expressionStatement(
-          t.assignmentExpression(
-            "=",
-            identifier,
-            t.callExpression(
-              importDefault(
-                tag.hub.file,
-                "marko/src/runtime/helpers/repeatable.js",
-                "marko_repeatable",
-              ),
-              [identifier, getAttrTagObject(tag)],
-            ),
-          ),
-        ),
-        node,
-      ),
-    );
-  }
+    ),
+  );
 }
 
 function getAttrTagObject(tag) {
   const attrs = getAttrs(tag);
-  const iteratorProp = t.objectProperty(
-    t.memberExpression(t.identifier("Symbol"), t.identifier("iterator")),
-    importDefault(
-      tag.hub.file,
-      "marko/src/runtime/helpers/self-iterator.js",
-      "marko_self_iterator",
-    ),
-    true,
-  );
 
   if (t.isNullLiteral(attrs)) {
-    return t.objectExpression([iteratorProp]);
+    return t.objectExpression([]);
   }
 
-  if (t.isObjectExpression(attrs)) {
-    attrs.properties.push(iteratorProp);
-    return attrs;
-  }
-
-  return t.objectExpression([iteratorProp, t.spreadElement(attrs)]);
+  return attrs;
 }
 
-function isAttributeTagChild(tag) {
-  if (isAttributeTag(tag)) {
-    return true;
+function getContentType(tag) {
+  const { node } = tag;
+  const cached = contentTypeCache.get(node);
+  if (cached !== undefined) return cached;
+
+  const body = tag.get("body").get("body");
+  let hasAttributeTag = false;
+  let hasRenderBody = false;
+
+  for (const child of body) {
+    if (isAttributeTag(child)) {
+      hasAttributeTag = true;
+    } else if (isTransparentTag(child)) {
+      switch (getContentType(child)) {
+        case ContentType.mixed:
+          contentTypeCache.set(node, ContentType.mixed);
+          return ContentType.mixed;
+        case ContentType.attribute:
+          hasAttributeTag = true;
+          break;
+        case ContentType.render:
+          hasRenderBody = true;
+          break;
+      }
+    } else if (!child.isMarkoScriptlet()) {
+      hasRenderBody = true;
+    }
+
+    if (hasAttributeTag && hasRenderBody) {
+      contentTypeCache.set(node, ContentType.mixed);
+      return ContentType.mixed;
+    }
   }
 
-  if (isTransparentTag(tag)) {
-    const body = tag.get("body").get("body");
-    return isAttributeTagChild(body[body.length - 1]);
-  }
-
-  return false;
+  const result = hasAttributeTag ? ContentType.attribute : ContentType.render;
+  contentTypeCache.set(node, result);
+  return result;
+}
+
+function removeDashes(str) {
+  return str.replace(/-([a-z])/g, matchToUpperCase);
+}
+
+function matchToUpperCase(_match, lower) {
+  return lower.toUpperCase();
 }
diff --git a/packages/translator-default/src/tag/index.js b/packages/translator-default/src/tag/index.js
index 83b6afa7a..416b0e55f 100644
--- a/packages/translator-default/src/tag/index.js
+++ b/packages/translator-default/src/tag/index.js
@@ -13,7 +13,7 @@ import { getKeyManager } from "../util/key-manager";
 import { optimizeStaticVDOM } from "../util/optimize-vdom-create";
 import { enter, exit } from "../util/plugin-hooks";
 import attributeTranslators from "./attribute";
-import attributeTag from "./attribute-tag";
+import attributeTag, { analyzeAttributeTags } from "./attribute-tag";
 import customTag from "./custom-tag";
 import dynamicTag from "./dynamic-tag";
 import macroTag from "./macro-tag";
@@ -54,6 +54,10 @@ export default {
     }
 
     if (!isAttributeTag(path)) {
+      if (isDynamicTag(path) || !(isMacroTag(path) || isNativeTag(path))) {
+        analyzeAttributeTags(path);
+      }
+
       getKeyManager(path).resolveKey(path);
     }
 
diff --git a/packages/translator-default/src/tag/util.js b/packages/translator-default/src/tag/util.js
index 5f87f5755..4173ff97b 100644
--- a/packages/translator-default/src/tag/util.js
+++ b/packages/translator-default/src/tag/util.js
@@ -1,14 +1,14 @@
-import { computeNode, getTagDef } from "@marko/babel-utils";
+import { computeNode, getTagDef, importNamed } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
 import classToString from "marko/src/runtime/helpers/class-value";
 import styleToString from "marko/src/runtime/helpers/style-value";
 
-export function getAttrs(path, preserveNames, skipRenderBody) {
+export function getAttrs(path, preserveNames) {
   const { node } = path;
   const {
+    extra,
     attributes,
     body: { body, params },
-    hasDynamicAttrTags,
   } = node;
   const attrsLen = attributes.length;
   const childLen = body.length;
@@ -16,6 +16,7 @@ export function getAttrs(path, preserveNames, skipRenderBody) {
   const targetObjects = {};
   const tagDef = getTagDef(path);
   const foundProperties = {};
+  const hasAttributeTags = extra?.hasAttributeTags;
 
   for (let i = 0; i < attrsLen; i++) {
     const { name, value } = attributes[i];
@@ -69,34 +70,16 @@ export function getAttrs(path, preserveNames, skipRenderBody) {
     }
   }
 
-  if (!skipRenderBody && childLen) {
-    let endDynamicAttrTagsIndex = -1;
-
-    if (hasDynamicAttrTags) {
-      endDynamicAttrTagsIndex = findLastIndex(
-        body,
-        ({ value }) => value === "END_ATTRIBUTE_TAGS",
-      );
-      path
-        .insertBefore(body.slice(0, endDynamicAttrTagsIndex))
-        .map((child) => child.skip());
-    }
-
-    if (!hasDynamicAttrTags || endDynamicAttrTagsIndex !== childLen - 1) {
-      properties.push(
-        t.objectProperty(
-          t.stringLiteral("renderBody"),
-          t.arrowFunctionExpression(
-            [t.identifier("out"), ...params],
-            t.blockStatement(
-              hasDynamicAttrTags
-                ? body.slice(endDynamicAttrTagsIndex + 1)
-                : body,
-            ),
-          ),
+  if (childLen && !hasAttributeTags) {
+    properties.push(
+      t.objectProperty(
+        t.stringLiteral("renderBody"),
+        t.arrowFunctionExpression(
+          [t.identifier("out"), ...params],
+          t.blockStatement(body),
         ),
-      );
-    }
+      ),
+    );
   }
 
   // Default parameters
@@ -121,15 +104,55 @@ export function getAttrs(path, preserveNames, skipRenderBody) {
       }
     });
 
-  if (properties.length === 0) {
-    return t.nullLiteral();
+  let attrsObject =
+    properties.length === 0
+      ? t.nullLiteral()
+      : !hasAttributeTags &&
+          properties.length === 1 &&
+          t.isSpreadElement(properties[0])
+        ? properties[0].argument
+        : t.objectExpression(properties);
+
+  if (hasAttributeTags) {
+    const endAttributeTagsIndex = findLastIndex(
+      body,
+      (node) =>
+        t.isExpressionStatement(node) &&
+        t.isStringLiteral(node.expression) &&
+        node.expression.value === "END_ATTRIBUTE_TAGS",
+    );
+
+    let attrTagBody = body;
+
+    if (endAttributeTagsIndex !== -1) {
+      attrTagBody = body.slice(0, endAttributeTagsIndex);
+      attrTagBody.push(
+        t.returnStatement(
+          t.arrowFunctionExpression(
+            [t.identifier("out"), ...params],
+            t.blockStatement(body.slice(endAttributeTagsIndex + 1)),
+          ),
+        ),
+      );
+    }
+
+    const attrTagFn = t.arrowFunctionExpression(
+      [],
+      t.blockStatement(attrTagBody),
+    );
+
+    attrsObject = t.callExpression(
+      importNamed(
+        path.hub.file,
+        "marko/src/runtime/helpers/attr-tag.js",
+        "i",
+        "marko_render_input",
+      ),
+      properties.length === 0 ? [attrTagFn] : [attrTagFn, attrsObject],
+    );
   }
 
-  if (properties.length === 1 && t.isSpreadElement(properties[0])) {
-    return properties[0].argument;
-  }
-
-  return t.objectExpression(properties);
+  return attrsObject;
 }
 
 export function buildEventHandlerArray(path) {
@@ -207,6 +230,8 @@ function findLastIndex(arr, check) {
       return i;
     }
   }
+
+  return -1;
 }
 
 function mergeSpread(properties, value) {

From 83cbd7d71fcb95b8d32c3022cbb7d6aa1d7f2c51 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Thu, 22 Feb 2024 13:34:09 -0700
Subject: [PATCH 08/20] chore: update snapshots

---
 .../components/test/template.marko            |   2 +
 .../expected.html                             |   1 +
 .../template.marko                            |   4 +
 .../test.js                                   |   1 +
 .../vdom-expected.html                        |   1 +
 .../components/test/template.marko            |   3 +
 .../nested-tag-with-scriptlet/expected.html   |   1 +
 .../nested-tag-with-scriptlet/template.marko  |   6 +
 .../nested-tag-with-scriptlet/test.js         |   1 +
 .../vdom-expected.html                        |   1 +
 .../snapshots/cjs-expected.js                 |  26 ++--
 .../snapshots/html-expected.js                |  26 ++--
 .../snapshots/htmlProduction-expected.js      |  26 ++--
 .../snapshots/vdom-expected.js                |  26 ++--
 .../snapshots/vdomProduction-expected.js      |  26 ++--
 .../snapshots/cjs-expected.js                 |  18 +--
 .../snapshots/html-expected.js                |  18 +--
 .../snapshots/htmlProduction-expected.js      |  18 +--
 .../snapshots/vdom-expected.js                |  18 +--
 .../snapshots/vdomProduction-expected.js      |  18 +--
 .../snapshots/cjs-expected.js                 |  25 ++-
 .../snapshots/html-expected.js                |  25 ++-
 .../snapshots/htmlProduction-expected.js      |  25 ++-
 .../snapshots/vdom-expected.js                |  25 ++-
 .../snapshots/vdomProduction-expected.js      |  25 ++-
 .../snapshots/cjs-expected.js                 |  24 ++-
 .../snapshots/html-expected.js                |  24 ++-
 .../snapshots/htmlProduction-expected.js      |  24 ++-
 .../snapshots/vdom-expected.js                |  24 ++-
 .../snapshots/vdomProduction-expected.js      |  24 ++-
 .../at-tags-dynamic/snapshots/cjs-expected.js | 143 ++++++++----------
 .../snapshots/html-expected.js                | 143 ++++++++----------
 .../snapshots/htmlProduction-expected.js      | 143 ++++++++----------
 .../snapshots/vdom-expected.js                | 143 ++++++++----------
 .../snapshots/vdomProduction-expected.js      | 143 ++++++++----------
 .../snapshots/cjs-expected.js                 |  35 ++---
 .../snapshots/html-expected.js                |  35 ++---
 .../snapshots/htmlProduction-expected.js      |  35 ++---
 .../snapshots/vdom-expected.js                |  35 ++---
 .../snapshots/vdomProduction-expected.js      |  35 ++---
 .../snapshots/cjs-expected.js                 |  13 +-
 .../snapshots/html-expected.js                |  13 +-
 .../snapshots/htmlProduction-expected.js      |  13 +-
 .../snapshots/vdom-expected.js                |  13 +-
 .../snapshots/vdomProduction-expected.js      |  13 +-
 .../at-tags/snapshots/cjs-expected.js         |  13 +-
 .../at-tags/snapshots/html-expected.js        |  13 +-
 .../snapshots/htmlProduction-expected.js      |  13 +-
 .../at-tags/snapshots/vdom-expected.js        |  13 +-
 .../snapshots/vdomProduction-expected.js      |  13 +-
 .../attr-class/snapshots/cjs-expected.js      |  20 +--
 .../attr-class/snapshots/html-expected.js     |  20 +--
 .../snapshots/htmlProduction-expected.js      |  20 +--
 .../attr-class/snapshots/vdom-expected.js     |  20 +--
 .../snapshots/vdomProduction-expected.js      |  20 +--
 .../attr-style/snapshots/cjs-expected.js      |  16 +-
 .../attr-style/snapshots/html-expected.js     |  16 +-
 .../snapshots/htmlProduction-expected.js      |  16 +-
 .../attr-style/snapshots/vdom-expected.js     |  16 +-
 .../snapshots/vdomProduction-expected.js      |  16 +-
 .../await-tag/snapshots/cjs-expected.js       |  18 +--
 .../await-tag/snapshots/html-expected.js      |  18 +--
 .../snapshots/htmlProduction-expected.js      |  18 +--
 .../await-tag/snapshots/vdom-expected.js      |  18 +--
 .../snapshots/vdomProduction-expected.js      |  18 +--
 .../snapshots/cjs-error-expected.txt          |   8 +
 .../snapshots/generated-expected.marko        |   8 +
 .../snapshots/html-error-expected.txt         |   8 +
 .../htmlProduction-error-expected.txt         |   8 +
 .../snapshots/hydrate-expected.js             |   0
 .../snapshots/vdom-error-expected.txt         |   8 +
 .../vdomProduction-error-expected.txt         |   8 +
 .../template.marko                            |   9 ++
 .../snapshots/cjs-error-expected.txt          |  16 +-
 .../snapshots/html-error-expected.txt         |  16 +-
 .../htmlProduction-error-expected.txt         |  16 +-
 .../snapshots/vdom-error-expected.txt         |  16 +-
 .../vdomProduction-error-expected.txt         |  16 +-
 .../snapshots/cjs-error-expected.txt          |   8 -
 .../snapshots/cjs-expected.js                 |  19 ++-
 .../snapshots/html-error-expected.txt         |   8 -
 .../snapshots/html-expected.js                |  19 ++-
 .../htmlProduction-error-expected.txt         |   8 -
 .../snapshots/htmlProduction-expected.js      |  19 ++-
 .../snapshots/vdom-error-expected.txt         |   8 -
 .../snapshots/vdom-expected.js                |  19 ++-
 .../vdomProduction-error-expected.txt         |   8 -
 .../snapshots/vdomProduction-expected.js      |  19 ++-
 .../snapshots/cjs-error-expected.txt          |   7 -
 .../snapshots/generated-error-expected.txt    |   7 -
 .../snapshots/html-error-expected.txt         |   7 -
 .../htmlProduction-error-expected.txt         |   7 -
 .../snapshots/hydrate-error-expected.txt      |   7 -
 .../snapshots/vdom-error-expected.txt         |   7 -
 .../vdomProduction-error-expected.txt         |   7 -
 .../snapshots/generated-error-expected.txt    |   6 -
 .../snapshots/hydrate-error-expected.txt      |   6 -
 .../snapshots/generated-error-expected.txt    |   6 -
 .../snapshots/hydrate-error-expected.txt      |   6 -
 .../snapshots/generated-error-expected.txt    |   6 -
 .../snapshots/hydrate-error-expected.txt      |   6 -
 .../snapshots/generated-error-expected.txt    |   3 -
 .../snapshots/hydrate-error-expected.txt      |   3 -
 .../sanity-check/snapshots/cjs-expected.js    |  42 ++---
 .../snapshots/generated-expected.marko        |   2 +-
 .../sanity-check/snapshots/html-expected.js   |  42 ++---
 .../snapshots/htmlProduction-expected.js      |  42 ++---
 .../sanity-check/snapshots/vdom-expected.js   |  42 ++---
 .../snapshots/vdomProduction-expected.js      |  42 ++---
 .../test/fixtures/sanity-check/template.marko |   2 +-
 110 files changed, 1045 insertions(+), 1308 deletions(-)
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-render-body-params/components/test/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-render-body-params/expected.html
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-render-body-params/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-render-body-params/test.js
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-render-body-params/vdom-expected.html
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-scriptlet/components/test/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-scriptlet/expected.html
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-scriptlet/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-scriptlet/test.js
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-scriptlet/vdom-expected.html
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/cjs-error-expected.txt
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/generated-expected.marko
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/html-error-expected.txt
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/htmlProduction-error-expected.txt
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/hydrate-expected.js
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdom-error-expected.txt
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdomProduction-error-expected.txt
 create mode 100644 packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko
 delete mode 100644 packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/cjs-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/generated-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/html-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/htmlProduction-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/hydrate-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdom-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/generated-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/hydrate-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/generated-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/hydrate-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/generated-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/hydrate-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/generated-error-expected.txt
 delete mode 100644 packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/hydrate-error-expected.txt

diff --git a/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/components/test/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/components/test/template.marko
new file mode 100644
index 000000000..b035b2ab2
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/components/test/template.marko
@@ -0,0 +1,2 @@
+-- item: ${input.item.value}
+<${input.renderBody}(2)/>
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/expected.html b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/expected.html
new file mode 100644
index 000000000..ef32332a6
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/expected.html
@@ -0,0 +1 @@
+item: 1param: 2
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/template.marko
new file mode 100644
index 000000000..321508293
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/template.marko
@@ -0,0 +1,4 @@
+<test|x|>
+    <@item value=1/>
+    param: ${x}
+</>
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/test.js b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/test.js
new file mode 100644
index 000000000..c4013b344
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/test.js
@@ -0,0 +1 @@
+exports.templateData = {};
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/vdom-expected.html b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/vdom-expected.html
new file mode 100644
index 000000000..1f48262a3
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-render-body-params/vdom-expected.html
@@ -0,0 +1 @@
+"item: 1param: 2"
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/components/test/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/components/test/template.marko
new file mode 100644
index 000000000..3e140ef95
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/components/test/template.marko
@@ -0,0 +1,3 @@
+<for|item| of=input.item>
+    ${item.value}
+</for>
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/expected.html b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/expected.html
new file mode 100644
index 000000000..3cacc0b93
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/expected.html
@@ -0,0 +1 @@
+12
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/template.marko
new file mode 100644
index 000000000..fc6174a71
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/template.marko
@@ -0,0 +1,6 @@
+<test>
+    $ let x = 1;
+    <@item value=x/>
+    $ x = 2;
+    <@item value=x/>
+</>
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/test.js b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/test.js
new file mode 100644
index 000000000..c4013b344
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/test.js
@@ -0,0 +1 @@
+exports.templateData = {};
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/vdom-expected.html b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/vdom-expected.html
new file mode 100644
index 000000000..24a06cb3e
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-scriptlet/vdom-expected.html
@@ -0,0 +1 @@
+"12"
diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js
index 9f84fa96f..50f7b60d8 100644
--- a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js
@@ -3,8 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _repeatable = _interopRequireDefault(require("marko/src/runtime/helpers/repeatable.js"));
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/custom-tag/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -14,19 +13,16 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tag-i
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  let _thing = null;
-  if (x) {
-    _thing = (0, _repeatable.default)(_thing, {
-      "x": 1,
-      "renderBody": out => {
-        out.w("Hello");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    });
-  }
-  (0, _renderTag.default)(_index2.default, {
-    "thing": _thing
-  }, out, _componentDef, "0");
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    if (x) {
+      (0, _attrTag.a)("thing", {
+        "x": 1,
+        "renderBody": out => {
+          out.w("Hello");
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js
index 650c66f19..03aa892ee 100644
--- a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js
@@ -2,26 +2,22 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tag-inside-if-tag/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/src/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  let _thing = null;
-  if (x) {
-    _thing = _marko_repeatable(_thing, {
-      "x": 1,
-      "renderBody": out => {
-        out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_customTag, {
-    "thing": _thing
-  }, out, _componentDef, "0");
+  _marko_tag(_customTag, _marko_render_input(() => {
+    if (x) {
+      _marko_repeatable_attr_tag("thing", {
+        "x": 1,
+        "renderBody": out => {
+          out.w("Hello");
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js
index 13eaa5190..6373f7db2 100644
--- a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js
@@ -2,26 +2,22 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "cY5vQoUJ",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/dist/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  let _thing = null;
-  if (x) {
-    _thing = _marko_repeatable(_thing, {
-      "x": 1,
-      "renderBody": out => {
-        out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_customTag, {
-    "thing": _thing
-  }, out, _componentDef, "0");
+  _marko_tag(_customTag, _marko_render_input(() => {
+    if (x) {
+      _marko_repeatable_attr_tag("thing", {
+        "x": 1,
+        "renderBody": out => {
+          out.w("Hello");
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js
index 7ef2ea131..1ffcda358 100644
--- a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js
@@ -2,8 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tag-inside-if-tag/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/src/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -11,19 +10,16 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  let _thing = null;
-  if (x) {
-    _thing = _marko_repeatable(_thing, {
-      "x": 1,
-      "renderBody": out => {
-        out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_customTag, {
-    "thing": _thing
-  }, out, _componentDef, "0");
+  _marko_tag(_customTag, _marko_render_input(() => {
+    if (x) {
+      _marko_repeatable_attr_tag("thing", {
+        "x": 1,
+        "renderBody": out => {
+          out.t("Hello", _component);
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js
index 8de97675b..f037d298d 100644
--- a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js
@@ -2,8 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "cY5vQoUJ",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/dist/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -11,19 +10,16 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  let _thing = null;
-  if (x) {
-    _thing = _marko_repeatable(_thing, {
-      "x": 1,
-      "renderBody": out => {
-        out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_customTag, {
-    "thing": _thing
-  }, out, _componentDef, "0");
+  _marko_tag(_customTag, _marko_render_input(() => {
+    if (x) {
+      _marko_repeatable_attr_tag("thing", {
+        "x": 1,
+        "renderBody": out => {
+          out.t("Hello", _component);
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js
index 9559bf3aa..c7ec9c94a 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -13,18 +13,12 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  const _items = [];
-  for (const a in b) {
-    _items.push({
-      [Symbol.iterator]: _selfIterator.default
-    });
-  }
-  (0, _renderTag.default)(_index2.default, {
-    "items": _items,
-    "other": {
-      [Symbol.iterator]: _selfIterator.default
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    for (const a in b) {
+      (0, _attrTag.r)("items", {});
     }
-  }, out, _componentDef, "0");
+    (0, _attrTag.a)("other", {});
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js
index 06e723d44..56d6e394b 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js
@@ -2,24 +2,18 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic-and-static/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  const _items = [];
-  for (const a in b) {
-    _items.push({
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "items": _items,
-    "other": {
-      [Symbol.iterator]: _marko_self_iterator
+  _marko_tag(_hello, _marko_render_input(() => {
+    for (const a in b) {
+      _marko_repeated_attr_tag("items", {});
     }
-  }, out, _componentDef, "0");
+    _marko_repeatable_attr_tag("other", {});
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js
index 9a1ba94b5..4dd9f7047 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js
@@ -2,24 +2,18 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "EC7Wpjet",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  const _items = [];
-  for (const a in b) {
-    _items.push({
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "items": _items,
-    "other": {
-      [Symbol.iterator]: _marko_self_iterator
+  _marko_tag(_hello, _marko_render_input(() => {
+    for (const a in b) {
+      _marko_repeated_attr_tag("items", {});
     }
-  }, out, _componentDef, "0");
+    _marko_repeatable_attr_tag("other", {});
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js
index fc92d8252..73fa19840 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic-and-static/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,18 +10,12 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  const _items = [];
-  for (const a in b) {
-    _items.push({
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "items": _items,
-    "other": {
-      [Symbol.iterator]: _marko_self_iterator
+  _marko_tag(_hello, _marko_render_input(() => {
+    for (const a in b) {
+      _marko_repeated_attr_tag("items", {});
     }
-  }, out, _componentDef, "0");
+    _marko_repeatable_attr_tag("other", {});
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js
index abe6382a4..1fb3206f8 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "EC7Wpjet",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,18 +10,12 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  const _items = [];
-  for (const a in b) {
-    _items.push({
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "items": _items,
-    "other": {
-      [Symbol.iterator]: _marko_self_iterator
+  _marko_tag(_hello, _marko_render_input(() => {
+    for (const a in b) {
+      _marko_repeated_attr_tag("items", {});
     }
-  }, out, _componentDef, "0");
+    _marko_repeatable_attr_tag("other", {});
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/cjs-expected.js
index 45d4dd213..63593ea02 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _dynamicTag = _interopRequireDefault(require("marko/src/runtime/helpers/dynamic-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -12,24 +12,23 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _dynamicTag.default)(out, input.x, () => ({
-    "header": {
+  (0, _dynamicTag.default)(out, input.x, () => (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    },
-    "footer": {
+      }
+    });
+    (0, _attrTag.a)("footer", {
       "class": "my-footer",
       "renderBody": out => {
         out.w("Footer content");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }
-  }), out => {
-    out.w("Body content");
-  }, null, null, _componentDef, "0");
+      }
+    });
+    return out => {
+      out.w("Body content");
+    };
+  }), null, null, null, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/html-expected.js
index 783081429..7f3552642 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/html-expected.js
@@ -2,29 +2,28 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.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) {
-  _marko_dynamic_tag(out, input.x, () => ({
-    "header": {
+  _marko_dynamic_tag(out, input.x, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "footer": {
+      }
+    });
+    _marko_repeatable_attr_tag("footer", {
       "class": "my-footer",
       "renderBody": out => {
         out.w("Footer content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }), out => {
-    out.w("Body content");
-  }, null, null, _componentDef, "0");
+      }
+    });
+    return out => {
+      out.w("Body content");
+    };
+  }), null, null, null, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/htmlProduction-expected.js
index fac66ff36..71f63706e 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/htmlProduction-expected.js
@@ -2,29 +2,28 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "V8pzyNwe",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.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) {
-  _marko_dynamic_tag(out, input.x, () => ({
-    "header": {
+  _marko_dynamic_tag(out, input.x, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "footer": {
+      }
+    });
+    _marko_repeatable_attr_tag("footer", {
       "class": "my-footer",
       "renderBody": out => {
         out.w("Footer content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }), out => {
-    out.w("Body content");
-  }, null, null, _componentDef, "0");
+      }
+    });
+    return out => {
+      out.w("Body content");
+    };
+  }), null, null, null, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdom-expected.js
index e9e4841a1..15ce4669a 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdom-expected.js
@@ -2,31 +2,30 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_dynamic_tag(out, input.x, () => ({
-    "header": {
+  _marko_dynamic_tag(out, input.x, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "footer": {
+      }
+    });
+    _marko_repeatable_attr_tag("footer", {
       "class": "my-footer",
       "renderBody": out => {
         out.t("Footer content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }), out => {
-    out.t("Body content", _component);
-  }, null, null, _componentDef, "0");
+      }
+    });
+    return out => {
+      out.t("Body content", _component);
+    };
+  }), null, null, null, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdomProduction-expected.js
index 569edc21b..3877dedf8 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdomProduction-expected.js
@@ -2,31 +2,30 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "V8pzyNwe",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_dynamic_tag(out, input.x, () => ({
-    "header": {
+  _marko_dynamic_tag(out, input.x, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "footer": {
+      }
+    });
+    _marko_repeatable_attr_tag("footer", {
       "class": "my-footer",
       "renderBody": out => {
         out.t("Footer content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }), out => {
-    out.t("Body content", _component);
-  }, null, null, _componentDef, "0");
+      }
+    });
+    return out => {
+      out.t("Body content", _component);
+    };
+  }), null, null, null, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/cjs-expected.js
index 72aea9314..50e85f8f6 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/cjs-expected.js
@@ -4,8 +4,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
 var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
-var _repeatable = _interopRequireDefault(require("marko/src/runtime/helpers/repeatable.js"));
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -15,18 +14,15 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  let _item = null;
-  if (input.x) {
-    _item = (0, _repeatable.default)(_item, {
-      "renderBody": (out, y) => {
-        out.w((0, _escapeXml.x)(y));
-      },
-      [Symbol.iterator]: _selfIterator.default
-    });
-  }
-  (0, _renderTag.default)(_index2.default, {
-    "item": _item
-  }, out, _componentDef, "0");
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    if (input.x) {
+      (0, _attrTag.a)("item", {
+        "renderBody": (out, y) => {
+          out.w((0, _escapeXml.x)(y));
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/html-expected.js
index bd45a6dee..198034299 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/html-expected.js
@@ -3,25 +3,21 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
-import _marko_repeatable from "marko/src/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  let _item = null;
-  if (input.x) {
-    _item = _marko_repeatable(_item, {
-      "renderBody": (out, y) => {
-        out.w(_marko_escapeXml(y));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "item": _item
-  }, out, _componentDef, "0");
+  _marko_tag(_hello, _marko_render_input(() => {
+    if (input.x) {
+      _marko_repeatable_attr_tag("item", {
+        "renderBody": (out, y) => {
+          out.w(_marko_escapeXml(y));
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/htmlProduction-expected.js
index 0e4d408f8..a0fb72a17 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/htmlProduction-expected.js
@@ -3,25 +3,21 @@ const _marko_componentType = "OLo+Dwkn",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
-import _marko_repeatable from "marko/dist/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  let _item = null;
-  if (input.x) {
-    _item = _marko_repeatable(_item, {
-      "renderBody": (out, y) => {
-        out.w(_marko_escapeXml(y));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "item": _item
-  }, out, _componentDef, "0");
+  _marko_tag(_hello, _marko_render_input(() => {
+    if (input.x) {
+      _marko_repeatable_attr_tag("item", {
+        "renderBody": (out, y) => {
+          out.w(_marko_escapeXml(y));
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdom-expected.js
index 10dac1cad..ce4acef12 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdom-expected.js
@@ -2,8 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic-with-params/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/src/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -11,18 +10,15 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  let _item = null;
-  if (input.x) {
-    _item = _marko_repeatable(_item, {
-      "renderBody": (out, y) => {
-        out.t(y, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "item": _item
-  }, out, _componentDef, "0");
+  _marko_tag(_hello, _marko_render_input(() => {
+    if (input.x) {
+      _marko_repeatable_attr_tag("item", {
+        "renderBody": (out, y) => {
+          out.t(y, _component);
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdomProduction-expected.js
index 468f1f6a3..89c9bca11 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdomProduction-expected.js
@@ -2,8 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "OLo+Dwkn",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_repeatable from "marko/dist/runtime/helpers/repeatable.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -11,18 +10,15 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  let _item = null;
-  if (input.x) {
-    _item = _marko_repeatable(_item, {
-      "renderBody": (out, y) => {
-        out.t(y, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  _marko_tag(_hello, {
-    "item": _item
-  }, out, _componentDef, "0");
+  _marko_tag(_hello, _marko_render_input(() => {
+    if (input.x) {
+      _marko_repeatable_attr_tag("item", {
+        "renderBody": (out, y) => {
+          out.t(y, _component);
+        }
+      });
+    }
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/cjs-expected.js
index 3248f4481..a0783c5e8 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
@@ -14,87 +14,72 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  const _cols = [];
-  const _items = [];
-  for (const color of input.colors || []) {
-    if (x) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("foo");
-        },
-        [Symbol.iterator]: _selfIterator.default
-      });
-    } else if (y) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("bar");
-        },
-        [Symbol.iterator]: _selfIterator.default
-      });
-    } else {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("baz");
-        },
-        [Symbol.iterator]: _selfIterator.default
-      });
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("list", (0, _attrTag.i)(() => {
+      for (const color of input.colors || []) {
+        if (x) {
+          (0, _attrTag.r)("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("foo");
+            }
+          });
+        } else if (y) {
+          (0, _attrTag.r)("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("bar");
+            }
+          });
+        } else {
+          (0, _attrTag.r)("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("baz");
+            }
+          });
+        }
+      }
+      let i = 10;
+      while (i--) {
+        (0, _attrTag.r)("items", {
+          "renderBody": out => {
+            out.w((0, _escapeXml.x)(i));
+          }
+        });
+      }
+    }));
+    for (const col of input.table || []) {
+      (0, _attrTag.r)("cols", (0, _attrTag.i)(() => {
+        for (const row of col || []) {
+          (0, _attrTag.r)("rows", {
+            "row": row,
+            "renderBody": out => {
+              out.w((0, _escapeXml.x)(row));
+            }
+          });
+        }
+      }, {
+        "x": y
+      }));
     }
-  }
-  let i = 10;
-  while (i--) {
-    _items.push({
-      "renderBody": out => {
-        out.w((0, _escapeXml.x)(i));
-      },
-      [Symbol.iterator]: _selfIterator.default
-    });
-  }
-  for (const col of input.table || []) {
-    const _rows = [];
-    for (const row of col || []) {
-      _rows.push({
-        "row": row,
+    (0, _attrTag.r)("cols", (0, _attrTag.i)(() => {
+      (0, _attrTag.r)("rows", {
+        "row": -1,
         "renderBody": out => {
-          out.w((0, _escapeXml.x)(row));
-        },
-        [Symbol.iterator]: _selfIterator.default
+          out.w("Outside");
+        }
       });
-    }
-    _cols.push({
-      "x": y,
-      "rows": _rows,
-      [Symbol.iterator]: _selfIterator.default
-    });
-  }
-  const _rows2 = [];
-  _rows2.push({
-    "row": -1,
-    "renderBody": out => {
-      out.w("Outside");
-    },
-    [Symbol.iterator]: _selfIterator.default
-  });
-  _cols.push({
-    "outside": true,
-    "rows": _rows2,
-    [Symbol.iterator]: _selfIterator.default
-  });
-  (0, _renderTag.default)(_index2.default, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _selfIterator.default
-    },
-    "cols": _cols
-  }, out, _componentDef, "0");
+    }, {
+      "outside": true
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/html-expected.js
index ced875716..a9bfcaf52 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/html-expected.js
@@ -2,94 +2,79 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  const _cols = [];
-  const _items = [];
-  for (const color of input.colors || []) {
-    if (x) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("foo");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else if (y) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("bar");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("baz");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
+      for (const color of input.colors || []) {
+        if (x) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("foo");
+            }
+          });
+        } else if (y) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("bar");
+            }
+          });
+        } else {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("baz");
+            }
+          });
+        }
+      }
+      let i = 10;
+      while (i--) {
+        _marko_repeated_attr_tag("items", {
+          "renderBody": out => {
+            out.w(_marko_escapeXml(i));
+          }
+        });
+      }
+    }));
+    for (const col of input.table || []) {
+      _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+        for (const row of col || []) {
+          _marko_repeated_attr_tag("rows", {
+            "row": row,
+            "renderBody": out => {
+              out.w(_marko_escapeXml(row));
+            }
+          });
+        }
+      }, {
+        "x": y
+      }));
     }
-  }
-  let i = 10;
-  while (i--) {
-    _items.push({
-      "renderBody": out => {
-        out.w(_marko_escapeXml(i));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  for (const col of input.table || []) {
-    const _rows = [];
-    for (const row of col || []) {
-      _rows.push({
-        "row": row,
+    _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+      _marko_repeated_attr_tag("rows", {
+        "row": -1,
         "renderBody": out => {
-          out.w(_marko_escapeXml(row));
-        },
-        [Symbol.iterator]: _marko_self_iterator
+          out.w("Outside");
+        }
       });
-    }
-    _cols.push({
-      "x": y,
-      "rows": _rows,
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  const _rows2 = [];
-  _rows2.push({
-    "row": -1,
-    "renderBody": out => {
-      out.w("Outside");
-    },
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _cols.push({
-    "outside": true,
-    "rows": _rows2,
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "cols": _cols
-  }, out, _componentDef, "0");
+    }, {
+      "outside": true
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/htmlProduction-expected.js
index f729ce9c4..2775746da 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/htmlProduction-expected.js
@@ -2,94 +2,79 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "GuHig6zQ",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  const _cols = [];
-  const _items = [];
-  for (const color of input.colors || []) {
-    if (x) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("foo");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else if (y) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("bar");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.w("baz");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
+      for (const color of input.colors || []) {
+        if (x) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("foo");
+            }
+          });
+        } else if (y) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("bar");
+            }
+          });
+        } else {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.w("baz");
+            }
+          });
+        }
+      }
+      let i = 10;
+      while (i--) {
+        _marko_repeated_attr_tag("items", {
+          "renderBody": out => {
+            out.w(_marko_escapeXml(i));
+          }
+        });
+      }
+    }));
+    for (const col of input.table || []) {
+      _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+        for (const row of col || []) {
+          _marko_repeated_attr_tag("rows", {
+            "row": row,
+            "renderBody": out => {
+              out.w(_marko_escapeXml(row));
+            }
+          });
+        }
+      }, {
+        "x": y
+      }));
     }
-  }
-  let i = 10;
-  while (i--) {
-    _items.push({
-      "renderBody": out => {
-        out.w(_marko_escapeXml(i));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  for (const col of input.table || []) {
-    const _rows = [];
-    for (const row of col || []) {
-      _rows.push({
-        "row": row,
+    _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+      _marko_repeated_attr_tag("rows", {
+        "row": -1,
         "renderBody": out => {
-          out.w(_marko_escapeXml(row));
-        },
-        [Symbol.iterator]: _marko_self_iterator
+          out.w("Outside");
+        }
       });
-    }
-    _cols.push({
-      "x": y,
-      "rows": _rows,
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  const _rows2 = [];
-  _rows2.push({
-    "row": -1,
-    "renderBody": out => {
-      out.w("Outside");
-    },
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _cols.push({
-    "outside": true,
-    "rows": _rows2,
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "cols": _cols
-  }, out, _componentDef, "0");
+    }, {
+      "outside": true
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdom-expected.js
index 04789a054..44fb3728d 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-dynamic/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,87 +10,72 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  const _cols = [];
-  const _items = [];
-  for (const color of input.colors || []) {
-    if (x) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("foo", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else if (y) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("bar", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("baz", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
+      for (const color of input.colors || []) {
+        if (x) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("foo", _component);
+            }
+          });
+        } else if (y) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("bar", _component);
+            }
+          });
+        } else {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("baz", _component);
+            }
+          });
+        }
+      }
+      let i = 10;
+      while (i--) {
+        _marko_repeated_attr_tag("items", {
+          "renderBody": out => {
+            out.t(i, _component);
+          }
+        });
+      }
+    }));
+    for (const col of input.table || []) {
+      _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+        for (const row of col || []) {
+          _marko_repeated_attr_tag("rows", {
+            "row": row,
+            "renderBody": out => {
+              out.t(row, _component);
+            }
+          });
+        }
+      }, {
+        "x": y
+      }));
     }
-  }
-  let i = 10;
-  while (i--) {
-    _items.push({
-      "renderBody": out => {
-        out.t(i, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  for (const col of input.table || []) {
-    const _rows = [];
-    for (const row of col || []) {
-      _rows.push({
-        "row": row,
+    _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+      _marko_repeated_attr_tag("rows", {
+        "row": -1,
         "renderBody": out => {
-          out.t(row, _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
+          out.t("Outside", _component);
+        }
       });
-    }
-    _cols.push({
-      "x": y,
-      "rows": _rows,
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  const _rows2 = [];
-  _rows2.push({
-    "row": -1,
-    "renderBody": out => {
-      out.t("Outside", _component);
-    },
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _cols.push({
-    "outside": true,
-    "rows": _rows2,
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "cols": _cols
-  }, out, _componentDef, "0");
+    }, {
+      "outside": true
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdomProduction-expected.js
index 866c543f6..4c975e724 100644
--- a/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "GuHig6zQ",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,87 +10,72 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  const _cols = [];
-  const _items = [];
-  for (const color of input.colors || []) {
-    if (x) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("foo", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else if (y) {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("bar", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
-    } else {
-      _items.push({
-        "style": {
-          color
-        },
-        "renderBody": out => {
-          out.t("baz", _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      });
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
+      for (const color of input.colors || []) {
+        if (x) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("foo", _component);
+            }
+          });
+        } else if (y) {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("bar", _component);
+            }
+          });
+        } else {
+          _marko_repeated_attr_tag("items", {
+            "style": {
+              color
+            },
+            "renderBody": out => {
+              out.t("baz", _component);
+            }
+          });
+        }
+      }
+      let i = 10;
+      while (i--) {
+        _marko_repeated_attr_tag("items", {
+          "renderBody": out => {
+            out.t(i, _component);
+          }
+        });
+      }
+    }));
+    for (const col of input.table || []) {
+      _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+        for (const row of col || []) {
+          _marko_repeated_attr_tag("rows", {
+            "row": row,
+            "renderBody": out => {
+              out.t(row, _component);
+            }
+          });
+        }
+      }, {
+        "x": y
+      }));
     }
-  }
-  let i = 10;
-  while (i--) {
-    _items.push({
-      "renderBody": out => {
-        out.t(i, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  for (const col of input.table || []) {
-    const _rows = [];
-    for (const row of col || []) {
-      _rows.push({
-        "row": row,
+    _marko_repeated_attr_tag("cols", _marko_render_input(() => {
+      _marko_repeated_attr_tag("rows", {
+        "row": -1,
         "renderBody": out => {
-          out.t(row, _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
+          out.t("Outside", _component);
+        }
       });
-    }
-    _cols.push({
-      "x": y,
-      "rows": _rows,
-      [Symbol.iterator]: _marko_self_iterator
-    });
-  }
-  const _rows2 = [];
-  _rows2.push({
-    "row": -1,
-    "renderBody": out => {
-      out.t("Outside", _component);
-    },
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _cols.push({
-    "outside": true,
-    "rows": _rows2,
-    [Symbol.iterator]: _marko_self_iterator
-  });
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "cols": _cols
-  }, out, _componentDef, "0");
+    }, {
+      "outside": true
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/cjs-expected.js
index efd4b9b33..85f4ffc01 100644
--- a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
@@ -14,48 +14,39 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _renderTag.default)(_index2.default, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _selfIterator.default
-    },
-    "renderBody": out => {
-      const _items = [];
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("list", (0, _attrTag.i)(() => {
       for (const color of input.colors || []) {
         if (x) {
-          _items.push({
+          (0, _attrTag.r)("items", {
             "renderBody": out => {
               out.w("foo");
-            },
-            [Symbol.iterator]: _selfIterator.default
+            }
           });
         } else if (y) {
-          _items.push({
+          (0, _attrTag.r)("items", {
             "renderBody": out => {
               out.w("bar");
-            },
-            [Symbol.iterator]: _selfIterator.default
+            }
           });
         } else {
-          _items.push({
+          (0, _attrTag.r)("items", {
             "renderBody": out => {
               out.w("baz");
-            },
-            [Symbol.iterator]: _selfIterator.default
+            }
           });
         }
       }
       let i = 10;
       while (i--) {
-        _items.push({
+        (0, _attrTag.r)("items", {
           "renderBody": out => {
             out.w((0, _escapeXml.x)(i));
-          },
-          [Symbol.iterator]: _selfIterator.default
+          }
         });
       }
-    }
-  }, out, _componentDef, "0");
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/html-expected.js
index 411f860a5..09937cccc 100644
--- a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/html-expected.js
@@ -2,55 +2,46 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-repeated-longhand/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": out => {
-      const _items = [];
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
       for (const color of input.colors || []) {
         if (x) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("foo");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else if (y) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("bar");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("baz");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         }
       }
       let i = 10;
       while (i--) {
-        _items.push({
+        _marko_repeated_attr_tag("items", {
           "renderBody": out => {
             out.w(_marko_escapeXml(i));
-          },
-          [Symbol.iterator]: _marko_self_iterator
+          }
         });
       }
-    }
-  }, out, _componentDef, "0");
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/htmlProduction-expected.js
index 150cc2477..375d5fb46 100644
--- a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/htmlProduction-expected.js
@@ -2,55 +2,46 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "1bkLHbaD",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": out => {
-      const _items = [];
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
       for (const color of input.colors || []) {
         if (x) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("foo");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else if (y) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("bar");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.w("baz");
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         }
       }
       let i = 10;
       while (i--) {
-        _items.push({
+        _marko_repeated_attr_tag("items", {
           "renderBody": out => {
             out.w(_marko_escapeXml(i));
-          },
-          [Symbol.iterator]: _marko_self_iterator
+          }
         });
       }
-    }
-  }, out, _componentDef, "0");
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdom-expected.js
index 628f427d9..b6c15bf76 100644
--- a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-repeated-longhand/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,48 +10,39 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": out => {
-      const _items = [];
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
       for (const color of input.colors || []) {
         if (x) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("foo", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else if (y) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("bar", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("baz", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         }
       }
       let i = 10;
       while (i--) {
-        _items.push({
+        _marko_repeated_attr_tag("items", {
           "renderBody": out => {
             out.t(i, _component);
-          },
-          [Symbol.iterator]: _marko_self_iterator
+          }
         });
       }
-    }
-  }, out, _componentDef, "0");
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdomProduction-expected.js
index d5bd2edcb..63559e4a5 100644
--- a/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-repeated-longhand/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "1bkLHbaD",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,48 +10,39 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "list": {
-      "items": _items,
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": out => {
-      const _items = [];
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("list", _marko_render_input(() => {
       for (const color of input.colors || []) {
         if (x) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("foo", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else if (y) {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("bar", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         } else {
-          _items.push({
+          _marko_repeated_attr_tag("items", {
             "renderBody": out => {
               out.t("baz", _component);
-            },
-            [Symbol.iterator]: _marko_self_iterator
+            }
           });
         }
       }
       let i = 10;
       while (i--) {
-        _items.push({
+        _marko_repeated_attr_tag("items", {
           "renderBody": out => {
             out.t(i, _component);
-          },
-          [Symbol.iterator]: _marko_self_iterator
+          }
         });
       }
-    }
-  }, out, _componentDef, "0");
+    }));
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/cjs-expected.js
index 596d51ee2..ddfc1caed 100644
--- a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -13,15 +13,14 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _renderTag.default)(_index2.default, {
-    "foo": {
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("foo", {
       "key": "foo",
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/html-expected.js
index 09b698b7b..607bc0582 100644
--- a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/html-expected.js
@@ -2,21 +2,20 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-with-key/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "key": "foo",
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/htmlProduction-expected.js
index 76033f67d..223054f52 100644
--- a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/htmlProduction-expected.js
@@ -2,21 +2,20 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "9N4Yuzi+",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "key": "foo",
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdom-expected.js
index 4b38309be..d6ffb17d8 100644
--- a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-with-key/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,15 +10,14 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "key": "foo",
       "renderBody": out => {
         out.t("Foo!", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdomProduction-expected.js
index c39434bac..a71a1e244 100644
--- a/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags-with-key/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "9N4Yuzi+",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,15 +10,14 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "key": "foo",
       "renderBody": out => {
         out.t("Foo!", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tags/snapshots/cjs-expected.js
index 0c9ef0623..9f60f6900 100644
--- a/packages/translator-default/test/fixtures/at-tags/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -13,14 +13,13 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags/
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _renderTag.default)(_index2.default, {
-    "foo": {
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("foo", {
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tags/snapshots/html-expected.js
index 7b88050f9..a4d574c22 100644
--- a/packages/translator-default/test/fixtures/at-tags/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags/snapshots/html-expected.js
@@ -2,20 +2,19 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/at-tags/snapshots/htmlProduction-expected.js
index b09af784c..f96ccd7aa 100644
--- a/packages/translator-default/test/fixtures/at-tags/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags/snapshots/htmlProduction-expected.js
@@ -2,20 +2,19 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "hNiObgtw",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "renderBody": out => {
         out.w("Foo!");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/at-tags/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tags/snapshots/vdom-expected.js
index 0e304a43a..9c221c580 100644
--- a/packages/translator-default/test/fixtures/at-tags/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/at-tags/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,14 +10,13 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "renderBody": out => {
         out.t("Foo!", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/at-tags/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/at-tags/snapshots/vdomProduction-expected.js
index 8249be115..a5d083870 100644
--- a/packages/translator-default/test/fixtures/at-tags/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/at-tags/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "hNiObgtw",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,14 +10,13 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_hello, {
-    "foo": {
+  _marko_tag(_hello, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("foo", {
       "renderBody": out => {
         out.t("Foo!", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/cjs-expected.js
index 80b3ea7f7..c34ebc3b6 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/cjs-expected.js
@@ -7,7 +7,7 @@ var _classValue = _interopRequireDefault(require("marko/src/runtime/helpers/clas
 var _attr = _interopRequireDefault(require("marko/src/runtime/html/helpers/attr.js"));
 var _customTag2 = _interopRequireDefault(require("./components/custom-tag.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _dynamicTag = _interopRequireDefault(require("marko/src/runtime/helpers/dynamic-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,21 +31,21 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   (0, _renderTag.default)(_customTag2.default, {
     "class": ["a", false, "b"]
   }, out, _componentDef, "4");
-  (0, _dynamicTag.default)(out, input.test, () => ({
-    "class": ["a", {
-      b: c,
-      d
-    }],
-    "test": {
+  (0, _dynamicTag.default)(out, input.test, () => (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("test", {
       "class": ["a", {
         b: c,
         d
       }],
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }
+      }
+    });
+  }, {
+    "class": ["a", {
+      b: c,
+      d
+    }]
   }), null, null, null, _componentDef, "5");
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/html-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/html-expected.js
index cef78457f..6ebcf95f2 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/html-expected.js
@@ -6,7 +6,7 @@ import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
@@ -26,21 +26,21 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "class": ["a", false, "b"]
   }, out, _componentDef, "4");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "class": ["a", {
-      b: c,
-      d
-    }],
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "class": ["a", {
         b: c,
         d
       }],
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
+      }
+    });
+  }, {
+    "class": ["a", {
+      b: c,
+      d
+    }]
   }), null, null, null, _componentDef, "5");
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/htmlProduction-expected.js
index 7adf2db21..4c87f1f47 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/htmlProduction-expected.js
@@ -6,7 +6,7 @@ import _marko_class_merge from "marko/dist/runtime/helpers/class-value.js";
 import _marko_attr from "marko/dist/runtime/html/helpers/attr.js";
 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";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
@@ -24,21 +24,21 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "class": ["a", false, "b"]
   }, out, _componentDef, "4");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "class": ["a", {
-      b: c,
-      d
-    }],
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "class": ["a", {
         b: c,
         d
       }],
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
+      }
+    });
+  }, {
+    "class": ["a", {
+      b: c,
+      d
+    }]
   }), null, null, null, _componentDef, "5");
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/vdom-expected.js
index 61bf8b11f..da3fb075c 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/vdom-expected.js
@@ -5,7 +5,7 @@ export default _marko_template;
 import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
@@ -33,21 +33,21 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "class": ["a", false, "b"]
   }, out, _componentDef, "4");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "class": ["a", {
-      b: c,
-      d
-    }],
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "class": ["a", {
         b: c,
         d
       }],
       "renderBody": out => {
         out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
+      }
+    });
+  }, {
+    "class": ["a", {
+      b: c,
+      d
+    }]
   }), null, null, null, _componentDef, "5");
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
index fb47c5496..6577ba27c 100644
--- a/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-class/snapshots/vdomProduction-expected.js
@@ -12,7 +12,7 @@ const _marko_node2 = _marko_constElement("div", {
 }, 0);
 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";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
@@ -36,21 +36,21 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "class": ["a", false, "b"]
   }, out, _componentDef, "4");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "class": ["a", {
-      b: c,
-      d
-    }],
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "class": ["a", {
         b: c,
         d
       }],
       "renderBody": out => {
         out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
+      }
+    });
+  }, {
+    "class": ["a", {
+      b: c,
+      d
+    }]
   }), null, null, null, _componentDef, "5");
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/cjs-expected.js
index 3c7d83091..d68711e6f 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/cjs-expected.js
@@ -7,7 +7,7 @@ var _styleValue = _interopRequireDefault(require("marko/src/runtime/helpers/styl
 var _attr = _interopRequireDefault(require("marko/src/runtime/html/helpers/attr.js"));
 var _customTag2 = _interopRequireDefault(require("./components/custom-tag.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _dynamicTag = _interopRequireDefault(require("marko/src/runtime/helpers/dynamic-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,18 +34,18 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   (0, _renderTag.default)(_customTag2.default, {
     "style": "color: green"
   }, out, _componentDef, "5");
-  (0, _dynamicTag.default)(out, input.test, () => ({
-    "style": {
-      color: "green"
-    },
-    "test": {
+  (0, _dynamicTag.default)(out, input.test, () => (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("test", {
       "style": {
         color: "green"
       },
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _selfIterator.default
+      }
+    });
+  }, {
+    "style": {
+      color: "green"
     }
   }), null, null, null, _componentDef, "6");
 }, {
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/html-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/html-expected.js
index 802dd675e..3558a2ea3 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/html-expected.js
@@ -6,7 +6,7 @@ import _marko_style_merge from "marko/src/runtime/helpers/style-value.js";
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
@@ -29,18 +29,18 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "style": "color: green"
   }, out, _componentDef, "5");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "style": {
-      color: "green"
-    },
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "style": {
         color: "green"
       },
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
+      }
+    });
+  }, {
+    "style": {
+      color: "green"
     }
   }), null, null, null, _componentDef, "6");
 }, {
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/htmlProduction-expected.js
index 58eb2f943..e8099206d 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/htmlProduction-expected.js
@@ -6,7 +6,7 @@ import _marko_style_merge from "marko/dist/runtime/helpers/style-value.js";
 import _marko_attr from "marko/dist/runtime/html/helpers/attr.js";
 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";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
@@ -27,18 +27,18 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "style": "color: green"
   }, out, _componentDef, "5");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "style": {
-      color: "green"
-    },
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "style": {
         color: "green"
       },
       "renderBody": out => {
         out.w("Hello");
-      },
-      [Symbol.iterator]: _marko_self_iterator
+      }
+    });
+  }, {
+    "style": {
+      color: "green"
     }
   }), null, null, null, _componentDef, "6");
 }, {
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/vdom-expected.js
index d1f3dec18..303b168fa 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/vdom-expected.js
@@ -5,7 +5,7 @@ export default _marko_template;
 import _marko_style_merge from "marko/src/runtime/helpers/style-value.js";
 import _customTag from "./components/custom-tag.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
@@ -36,18 +36,18 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "style": "color: green"
   }, out, _componentDef, "5");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "style": {
-      color: "green"
-    },
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "style": {
         color: "green"
       },
       "renderBody": out => {
         out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
+      }
+    });
+  }, {
+    "style": {
+      color: "green"
     }
   }), null, null, null, _componentDef, "6");
 }, {
diff --git a/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
index 37fd30159..6df6e773b 100644
--- a/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/attr-style/snapshots/vdomProduction-expected.js
@@ -12,7 +12,7 @@ const _marko_node2 = _marko_constElement("div", {
 }, 0);
 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";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
@@ -39,18 +39,18 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_customTag, {
     "style": "color: green"
   }, out, _componentDef, "5");
-  _marko_dynamic_tag(out, input.test, () => ({
-    "style": {
-      color: "green"
-    },
-    "test": {
+  _marko_dynamic_tag(out, input.test, () => _marko_render_input(() => {
+    _marko_repeatable_attr_tag("test", {
       "style": {
         color: "green"
       },
       "renderBody": out => {
         out.t("Hello", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
+      }
+    });
+  }, {
+    "style": {
+      color: "green"
     }
   }), null, null, null, _componentDef, "6");
 }, {
diff --git a/packages/translator-default/test/fixtures/await-tag/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/await-tag/snapshots/cjs-expected.js
index 35be1390d..7b956da31 100644
--- a/packages/translator-default/test/fixtures/await-tag/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/await-tag/snapshots/cjs-expected.js
@@ -4,7 +4,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
 var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _renderer = _interopRequireDefault(require("marko/src/core-tags/core/await/renderer.js"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer2 = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -14,16 +14,16 @@ const _marko_componentType = "packages/translator-default/test/fixtures/await-ta
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer2.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _renderTag.default)(_renderer.default, {
-    "_provider": promise,
-    "_name": "promise",
-    "then": {
+  (0, _renderTag.default)(_renderer.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("then", {
       "renderBody": (out, result) => {
         out.w((0, _escapeXml.x)(result));
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }, {
+    "_provider": promise,
+    "_name": "promise"
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/await-tag/snapshots/html-expected.js b/packages/translator-default/test/fixtures/await-tag/snapshots/html-expected.js
index 7a3c533d0..7aced4d7e 100644
--- a/packages/translator-default/test/fixtures/await-tag/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/await-tag/snapshots/html-expected.js
@@ -3,22 +3,22 @@ const _marko_componentType = "packages/translator-default/test/fixtures/await-ta
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _await from "marko/src/core-tags/core/await/renderer.js";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  _marko_tag(_await, {
-    "_provider": promise,
-    "_name": "promise",
-    "then": {
+  _marko_tag(_await, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("then", {
       "renderBody": (out, result) => {
         out.w(_marko_escapeXml(result));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }, {
+    "_provider": promise,
+    "_name": "promise"
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/await-tag/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/await-tag/snapshots/htmlProduction-expected.js
index 4822aced8..b5f93a37c 100644
--- a/packages/translator-default/test/fixtures/await-tag/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/await-tag/snapshots/htmlProduction-expected.js
@@ -3,22 +3,22 @@ const _marko_componentType = "8BXCo81d",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _await from "marko/dist/core-tags/core/await/renderer.js";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  _marko_tag(_await, {
-    "_provider": promise,
-    "_name": "promise",
-    "then": {
+  _marko_tag(_await, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("then", {
       "renderBody": (out, result) => {
         out.w(_marko_escapeXml(result));
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }, {
+    "_provider": promise,
+    "_name": "promise"
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/await-tag/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/await-tag/snapshots/vdom-expected.js
index b33f73e84..8bd49b678 100644
--- a/packages/translator-default/test/fixtures/await-tag/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/await-tag/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/await-tag/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _await from "marko/src/core-tags/core/await/renderer.js";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,16 +10,16 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_await, {
-    "_provider": promise,
-    "_name": "promise",
-    "then": {
+  _marko_tag(_await, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("then", {
       "renderBody": (out, result) => {
         out.t(result, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }, {
+    "_provider": promise,
+    "_name": "promise"
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/await-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/await-tag/snapshots/vdomProduction-expected.js
index 1a4c1bfeb..be510841e 100644
--- a/packages/translator-default/test/fixtures/await-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/await-tag/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "8BXCo81d",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _await from "marko/dist/core-tags/core/await/renderer.js";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,16 +10,16 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_await, {
-    "_provider": promise,
-    "_name": "promise",
-    "then": {
+  _marko_tag(_await, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("then", {
       "renderBody": (out, result) => {
         out.t(result, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }
-  }, out, _componentDef, "0");
+      }
+    });
+  }, {
+    "_provider": promise,
+    "_name": "promise"
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/cjs-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/cjs-error-expected.txt
new file mode 100644
index 000000000..a402cb964
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/cjs-error-expected.txt
@@ -0,0 +1,8 @@
+CompileError: 
+    at packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko:2:5
+      1 | <${stuff}>
+    > 2 |     <if(x)>
+        |     ^ Cannot mix @tags with other content when under a control flow.
+      3 |         <@header class="my-header">
+      4 |             Header content
+      5 |         </@header>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/generated-expected.marko b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/generated-expected.marko
new file mode 100644
index 000000000..3f1942c1d
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/generated-expected.marko
@@ -0,0 +1,8 @@
+<${stuff}>
+  <if(x)>
+    <@header class="my-header">
+      Header content
+    </@header>
+    Body content
+  </if>
+</>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/html-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/html-error-expected.txt
new file mode 100644
index 000000000..a402cb964
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/html-error-expected.txt
@@ -0,0 +1,8 @@
+CompileError: 
+    at packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko:2:5
+      1 | <${stuff}>
+    > 2 |     <if(x)>
+        |     ^ Cannot mix @tags with other content when under a control flow.
+      3 |         <@header class="my-header">
+      4 |             Header content
+      5 |         </@header>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/htmlProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/htmlProduction-error-expected.txt
new file mode 100644
index 000000000..a402cb964
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/htmlProduction-error-expected.txt
@@ -0,0 +1,8 @@
+CompileError: 
+    at packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko:2:5
+      1 | <${stuff}>
+    > 2 |     <if(x)>
+        |     ^ Cannot mix @tags with other content when under a control flow.
+      3 |         <@header class="my-header">
+      4 |             Header content
+      5 |         </@header>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/hydrate-expected.js b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/hydrate-expected.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdom-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdom-error-expected.txt
new file mode 100644
index 000000000..a402cb964
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdom-error-expected.txt
@@ -0,0 +1,8 @@
+CompileError: 
+    at packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko:2:5
+      1 | <${stuff}>
+    > 2 |     <if(x)>
+        |     ^ Cannot mix @tags with other content when under a control flow.
+      3 |         <@header class="my-header">
+      4 |             Header content
+      5 |         </@header>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdomProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdomProduction-error-expected.txt
new file mode 100644
index 000000000..a402cb964
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/snapshots/vdomProduction-error-expected.txt
@@ -0,0 +1,8 @@
+CompileError: 
+    at packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko:2:5
+      1 | <${stuff}>
+    > 2 |     <if(x)>
+        |     ^ Cannot mix @tags with other content when under a control flow.
+      3 |         <@header class="my-header">
+      4 |             Header content
+      5 |         </@header>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko
new file mode 100644
index 000000000..1076efe68
--- /dev/null
+++ b/packages/translator-default/test/fixtures/error-at-tags-control-flow-mixed/template.marko
@@ -0,0 +1,9 @@
+<${stuff}>
+    <if(x)>
+        <@header class="my-header">
+            Header content
+        </@header>
+
+        Body content
+    </>
+</>
diff --git a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/cjs-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/cjs-error-expected.txt
index 45088d7aa..8f80f0c67 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/cjs-error-expected.txt
+++ b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/cjs-error-expected.txt
@@ -1,9 +1,9 @@
 CompileError: 
-    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:9:6
-       7 |     Body content
-       8 |
-    >  9 |     <@footer class="my-footer">
-         |      ^^^^^^^ @tags must be within a custom element.
-      10 |         Footer content
-      11 |     </@footer>
-      12 | </div>
\ No newline at end of file
+    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:3:6
+      1 | <div>
+      2 |
+    > 3 |     <@header class="my-header">
+        |      ^^^^^^^ @tags must be nested within another element.
+      4 |         Header content
+      5 |     </@header>
+      6 |
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/html-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/html-error-expected.txt
index 45088d7aa..8f80f0c67 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/html-error-expected.txt
+++ b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/html-error-expected.txt
@@ -1,9 +1,9 @@
 CompileError: 
-    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:9:6
-       7 |     Body content
-       8 |
-    >  9 |     <@footer class="my-footer">
-         |      ^^^^^^^ @tags must be within a custom element.
-      10 |         Footer content
-      11 |     </@footer>
-      12 | </div>
\ No newline at end of file
+    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:3:6
+      1 | <div>
+      2 |
+    > 3 |     <@header class="my-header">
+        |      ^^^^^^^ @tags must be nested within another element.
+      4 |         Header content
+      5 |     </@header>
+      6 |
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/htmlProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/htmlProduction-error-expected.txt
index 45088d7aa..8f80f0c67 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/htmlProduction-error-expected.txt
+++ b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/htmlProduction-error-expected.txt
@@ -1,9 +1,9 @@
 CompileError: 
-    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:9:6
-       7 |     Body content
-       8 |
-    >  9 |     <@footer class="my-footer">
-         |      ^^^^^^^ @tags must be within a custom element.
-      10 |         Footer content
-      11 |     </@footer>
-      12 | </div>
\ No newline at end of file
+    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:3:6
+      1 | <div>
+      2 |
+    > 3 |     <@header class="my-header">
+        |      ^^^^^^^ @tags must be nested within another element.
+      4 |         Header content
+      5 |     </@header>
+      6 |
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdom-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdom-error-expected.txt
index 45088d7aa..8f80f0c67 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdom-error-expected.txt
+++ b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdom-error-expected.txt
@@ -1,9 +1,9 @@
 CompileError: 
-    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:9:6
-       7 |     Body content
-       8 |
-    >  9 |     <@footer class="my-footer">
-         |      ^^^^^^^ @tags must be within a custom element.
-      10 |         Footer content
-      11 |     </@footer>
-      12 | </div>
\ No newline at end of file
+    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:3:6
+      1 | <div>
+      2 |
+    > 3 |     <@header class="my-header">
+        |      ^^^^^^^ @tags must be nested within another element.
+      4 |         Header content
+      5 |     </@header>
+      6 |
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdomProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdomProduction-error-expected.txt
index 45088d7aa..8f80f0c67 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdomProduction-error-expected.txt
+++ b/packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/snapshots/vdomProduction-error-expected.txt
@@ -1,9 +1,9 @@
 CompileError: 
-    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:9:6
-       7 |     Body content
-       8 |
-    >  9 |     <@footer class="my-footer">
-         |      ^^^^^^^ @tags must be within a custom element.
-      10 |         Footer content
-      11 |     </@footer>
-      12 | </div>
\ No newline at end of file
+    at packages/translator-default/test/fixtures/error-at-tags-native-tag-parent/template.marko:3:6
+      1 | <div>
+      2 |
+    > 3 |     <@header class="my-header">
+        |      ^^^^^^^ @tags must be nested within another element.
+      4 |         Header content
+      5 |     </@header>
+      6 |
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-error-expected.txt
deleted file mode 100644
index 49b3ce9e6..000000000
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-error-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko(5,6): Only one "@header" tag is allowed here.
-  3 |         Header content
-  4 |     </@header>
-> 5 |     <@header class="my-header">
-    |      ^^^^^^^
-  6 |         Header content
-  7 |     </@header>
-  8 | </some-tag>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-expected.js
index a547ad387..ae202542a 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/cjs-expected.js
@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _index2 = _interopRequireDefault(require("./components/some-tag/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
@@ -13,21 +13,20 @@ const _marko_componentType = "packages/translator-default/test/fixtures/error-at
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  (0, _renderTag.default)(_index2.default, {
-    "header": [{
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }, {
+      }
+    });
+    (0, _attrTag.a)("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    }]
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-error-expected.txt
deleted file mode 100644
index 49b3ce9e6..000000000
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-error-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko(5,6): Only one "@header" tag is allowed here.
-  3 |         Header content
-  4 |     </@header>
-> 5 |     <@header class="my-header">
-    |      ^^^^^^^
-  6 |         Header content
-  7 |     </@header>
-  8 | </some-tag>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-expected.js b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-expected.js
index 170e78325..802cca015 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/html-expected.js
@@ -2,27 +2,26 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _someTag from "./components/some-tag/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.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) {
-  _marko_tag(_someTag, {
-    "header": [{
+  _marko_tag(_someTag, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }, {
+      }
+    });
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }]
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-error-expected.txt
deleted file mode 100644
index 49b3ce9e6..000000000
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-error-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko(5,6): Only one "@header" tag is allowed here.
-  3 |         Header content
-  4 |     </@header>
-> 5 |     <@header class="my-header">
-    |      ^^^^^^^
-  6 |         Header content
-  7 |     </@header>
-  8 | </some-tag>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-expected.js
index 2497293df..8ea3dba20 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/htmlProduction-expected.js
@@ -2,27 +2,26 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "QmMQupx3",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _someTag from "./components/some-tag/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.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) {
-  _marko_tag(_someTag, {
-    "header": [{
+  _marko_tag(_someTag, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }, {
+      }
+    });
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.w("Header content");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }]
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-error-expected.txt
deleted file mode 100644
index 49b3ce9e6..000000000
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-error-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko(5,6): Only one "@header" tag is allowed here.
-  3 |         Header content
-  4 |     </@header>
-> 5 |     <@header class="my-header">
-    |      ^^^^^^^
-  6 |         Header content
-  7 |     </@header>
-  8 | </some-tag>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-expected.js
index 2764e26bb..db835cf72 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdom-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _someTag from "./components/some-tag/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -10,21 +10,20 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_someTag, {
-    "header": [{
+  _marko_tag(_someTag, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }, {
+      }
+    });
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }]
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-error-expected.txt
deleted file mode 100644
index 49b3ce9e6..000000000
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-error-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/template.marko(5,6): Only one "@header" tag is allowed here.
-  3 |         Header content
-  4 |     </@header>
-> 5 |     <@header class="my-header">
-    |      ^^^^^^^
-  6 |         Header content
-  7 |     </@header>
-  8 | </some-tag>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-expected.js
index 180102098..fd036b493 100644
--- a/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/error-at-tags-repeated-not-allowed/snapshots/vdomProduction-expected.js
@@ -2,7 +2,7 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "QmMQupx3",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import _someTag from "./components/some-tag/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
@@ -10,21 +10,20 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  _marko_tag(_someTag, {
-    "header": [{
+  _marko_tag(_someTag, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }, {
+      }
+    });
+    _marko_repeatable_attr_tag("header", {
       "class": "my-header",
       "renderBody": out => {
         out.t("Header content", _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    }]
-  }, out, _componentDef, "0");
+      }
+    });
+  }), out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/cjs-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/cjs-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/cjs-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/generated-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/generated-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/generated-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/html-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/html-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/html-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/htmlProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/htmlProduction-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/htmlProduction-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/hydrate-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/hydrate-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/hydrate-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdom-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdom-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdom-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-error-expected.txt b/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-error-expected.txt
deleted file mode 100644
index cc1d3f512..000000000
--- a/packages/translator-default/test/fixtures/error-class-with-name/snapshots/vdomProduction-error-expected.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-class-with-name/template.marko:1:7
-    > 1 | class Test {
-        |       ^^^^ Component class cannot have a name.
-      2 |   onCreate() {
-      3 |
-      4 |   }
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/generated-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/generated-error-expected.txt
deleted file mode 100644
index d0edaf3a0..000000000
--- a/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/generated-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-invalid-attributes/template.marko:1:28
-    > 1 | <macro|stuff| name="thing" x=1>
-        |                            ^^^ The "macro" tag can only have a "name" attribute.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/hydrate-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/hydrate-error-expected.txt
deleted file mode 100644
index d0edaf3a0..000000000
--- a/packages/translator-default/test/fixtures/error-macro-invalid-attributes/snapshots/hydrate-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-invalid-attributes/template.marko:1:28
-    > 1 | <macro|stuff| name="thing" x=1>
-        |                            ^^^ The "macro" tag can only have a "name" attribute.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/generated-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/generated-error-expected.txt
deleted file mode 100644
index f0e83a336..000000000
--- a/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/generated-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/template.marko:1:20
-    > 1 | <macro|stuff| name=1>
-        |                    ^ The "name" attribute for "macro" tags must be a string literal.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/hydrate-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/hydrate-error-expected.txt
deleted file mode 100644
index f0e83a336..000000000
--- a/packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/snapshots/hydrate-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-invalid-name-attribute/template.marko:1:20
-    > 1 | <macro|stuff| name=1>
-        |                    ^ The "name" attribute for "macro" tags must be a string literal.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/generated-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/generated-error-expected.txt
deleted file mode 100644
index be1e1e3c7..000000000
--- a/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/generated-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-missing-name/template.marko:1:2
-    > 1 | <macro|stuff|>
-        |  ^^^^^ The "name" attribute is required on "macro" tags.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/hydrate-error-expected.txt b/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/hydrate-error-expected.txt
deleted file mode 100644
index be1e1e3c7..000000000
--- a/packages/translator-default/test/fixtures/error-macro-missing-name/snapshots/hydrate-error-expected.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-CompileError
-    at packages/translator-default/test/fixtures/error-macro-missing-name/template.marko:1:2
-    > 1 | <macro|stuff|>
-        |  ^^^^^ The "name" attribute is required on "macro" tags.
-      2 |   <div/>
-      3 | </macro>
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/generated-error-expected.txt b/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/generated-error-expected.txt
deleted file mode 100644
index 7dc1fa1e2..000000000
--- a/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/generated-error-expected.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-Invalid tag file: packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/components/some-tag/marko-tag.json. Neither a renderer or a template was found for tag. {
-  "@a": "string"
-}
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/hydrate-error-expected.txt b/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/hydrate-error-expected.txt
deleted file mode 100644
index 7dc1fa1e2..000000000
--- a/packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/snapshots/hydrate-error-expected.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-Invalid tag file: packages/translator-default/test/fixtures/error-missing-entry-marko-tag-json/components/some-tag/marko-tag.json. Neither a renderer or a template was found for tag. {
-  "@a": "string"
-}
\ No newline at end of file
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
index 2cb593722..24ef496d5 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
@@ -11,7 +11,7 @@ var _classValue = _interopRequireDefault(require("marko/src/runtime/helpers/clas
 var _dynamicTag = _interopRequireDefault(require("marko/src/runtime/helpers/dynamic-tag.js"));
 var _index2 = _interopRequireDefault(require("./components/other/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
-var _selfIterator = _interopRequireDefault(require("marko/src/runtime/helpers/self-iterator.js"));
+var _attrTag = require("marko/src/runtime/helpers/attr-tag.js");
 var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
 var _mergeAttrs = _interopRequireDefault(require("marko/src/runtime/html/helpers/merge-attrs.js"));
 var _attrs = _interopRequireDefault(require("marko/src/runtime/html/helpers/attrs.js"));
@@ -71,31 +71,31 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
       out.w("<div></div>");
     }
   }, out, _componentDef, "12", [["click", "handleClick", false, [_b.default, b, ...d]]]);
-  (0, _renderTag.default)(_index2.default, {
+  (0, _renderTag.default)(_index2.default, (0, _attrTag.i)(() => {
+    (0, _attrTag.a)("c", (0, _attrTag.i)(() => {
+      (0, _attrTag.a)("d", {
+        "d": 1,
+        "renderBody": out => {
+          out.w("<div></div>");
+        }
+      });
+      return out => {
+        out.w("<div></div>");
+      };
+    }, {
+      "c": 1
+    }));
+    return out => {
+      out.w("<div></div>");
+    };
+  }, {
     "x": 1,
     ...thing,
     "b": {
       a: 1
     },
-    ...c,
-    "c": {
-      "c": 1,
-      "d": {
-        "d": 1,
-        "renderBody": out => {
-          out.w("<div></div>");
-        },
-        [Symbol.iterator]: _selfIterator.default
-      },
-      "renderBody": out => {
-        out.w("<div></div>");
-      },
-      [Symbol.iterator]: _selfIterator.default
-    },
-    "renderBody": (out, b) => {
-      out.w("<div></div>");
-    }
-  }, out, _componentDef, "14");
+    ...c
+  }), out, _componentDef, "14");
   out.w(`<div${(0, _mergeAttrs.default)({
     "class": "b c",
     "a": "{\"a\":1}",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/generated-expected.marko b/packages/translator-default/test/fixtures/sanity-check/snapshots/generated-expected.marko
index 9d575ffdf..c1e775d08 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/generated-expected.marko
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/generated-expected.marko
@@ -53,7 +53,7 @@ $ let c = thing;
 <other|a| on-click("handleClick", a, b, ...d)>
   <div/>
 </other>
-<other|b| x=1 ...thing b={
+<other x=1 ...thing b={
   a: 1
 } ...c>
   <div/>
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
index c14e8b836..7f7fd7e02 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
@@ -15,7 +15,7 @@ import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _other from "./components/other/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
 import _marko_merge_attrs from "marko/src/runtime/html/helpers/merge-attrs.js";
 import _marko_attrs from "marko/src/runtime/html/helpers/attrs.js";
@@ -66,31 +66,31 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       out.w("<div></div>");
     }
   }, out, _componentDef, "12", [["click", "handleClick", false, [a, b, ...d]]]);
-  _marko_tag(_other, {
+  _marko_tag(_other, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("c", _marko_render_input(() => {
+      _marko_repeatable_attr_tag("d", {
+        "d": 1,
+        "renderBody": out => {
+          out.w("<div></div>");
+        }
+      });
+      return out => {
+        out.w("<div></div>");
+      };
+    }, {
+      "c": 1
+    }));
+    return out => {
+      out.w("<div></div>");
+    };
+  }, {
     "x": 1,
     ...thing,
     "b": {
       a: 1
     },
-    ...c,
-    "c": {
-      "c": 1,
-      "d": {
-        "d": 1,
-        "renderBody": out => {
-          out.w("<div></div>");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      },
-      "renderBody": out => {
-        out.w("<div></div>");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": (out, b) => {
-      out.w("<div></div>");
-    }
-  }, out, _componentDef, "14");
+    ...c
+  }), out, _componentDef, "14");
   out.w(`<div${_marko_merge_attrs({
     "class": "b c",
     "a": "{\"a\":1}",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
index 645615083..81002f2c9 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
@@ -15,7 +15,7 @@ import _marko_class_merge from "marko/dist/runtime/helpers/class-value.js";
 import _marko_dynamic_tag from "marko/dist/runtime/helpers/dynamic-tag.js";
 import _other from "./components/other/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
 import _marko_merge_attrs from "marko/dist/runtime/html/helpers/merge-attrs.js";
 import _marko_attrs from "marko/dist/runtime/html/helpers/attrs.js";
@@ -53,31 +53,31 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       out.w("<div></div>");
     }
   }, out, _componentDef, "12", [["click", "handleClick", false, [a, b, ...d]]]);
-  _marko_tag(_other, {
+  _marko_tag(_other, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("c", _marko_render_input(() => {
+      _marko_repeatable_attr_tag("d", {
+        "d": 1,
+        "renderBody": out => {
+          out.w("<div></div>");
+        }
+      });
+      return out => {
+        out.w("<div></div>");
+      };
+    }, {
+      "c": 1
+    }));
+    return out => {
+      out.w("<div></div>");
+    };
+  }, {
     "x": 1,
     ...thing,
     "b": {
       a: 1
     },
-    ...c,
-    "c": {
-      "c": 1,
-      "d": {
-        "d": 1,
-        "renderBody": out => {
-          out.w("<div></div>");
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      },
-      "renderBody": out => {
-        out.w("<div></div>");
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": (out, b) => {
-      out.w("<div></div>");
-    }
-  }, out, _componentDef, "14");
+    ...c
+  }), out, _componentDef, "14");
   out.w(`<div${_marko_merge_attrs({
     "class": "b c",
     "a": "{\"a\":1}",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
index 4ab94e1f9..aaa6b04da 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
@@ -12,7 +12,7 @@ import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
 import _other from "./components/other/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
-import _marko_self_iterator from "marko/src/runtime/helpers/self-iterator.js";
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/src/runtime/helpers/attr-tag.js";
 import _marko_merge_attrs from "marko/src/runtime/vdom/helpers/merge-attrs.js";
 import _marko_attrs from "marko/src/runtime/vdom/helpers/attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
@@ -83,31 +83,31 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       out.e("div", null, "13", _component, 0, 0);
     }
   }, out, _componentDef, "12", [["click", "handleClick", false, [a, b, ...d]]]);
-  _marko_tag(_other, {
+  _marko_tag(_other, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("c", _marko_render_input(() => {
+      _marko_repeatable_attr_tag("d", {
+        "d": 1,
+        "renderBody": out => {
+          out.e("div", null, "15", _component, 0, 0);
+        }
+      });
+      return out => {
+        out.e("div", null, "16", _component, 0, 0);
+      };
+    }, {
+      "c": 1
+    }));
+    return out => {
+      out.e("div", null, "17", _component, 0, 0);
+    };
+  }, {
     "x": 1,
     ...thing,
     "b": {
       a: 1
     },
-    ...c,
-    "c": {
-      "c": 1,
-      "d": {
-        "d": 1,
-        "renderBody": out => {
-          out.e("div", null, "17", _component, 0, 0);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      },
-      "renderBody": out => {
-        out.e("div", null, "16", _component, 0, 0);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": (out, b) => {
-      out.e("div", null, "15", _component, 0, 0);
-    }
-  }, out, _componentDef, "14");
+    ...c
+  }), out, _componentDef, "14");
   out.be("div", _marko_merge_attrs({
     "class": "b c",
     "a": "{\"a\":1}",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
index 213d04620..a57a1a526 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
@@ -19,9 +19,9 @@ const _marko_node3 = _marko_constElement("div", null, 0);
 import _other from "./components/other/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 const _marko_node4 = _marko_constElement("div", null, 0);
+import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";
 const _marko_node5 = _marko_constElement("div", null, 0);
 const _marko_node6 = _marko_constElement("div", null, 0);
-import _marko_self_iterator from "marko/dist/runtime/helpers/self-iterator.js";
 const _marko_node7 = _marko_constElement("div", {
   "c": "1"
 }, 0);
@@ -100,31 +100,31 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
       out.n(_marko_node3, _component);
     }
   }, out, _componentDef, "12", [["click", "handleClick", false, [a, b, ...d]]]);
-  _marko_tag(_other, {
+  _marko_tag(_other, _marko_render_input(() => {
+    _marko_repeatable_attr_tag("c", _marko_render_input(() => {
+      _marko_repeatable_attr_tag("d", {
+        "d": 1,
+        "renderBody": out => {
+          out.n(_marko_node4, _component);
+        }
+      });
+      return out => {
+        out.n(_marko_node5, _component);
+      };
+    }, {
+      "c": 1
+    }));
+    return out => {
+      out.n(_marko_node6, _component);
+    };
+  }, {
     "x": 1,
     ...thing,
     "b": {
       a: 1
     },
-    ...c,
-    "c": {
-      "c": 1,
-      "d": {
-        "d": 1,
-        "renderBody": out => {
-          out.n(_marko_node6, _component);
-        },
-        [Symbol.iterator]: _marko_self_iterator
-      },
-      "renderBody": out => {
-        out.n(_marko_node5, _component);
-      },
-      [Symbol.iterator]: _marko_self_iterator
-    },
-    "renderBody": (out, b) => {
-      out.n(_marko_node4, _component);
-    }
-  }, out, _componentDef, "14");
+    ...c
+  }), out, _componentDef, "14");
   out.be("div", _marko_merge_attrs({
     "class": "b c",
     "a": "{\"a\":1}",
diff --git a/packages/translator-default/test/fixtures/sanity-check/template.marko b/packages/translator-default/test/fixtures/sanity-check/template.marko
index f185c01ff..da74c2bb5 100644
--- a/packages/translator-default/test/fixtures/sanity-check/template.marko
+++ b/packages/translator-default/test/fixtures/sanity-check/template.marko
@@ -61,7 +61,7 @@ $ let c = thing;
   <div/>
 </other>
 
-<other|b| x=1 ...thing b={ a: 1 } ...c>
+<other x=1 ...thing b={ a: 1 } ...c>
   <div/>
   <@c c=1>
     <div/>

From 9dd7c75b5df5bc0ccc67c13f46251039a727aa9c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 Feb 2024 22:19:24 +0000
Subject: [PATCH 09/20] [ci] release

---
 .changeset/friendly-doors-sit.md         |  7 -------
 package-lock.json                        | 16 ++++++++--------
 packages/compiler/CHANGELOG.md           |  6 ++++++
 packages/compiler/package.json           |  4 ++--
 packages/marko/CHANGELOG.md              | 10 ++++++++++
 packages/marko/package.json              |  6 +++---
 packages/translator-default/CHANGELOG.md |  6 ++++++
 packages/translator-default/package.json |  6 +++---
 8 files changed, 38 insertions(+), 23 deletions(-)
 delete mode 100644 .changeset/friendly-doors-sit.md

diff --git a/.changeset/friendly-doors-sit.md b/.changeset/friendly-doors-sit.md
deleted file mode 100644
index 591b80816..000000000
--- a/.changeset/friendly-doors-sit.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
-"@marko/compiler": patch
----
-
-Improve nested attribute tag handling with scriptlets.
diff --git a/package-lock.json b/package-lock.json
index 56347ff3b..58b21c1bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11894,7 +11894,7 @@
     },
     "packages/compiler": {
       "name": "@marko/compiler",
-      "version": "5.34.6",
+      "version": "5.34.7",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -11922,7 +11922,7 @@
         "source-map-support": "^0.5.21"
       },
       "devDependencies": {
-        "@marko/translator-default": "^5.31.13"
+        "@marko/translator-default": "^5.31.15"
       }
     },
     "packages/compiler/node_modules/jsesc": {
@@ -11940,11 +11940,11 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.9",
+      "version": "5.32.10",
       "license": "MIT",
       "dependencies": {
-        "@marko/compiler": "^5.34.6",
-        "@marko/translator-default": "^5.31.14",
+        "@marko/compiler": "^5.34.7",
+        "@marko/translator-default": "^5.31.15",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
@@ -11968,7 +11968,7 @@
     },
     "packages/translator-default": {
       "name": "@marko/translator-default",
-      "version": "5.31.14",
+      "version": "5.31.15",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.8",
@@ -11977,8 +11977,8 @@
         "self-closing-tags": "^1.0.1"
       },
       "devDependencies": {
-        "@marko/compiler": "^5.34.6",
-        "marko": "^5.32.8"
+        "@marko/compiler": "^5.34.7",
+        "marko": "^5.32.10"
       },
       "peerDependencies": {
         "@marko/compiler": "^5.16.1",
diff --git a/packages/compiler/CHANGELOG.md b/packages/compiler/CHANGELOG.md
index b2c7a57ab..5ad4bb863 100644
--- a/packages/compiler/CHANGELOG.md
+++ b/packages/compiler/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.34.7
+
+### Patch Changes
+
+- [#2115](https://github.com/marko-js/marko/pull/2115) [`a55fb06`](https://github.com/marko-js/marko/commit/a55fb06ec638eb830eb72c71cb766fc05b6ea8cb) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Improve nested attribute tag handling with scriptlets.
+
 ## 5.34.6
 
 ### Patch Changes
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
index 1c9047333..79329d611 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marko/compiler",
-  "version": "5.34.6",
+  "version": "5.34.7",
   "description": "Marko template to JS compiler.",
   "keywords": [
     "babel",
@@ -60,7 +60,7 @@
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@marko/translator-default": "^5.31.13"
+    "@marko/translator-default": "^5.31.15"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 18441d908..98550f30b 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log
 
+## 5.32.10
+
+### Patch Changes
+
+- [#2115](https://github.com/marko-js/marko/pull/2115) [`a55fb06`](https://github.com/marko-js/marko/commit/a55fb06ec638eb830eb72c71cb766fc05b6ea8cb) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Improve nested attribute tag handling with scriptlets.
+
+- Updated dependencies [[`a55fb06`](https://github.com/marko-js/marko/commit/a55fb06ec638eb830eb72c71cb766fc05b6ea8cb)]:
+  - @marko/translator-default@5.31.15
+  - @marko/compiler@5.34.7
+
 ## 5.32.9
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index d8d232e46..1398de79a 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.9",
+    "version": "5.32.10",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",
@@ -64,8 +64,8 @@
         "build": "babel ./src --out-dir ./dist --delete-dir-on-start --copy-files --config-file ../../babel.config.js --env-name=production"
     },
     "dependencies": {
-        "@marko/compiler": "^5.34.6",
-        "@marko/translator-default": "^5.31.14",
+        "@marko/compiler": "^5.34.7",
+        "@marko/translator-default": "^5.31.15",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
diff --git a/packages/translator-default/CHANGELOG.md b/packages/translator-default/CHANGELOG.md
index fc3f863bd..f9cc86f9d 100644
--- a/packages/translator-default/CHANGELOG.md
+++ b/packages/translator-default/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.31.15
+
+### Patch Changes
+
+- [#2115](https://github.com/marko-js/marko/pull/2115) [`a55fb06`](https://github.com/marko-js/marko/commit/a55fb06ec638eb830eb72c71cb766fc05b6ea8cb) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Improve nested attribute tag handling with scriptlets.
+
 ## 5.31.14
 
 ### Patch Changes
diff --git a/packages/translator-default/package.json b/packages/translator-default/package.json
index f8f81d7ab..0233f0557 100644
--- a/packages/translator-default/package.json
+++ b/packages/translator-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marko/translator-default",
-  "version": "5.31.14",
+  "version": "5.31.15",
   "description": "Translates Marko templates to the default Marko runtime.",
   "keywords": [
     "babel",
@@ -34,8 +34,8 @@
     "self-closing-tags": "^1.0.1"
   },
   "devDependencies": {
-    "@marko/compiler": "^5.34.6",
-    "marko": "^5.32.8"
+    "@marko/compiler": "^5.34.7",
+    "marko": "^5.32.10"
   },
   "peerDependencies": {
     "@marko/compiler": "^5.16.1",

From 64281b3602bbba47464f7fe192ce521f981aef20 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Thu, 22 Feb 2024 20:22:08 -0700
Subject: [PATCH 10/20] fix: optimize and simplify preserved attr handling

---
 packages/marko/src/runtime/vdom/VElement.js   | 46 ++++++-------------
 .../marko/src/runtime/vdom/morphdom/index.js  |  3 +-
 .../marko/src/runtime/vdom/preserve-attrs.js  | 15 ------
 packages/translator-default/src/index.js      |  1 -
 .../src/tag/attribute/modifiers/no-update.js  | 15 +-----
 .../translator-default/src/tag/dynamic-tag.js | 11 ++++-
 .../src/tag/native-tag[html]/index.js         | 11 ++++-
 .../src/tag/native-tag[vdom]/index.js         | 11 ++++-
 .../snapshots/cjs-expected.js                 |  4 +-
 .../snapshots/html-expected.js                |  4 +-
 .../snapshots/htmlProduction-expected.js      |  4 +-
 .../snapshots/vdom-expected.js                |  5 +-
 .../snapshots/vdomProduction-expected.js      |  5 +-
 .../snapshots/cjs-expected.js                 |  9 +++-
 .../snapshots/html-expected.js                |  9 +++-
 .../snapshots/htmlProduction-expected.js      |  9 +++-
 .../snapshots/vdom-expected.js                | 10 ++--
 .../snapshots/vdomProduction-expected.js      | 10 ++--
 .../snapshots/cjs-expected.js                 |  4 +-
 .../snapshots/html-expected.js                |  4 +-
 .../snapshots/htmlProduction-expected.js      |  4 +-
 .../snapshots/vdom-expected.js                |  5 +-
 .../snapshots/vdomProduction-expected.js      |  5 +-
 .../snapshots/cjs-expected.js                 |  4 +-
 .../snapshots/html-expected.js                |  4 +-
 .../snapshots/htmlProduction-expected.js      |  4 +-
 .../snapshots/vdom-expected.js                |  5 +-
 .../snapshots/vdomProduction-expected.js      |  5 +-
 28 files changed, 124 insertions(+), 102 deletions(-)
 delete mode 100644 packages/marko/src/runtime/vdom/preserve-attrs.js

diff --git a/packages/marko/src/runtime/vdom/VElement.js b/packages/marko/src/runtime/vdom/VElement.js
index 15e8e9dae..9728e304c 100644
--- a/packages/marko/src/runtime/vdom/VElement.js
+++ b/packages/marko/src/runtime/vdom/VElement.js
@@ -25,7 +25,7 @@ var FLAG_SPREAD_ATTRS = 4;
 var defineProperty = Object.defineProperty;
 
 var ATTR_HREF = "href";
-var EMPTY_OBJECT = Object.freeze({});
+var EMPTY_OBJECT = Object.freeze(Object.create(null));
 
 function convertAttrValue(type, value) {
   if (value === true) {
@@ -243,14 +243,6 @@ defineProperty(proto, "___value", {
   },
 });
 
-VElement.___removePreservedAttributes = function (attrs) {
-  // By default this static method is a no-op, but if there are any
-  // compiled components that have "no-update" attributes then
-  // `preserve-attrs.js` will be imported and this method will be replaced
-  // with a method that actually does something
-  return attrs;
-};
-
 function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
   var attributes = node.attributes;
   var attrCount = attributes.length;
@@ -303,20 +295,15 @@ function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
 VElement.___virtualize = virtualizeElement;
 
 VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
-  var removePreservedAttributes = VElement.___removePreservedAttributes;
-
   var fromFlags = vFromEl.___flags;
   var toFlags = toEl.___flags;
-
-  vElementByDOMNode.set(fromEl, toEl);
-
   var attrs = toEl.___attributes;
-  var props = toEl.___properties;
 
   if (toFlags & FLAG_CUSTOM_ELEMENT) {
     return assign(fromEl, attrs);
   }
 
+  var props = toEl.___properties;
   var attrName;
 
   // We use expando properties to associate the previous HTML
@@ -329,16 +316,12 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
 
   var oldAttrs = vFromEl.___attributes;
 
-  if (oldAttrs) {
-    if (oldAttrs === attrs) {
-      // For constant attributes the same object will be provided
-      // every render and we can use that to our advantage to
-      // not waste time diffing a constant, immutable attribute
-      // map.
-      return;
-    } else {
-      oldAttrs = removePreservedAttributes(oldAttrs, props);
-    }
+  if (oldAttrs === attrs) {
+    // For constant attributes the same object will be provided
+    // every render and we can use that to our advantage to
+    // not waste time diffing a constant, immutable attribute
+    // map.
+    return;
   }
 
   var attrValue;
@@ -356,12 +339,7 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
     return;
   }
 
-  // In some cases we only want to set an attribute value for the first
-  // render or we don't want certain attributes to be touched. To support
-  // that use case we delete out all of the preserved attributes
-  // so it's as if they never existed.
-  attrs = removePreservedAttributes(attrs, props, true);
-
+  var preserve = (props && props.pa) || EMPTY_OBJECT;
   var namespaceURI;
 
   // Loop over all of the attributes in the attribute map and compare
@@ -369,6 +347,10 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
   // null/undefined/false then we want to remove the attribute
   for (attrName in attrs) {
     attrValue = attrs[attrName];
+    if (preserve[attrName] || oldAttrs[attrName] === attrValue) {
+      continue;
+    }
+
     namespaceURI = null;
 
     if (attrName === ATTR_XLINK_HREF) {
@@ -378,7 +360,7 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
 
     if (attrValue == null || attrValue === false) {
       removeAttribute(fromEl, namespaceURI, attrName);
-    } else if (oldAttrs[attrName] !== attrValue) {
+    } else {
       var type = typeof attrValue;
 
       if (type !== "string") {
diff --git a/packages/marko/src/runtime/vdom/morphdom/index.js b/packages/marko/src/runtime/vdom/morphdom/index.js
index 7c580788c..71edce2bc 100644
--- a/packages/marko/src/runtime/vdom/morphdom/index.js
+++ b/packages/marko/src/runtime/vdom/morphdom/index.js
@@ -680,8 +680,9 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
   function morphEl(fromEl, vFromEl, toEl, parentComponent) {
     var nodeName = toEl.___nodeName;
-
     var constId = toEl.___constId;
+    vElementByDOMNode.set(fromEl, toEl);
+
     if (constId !== undefined && vFromEl.___constId === constId) {
       return;
     }
diff --git a/packages/marko/src/runtime/vdom/preserve-attrs.js b/packages/marko/src/runtime/vdom/preserve-attrs.js
deleted file mode 100644
index 7d462ff30..000000000
--- a/packages/marko/src/runtime/vdom/preserve-attrs.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var extend = require("raptor-util/extend");
-
-function removePreservedAttributes(attrs, props) {
-  var preservedAttrs = props && props.pa;
-  if (preservedAttrs) {
-    attrs = extend({}, attrs);
-    preservedAttrs.forEach(function (preservedAttrName) {
-      delete attrs[preservedAttrName];
-    });
-  }
-
-  return attrs;
-}
-
-require("./VElement").___removePreservedAttributes = removePreservedAttributes;
diff --git a/packages/translator-default/src/index.js b/packages/translator-default/src/index.js
index aa79be769..3cca57659 100644
--- a/packages/translator-default/src/index.js
+++ b/packages/translator-default/src/index.js
@@ -505,7 +505,6 @@ export function getRuntimeEntryFiles(output, optimize) {
           `${base}runtime/vdom/hot-reload.js`,
           `${base}runtime/vdom/helpers/attrs.js`,
           `${base}runtime/vdom/helpers/const-element.js`,
-          `${base}runtime/vdom/preserve-attrs.js`,
         ]),
   ];
 }
diff --git a/packages/translator-default/src/tag/attribute/modifiers/no-update.js b/packages/translator-default/src/tag/attribute/modifiers/no-update.js
index e728664b9..bf9c2a535 100644
--- a/packages/translator-default/src/tag/attribute/modifiers/no-update.js
+++ b/packages/translator-default/src/tag/attribute/modifiers/no-update.js
@@ -1,25 +1,12 @@
-import { importDefault } from "@marko/babel-utils";
-
-const hasMonkeyPatch = new WeakSet();
-
 /**
  * Does nothing in html mode.
  */
 export default {
   exit(tag, attr) {
-    const {
-      node,
-      hub: { file },
-    } = tag;
-    const isVDOM = file.markoOpts.output !== "html";
+    const { node } = tag;
 
     if (!node.preserveAttrs) {
       node.preserveAttrs = [];
-
-      if (isVDOM && !hasMonkeyPatch.has(file)) {
-        hasMonkeyPatch.add(file);
-        importDefault(file, "marko/src/runtime/vdom/preserve-attrs.js");
-      }
     }
 
     node.preserveAttrs.push(attr.node.name);
diff --git a/packages/translator-default/src/tag/dynamic-tag.js b/packages/translator-default/src/tag/dynamic-tag.js
index 970e26d70..2cd9eff58 100644
--- a/packages/translator-default/src/tag/dynamic-tag.js
+++ b/packages/translator-default/src/tag/dynamic-tag.js
@@ -18,8 +18,15 @@ export default function (path) {
     tagProperties.push(
       t.objectProperty(
         t.identifier("pa"),
-        t.arrayExpression(
-          node.preserveAttrs.map((name) => t.stringLiteral(name)),
+        t.objectExpression(
+          node.preserveAttrs.map((name) =>
+            t.objectProperty(
+              t.isValidIdentifier(name)
+                ? t.identifier(name)
+                : t.stringLiteral(name),
+              t.numericLiteral(1),
+            ),
+          ),
         ),
       ),
     );
diff --git a/packages/translator-default/src/tag/native-tag[html]/index.js b/packages/translator-default/src/tag/native-tag[html]/index.js
index e0d8cb027..166710c1b 100644
--- a/packages/translator-default/src/tag/native-tag[html]/index.js
+++ b/packages/translator-default/src/tag/native-tag[html]/index.js
@@ -75,8 +75,15 @@ export default function (path, isNullable) {
     tagProperties.push(
       t.objectProperty(
         t.identifier("pa"),
-        t.arrayExpression(
-          node.preserveAttrs.map((name) => t.stringLiteral(name)),
+        t.objectExpression(
+          node.preserveAttrs.map((name) =>
+            t.objectProperty(
+              t.isValidIdentifier(name)
+                ? t.identifier(name)
+                : t.stringLiteral(name),
+              t.numericLiteral(1),
+            ),
+          ),
         ),
       ),
     );
diff --git a/packages/translator-default/src/tag/native-tag[vdom]/index.js b/packages/translator-default/src/tag/native-tag[vdom]/index.js
index ca3f712f3..2bb2adcbe 100644
--- a/packages/translator-default/src/tag/native-tag[vdom]/index.js
+++ b/packages/translator-default/src/tag/native-tag[vdom]/index.js
@@ -116,8 +116,15 @@ function tagArguments(path) {
     tagProperties.push(
       t.objectProperty(
         t.identifier("pa"),
-        t.arrayExpression(
-          node.preserveAttrs.map((name) => t.stringLiteral(name)),
+        t.objectExpression(
+          node.preserveAttrs.map((name) =>
+            t.objectProperty(
+              t.isValidIdentifier(name)
+                ? t.identifier(name)
+                : t.stringLiteral(name),
+              t.numericLiteral(1),
+            ),
+          ),
         ),
       ),
     );
diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/cjs-expected.js
index 6cc423be8..900a00597 100644
--- a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/cjs-expected.js
@@ -13,7 +13,9 @@ var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
   out.w(`<div${(0, _dataMarko.default)(out, _componentDef, {
-    pa: ["class"]
+    pa: {
+      "class": 1
+    }
   })} class=test>`);
   out.w("Hello ");
   out.w((0, _escapeXml.x)(input.name));
diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/html-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/html-expected.js
index 23901aedf..55d48a9f5 100644
--- a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/html-expected.js
@@ -8,7 +8,9 @@ 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${_marko_props(out, _componentDef, {
-    pa: ["class"]
+    pa: {
+      "class": 1
+    }
   })} class=test>`);
   out.w("Hello ");
   out.w(_marko_escapeXml(input.name));
diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/htmlProduction-expected.js
index 57034c231..5544ca044 100644
--- a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/htmlProduction-expected.js
@@ -8,7 +8,9 @@ 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${_marko_props(out, _componentDef, {
-    pa: ["class"]
+    pa: {
+      "class": 1
+    }
   })} class=test>Hello ${_marko_escapeXml(input.name)}</div>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdom-expected.js
index 3a5bad913..2e71ce631 100644
--- a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdom-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/data-marko-implicit-component/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/src/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -11,7 +10,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.be("div", {
     "class": "test"
   }, "0", _component, null, 0, {
-    pa: ["class"]
+    pa: {
+      "class": 1
+    }
   });
   out.t("Hello ", _component);
   out.t(input.name, _component);
diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdomProduction-expected.js
index 64fc54883..dd38d80ee 100644
--- a/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/data-marko-implicit-component/snapshots/vdomProduction-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "qc7Y7xBI",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/dist/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -11,7 +10,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.be("div", {
     "class": "test"
   }, "0", _component, null, 0, {
-    pa: ["class"]
+    pa: {
+      "class": 1
+    }
   });
   out.t("Hello ", _component);
   out.t(input.name, _component);
diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/cjs-expected.js
index 4420b0385..37b93779d 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/cjs-expected.js
@@ -14,10 +14,15 @@ const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
   out.w("<div>");
   out.w(`<input${(0, _dataMarko.default)(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${(0, _attr.default)("value", input.defaultValue)}>`);
   out.w(`<input${(0, _dataMarko.default)(out, _componentDef, {
-    pa: ["value", "checked"]
+    pa: {
+      value: 1,
+      checked: 1
+    }
   })} type=checkbox${(0, _attr.default)("value", input.defaultValue)}${(0, _attr.default)("checked", input.checked)}>`);
   out.w("</div>");
 }, {
diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/html-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/html-expected.js
index 113319329..6d064003b 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/html-expected.js
@@ -9,10 +9,15 @@ const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
   out.w("<div>");
   out.w(`<input${_marko_props(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${_marko_attr("value", input.defaultValue)}>`);
   out.w(`<input${_marko_props(out, _componentDef, {
-    pa: ["value", "checked"]
+    pa: {
+      value: 1,
+      checked: 1
+    }
   })} type=checkbox${_marko_attr("value", input.defaultValue)}${_marko_attr("checked", input.checked)}>`);
   out.w("</div>");
 }, {
diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/htmlProduction-expected.js
index 5c8ce3207..5a04c55f2 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/htmlProduction-expected.js
@@ -8,9 +8,14 @@ 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><input${_marko_props(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${_marko_attr("value", input.defaultValue)}><input${_marko_props(out, _componentDef, {
-    pa: ["value", "checked"]
+    pa: {
+      value: 1,
+      checked: 1
+    }
   })} type=checkbox${_marko_attr("value", input.defaultValue)}${_marko_attr("checked", input.checked)}></div>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdom-expected.js
index 11a17940f..8910db17c 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdom-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/no-update-modifier-multiple/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/src/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -12,14 +11,19 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("input", {
     "value": input.defaultValue
   }, "1", _component, 0, 0, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   });
   out.e("input", {
     "type": "checkbox",
     "value": input.defaultValue,
     "checked": input.checked
   }, "2", _component, 0, 0, {
-    pa: ["value", "checked"]
+    pa: {
+      value: 1,
+      checked: 1
+    }
   });
   out.ee();
 }, {
diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdomProduction-expected.js
index 0397e1cb9..8cd0353be 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier-multiple/snapshots/vdomProduction-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "r46whWwu",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/dist/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -12,14 +11,19 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("input", {
     "value": input.defaultValue
   }, "1", _component, 0, 0, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   });
   out.e("input", {
     "type": "checkbox",
     "value": input.defaultValue,
     "checked": input.checked
   }, "2", _component, 0, 0, {
-    pa: ["value", "checked"]
+    pa: {
+      value: 1,
+      checked: 1
+    }
   });
   out.ee();
 }, {
diff --git a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/cjs-expected.js
index b95154ea1..bcb98595f 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/cjs-expected.js
@@ -13,7 +13,9 @@ var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
   out.w(`<input${(0, _dataMarko.default)(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${(0, _attr.default)("value", input.defaultValue)}>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/html-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/html-expected.js
index c5748ba8f..7f12d2b27 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/html-expected.js
@@ -8,7 +8,9 @@ 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(`<input${_marko_props(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${_marko_attr("value", input.defaultValue)}>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/htmlProduction-expected.js
index f9f78054a..8b50ca9ba 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/htmlProduction-expected.js
@@ -8,7 +8,9 @@ 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(`<input${_marko_props(out, _componentDef, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   })}${_marko_attr("value", input.defaultValue)}>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdom-expected.js
index 73364e289..1c0e46686 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdom-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/no-update-modifier/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/src/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -11,7 +10,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("input", {
     "value": input.defaultValue
   }, "0", _component, 0, 0, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   });
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdomProduction-expected.js
index d7e6d97c0..d98ea55a3 100644
--- a/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/no-update-modifier/snapshots/vdomProduction-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/dist/runtime/vdom/index.js";
 const _marko_componentType = "az9GXCCR",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/dist/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -11,7 +10,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("input", {
     "value": input.defaultValue
   }, "0", _component, 0, 0, {
-    pa: ["value"]
+    pa: {
+      value: 1
+    }
   });
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/cjs-expected.js
index 71aaf09de..1a3c8206b 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/cjs-expected.js
@@ -15,7 +15,9 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   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"]
+    pa: {
+      style: 1
+    }
   })} style=c:1px></div>`);
   out.w("<div a=1 style=c:1px></div>");
 }, {
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/html-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/html-expected.js
index 00071c49a..ec0b8c6e9 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/html-expected.js
@@ -10,7 +10,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   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"]
+    pa: {
+      style: 1
+    }
   })} style=c:1px></div>`);
   out.w("<div a=1 style=c:1px></div>");
 }, {
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/htmlProduction-expected.js
index 2637be3b3..3f4b230d9 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/htmlProduction-expected.js
@@ -7,7 +7,9 @@ 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, {
-    pa: ["style"]
+    pa: {
+      style: 1
+    }
   })} style=c:1px></div><div a=1 style=c:1px></div>`);
 }, {
   t: _marko_componentType,
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdom-expected.js
index b18bf36ee..92587d50e 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdom-expected.js
@@ -2,7 +2,6 @@ import { t as _t } from "marko/src/runtime/vdom/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/simple-attrs-tag/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import "marko/src/runtime/vdom/preserve-attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -23,7 +22,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("div", {
     "style": "c:1px"
   }, "3", _component, 0, 0, {
-    pa: ["style"]
+    pa: {
+      style: 1
+    }
   });
   out.e("div", {
     "a": "1",
diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
index a34b0a701..01b37dc17 100644
--- a/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/simple-attrs-tag/snapshots/vdomProduction-expected.js
@@ -15,7 +15,6 @@ const _marko_node2 = _marko_constElement("div", {
 const _marko_node3 = _marko_constElement("div", {
   "style": "c:1px"
 }, 0);
-import "marko/dist/runtime/vdom/preserve-attrs.js";
 const _marko_node4 = _marko_constElement("div", {
   "a": "1",
   "style": "c:1px"
@@ -31,7 +30,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.e("div", {
     "style": "c:1px"
   }, "3", _component, 0, 0, {
-    pa: ["style"]
+    pa: {
+      style: 1
+    }
   });
   out.n(_marko_node4, _component);
 }, {

From 462992ee51fea27e56894b367870e608ea1009a0 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Fri, 23 Feb 2024 10:01:44 -0700
Subject: [PATCH 11/20] fix: refactor how special attributes are handled

---
 .changeset/chatty-boxes-deny.md               |   6 +
 .changeset/famous-oranges-pull.md             |   6 +
 .changeset/shy-chicken-visit.md               |   6 +
 .changeset/tender-emus-obey.md                |   6 +
 packages/marko/src/runtime/vdom/VElement.js   | 160 ++++++++----------
 packages/marko/src/runtime/vdom/VNode.js      |   2 -
 .../marko/src/runtime/vdom/morphdom/index.js  |  14 +-
 .../vdom/morphdom/specialElHandlers.js        | 106 ------------
 packages/marko/test/__util__/domToString.js   |   2 +-
 packages/marko/test/__util__/toHTML.js        |   5 +-
 .../textarea-value-attribute/index.marko      |   2 +-
 .../fixtures/textarea-value-attribute/test.js |   5 -
 .../no-update/components/app/index.marko      |   2 +
 .../no-update-body-textarea/index.marko       |   5 +
 .../no-update-input-value/index.marko         |   5 +
 .../fixtures/no-update/tests.js               |  33 +++-
 packages/marko/test/morphdom/index.test.js    |  41 ++++-
 .../fixtures/input-checked/index.js           |   2 +-
 .../fixtures/input-disabled/index.js          |   2 +-
 .../vdom-create/fixtures/input-value/index.js |   2 +-
 .../fixtures/option-selected/index.js         |   2 +-
 .../vdom-create/fixtures/textarea/index.js    |   2 +-
 22 files changed, 188 insertions(+), 228 deletions(-)
 create mode 100644 .changeset/chatty-boxes-deny.md
 create mode 100644 .changeset/famous-oranges-pull.md
 create mode 100644 .changeset/shy-chicken-visit.md
 create mode 100644 .changeset/tender-emus-obey.md
 delete mode 100644 packages/marko/src/runtime/vdom/morphdom/specialElHandlers.js
 create mode 100644 packages/marko/test/components-pages/fixtures/no-update/components/no-update-body-textarea/index.marko
 create mode 100644 packages/marko/test/components-pages/fixtures/no-update/components/no-update-input-value/index.marko

diff --git a/.changeset/chatty-boxes-deny.md b/.changeset/chatty-boxes-deny.md
new file mode 100644
index 000000000..f197c95aa
--- /dev/null
+++ b/.changeset/chatty-boxes-deny.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Fix issue where `:no-update` modifier was not working on special element handlers.
diff --git a/.changeset/famous-oranges-pull.md b/.changeset/famous-oranges-pull.md
new file mode 100644
index 000000000..53b6d8655
--- /dev/null
+++ b/.changeset/famous-oranges-pull.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Use vdom to vdom comparison for special attributes (input.value, input.checked and option.selected) to improve consistency with how other attributes are handled.
diff --git a/.changeset/shy-chicken-visit.md b/.changeset/shy-chicken-visit.md
new file mode 100644
index 000000000..2518ccc24
--- /dev/null
+++ b/.changeset/shy-chicken-visit.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Avoid setting attribute value for special properties (like input.value, input.checked and option.selected)
diff --git a/.changeset/tender-emus-obey.md b/.changeset/tender-emus-obey.md
new file mode 100644
index 000000000..495a9a095
--- /dev/null
+++ b/.changeset/tender-emus-obey.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Normalize attribute values before setting value to avoid unnecessary work.
diff --git a/packages/marko/src/runtime/vdom/VElement.js b/packages/marko/src/runtime/vdom/VElement.js
index 9728e304c..6a2848c76 100644
--- a/packages/marko/src/runtime/vdom/VElement.js
+++ b/packages/marko/src/runtime/vdom/VElement.js
@@ -22,28 +22,51 @@ var FLAG_SIMPLE_ATTRS = 1;
 var FLAG_CUSTOM_ELEMENT = 2;
 var FLAG_SPREAD_ATTRS = 4;
 
-var defineProperty = Object.defineProperty;
-
 var ATTR_HREF = "href";
 var EMPTY_OBJECT = Object.freeze(Object.create(null));
+var specialElHandlers = {
+  option: {
+    selected: function (fromEl, value) {
+      fromEl.selected = value !== undefined;
+    },
+  },
+  input: {
+    value: function (fromEl, value) {
+      fromEl.value = value === undefined ? "" : value;
+    },
+    checked: function (fromEl, value) {
+      fromEl.checked = value !== undefined;
+    },
+  },
+};
 
-function convertAttrValue(type, value) {
+function normalizeValue(value) {
   if (value === true) {
     return "";
-  } else if (type == "object") {
-    switch (value.toString) {
-      case Object.prototype.toString:
-      case Array.prototype.toString:
-        // eslint-disable-next-line no-constant-condition
-        if ("MARKO_DEBUG") {
-          complain(
-            "Relying on JSON.stringify for attribute values is deprecated, in future versions of Marko these will be cast to strings instead.",
-          );
-        }
-        return JSON.stringify(value);
-      case RegExp.prototype.toString:
-        return value.source;
-    }
+  }
+
+  if (value == null || value === false) {
+    return;
+  }
+
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "object":
+      switch (value.toString) {
+        case Object.prototype.toString:
+        case Array.prototype.toString:
+          // eslint-disable-next-line no-constant-condition
+          if ("MARKO_DEBUG") {
+            complain(
+              "Relying on JSON.stringify for attribute values is deprecated, in future versions of Marko these will be cast to strings instead.",
+            );
+          }
+          return JSON.stringify(value);
+        case RegExp.prototype.toString:
+          return value.source;
+      }
+      break;
   }
 
   return value + "";
@@ -57,22 +80,6 @@ function assign(a, b) {
   }
 }
 
-function setAttribute(el, namespaceURI, name, value) {
-  if (namespaceURI === null) {
-    el.setAttribute(name, value);
-  } else {
-    el.setAttributeNS(namespaceURI, name, value);
-  }
-}
-
-function removeAttribute(el, namespaceURI, name) {
-  if (namespaceURI === null) {
-    el.removeAttribute(name);
-  } else {
-    el.removeAttributeNS(namespaceURI, name);
-  }
-}
-
 function VElementClone(other) {
   this.___firstChildInternal = other.___firstChildInternal;
   this.___parentNode = null;
@@ -177,19 +184,11 @@ VElement.prototype = {
       assign(el, attributes);
     } else {
       for (var attrName in attributes) {
-        var attrValue = attributes[attrName];
-
-        if (attrValue !== false && attrValue != null) {
-          var type = typeof attrValue;
-
-          if (type !== "string") {
-            // Special attributes aren't copied to the real DOM. They are only
-            // kept in the virtual attributes map
-            attrValue = convertAttrValue(type, attrValue);
-          }
+        var attrValue = normalizeValue(attributes[attrName]);
 
+        if (attrValue !== undefined) {
           if (attrName == ATTR_XLINK_HREF) {
-            setAttribute(el, NS_XLINK, ATTR_HREF, attrValue);
+            el.setAttributeNS(NS_XLINK, ATTR_HREF, attrValue);
           } else {
             el.setAttribute(attrName, attrValue);
           }
@@ -197,7 +196,7 @@ VElement.prototype = {
       }
 
       if (tagName === "textarea") {
-        el.defaultValue = el.value = this.___value;
+        el.defaultValue = this.___valueInternal;
       }
     }
 
@@ -217,31 +216,7 @@ VElement.prototype = {
 
 inherit(VElement, VNode);
 
-var proto = (VElementClone.prototype = VElement.prototype);
-
-["checked", "selected", "disabled"].forEach(function (name) {
-  defineProperty(proto, name, {
-    get: function () {
-      var value = this.___attributes[name];
-      return value !== false && value != null;
-    },
-  });
-});
-
-defineProperty(proto, "___value", {
-  get: function () {
-    var value = this.___valueInternal;
-    if (value == null) {
-      value = this.___attributes.value;
-    }
-    return value != null && value !== false
-      ? value + ""
-      : this.___attributes.type === "checkbox" ||
-          this.___attributes.type === "radio"
-        ? "on"
-        : "";
-  },
-});
+VElementClone.prototype = VElement.prototype;
 
 function virtualizeElement(node, virtualizeChildNodes, ownerComponent) {
   var attributes = node.attributes;
@@ -340,34 +315,31 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
   }
 
   var preserve = (props && props.pa) || EMPTY_OBJECT;
-  var namespaceURI;
+  var specialAttrs = specialElHandlers[toEl.___nodeName] || EMPTY_OBJECT;
+  var specialAttr;
 
   // Loop over all of the attributes in the attribute map and compare
   // them to the value in the old map. However, if the value is
   // null/undefined/false then we want to remove the attribute
   for (attrName in attrs) {
-    attrValue = attrs[attrName];
-    if (preserve[attrName] || oldAttrs[attrName] === attrValue) {
-      continue;
-    }
-
-    namespaceURI = null;
-
-    if (attrName === ATTR_XLINK_HREF) {
-      namespaceURI = NS_XLINK;
-      attrName = ATTR_HREF;
-    }
-
-    if (attrValue == null || attrValue === false) {
-      removeAttribute(fromEl, namespaceURI, attrName);
-    } else {
-      var type = typeof attrValue;
-
-      if (type !== "string") {
-        attrValue = convertAttrValue(type, attrValue);
+    if (
+      !preserve[attrName] &&
+      normalizeValue(oldAttrs[attrName]) !==
+        (attrValue = normalizeValue(attrs[attrName]))
+    ) {
+      if ((specialAttr = specialAttrs[attrName])) {
+        specialAttr(fromEl, attrValue);
+      } else if (attrName === ATTR_XLINK_HREF) {
+        if (attrValue === undefined) {
+          fromEl.removeAttributeNS(NS_XLINK, ATTR_HREF);
+        } else {
+          fromEl.setAttributeNS(NS_XLINK, ATTR_HREF, attrValue);
+        }
+      } else if (attrValue === undefined) {
+        fromEl.removeAttribute(attrName);
+      } else {
+        fromEl.setAttribute(attrName, attrValue);
       }
-
-      setAttribute(fromEl, namespaceURI, attrName, attrValue);
     }
   }
 
@@ -384,7 +356,9 @@ VElement.___morphAttrs = function (fromEl, vFromEl, toEl) {
   if (toEl.___key === null || fromFlags & FLAG_SPREAD_ATTRS) {
     for (attrName in oldAttrs) {
       if (!(attrName in attrs)) {
-        if (attrName === ATTR_XLINK_HREF) {
+        if ((specialAttr = specialAttrs[attrName])) {
+          specialAttr(fromEl, undefined);
+        } else if (attrName === ATTR_XLINK_HREF) {
           fromEl.removeAttributeNS(ATTR_XLINK_HREF, ATTR_HREF);
         } else {
           fromEl.removeAttribute(attrName);
diff --git a/packages/marko/src/runtime/vdom/VNode.js b/packages/marko/src/runtime/vdom/VNode.js
index 3f64aacf3..b41c64df6 100644
--- a/packages/marko/src/runtime/vdom/VNode.js
+++ b/packages/marko/src/runtime/vdom/VNode.js
@@ -52,8 +52,6 @@ VNode.prototype = {
       if (child.___Text) {
         var childValue = child.___nodeValue;
         this.___valueInternal = (this.___valueInternal || "") + childValue;
-      } else if (child.___preserve || child.___preserveBody) {
-        this.___preserveTextAreaValue = true;
       } else {
         throw TypeError();
       }
diff --git a/packages/marko/src/runtime/vdom/morphdom/index.js b/packages/marko/src/runtime/vdom/morphdom/index.js
index 71edce2bc..1cb544f3b 100644
--- a/packages/marko/src/runtime/vdom/morphdom/index.js
+++ b/packages/marko/src/runtime/vdom/morphdom/index.js
@@ -11,7 +11,6 @@ var KeySequence = require("../../components/KeySequence");
 var VElement = require("../vdom").___VElement;
 var fragment = require("./fragment");
 var helpers = require("./helpers");
-var specialElHandlers = require("./specialElHandlers");
 var virtualizeElement = VElement.___virtualize;
 var morphAttrs = VElement.___morphAttrs;
 var keysByDOMNode = domData.___keyByDOMNode;
@@ -693,14 +692,15 @@ function morphdom(fromNode, toNode, host, componentsContext) {
       return;
     }
 
-    if (nodeName !== "textarea") {
+    if (nodeName === "textarea") {
+      var newValue = toEl.___valueInternal || "";
+      var oldValue = vFromEl.___valueInternal || "";
+      if (oldValue !== newValue) {
+        fromEl.value = newValue;
+      }
+    } else {
       morphChildren(fromEl, toEl, parentComponent);
     }
-
-    var specialElHandler = specialElHandlers[nodeName];
-    if (specialElHandler !== undefined) {
-      specialElHandler(fromEl, toEl);
-    }
   } // END: morphEl(...)
 
   // eslint-disable-next-line no-constant-condition
diff --git a/packages/marko/src/runtime/vdom/morphdom/specialElHandlers.js b/packages/marko/src/runtime/vdom/morphdom/specialElHandlers.js
deleted file mode 100644
index 01462eea7..000000000
--- a/packages/marko/src/runtime/vdom/morphdom/specialElHandlers.js
+++ /dev/null
@@ -1,106 +0,0 @@
-function syncBooleanAttrProp(fromEl, toEl, name) {
-  if (fromEl[name] !== toEl[name]) {
-    fromEl[name] = toEl[name];
-    if (fromEl[name]) {
-      fromEl.setAttribute(name, "");
-    } else {
-      fromEl.removeAttribute(name, "");
-    }
-  }
-}
-
-function forEachOption(el, fn, i) {
-  var curChild = el.___firstChild;
-
-  while (curChild) {
-    if (curChild.___nodeName === "option") {
-      fn(curChild, ++i);
-    } else {
-      i = forEachOption(curChild, fn, i);
-    }
-
-    curChild = curChild.___nextSibling;
-  }
-
-  return i;
-}
-
-// We use a JavaScript class to benefit from fast property lookup
-function SpecialElHandlers() {}
-SpecialElHandlers.prototype = {
-  /**
-   * Needed for IE. Apparently IE doesn't think that "selected" is an
-   * attribute when reading over the attributes using selectEl.attributes
-   */
-  option: function (fromEl, toEl) {
-    syncBooleanAttrProp(fromEl, toEl, "selected");
-  },
-  button: function (fromEl, toEl) {
-    syncBooleanAttrProp(fromEl, toEl, "disabled");
-  },
-  /**
-   * The "value" attribute is special for the <input> element since it sets
-   * the initial value. Changing the "value" attribute without changing the
-   * "value" property will have no effect since it is only used to the set the
-   * initial value.  Similar for the "checked" attribute, and "disabled".
-   */
-  input: function (fromEl, toEl) {
-    syncBooleanAttrProp(fromEl, toEl, "checked");
-    syncBooleanAttrProp(fromEl, toEl, "disabled");
-
-    if (fromEl.value != toEl.___value) {
-      fromEl.value = toEl.___value;
-    }
-
-    if (fromEl.hasAttribute("value") && !toEl.___hasAttribute("value")) {
-      fromEl.removeAttribute("value");
-    }
-  },
-
-  textarea: function (fromEl, toEl) {
-    if (toEl.___preserveTextAreaValue) {
-      return;
-    }
-
-    var newValue = toEl.___value;
-    if (fromEl.value != newValue) {
-      fromEl.value = newValue;
-    }
-
-    var firstChild = fromEl.firstChild;
-    if (firstChild) {
-      // Needed for IE. Apparently IE sets the placeholder as the
-      // node value and vise versa. This ignores an empty update.
-      var oldValue = firstChild.nodeValue;
-
-      if (
-        oldValue == newValue ||
-        (!newValue && oldValue == fromEl.placeholder)
-      ) {
-        return;
-      }
-
-      firstChild.nodeValue = newValue;
-    }
-  },
-  select: function (fromEl, toEl) {
-    if (!toEl.___hasAttribute("multiple")) {
-      var selected = 0;
-      forEachOption(
-        toEl,
-        function (option, i) {
-          if (option.___hasAttribute("selected")) {
-            selected = i;
-          }
-        },
-        -1,
-      );
-
-      if (fromEl.selectedIndex !== selected) {
-        fromEl.selectedIndex = selected;
-      }
-    }
-  },
-};
-
-module.exports = new SpecialElHandlers();
diff --git a/packages/marko/test/__util__/domToString.js b/packages/marko/test/__util__/domToString.js
index 8309b865a..c67e774a0 100644
--- a/packages/marko/test/__util__/domToString.js
+++ b/packages/marko/test/__util__/domToString.js
@@ -100,7 +100,7 @@ function vdomToHTML(node, options) {
       html +=
         indent +
         "  VALUE: " +
-        JSON.stringify(ltrim(el.value || el.___value)) +
+        JSON.stringify(ltrim(el.value || el.___valueInternal)) +
         "\n";
     } else {
       var curChild = getFirstChild(el);
diff --git a/packages/marko/test/__util__/toHTML.js b/packages/marko/test/__util__/toHTML.js
index bd3a01f9c..ca2c192bf 100644
--- a/packages/marko/test/__util__/toHTML.js
+++ b/packages/marko/test/__util__/toHTML.js
@@ -86,7 +86,10 @@ function toHTML(node) {
 
     if (tagName.toUpperCase() === "TEXTAREA") {
       html +=
-        indent + "  VALUE: " + JSON.stringify(el.value || el.___value) + "\n";
+        indent +
+        "  VALUE: " +
+        JSON.stringify(el.value || el.___valueInternal) +
+        "\n";
     } else {
       var curChild = getFirstChild(el);
       while (curChild) {
diff --git a/packages/marko/test/components-browser/fixtures/textarea-value-attribute/index.marko b/packages/marko/test/components-browser/fixtures/textarea-value-attribute/index.marko
index 75e1b017c..146803dc1 100644
--- a/packages/marko/test/components-browser/fixtures/textarea-value-attribute/index.marko
+++ b/packages/marko/test/components-browser/fixtures/textarea-value-attribute/index.marko
@@ -6,4 +6,4 @@ class {
     }
 }
 
-<textarea key="textarea" value=state.value/>
+<textarea key="textarea">${state.value}</>
diff --git a/packages/marko/test/components-browser/fixtures/textarea-value-attribute/test.js b/packages/marko/test/components-browser/fixtures/textarea-value-attribute/test.js
index 6607a265b..72240c648 100644
--- a/packages/marko/test/components-browser/fixtures/textarea-value-attribute/test.js
+++ b/packages/marko/test/components-browser/fixtures/textarea-value-attribute/test.js
@@ -11,11 +11,6 @@ module.exports = function (helpers) {
 
   expect(textarea.value).to.equal("World");
 
-  component.state.value = false;
-  component.update();
-
-  expect(textarea.value).to.equal("");
-
   component.state.value = undefined;
   component.update();
 
diff --git a/packages/marko/test/components-pages/fixtures/no-update/components/app/index.marko b/packages/marko/test/components-pages/fixtures/no-update/components/app/index.marko
index 8b0a44c86..4e03da87a 100644
--- a/packages/marko/test/components-pages/fixtures/no-update/components/app/index.marko
+++ b/packages/marko/test/components-pages/fixtures/no-update/components/app/index.marko
@@ -4,6 +4,8 @@ class {
     }
 }
 <div>
+    <no-update-body-textarea name="server" key="no-update-body-textarea"/>
+    <no-update-input-value name="server" key="no-update-input-value"/>
     <no-update-attr name="server" key="no-update-attr"/>
     <no-update-el name="server" key="no-update-el"/>
     <no-update-el-nested name="server" key="no-update-el-nested"/>
diff --git a/packages/marko/test/components-pages/fixtures/no-update/components/no-update-body-textarea/index.marko b/packages/marko/test/components-pages/fixtures/no-update/components/no-update-body-textarea/index.marko
new file mode 100644
index 000000000..9289f5e2b
--- /dev/null
+++ b/packages/marko/test/components-pages/fixtures/no-update/components/no-update-body-textarea/index.marko
@@ -0,0 +1,5 @@
+class {
+
+}
+
+<textarea no-update-body>${input.name}</>
diff --git a/packages/marko/test/components-pages/fixtures/no-update/components/no-update-input-value/index.marko b/packages/marko/test/components-pages/fixtures/no-update/components/no-update-input-value/index.marko
new file mode 100644
index 000000000..780a5ced9
--- /dev/null
+++ b/packages/marko/test/components-pages/fixtures/no-update/components/no-update-input-value/index.marko
@@ -0,0 +1,5 @@
+class {
+
+}
+
+<input value:no-update=input.name>
diff --git a/packages/marko/test/components-pages/fixtures/no-update/tests.js b/packages/marko/test/components-pages/fixtures/no-update/tests.js
index 7449ba7b4..186a3f6d6 100644
--- a/packages/marko/test/components-pages/fixtures/no-update/tests.js
+++ b/packages/marko/test/components-pages/fixtures/no-update/tests.js
@@ -3,8 +3,7 @@ var expect = require("chai").expect;
 it("should allow attributes to not be updated", function () {
   var app = window.app;
   var noUpdateComponent = app.getComponent("no-update-attr");
-  var foo = noUpdateComponent.el.getAttribute("data-foo");
-  expect(foo).to.equal("server");
+  expect(noUpdateComponent.el.getAttribute("data-foo")).to.equal("server");
 
   noUpdateComponent.input = {
     name: "browser",
@@ -12,7 +11,35 @@ it("should allow attributes to not be updated", function () {
 
   noUpdateComponent.update();
 
-  expect(foo).to.equal("server");
+  expect(noUpdateComponent.el.getAttribute("data-foo")).to.equal("server");
+});
+
+it("should allow input value to not be updated", function () {
+  var app = window.app;
+  var noUpdateComponent = app.getComponent("no-update-input-value");
+  expect(noUpdateComponent.el.value).to.equal("server");
+
+  noUpdateComponent.input = {
+    name: "browser",
+  };
+
+  noUpdateComponent.update();
+
+  expect(noUpdateComponent.el.value).to.equal("server");
+});
+
+it("should allow textarea value to not be updated", function () {
+  var app = window.app;
+  var noUpdateComponent = app.getComponent("no-update-body-textarea");
+  expect(noUpdateComponent.el.value).to.equal("server");
+
+  noUpdateComponent.input = {
+    name: "browser",
+  };
+
+  noUpdateComponent.update();
+
+  expect(noUpdateComponent.el.value).to.equal("server");
 });
 
 it("should allow a root element to not be updated", function () {
diff --git a/packages/marko/test/morphdom/index.test.js b/packages/marko/test/morphdom/index.test.js
index d263b7050..054f6d9a0 100644
--- a/packages/marko/test/morphdom/index.test.js
+++ b/packages/marko/test/morphdom/index.test.js
@@ -104,6 +104,16 @@ function serializeNode(node) {
           continue;
         }
 
+        if (nodeName === "INPUT") {
+          if (qualifiedName === "checked" || qualifiedName === "value") {
+            continue;
+          }
+        } else if (nodeName === "OPTION") {
+          if (qualifiedName === "selected") {
+            continue;
+          }
+        }
+
         if (attr.namespaceURI) {
           qualifiedName = attr.namespaceURI + ":" + qualifiedName;
         }
@@ -111,17 +121,40 @@ function serializeNode(node) {
       }
     }
 
+    if (nodeName === "INPUT") {
+      if (el.checked) {
+        attributesArray.push(' checked=""');
+      }
+
+      if (el.value) {
+        if (
+          el.value !== "on" ||
+          (el.type !== "radio" && el.type !== "checkbox")
+        ) {
+          attributesArray.push(' value="' + el.value + '"');
+        }
+      }
+    } else if (nodeName === "OPTION") {
+      if (el.selected) {
+        attributesArray.push(' selected=""');
+      }
+    }
+
     attributesArray.sort();
 
     html += attributesArray.join("");
 
     html += ">\n";
 
-    var childNodes = el.childNodes;
+    if (nodeName === "TEXTAREA" && el.value) {
+      html += indent + "  " + JSON.stringify(el.value) + "\n";
+    } else {
+      var childNodes = el.childNodes;
 
-    if (childNodes && childNodes.length) {
-      for (i = 0; i < childNodes.length; i++) {
-        serializeHelper(childNodes[i], indent + "  ");
+      if (childNodes && childNodes.length) {
+        for (i = 0; i < childNodes.length; i++) {
+          serializeHelper(childNodes[i], indent + "  ");
+        }
       }
     }
   }
diff --git a/packages/marko/test/vdom-create/fixtures/input-checked/index.js b/packages/marko/test/vdom-create/fixtures/input-checked/index.js
index 92ec9f9f2..256124abc 100644
--- a/packages/marko/test/vdom-create/fixtures/input-checked/index.js
+++ b/packages/marko/test/vdom-create/fixtures/input-checked/index.js
@@ -7,6 +7,6 @@ module.exports = function (helpers) {
     0 /* childCount */,
   );
 
-  expect(el.checked).to.equal(true);
+  expect(el.___attributes.checked).to.equal(true);
   return el;
 };
diff --git a/packages/marko/test/vdom-create/fixtures/input-disabled/index.js b/packages/marko/test/vdom-create/fixtures/input-disabled/index.js
index f2395560a..341b1faa5 100644
--- a/packages/marko/test/vdom-create/fixtures/input-disabled/index.js
+++ b/packages/marko/test/vdom-create/fixtures/input-disabled/index.js
@@ -7,6 +7,6 @@ module.exports = function (helpers) {
     0 /* childCount */,
   );
 
-  expect(el.disabled).to.equal(true);
+  expect(el.___attributes.disabled).to.equal("disabled");
   return el;
 };
diff --git a/packages/marko/test/vdom-create/fixtures/input-value/index.js b/packages/marko/test/vdom-create/fixtures/input-value/index.js
index 6f8c4c2a8..36e895985 100644
--- a/packages/marko/test/vdom-create/fixtures/input-value/index.js
+++ b/packages/marko/test/vdom-create/fixtures/input-value/index.js
@@ -9,6 +9,6 @@ module.exports = function (helpers) {
     0 /* childCount */,
   );
 
-  expect(el.___value).to.equal("foo");
+  expect(el.___attributes.value).to.equal("foo");
   return el;
 };
diff --git a/packages/marko/test/vdom-create/fixtures/option-selected/index.js b/packages/marko/test/vdom-create/fixtures/option-selected/index.js
index c972960a9..2b5e268ae 100644
--- a/packages/marko/test/vdom-create/fixtures/option-selected/index.js
+++ b/packages/marko/test/vdom-create/fixtures/option-selected/index.js
@@ -6,6 +6,6 @@ module.exports = function (helpers) {
     { selected: "" },
     0 /* childCount */,
   );
-  expect(el.selected).to.equal(true);
+  expect(el.___attributes.selected).to.equal("");
   return el;
 };
diff --git a/packages/marko/test/vdom-create/fixtures/textarea/index.js b/packages/marko/test/vdom-create/fixtures/textarea/index.js
index 085a4f5c8..d84901b63 100644
--- a/packages/marko/test/vdom-create/fixtures/textarea/index.js
+++ b/packages/marko/test/vdom-create/fixtures/textarea/index.js
@@ -15,7 +15,7 @@ module.exports = function (helpers) {
     .t("foo")
     .t("bar");
 
-  expect(textarea.___value).to.equal("foobar");
+  expect(textarea.___valueInternal).to.equal("foobar");
 
   return textarea;
 };

From 353f67917266e2c1f5aad9c4061f56e05f4544dd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Feb 2024 19:12:53 +0000
Subject: [PATCH 12/20] [ci] release

---
 .changeset/chatty-boxes-deny.md          |  6 ------
 .changeset/famous-oranges-pull.md        |  6 ------
 .changeset/shy-chicken-visit.md          |  6 ------
 .changeset/tender-emus-obey.md           |  6 ------
 package-lock.json                        |  8 ++++----
 packages/marko/CHANGELOG.md              | 15 +++++++++++++++
 packages/marko/package.json              |  4 ++--
 packages/translator-default/CHANGELOG.md | 12 ++++++++++++
 packages/translator-default/package.json |  4 ++--
 9 files changed, 35 insertions(+), 32 deletions(-)
 delete mode 100644 .changeset/chatty-boxes-deny.md
 delete mode 100644 .changeset/famous-oranges-pull.md
 delete mode 100644 .changeset/shy-chicken-visit.md
 delete mode 100644 .changeset/tender-emus-obey.md

diff --git a/.changeset/chatty-boxes-deny.md b/.changeset/chatty-boxes-deny.md
deleted file mode 100644
index f197c95aa..000000000
--- a/.changeset/chatty-boxes-deny.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Fix issue where `:no-update` modifier was not working on special element handlers.
diff --git a/.changeset/famous-oranges-pull.md b/.changeset/famous-oranges-pull.md
deleted file mode 100644
index 53b6d8655..000000000
--- a/.changeset/famous-oranges-pull.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Use vdom to vdom comparison for special attributes (input.value, input.checked and option.selected) to improve consistency with how other attributes are handled.
diff --git a/.changeset/shy-chicken-visit.md b/.changeset/shy-chicken-visit.md
deleted file mode 100644
index 2518ccc24..000000000
--- a/.changeset/shy-chicken-visit.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Avoid setting attribute value for special properties (like input.value, input.checked and option.selected)
diff --git a/.changeset/tender-emus-obey.md b/.changeset/tender-emus-obey.md
deleted file mode 100644
index 495a9a095..000000000
--- a/.changeset/tender-emus-obey.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Normalize attribute values before setting value to avoid unnecessary work.
diff --git a/package-lock.json b/package-lock.json
index 58b21c1bf..85bf805f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,11 +11940,11 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.10",
+      "version": "5.32.11",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.7",
-        "@marko/translator-default": "^5.31.15",
+        "@marko/translator-default": "^5.31.16",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
@@ -11968,7 +11968,7 @@
     },
     "packages/translator-default": {
       "name": "@marko/translator-default",
-      "version": "5.31.15",
+      "version": "5.31.16",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.8",
@@ -11978,7 +11978,7 @@
       },
       "devDependencies": {
         "@marko/compiler": "^5.34.7",
-        "marko": "^5.32.10"
+        "marko": "^5.32.11"
       },
       "peerDependencies": {
         "@marko/compiler": "^5.16.1",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 98550f30b..6f20d9c0b 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Change Log
 
+## 5.32.11
+
+### Patch Changes
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix issue where `:no-update` modifier was not working on special element handlers.
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Use vdom to vdom comparison for special attributes (input.value, input.checked and option.selected) to improve consistency with how other attributes are handled.
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Avoid setting attribute value for special properties (like input.value, input.checked and option.selected)
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Normalize attribute values before setting value to avoid unnecessary work.
+
+- Updated dependencies [[`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0), [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0), [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0), [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0)]:
+  - @marko/translator-default@5.31.16
+
 ## 5.32.10
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 1398de79a..46c9f2234 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.10",
+    "version": "5.32.11",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",
@@ -65,7 +65,7 @@
     },
     "dependencies": {
         "@marko/compiler": "^5.34.7",
-        "@marko/translator-default": "^5.31.15",
+        "@marko/translator-default": "^5.31.16",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
diff --git a/packages/translator-default/CHANGELOG.md b/packages/translator-default/CHANGELOG.md
index f9cc86f9d..f8972efd8 100644
--- a/packages/translator-default/CHANGELOG.md
+++ b/packages/translator-default/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Change Log
 
+## 5.31.16
+
+### Patch Changes
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix issue where `:no-update` modifier was not working on special element handlers.
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Use vdom to vdom comparison for special attributes (input.value, input.checked and option.selected) to improve consistency with how other attributes are handled.
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Avoid setting attribute value for special properties (like input.value, input.checked and option.selected)
+
+- [#2117](https://github.com/marko-js/marko/pull/2117) [`462992e`](https://github.com/marko-js/marko/commit/462992ee51fea27e56894b367870e608ea1009a0) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Normalize attribute values before setting value to avoid unnecessary work.
+
 ## 5.31.15
 
 ### Patch Changes
diff --git a/packages/translator-default/package.json b/packages/translator-default/package.json
index 0233f0557..e404c477b 100644
--- a/packages/translator-default/package.json
+++ b/packages/translator-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marko/translator-default",
-  "version": "5.31.15",
+  "version": "5.31.16",
   "description": "Translates Marko templates to the default Marko runtime.",
   "keywords": [
     "babel",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@marko/compiler": "^5.34.7",
-    "marko": "^5.32.10"
+    "marko": "^5.32.11"
   },
   "peerDependencies": {
     "@marko/compiler": "^5.16.1",

From ee2d9f9880273382812690bf2609c6b8d698c0b1 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Fri, 23 Feb 2024 16:12:53 -0700
Subject: [PATCH 13/20] fix: regression with attr tag and input merging

---
 .changeset/nice-masks-dress.md                |  6 ++++
 .../components/test/template.marko            |  1 +
 .../expected.html                             |  1 +
 .../template.marko                            | 18 ++++++++++
 .../nested-tag-with-existing-input/test.js    |  1 +
 .../vdom-expected.html                        |  1 +
 .../src/tag/attribute-tag.js                  | 35 ++++++++++++++++++-
 .../sanity-check/snapshots/cjs-expected.js    |  3 +-
 .../sanity-check/snapshots/html-expected.js   |  3 +-
 .../snapshots/htmlProduction-expected.js      |  3 +-
 .../sanity-check/snapshots/vdom-expected.js   |  3 +-
 .../snapshots/vdomProduction-expected.js      |  3 +-
 12 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nice-masks-dress.md
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-existing-input/components/test/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-existing-input/expected.html
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-existing-input/template.marko
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-existing-input/test.js
 create mode 100644 packages/marko/test/render/fixtures/nested-tag-with-existing-input/vdom-expected.html

diff --git a/.changeset/nice-masks-dress.md b/.changeset/nice-masks-dress.md
new file mode 100644
index 000000000..88e390efd
--- /dev/null
+++ b/.changeset/nice-masks-dress.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Fix regression with merging input and attribute tags if input defined the same property as the attribute tag name.
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-existing-input/components/test/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/components/test/template.marko
new file mode 100644
index 000000000..a2fbf80ed
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/components/test/template.marko
@@ -0,0 +1 @@
+-- item: ${JSON.stringify(input.item)}
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-existing-input/expected.html b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/expected.html
new file mode 100644
index 000000000..8f7a8ae94
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/expected.html
@@ -0,0 +1 @@
+item: {"value":1}item: [{"value":1},{"value":2}]item: {"value":1}item: [{"value":1},{"value":2}]
\ No newline at end of file
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-existing-input/template.marko b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/template.marko
new file mode 100644
index 000000000..9413308b0
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/template.marko
@@ -0,0 +1,18 @@
+<test item={ value: "BAD" }>
+    <@item value=1/>
+</>
+
+<test item={ value: "BAD" }>
+    <@item value=1/>
+    <@item value=2/>
+</>
+
+$ const stuff = { item: { value: "BAD" } };
+<test ...stuff>
+    <@item value=1/>
+</>
+
+<test ...stuff>
+    <@item value=1/>
+    <@item value=2/>
+</>
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-existing-input/test.js b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/test.js
new file mode 100644
index 000000000..c4013b344
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/test.js
@@ -0,0 +1 @@
+exports.templateData = {};
diff --git a/packages/marko/test/render/fixtures/nested-tag-with-existing-input/vdom-expected.html b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/vdom-expected.html
new file mode 100644
index 000000000..7bb85db79
--- /dev/null
+++ b/packages/marko/test/render/fixtures/nested-tag-with-existing-input/vdom-expected.html
@@ -0,0 +1 @@
+"item: {\"value\":1}item: [{\"value\":1},{\"value\":2}]item: {\"value\":1}item: [{\"value\":1},{\"value\":2}]"
diff --git a/packages/translator-default/src/tag/attribute-tag.js b/packages/translator-default/src/tag/attribute-tag.js
index 74a488863..7831610e1 100644
--- a/packages/translator-default/src/tag/attribute-tag.js
+++ b/packages/translator-default/src/tag/attribute-tag.js
@@ -10,6 +10,7 @@ import {
 import { types as t } from "@marko/compiler";
 import { getAttrs } from "./util";
 
+const attributeTagsForTag = new WeakMap();
 const contentTypeCache = new WeakMap();
 const ContentType = {
   attribute: 0,
@@ -51,7 +52,39 @@ export function analyzeAttributeTags(rootTag) {
 
         const parentTag = findParentTag(child);
         const parentTagExtra = (parentTag.node.extra ||= {});
-        parentTagExtra.hasAttributeTags = true;
+        const parentSeenAttributeTagProperties =
+          attributeTagsForTag.get(parentTag);
+        let hasAttributeTags = false;
+
+        if (!parentSeenAttributeTagProperties) {
+          parentTagExtra.hasAttributeTags = true;
+          attributeTagsForTag.set(parentTag, new Set([targetProperty]));
+        } else if (parentSeenAttributeTagProperties.has(targetProperty)) {
+          hasAttributeTags = true;
+        } else {
+          parentSeenAttributeTagProperties.add(targetProperty);
+        }
+
+        if (!hasAttributeTags) {
+          if (
+            parentTag
+              .get("attributes")
+              .some(
+                (attr) =>
+                  attr.isMarkoSpreadAttribute() ||
+                  attr.node.name === targetProperty,
+              )
+          ) {
+            parentTag.pushContainer(
+              "attributes",
+              t.markoAttribute(
+                targetProperty,
+                t.unaryExpression("void", t.numericLiteral(0)),
+              ),
+            );
+          }
+        }
+
         parentTags.push(child);
         visit.push(child);
       } else if (isTransparentTag(child)) {
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
index 24ef496d5..b2b29f666 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/cjs-expected.js
@@ -94,7 +94,8 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
     "b": {
       a: 1
     },
-    ...c
+    ...c,
+    "c": void 0
   }), out, _componentDef, "14");
   out.w(`<div${(0, _mergeAttrs.default)({
     "class": "b c",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
index 7f7fd7e02..c65385198 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/html-expected.js
@@ -89,7 +89,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     "b": {
       a: 1
     },
-    ...c
+    ...c,
+    "c": void 0
   }), out, _componentDef, "14");
   out.w(`<div${_marko_merge_attrs({
     "class": "b c",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
index 81002f2c9..e5183db31 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/htmlProduction-expected.js
@@ -76,7 +76,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     "b": {
       a: 1
     },
-    ...c
+    ...c,
+    "c": void 0
   }), out, _componentDef, "14");
   out.w(`<div${_marko_merge_attrs({
     "class": "b c",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
index aaa6b04da..aa3614c4c 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdom-expected.js
@@ -106,7 +106,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     "b": {
       a: 1
     },
-    ...c
+    ...c,
+    "c": void 0
   }), out, _componentDef, "14");
   out.be("div", _marko_merge_attrs({
     "class": "b c",
diff --git a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
index a57a1a526..0a98364df 100644
--- a/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
+++ b/packages/translator-default/test/fixtures/sanity-check/snapshots/vdomProduction-expected.js
@@ -123,7 +123,8 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     "b": {
       a: 1
     },
-    ...c
+    ...c,
+    "c": void 0
   }), out, _componentDef, "14");
   out.be("div", _marko_merge_attrs({
     "class": "b c",

From 022b4958530e0e9f1e67d7c4c163073ebb99e5fa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:45:13 +0000
Subject: [PATCH 14/20] [ci] release

---
 .changeset/nice-masks-dress.md           | 6 ------
 package-lock.json                        | 8 ++++----
 packages/marko/CHANGELOG.md              | 9 +++++++++
 packages/marko/package.json              | 4 ++--
 packages/translator-default/CHANGELOG.md | 6 ++++++
 packages/translator-default/package.json | 4 ++--
 6 files changed, 23 insertions(+), 14 deletions(-)
 delete mode 100644 .changeset/nice-masks-dress.md

diff --git a/.changeset/nice-masks-dress.md b/.changeset/nice-masks-dress.md
deleted file mode 100644
index 88e390efd..000000000
--- a/.changeset/nice-masks-dress.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@marko/translator-default": patch
-"marko": patch
----
-
-Fix regression with merging input and attribute tags if input defined the same property as the attribute tag name.
diff --git a/package-lock.json b/package-lock.json
index 85bf805f9..08f8a8684 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,11 +11940,11 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.11",
+      "version": "5.32.12",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.7",
-        "@marko/translator-default": "^5.31.16",
+        "@marko/translator-default": "^5.31.17",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
@@ -11968,7 +11968,7 @@
     },
     "packages/translator-default": {
       "name": "@marko/translator-default",
-      "version": "5.31.16",
+      "version": "5.31.17",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.8",
@@ -11978,7 +11978,7 @@
       },
       "devDependencies": {
         "@marko/compiler": "^5.34.7",
-        "marko": "^5.32.11"
+        "marko": "^5.32.12"
       },
       "peerDependencies": {
         "@marko/compiler": "^5.16.1",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 6f20d9c0b..a405ef665 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Change Log
 
+## 5.32.12
+
+### Patch Changes
+
+- [#2119](https://github.com/marko-js/marko/pull/2119) [`ee2d9f9`](https://github.com/marko-js/marko/commit/ee2d9f9880273382812690bf2609c6b8d698c0b1) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix regression with merging input and attribute tags if input defined the same property as the attribute tag name.
+
+- Updated dependencies [[`ee2d9f9`](https://github.com/marko-js/marko/commit/ee2d9f9880273382812690bf2609c6b8d698c0b1)]:
+  - @marko/translator-default@5.31.17
+
 ## 5.32.11
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 46c9f2234..887e59d40 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.11",
+    "version": "5.32.12",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",
@@ -65,7 +65,7 @@
     },
     "dependencies": {
         "@marko/compiler": "^5.34.7",
-        "@marko/translator-default": "^5.31.16",
+        "@marko/translator-default": "^5.31.17",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
diff --git a/packages/translator-default/CHANGELOG.md b/packages/translator-default/CHANGELOG.md
index f8972efd8..f679ced4a 100644
--- a/packages/translator-default/CHANGELOG.md
+++ b/packages/translator-default/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.31.17
+
+### Patch Changes
+
+- [#2119](https://github.com/marko-js/marko/pull/2119) [`ee2d9f9`](https://github.com/marko-js/marko/commit/ee2d9f9880273382812690bf2609c6b8d698c0b1) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix regression with merging input and attribute tags if input defined the same property as the attribute tag name.
+
 ## 5.31.16
 
 ### Patch Changes
diff --git a/packages/translator-default/package.json b/packages/translator-default/package.json
index e404c477b..132722d89 100644
--- a/packages/translator-default/package.json
+++ b/packages/translator-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marko/translator-default",
-  "version": "5.31.16",
+  "version": "5.31.17",
   "description": "Translates Marko templates to the default Marko runtime.",
   "keywords": [
     "babel",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@marko/compiler": "^5.34.7",
-    "marko": "^5.32.11"
+    "marko": "^5.32.12"
   },
   "peerDependencies": {
     "@marko/compiler": "^5.16.1",

From ddf3b5ef3279e3b0a93271d3022074393559aafd Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Sun, 25 Feb 2024 14:08:56 -0700
Subject: [PATCH 15/20] fix: split text node hydrate issue

---
 .changeset/modern-toes-exist.md               |  5 +++
 .../marko/src/runtime/vdom/morphdom/index.js  | 39 ++++++++++---------
 2 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/modern-toes-exist.md

diff --git a/.changeset/modern-toes-exist.md b/.changeset/modern-toes-exist.md
new file mode 100644
index 000000000..acf4c6f9a
--- /dev/null
+++ b/.changeset/modern-toes-exist.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix issue where splitText was incorrectly called during hydrate when the text node content did not match up.
diff --git a/packages/marko/src/runtime/vdom/morphdom/index.js b/packages/marko/src/runtime/vdom/morphdom/index.js
index 1cb544f3b..fa2c0d1ad 100644
--- a/packages/marko/src/runtime/vdom/morphdom/index.js
+++ b/packages/marko/src/runtime/vdom/morphdom/index.js
@@ -179,7 +179,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           (matchingFromComponent = existingComponentLookup[component.id]) ===
           undefined
         ) {
-          if (isHydrate === true) {
+          if (isHydrate) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
             component.___rootNode = rootNode;
             componentByDOMNode.set(rootNode, component);
@@ -321,7 +321,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             matchingFromEl === undefined ||
             matchingFromEl === curFromNodeChild
           ) {
-            if (isHydrate === true && curFromNodeChild) {
+            if (isHydrate && curFromNodeChild) {
               if (
                 curFromNodeChild.nodeType === ELEMENT_NODE &&
                 (curToNodeChild.___preserve ||
@@ -544,7 +544,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             // Both nodes being compared are Element nodes
             curVFromNodeChild = vElementByDOMNode.get(curFromNodeChild);
             if (curVFromNodeChild === undefined) {
-              if (isHydrate === true) {
+              if (isHydrate) {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
 
                 if (
@@ -587,21 +587,24 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           ) {
             // Both nodes being compared are Text or Comment nodes
             isCompatible = true;
-            // Simply update nodeValue on the original node to
-            // change the text value
-
-            if (
-              isHydrate === true &&
-              toNextSibling &&
-              curFromNodeType === TEXT_NODE &&
-              toNextSibling.___nodeType === TEXT_NODE
-            ) {
-              fromNextSibling = curFromNodeChild.splitText(
-                curToNodeChild.___nodeValue.length,
-              );
-            }
-            if (curFromNodeChild.nodeValue !== curToNodeChild.___nodeValue) {
-              curFromNodeChild.nodeValue = curToNodeChild.___nodeValue;
+            var curToNodeValue = curToNodeChild.___nodeValue;
+            var curFromNodeValue = curFromNodeChild.nodeValue;
+            if (curFromNodeValue !== curToNodeValue) {
+              if (
+                isHydrate &&
+                curFromNodeType === TEXT_NODE &&
+                curFromNodeValue.startsWith(curToNodeValue)
+              ) {
+                // In hydrate mode we can use splitText to more efficiently handle
+                // adjacent text vdom nodes that were merged.
+                fromNextSibling = curFromNodeChild.splitText(
+                  curToNodeValue.length,
+                );
+              } else {
+                // Simply update nodeValue on the original node to
+                // change the text value
+                curFromNodeChild.nodeValue = curToNodeValue;
+              }
             }
           }
         }

From eefe453dbcea2522319239b28db318ed09f00442 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 25 Feb 2024 21:25:56 +0000
Subject: [PATCH 16/20] [ci] release

---
 .changeset/modern-toes-exist.md | 5 -----
 package-lock.json               | 2 +-
 packages/marko/CHANGELOG.md     | 6 ++++++
 packages/marko/package.json     | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/modern-toes-exist.md

diff --git a/.changeset/modern-toes-exist.md b/.changeset/modern-toes-exist.md
deleted file mode 100644
index acf4c6f9a..000000000
--- a/.changeset/modern-toes-exist.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"marko": patch
----
-
-Fix issue where splitText was incorrectly called during hydrate when the text node content did not match up.
diff --git a/package-lock.json b/package-lock.json
index 08f8a8684..eb7ad1283 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,7 +11940,7 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.12",
+      "version": "5.32.13",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.7",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index a405ef665..51a97b67b 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.32.13
+
+### Patch Changes
+
+- [#2121](https://github.com/marko-js/marko/pull/2121) [`ddf3b5e`](https://github.com/marko-js/marko/commit/ddf3b5ef3279e3b0a93271d3022074393559aafd) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix issue where splitText was incorrectly called during hydrate when the text node content did not match up.
+
 ## 5.32.12
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 887e59d40..9391be51b 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.12",
+    "version": "5.32.13",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",

From 5bcc111a1c7607948413a5cf798d66afc3077a91 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Tue, 27 Feb 2024 12:06:17 -0700
Subject: [PATCH 17/20] fix: renderBody regression with attribute tags

---
 .changeset/mighty-pugs-burn.md                 | 5 +++++
 packages/marko/src/runtime/helpers/attr-tag.js | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/mighty-pugs-burn.md

diff --git a/.changeset/mighty-pugs-burn.md b/.changeset/mighty-pugs-burn.md
new file mode 100644
index 000000000..06ba8ad34
--- /dev/null
+++ b/.changeset/mighty-pugs-burn.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix regression where attribute tags used without renderBody content was clearing existing renderBody content in the input, eg via a spread.
diff --git a/packages/marko/src/runtime/helpers/attr-tag.js b/packages/marko/src/runtime/helpers/attr-tag.js
index 089879b78..56e12600a 100644
--- a/packages/marko/src/runtime/helpers/attr-tag.js
+++ b/packages/marko/src/runtime/helpers/attr-tag.js
@@ -28,7 +28,10 @@ exports.i = function attrTagInput(render, input) {
   var prevOwnerInput = ownerInput;
   ownerInput = input || {};
   try {
-    ownerInput.renderBody = render();
+    var renderBody = render();
+    if (renderBody) {
+      ownerInput.renderBody = renderBody;
+    }
     return ownerInput;
   } finally {
     ownerInput = prevOwnerInput;

From c7da970d7549710b1e8a3d010d11633e56eae11d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 27 Feb 2024 19:15:02 +0000
Subject: [PATCH 18/20] [ci] release

---
 .changeset/mighty-pugs-burn.md | 5 -----
 package-lock.json              | 2 +-
 packages/marko/CHANGELOG.md    | 6 ++++++
 packages/marko/package.json    | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/mighty-pugs-burn.md

diff --git a/.changeset/mighty-pugs-burn.md b/.changeset/mighty-pugs-burn.md
deleted file mode 100644
index 06ba8ad34..000000000
--- a/.changeset/mighty-pugs-burn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"marko": patch
----
-
-Fix regression where attribute tags used without renderBody content was clearing existing renderBody content in the input, eg via a spread.
diff --git a/package-lock.json b/package-lock.json
index eb7ad1283..6a04c1f95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,7 +11940,7 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.13",
+      "version": "5.32.14",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.7",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 51a97b67b..764ed26cf 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.32.14
+
+### Patch Changes
+
+- [#2123](https://github.com/marko-js/marko/pull/2123) [`5bcc111`](https://github.com/marko-js/marko/commit/5bcc111a1c7607948413a5cf798d66afc3077a91) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix regression where attribute tags used without renderBody content was clearing existing renderBody content in the input, eg via a spread.
+
 ## 5.32.13
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 9391be51b..87d90e1cb 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.13",
+    "version": "5.32.14",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",

From f3004d7baddd22a022217bb5e50ef8e6b6a80354 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Fri, 1 Mar 2024 14:08:50 -0700
Subject: [PATCH 19/20] fix: issue with component custom events being null

---
 .changeset/red-knives-change.md                   | 5 +++++
 packages/marko/src/runtime/components/renderer.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/red-knives-change.md

diff --git a/.changeset/red-knives-change.md b/.changeset/red-knives-change.md
new file mode 100644
index 000000000..3157613af
--- /dev/null
+++ b/.changeset/red-knives-change.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix incorrect check for if a component has custom events
diff --git a/packages/marko/src/runtime/components/renderer.js b/packages/marko/src/runtime/components/renderer.js
index 57de50ace..374872b11 100644
--- a/packages/marko/src/runtime/components/renderer.js
+++ b/packages/marko/src/runtime/components/renderer.js
@@ -172,7 +172,7 @@ function createRendererFunc(
         // so we don't want to queue it up as a result of calling `setInput()`
         component.___updateQueued = true;
 
-        if (customEvents !== undefined) {
+        if (customEvents) {
           component.___setCustomEvents(customEvents, ownerComponentId);
         }
 

From 63ebf88be9c907457990f853ef5db767a1b3127c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Mar 2024 21:34:45 +0000
Subject: [PATCH 20/20] [ci] release

---
 .changeset/red-knives-change.md | 5 -----
 package-lock.json               | 2 +-
 packages/marko/CHANGELOG.md     | 6 ++++++
 packages/marko/package.json     | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/red-knives-change.md

diff --git a/.changeset/red-knives-change.md b/.changeset/red-knives-change.md
deleted file mode 100644
index 3157613af..000000000
--- a/.changeset/red-knives-change.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"marko": patch
----
-
-Fix incorrect check for if a component has custom events
diff --git a/package-lock.json b/package-lock.json
index 6a04c1f95..2fea357be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11940,7 +11940,7 @@
       "license": "Apache-2.0"
     },
     "packages/marko": {
-      "version": "5.32.14",
+      "version": "5.32.15",
       "license": "MIT",
       "dependencies": {
         "@marko/compiler": "^5.34.7",
diff --git a/packages/marko/CHANGELOG.md b/packages/marko/CHANGELOG.md
index 764ed26cf..b48e3e87c 100644
--- a/packages/marko/CHANGELOG.md
+++ b/packages/marko/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.32.15
+
+### Patch Changes
+
+- [#2132](https://github.com/marko-js/marko/pull/2132) [`f3004d7`](https://github.com/marko-js/marko/commit/f3004d7baddd22a022217bb5e50ef8e6b6a80354) Thanks [@DylanPiercey](https://github.com/DylanPiercey)! - Fix incorrect check for if a component has custom events
+
 ## 5.32.14
 
 ### Patch Changes
diff --git a/packages/marko/package.json b/packages/marko/package.json
index 87d90e1cb..e41839810 100644
--- a/packages/marko/package.json
+++ b/packages/marko/package.json
@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.14",
+    "version": "5.32.15",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",