@marko/language-tools 2.5.43 → 2.5.45

package/dist/extractors/script/util/attach-scopes.d.ts

@@ -9,13 +9,11 @@ export interface ProgramScope {
     parent: undefined;
     hoists: false;
     bindings: Bindings;
-    mutatedBindings: undefined | Set<VarBinding>;
 }
 export interface TagScope {
     parent: Scope;
     hoists: boolean;
     bindings: undefined | Bindings;
-    mutatedBindings: undefined | Set<VarBinding>;
 }
 export type Binding = VarBinding | ParamBinding | HoistedBinding;
 export interface VarBinding {
@@ -46,22 +44,26 @@ export declare enum BindingType {
     param = 1,
     hoisted = 2
 }
+export interface Mutation {
+    start: number;
+    binding: VarBinding;
+}
 type Bindings = {
     [name: string]: Binding;
 };
 /**
  * Traverses the Marko tree and analyzes the bindings.
  */
-export declare function crawlProgramScope(parsed: Parsed, scriptParser: ScriptParser): [number, ...number[]] | [...number[], number] | undefined;
+export declare function crawlProgramScope(parsed: Parsed, scriptParser: ScriptParser): [Mutation, ...Mutation[]] | [...Mutation[], Mutation] | undefined;
 export declare function getProgramBindings(node: Node.Program): {
     all: Repeated<string>;
     vars: Repeatable<string>;
     hoists: Repeatable<string>;
 } | undefined;
+export declare function getMutatedVars(tag: Node.Tag): Repeatable<VarBinding>;
 export declare function getHoistSources(body: Node.ParentNode["body"]): Repeatable<string>;
-export declare function getMutatedVars(node: Node.ParentNode): Set<VarBinding> | undefined;
 export declare function isMutatedVar(node: Node.ParentNode, name: string): boolean;
-export declare function hasHoists(node: Node.ParentTag): boolean;
+export declare function hasHoists(node: Node.Tag): boolean;
 export declare function getBoundAttrRange(value: Node.AttrValue): {
     value: Range;
     types: undefined | Range;

package/dist/index.js

@@ -1089,8 +1089,7 @@ function crawlProgramScope(parsed, scriptParser) {
   const programScope = {
     parent: void 0,
     hoists: false,
-    bindings: {},
-    mutatedBindings: void 0
+    bindings: {}
   };
   programScope.bindings.input = {
     type: 1 /* param */,
@@ -1140,7 +1139,7 @@ function crawlProgramScope(parsed, scriptParser) {
     }
   }
   if (mutations.length) {
-    return mutations.sort((a, b) => a - b);
+    return mutations.sort(byStart);
   }
   function visit(body, parentScope) {
     var _a2;
@@ -1182,8 +1181,7 @@ function crawlProgramScope(parsed, scriptParser) {
             const bodyScope = {
               parent: parentScope,
               hoists: false,
-              bindings: {},
-              mutatedBindings: void 0
+              bindings: {}
             };
             if (child.params) {
               bodyScope.bindings ??= {};
@@ -1263,9 +1261,6 @@ ${read({
                             );
                             if (binding) {
                               binding.mutated = true;
-                              (parentScope.mutatedBindings ||= /* @__PURE__ */ new Set()).add(
-                                binding
-                              );
                             }
                             BoundAttrValueRange.set(attr.value, {
                               types,
@@ -1358,6 +1353,21 @@ function getProgramBindings(node) {
     };
   }
 }
+function getMutatedVars(tag) {
+  const { bindings } = Scopes.get(tag.parent.body);
+  let vars;
+  for (const key in bindings) {
+    const binding = bindings[key];
+    if (binding.type == 0 /* var */ && binding.node === tag && binding.mutated) {
+      if (vars) {
+        vars.push(binding);
+      } else {
+        vars = [binding];
+      }
+    }
+  }
+  return vars;
+}
 function getHoistSources(body) {
   let result;
   if (body) {
@@ -1374,17 +1384,10 @@ function getHoistSources(body) {
   }
   return result;
 }
-function getMutatedVars(node) {
-  return Scopes.get(node.body).mutatedBindings;
-}
 function isMutatedVar(node, name) {
-  const { mutatedBindings } = Scopes.get(node.body);
-  if (mutatedBindings) {
-    for (const binding of mutatedBindings) {
-      if (binding.name === name) return true;
-    }
-  }
-  return false;
+  var _a;
+  const binding = (_a = Scopes.get(node.body).bindings) == null ? void 0 : _a[name];
+  return (binding == null ? void 0 : binding.type) === 0 /* var */ && binding.mutated;
 }
 function hasHoists(node) {
   return node.body ? Scopes.get(node.body).hoists : false;
@@ -1629,12 +1632,11 @@ function trackMutations(node, scope, mutations, parentBlock, parentBlockShadows,
   }
   if (block !== parentBlock && blockMutations.length) {
     for (const { name, start } of blockMutations) {
-      if (blockShadows.has(name)) continue;
+      if (start == null || blockShadows.has(name)) continue;
       const binding = resolveWritableVar(scope, name);
       if (binding) {
         binding.mutated = true;
-        mutations.push(start);
-        (scope.mutatedBindings ||= /* @__PURE__ */ new Set()).add(binding);
+        mutations.push({ start, binding });
       }
     }
   }
@@ -1660,6 +1662,9 @@ function traverse(node, enter) {
     }
   }
 }
+function byStart(a, b) {
+  return a.start - b.start;
+}
 
 // src/extractors/script/util/get-component-filename.ts
 var import_fs = __toESM(require("fs"));
@@ -2002,6 +2007,9 @@ var REG_OBJECT_PROPERTY = /^[_$a-z][_$a-z0-9]*$/i;
 var REG_COMMENT_PRAGMA = /\/\/(?:\s*@ts-|\/\s*<)/y;
 var REG_TAG_NAME_IDENTIFIER = /^[A-Z][a-zA-Z0-9_$]+$/;
 var IF_TAG_ALTERNATES = /* @__PURE__ */ new WeakMap();
+var TAG_ID = /* @__PURE__ */ new WeakMap();
+var RENDER_VAR = /* @__PURE__ */ new WeakMap();
+var TEMPLATE_VAR = /* @__PURE__ */ new WeakMap();
 var WROTE_COMMENT = /* @__PURE__ */ new WeakSet();
 var START_OF_FILE = { start: 0, end: 0 };
 var ScriptLang = /* @__PURE__ */ ((ScriptLang2) => {
@@ -2022,14 +2030,11 @@ var ScriptExtractor = class {
   #scriptParser;
   #read;
   #lookup;
-  #tagIds = /* @__PURE__ */ new Map();
-  #renderIds = /* @__PURE__ */ new Map();
   #scriptLang;
   #ts;
   #runtimeTypes;
-  #mutationOffsets;
+  #mutations;
   #tagId = 1;
-  #renderId = 1;
   #closeBrackets = [0];
   constructor(opts) {
     const { parsed, lookup, scriptLang } = opts;
@@ -2050,7 +2055,7 @@ var ScriptExtractor = class {
     this.#extractor = new Extractor(parsed);
     this.#scriptParser = new ScriptParser(parsed);
     this.#read = parsed.read.bind(parsed);
-    this.#mutationOffsets = crawlProgramScope(this.#parsed, this.#scriptParser);
+    this.#mutations = crawlProgramScope(this.#parsed, this.#scriptParser);
     this.#writeProgram(parsed.program);
   }
   end() {
@@ -2213,7 +2218,7 @@ function ${templateName}() {
     this.#extractor.write(`  const input = ${this.#getCastedType(`Input${typeArgsStr}`)};${this.#api === RuntimeAPI.class ? `
   const component = ${this.#getCastedType(`Component${typeArgsStr}`)};
   const state = ${varShared("state")}(component);
-  const out = ${varShared("out")};` : ""}
+  const out = ${this.#getCastedType("Marko.Out")};` : ""}
   const $signal = ${this.#getCastedType("AbortSignal")};
   const $global = ${varShared("getGlobal")}(
     // @ts-expect-error We expect the compiler to error because we are checking if the MarkoRun.Context is defined.
@@ -2231,7 +2236,7 @@ function ${templateName}() {
       }
     }
     if (body == null ? void 0 : body.content) {
-      this.#writeChildren(program, body.content);
+      this.#writeChildren(body.content);
       if (bindings) {
         if (bindings.vars) {
           for (const name of bindings.vars) {
@@ -2255,7 +2260,7 @@ function ${templateName}() {
 `
     );
     if (didReturn) {
-      this.#extractor.write(`return ${varLocal("return")}.return;
+      this.#extractor.write(`return ${varLocal("return")};
 }
 `);
     } else {
@@ -2360,7 +2365,7 @@ constructor(_?: Return) {}
     this.#extractor.copy(returned);
     this.#extractor.write(");\n");
   }
-  #writeChildren(parent, children, skipRenderId = false) {
+  #writeChildren(children, skipRenderId = false) {
     var _a, _b;
     const last = children.length - 1;
     let returnTag;
@@ -2376,21 +2381,19 @@ constructor(_?: Return) {}
               break;
             case "if": {
               const alternates = IF_TAG_ALTERNATES.get(child);
-              let renderId;
+              let didHoist = false;
               if (!skipRenderId) {
-                renderId = this.#getRenderId(child);
-                if (!renderId && alternates) {
+                didHoist = hasHoists(child);
+                if (!didHoist && alternates) {
                   for (const { node } of alternates) {
-                    if (renderId = this.#getRenderId(node)) {
-                      this.#renderIds.set(child, renderId);
-                      this.#renderIds.delete(node);
+                    if (didHoist = hasHoists(node)) {
                       break;
                     }
                   }
                 }
-                if (renderId) {
+                if (didHoist) {
                   this.#extractor.write(
-                    `const ${varLocal("rendered_" + renderId)} = (() => {
+                    `const ${this.#getRenderVar(child, true)} = (() => {
 `
                   );
                 }
@@ -2401,7 +2404,7 @@ constructor(_?: Return) {}
               ).write(") {\n");
               const ifBody = this.#processBody(child);
               if (ifBody == null ? void 0 : ifBody.content) {
-                this.#writeChildren(child, ifBody.content, true);
+                this.#writeChildren(ifBody.content, true);
                 const scopeExpr = this.#getScopeExpression(child.body);
                 if (scopeExpr) {
                   this.#extractor.write(`return {
@@ -2425,7 +2428,7 @@ scope: ${scopeExpr}
                   }
                   const alternateBody = this.#processBody(node);
                   if (alternateBody == null ? void 0 : alternateBody.content) {
-                    this.#writeChildren(node, alternateBody.content, true);
+                    this.#writeChildren(alternateBody.content, true);
                     const scopeExpr = this.#getScopeExpression(node.body);
                     if (scopeExpr) {
                       this.#extractor.write(
@@ -2439,21 +2442,20 @@ scope: ${scopeExpr}
                   }
                 }
               }
-              if (needsAlternate && renderId) {
+              if (needsAlternate && didHoist) {
                 this.#extractor.write("\n} else {\nreturn undefined;\n}\n");
               } else {
                 this.#extractor.write("\n}\n");
               }
-              if (renderId) {
+              if (didHoist) {
                 this.#extractor.write("\n})();\n");
               }
               break;
             }
             case "for": {
-              const renderId = this.#getRenderId(child);
-              if (renderId) {
+              if (hasHoists(child)) {
                 this.#extractor.write(
-                  `const ${varLocal("rendered_" + renderId)} = `
+                  `const ${this.#getRenderVar(child, true)} = `
                 );
               }
               this.#extractor.write(
@@ -2470,7 +2472,7 @@ scope: ${scopeExpr}
               this.#extractor.write("\n) => {\n");
               const body = this.#processBody(child);
               if (body == null ? void 0 : body.content) {
-                this.#writeChildren(child, body.content);
+                this.#writeChildren(body.content);
               }
               this.#writeReturn(void 0, (body == null ? void 0 : body.content) && child.body);
               if (body == null ? void 0 : body.content) {
@@ -2486,7 +2488,7 @@ scope: ${scopeExpr}
               ).write("\n) {\n");
               const body = this.#processBody(child);
               if (body == null ? void 0 : body.content) {
-                this.#writeChildren(child, body.content);
+                this.#writeChildren(body.content);
                 this.#endChildren();
               }
               this.#extractor.write("\n}\n");
@@ -2505,59 +2507,29 @@ scope: ${scopeExpr}
           break;
       }
     }
-    const mutatedVars = getMutatedVars(parent);
-    if (returnTag || mutatedVars) {
-      this.#extractor.write(`var ${varLocal("return")} = {
-`);
-      if (returnTag) {
-        this.#extractor.write(`return: ${varShared("returnTag")}(`);
-        this.#writeTagInputObject(returnTag);
-        this.#extractor.write(")");
-        if (mutatedVars) {
-          this.#extractor.write(",\n");
-        }
-      }
-      if (mutatedVars) {
-        this.#extractor.write(`mutate: ${varShared("mutable")}([
-`);
-        for (const binding of mutatedVars) {
-          this.#extractor.write(
-            `${// TODO use a different format to avoid const annotation.
-            this.#scriptLang === "js" /* js */ ? "/** @type {const} */" : ""}[${JSON.stringify(binding.name) + (binding.sourceName && binding.sourceName !== binding.name ? `, ${JSON.stringify(binding.sourceName)}` : "")}, ${varLocal(
-              "rendered_" + this.#getRenderId(binding.node)
-            )}.return${binding.objectPath || ""}]${SEP_COMMA_NEW_LINE}`
-          );
-        }
-        this.#extractor.write(
-          `]${this.#scriptLang === "ts" /* ts */ ? " as const" : ""})`
-        );
-      }
-      this.#extractor.write("\n};\n");
-      if (mutatedVars) {
-        this.#extractor.write(`${varShared("noop")}({
-`);
-        for (const binding of mutatedVars) {
-          this.#extractor.write(binding.name + SEP_COMMA_NEW_LINE);
-        }
-        this.#extractor.write("});\n");
-      }
+    if (returnTag) {
+      this.#extractor.write(
+        `var ${varLocal("return")} = ${varShared("returnTag")}(`
+      );
+      this.#writeTagInputObject(returnTag);
+      this.#extractor.write(");\n");
     }
     return returnTag !== void 0;
   }
   #writeTag(tag) {
     const tagName = tag.nameText;
-    const renderId = this.#getRenderId(tag);
     const def = tagName ? this.#lookup.getTag(tagName) : void 0;
     const importPath = resolveTagImport(this.#filename, def);
     const isHTML = !importPath && (def == null ? void 0 : def.html);
-    let tagIdentifier;
     let isTemplate = false;
+    let renderVar;
+    let templateVar;
     if (!def || importPath) {
       const isIdentifier = tagName && REG_TAG_NAME_IDENTIFIER.test(tagName);
       const isMarkoFile = importPath == null ? void 0 : importPath.endsWith(".marko");
       if (isIdentifier || isMarkoFile || !importPath) {
-        tagIdentifier = varLocal("tag_" + this.#ensureTagId(tag));
-        this.#extractor.write(`const ${tagIdentifier} = (
+        templateVar = this.#getTemplateVar(tag, true);
+        this.#extractor.write(`const ${templateVar} = (
 `);
         if (isIdentifier) {
           if (importPath) {
@@ -2577,22 +2549,23 @@ scope: ${scopeExpr}
         }
         this.#extractor.write("\n);\n");
       } else {
-        tagIdentifier = varShared("missingTag");
+        templateVar = varShared("missingTag");
       }
       const attrTagTree = this.#getAttrTagTree(tag);
       if (attrTagTree) {
-        this.#writeAttrTagTree(attrTagTree, tagIdentifier);
+        this.#writeAttrTagTree(attrTagTree, templateVar);
         this.#extractor.write(";\n");
       }
     }
-    if (renderId) {
-      this.#extractor.write(`const ${varLocal("rendered_" + renderId)} = `);
+    if (!isHTML && tag.var || hasHoists(tag)) {
+      renderVar = this.#getRenderVar(tag, true);
+      this.#extractor.write(`const ${renderVar} = `);
     }
     if (isHTML) {
       this.#extractor.write(`${varShared("renderNativeTag")}("`).copy(isEmptyRange2(tag.name) ? tagName : tag.name).write('")');
-    } else if (tagIdentifier) {
+    } else if (templateVar) {
       this.#extractor.write(
-        `${varShared(isTemplate ? "renderTemplate" : "renderDynamicTag")}(${tagIdentifier})`
+        `${varShared(isTemplate ? "renderTemplate" : "renderDynamicTag")}(${templateVar})`
       );
     } else {
       this.#extractor.write(varShared("missingTag"));
@@ -2604,14 +2577,26 @@ scope: ${scopeExpr}
     }
     this.#writeTagInputObject(tag);
     this.#extractor.write(");\n");
-    if (renderId && tag.var) {
+    if (tag.var) {
       this.#extractor.write(`{const `);
       this.#closeBrackets[this.#closeBrackets.length - 1]++;
-      this.#copyWithMutationsReplaced(tag.var.value);
-      this.#extractor.write(
-        ` = ${varLocal("rendered_" + renderId)}.return.${ATTR_UNAMED2};
+      if (renderVar) {
+        const mutatedVars = getMutatedVars(tag);
+        this.#copyWithMutationsReplaced(tag.var.value);
+        this.#extractor.write(` = ${renderVar}.return.${ATTR_UNAMED2};
+`);
+        if (mutatedVars) {
+          for (const binding of mutatedVars) {
+            this.#extractor.write(
+              `const ${varLocal(`change__${binding.name}`)} = ${varShared("change")}(${JSON.stringify(binding.name) + (binding.sourceName && binding.sourceName !== binding.name ? `, ${JSON.stringify(binding.sourceName)}` : "")}, ${renderVar}.return${binding.objectPath || ""});
 `
-      );
+            );
+          }
+        }
+      } else if (isHTML) {
+        this.#extractor.copy(tag.var.value).write(` = ${varShared("el")}(${JSON.stringify(def.name)});
+`);
+      }
     }
   }
   #endChildren() {
@@ -2707,8 +2692,10 @@ scope: ${scopeExpr}
                       const valueLiteral = this.#read(boundRange.value);
                       this.#extractor.copy(boundRange.value).copy(boundRange.types).write(`
 )${SEP_COMMA_NEW_LINE}"`).copy(defaultMapPosition).copy(name).write(
-                        `Change"(_${valueLiteral}) {
-${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}`
+                        `Change"(
+// @ts-ignore
+_${valueLiteral}) {
+${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`) : ""}`
                       ).copy(boundRange.value).write(`= _${valueLiteral};
 }`);
                     } else if (boundRange.member.computed) {
@@ -2824,8 +2811,8 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       this.#writeTagNameComment(firstAttrTag);
       this.#extractor.write("]: ");
       if (isRepeated) {
-        const tagId = this.#tagIds.get(firstAttrTag.owner);
-        if (tagId) {
+        const templateVar = this.#getTemplateVar(firstAttrTag.owner);
+        if (templateVar) {
           let accessor = `"${name}"`;
           let curTag = firstAttrTag.parent;
           while (curTag) {
@@ -2837,7 +2824,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
             curTag = curTag.parent;
           }
           this.#extractor.write(
-            `${varShared("attrTagFor")}(${varLocal("tag_" + tagId)},${accessor})([`
+            `${varShared("attrTagFor")}(${templateVar},${accessor})([`
           );
         } else {
           this.#extractor.write(`${varShared("attrTag")}([`);
@@ -2961,13 +2948,11 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     if (tag.params || hasBodyContent) {
       this.#extractor.write("[");
       if (this.#interop) {
-        const tagId = this.#tagIds.get(
+        const templateVar = this.#getTemplateVar(
           tag.type === 16 /* AttrTag */ ? tag.owner : tag
         );
-        if (tagId) {
-          this.#extractor.write(
-            `${varShared("contentFor")}(${varLocal("tag_" + tagId)})`
-          );
+        if (templateVar) {
+          this.#extractor.write(`${varShared("contentFor")}(${templateVar})`);
         } else {
           this.#extractor.write(varShared("content"));
         }
@@ -2988,16 +2973,13 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       }
       let didReturn = false;
       if (body == null ? void 0 : body.content) {
-        didReturn = this.#writeChildren(tag, body.content);
+        didReturn = this.#writeChildren(body.content);
       }
       if (!tag.params) {
         this.#extractor.write(`return () => {
 `);
       }
-      this.#writeReturn(
-        didReturn ? `${varLocal("return")}.return` : void 0,
-        tag.body
-      );
+      this.#writeReturn(didReturn ? varLocal("return") : void 0, tag.body);
       if (body == null ? void 0 : body.content) {
         this.#endChildren();
       }
@@ -3022,7 +3004,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     return this.#scriptLang === "ts" /* ts */ ? `${varShared("any")} as ${type}` : `/** @type {${type}} */(${varShared("any")})`;
   }
   #copyWithMutationsReplaced(range) {
-    const mutations = this.#mutationOffsets;
+    const mutations = this.#mutations;
     if (!mutations) return this.#extractor.copy(range);
     const len = mutations.length;
     let curOffset = range.start;
@@ -3031,23 +3013,23 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       let maxIndex = len;
       while (minIndex < maxIndex) {
         const midIndex = minIndex + maxIndex >>> 1;
-        if (mutations[midIndex] >= curOffset) {
+        if (mutations[midIndex].start >= curOffset) {
           maxIndex = midIndex;
         } else {
           minIndex = midIndex + 1;
         }
       }
-      const nextOffset = maxIndex === len ? range.end : mutations[maxIndex];
-      if (nextOffset >= range.end) {
+      const mutation = maxIndex !== len && mutations[maxIndex];
+      if (!mutation || mutation.start >= range.end) {
         this.#extractor.copy({
           start: curOffset,
           end: range.end
         });
         return;
       }
-      this.#extractor.copy({ start: curOffset, end: nextOffset });
-      this.#extractor.write(`${varLocal("return")}.mutate.`);
-      curOffset = nextOffset;
+      this.#extractor.copy({ start: curOffset, end: mutation.start });
+      this.#extractor.write(`${varLocal(`change__${mutation.binding.name}`)}.`);
+      curOffset = mutation.start;
       minIndex = maxIndex + 1;
     } while (true);
   }
@@ -3199,7 +3181,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     if (body) {
       if (body.content) {
         this.#extractor.write("(() => {\n");
-        this.#writeChildren(tag, body.content);
+        this.#writeChildren(body.content);
         this.#extractor.write("return ");
       }
       this.#extractor.write("{\n");
@@ -3301,13 +3283,27 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       return tag.name.expressions[0].value;
     }
   }
-  #getRenderId(tag) {
-    let renderId = this.#renderIds.get(tag);
-    if (!renderId && (tag.var || hasHoists(tag))) {
-      renderId = this.#renderId++;
-      this.#renderIds.set(tag, renderId);
+  #getRenderVar(tag, declared = false) {
+    let id = RENDER_VAR.get(tag);
+    if (!id && declared) {
+      RENDER_VAR.set(tag, id = varLocal("rendered_" + this.#getTagId(tag)));
+    }
+    return id;
+  }
+  #getTemplateVar(tag, declared = false) {
+    let id = TEMPLATE_VAR.get(tag);
+    if (!id && declared) {
+      TEMPLATE_VAR.set(tag, id = varLocal("tag_" + this.#getTagId(tag)));
+    }
+    return id;
+  }
+  #getTagId(tag) {
+    let id = TAG_ID.get(tag);
+    if (id === void 0) {
+      id = this.#tagId++;
+      TAG_ID.set(tag, id);
     }
-    return renderId;
+    return id;
   }
   #getScopeExpression(body) {
     const sources = getHoistSources(body);
@@ -3315,39 +3311,27 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     return sources ? `{ ${hoists ? `...${hoists}, ` : ""}${sources.join(SEP_COMMA_SPACE)} }` : hoists;
   }
   #getBodyHoistScopeExpression(body) {
-    let hoistIds;
+    let hoistVars;
     if (body) {
       for (const child of body) {
-        const renderId = child.type === 1 /* Tag */ && this.#renderIds.get(child);
-        if (renderId && (!child.var || hasHoists(child))) {
-          if (hoistIds) {
-            hoistIds.push(renderId);
-          } else {
-            hoistIds = [renderId];
+        if (child.type === 1 /* Tag */) {
+          const renderVar = this.#getRenderVar(child);
+          if (renderVar && (!child.var || hasHoists(child))) {
+            if (hoistVars) {
+              hoistVars.push(renderVar);
+            } else {
+              hoistVars = [renderVar];
+            }
           }
         }
       }
     }
-    if (hoistIds) {
-      if (hoistIds.length === 1) {
-        return `${varShared("readScope")}(${varLocal("rendered_" + hoistIds[0])})`;
+    if (hoistVars) {
+      if (hoistVars.length === 1) {
+        return `${varShared("readScope")}(${hoistVars[0]})`;
       }
-      let result = `${varShared("readScopes")}({ `;
-      let sep = "";
-      for (const renderId of hoistIds) {
-        result += sep + `${varLocal("rendered_" + renderId)}`;
-        sep = SEP_COMMA_SPACE;
-      }
-      return result + " })";
-    }
-  }
-  #ensureTagId(tag) {
-    let tagId = this.#tagIds.get(tag);
-    if (!tagId) {
-      tagId = this.#tagId++;
-      this.#tagIds.set(tag, tagId);
+      return `${varShared("readScopes")}({ ${hoistVars.join(SEP_COMMA_SPACE)} })`;
     }
-    return tagId;
   }
   #getNamedAttrModifierIndex(attr) {
     const start = attr.name.start + 1;

package/dist/index.mjs

@@ -1049,8 +1049,7 @@ function crawlProgramScope(parsed, scriptParser) {
   const programScope = {
     parent: void 0,
     hoists: false,
-    bindings: {},
-    mutatedBindings: void 0
+    bindings: {}
   };
   programScope.bindings.input = {
     type: 1 /* param */,
@@ -1100,7 +1099,7 @@ function crawlProgramScope(parsed, scriptParser) {
     }
   }
   if (mutations.length) {
-    return mutations.sort((a, b) => a - b);
+    return mutations.sort(byStart);
   }
   function visit(body, parentScope) {
     var _a2;
@@ -1142,8 +1141,7 @@ function crawlProgramScope(parsed, scriptParser) {
             const bodyScope = {
               parent: parentScope,
               hoists: false,
-              bindings: {},
-              mutatedBindings: void 0
+              bindings: {}
             };
             if (child.params) {
               bodyScope.bindings ??= {};
@@ -1223,9 +1221,6 @@ ${read({
                             );
                             if (binding) {
                               binding.mutated = true;
-                              (parentScope.mutatedBindings ||= /* @__PURE__ */ new Set()).add(
-                                binding
-                              );
                             }
                             BoundAttrValueRange.set(attr.value, {
                               types,
@@ -1318,6 +1313,21 @@ function getProgramBindings(node) {
     };
   }
 }
+function getMutatedVars(tag) {
+  const { bindings } = Scopes.get(tag.parent.body);
+  let vars;
+  for (const key in bindings) {
+    const binding = bindings[key];
+    if (binding.type == 0 /* var */ && binding.node === tag && binding.mutated) {
+      if (vars) {
+        vars.push(binding);
+      } else {
+        vars = [binding];
+      }
+    }
+  }
+  return vars;
+}
 function getHoistSources(body) {
   let result;
   if (body) {
@@ -1334,17 +1344,10 @@ function getHoistSources(body) {
   }
   return result;
 }
-function getMutatedVars(node) {
-  return Scopes.get(node.body).mutatedBindings;
-}
 function isMutatedVar(node, name) {
-  const { mutatedBindings } = Scopes.get(node.body);
-  if (mutatedBindings) {
-    for (const binding of mutatedBindings) {
-      if (binding.name === name) return true;
-    }
-  }
-  return false;
+  var _a;
+  const binding = (_a = Scopes.get(node.body).bindings) == null ? void 0 : _a[name];
+  return (binding == null ? void 0 : binding.type) === 0 /* var */ && binding.mutated;
 }
 function hasHoists(node) {
   return node.body ? Scopes.get(node.body).hoists : false;
@@ -1589,12 +1592,11 @@ function trackMutations(node, scope, mutations, parentBlock, parentBlockShadows,
   }
   if (block !== parentBlock && blockMutations.length) {
     for (const { name, start } of blockMutations) {
-      if (blockShadows.has(name)) continue;
+      if (start == null || blockShadows.has(name)) continue;
       const binding = resolveWritableVar(scope, name);
       if (binding) {
         binding.mutated = true;
-        mutations.push(start);
-        (scope.mutatedBindings ||= /* @__PURE__ */ new Set()).add(binding);
+        mutations.push({ start, binding });
       }
     }
   }
@@ -1620,6 +1622,9 @@ function traverse(node, enter) {
     }
   }
 }
+function byStart(a, b) {
+  return a.start - b.start;
+}
 
 // src/extractors/script/util/get-component-filename.ts
 import fs from "fs";
@@ -1965,6 +1970,9 @@ var REG_OBJECT_PROPERTY = /^[_$a-z][_$a-z0-9]*$/i;
 var REG_COMMENT_PRAGMA = /\/\/(?:\s*@ts-|\/\s*<)/y;
 var REG_TAG_NAME_IDENTIFIER = /^[A-Z][a-zA-Z0-9_$]+$/;
 var IF_TAG_ALTERNATES = /* @__PURE__ */ new WeakMap();
+var TAG_ID = /* @__PURE__ */ new WeakMap();
+var RENDER_VAR = /* @__PURE__ */ new WeakMap();
+var TEMPLATE_VAR = /* @__PURE__ */ new WeakMap();
 var WROTE_COMMENT = /* @__PURE__ */ new WeakSet();
 var START_OF_FILE = { start: 0, end: 0 };
 var ScriptLang = /* @__PURE__ */ ((ScriptLang2) => {
@@ -1985,14 +1993,11 @@ var ScriptExtractor = class {
   #scriptParser;
   #read;
   #lookup;
-  #tagIds = /* @__PURE__ */ new Map();
-  #renderIds = /* @__PURE__ */ new Map();
   #scriptLang;
   #ts;
   #runtimeTypes;
-  #mutationOffsets;
+  #mutations;
   #tagId = 1;
-  #renderId = 1;
   #closeBrackets = [0];
   constructor(opts) {
     const { parsed, lookup, scriptLang } = opts;
@@ -2013,7 +2018,7 @@ var ScriptExtractor = class {
     this.#extractor = new Extractor(parsed);
     this.#scriptParser = new ScriptParser(parsed);
     this.#read = parsed.read.bind(parsed);
-    this.#mutationOffsets = crawlProgramScope(this.#parsed, this.#scriptParser);
+    this.#mutations = crawlProgramScope(this.#parsed, this.#scriptParser);
     this.#writeProgram(parsed.program);
   }
   end() {
@@ -2176,7 +2181,7 @@ function ${templateName}() {
     this.#extractor.write(`  const input = ${this.#getCastedType(`Input${typeArgsStr}`)};${this.#api === RuntimeAPI.class ? `
   const component = ${this.#getCastedType(`Component${typeArgsStr}`)};
   const state = ${varShared("state")}(component);
-  const out = ${varShared("out")};` : ""}
+  const out = ${this.#getCastedType("Marko.Out")};` : ""}
   const $signal = ${this.#getCastedType("AbortSignal")};
   const $global = ${varShared("getGlobal")}(
     // @ts-expect-error We expect the compiler to error because we are checking if the MarkoRun.Context is defined.
@@ -2194,7 +2199,7 @@ function ${templateName}() {
       }
     }
     if (body == null ? void 0 : body.content) {
-      this.#writeChildren(program, body.content);
+      this.#writeChildren(body.content);
       if (bindings) {
         if (bindings.vars) {
           for (const name of bindings.vars) {
@@ -2218,7 +2223,7 @@ function ${templateName}() {
 `
     );
     if (didReturn) {
-      this.#extractor.write(`return ${varLocal("return")}.return;
+      this.#extractor.write(`return ${varLocal("return")};
 }
 `);
     } else {
@@ -2323,7 +2328,7 @@ constructor(_?: Return) {}
     this.#extractor.copy(returned);
     this.#extractor.write(");\n");
   }
-  #writeChildren(parent, children, skipRenderId = false) {
+  #writeChildren(children, skipRenderId = false) {
     var _a, _b;
     const last = children.length - 1;
     let returnTag;
@@ -2339,21 +2344,19 @@ constructor(_?: Return) {}
               break;
             case "if": {
               const alternates = IF_TAG_ALTERNATES.get(child);
-              let renderId;
+              let didHoist = false;
               if (!skipRenderId) {
-                renderId = this.#getRenderId(child);
-                if (!renderId && alternates) {
+                didHoist = hasHoists(child);
+                if (!didHoist && alternates) {
                   for (const { node } of alternates) {
-                    if (renderId = this.#getRenderId(node)) {
-                      this.#renderIds.set(child, renderId);
-                      this.#renderIds.delete(node);
+                    if (didHoist = hasHoists(node)) {
                       break;
                     }
                   }
                 }
-                if (renderId) {
+                if (didHoist) {
                   this.#extractor.write(
-                    `const ${varLocal("rendered_" + renderId)} = (() => {
+                    `const ${this.#getRenderVar(child, true)} = (() => {
 `
                   );
                 }
@@ -2364,7 +2367,7 @@ constructor(_?: Return) {}
               ).write(") {\n");
               const ifBody = this.#processBody(child);
               if (ifBody == null ? void 0 : ifBody.content) {
-                this.#writeChildren(child, ifBody.content, true);
+                this.#writeChildren(ifBody.content, true);
                 const scopeExpr = this.#getScopeExpression(child.body);
                 if (scopeExpr) {
                   this.#extractor.write(`return {
@@ -2388,7 +2391,7 @@ scope: ${scopeExpr}
                   }
                   const alternateBody = this.#processBody(node);
                   if (alternateBody == null ? void 0 : alternateBody.content) {
-                    this.#writeChildren(node, alternateBody.content, true);
+                    this.#writeChildren(alternateBody.content, true);
                     const scopeExpr = this.#getScopeExpression(node.body);
                     if (scopeExpr) {
                       this.#extractor.write(
@@ -2402,21 +2405,20 @@ scope: ${scopeExpr}
                   }
                 }
               }
-              if (needsAlternate && renderId) {
+              if (needsAlternate && didHoist) {
                 this.#extractor.write("\n} else {\nreturn undefined;\n}\n");
               } else {
                 this.#extractor.write("\n}\n");
               }
-              if (renderId) {
+              if (didHoist) {
                 this.#extractor.write("\n})();\n");
               }
               break;
             }
             case "for": {
-              const renderId = this.#getRenderId(child);
-              if (renderId) {
+              if (hasHoists(child)) {
                 this.#extractor.write(
-                  `const ${varLocal("rendered_" + renderId)} = `
+                  `const ${this.#getRenderVar(child, true)} = `
                 );
               }
               this.#extractor.write(
@@ -2433,7 +2435,7 @@ scope: ${scopeExpr}
               this.#extractor.write("\n) => {\n");
               const body = this.#processBody(child);
               if (body == null ? void 0 : body.content) {
-                this.#writeChildren(child, body.content);
+                this.#writeChildren(body.content);
               }
               this.#writeReturn(void 0, (body == null ? void 0 : body.content) && child.body);
               if (body == null ? void 0 : body.content) {
@@ -2449,7 +2451,7 @@ scope: ${scopeExpr}
               ).write("\n) {\n");
               const body = this.#processBody(child);
               if (body == null ? void 0 : body.content) {
-                this.#writeChildren(child, body.content);
+                this.#writeChildren(body.content);
                 this.#endChildren();
               }
               this.#extractor.write("\n}\n");
@@ -2468,59 +2470,29 @@ scope: ${scopeExpr}
           break;
       }
     }
-    const mutatedVars = getMutatedVars(parent);
-    if (returnTag || mutatedVars) {
-      this.#extractor.write(`var ${varLocal("return")} = {
-`);
-      if (returnTag) {
-        this.#extractor.write(`return: ${varShared("returnTag")}(`);
-        this.#writeTagInputObject(returnTag);
-        this.#extractor.write(")");
-        if (mutatedVars) {
-          this.#extractor.write(",\n");
-        }
-      }
-      if (mutatedVars) {
-        this.#extractor.write(`mutate: ${varShared("mutable")}([
-`);
-        for (const binding of mutatedVars) {
-          this.#extractor.write(
-            `${// TODO use a different format to avoid const annotation.
-            this.#scriptLang === "js" /* js */ ? "/** @type {const} */" : ""}[${JSON.stringify(binding.name) + (binding.sourceName && binding.sourceName !== binding.name ? `, ${JSON.stringify(binding.sourceName)}` : "")}, ${varLocal(
-              "rendered_" + this.#getRenderId(binding.node)
-            )}.return${binding.objectPath || ""}]${SEP_COMMA_NEW_LINE}`
-          );
-        }
-        this.#extractor.write(
-          `]${this.#scriptLang === "ts" /* ts */ ? " as const" : ""})`
-        );
-      }
-      this.#extractor.write("\n};\n");
-      if (mutatedVars) {
-        this.#extractor.write(`${varShared("noop")}({
-`);
-        for (const binding of mutatedVars) {
-          this.#extractor.write(binding.name + SEP_COMMA_NEW_LINE);
-        }
-        this.#extractor.write("});\n");
-      }
+    if (returnTag) {
+      this.#extractor.write(
+        `var ${varLocal("return")} = ${varShared("returnTag")}(`
+      );
+      this.#writeTagInputObject(returnTag);
+      this.#extractor.write(");\n");
     }
     return returnTag !== void 0;
   }
   #writeTag(tag) {
     const tagName = tag.nameText;
-    const renderId = this.#getRenderId(tag);
     const def = tagName ? this.#lookup.getTag(tagName) : void 0;
     const importPath = resolveTagImport(this.#filename, def);
     const isHTML = !importPath && (def == null ? void 0 : def.html);
-    let tagIdentifier;
     let isTemplate = false;
+    let renderVar;
+    let templateVar;
     if (!def || importPath) {
       const isIdentifier = tagName && REG_TAG_NAME_IDENTIFIER.test(tagName);
       const isMarkoFile = importPath == null ? void 0 : importPath.endsWith(".marko");
       if (isIdentifier || isMarkoFile || !importPath) {
-        tagIdentifier = varLocal("tag_" + this.#ensureTagId(tag));
-        this.#extractor.write(`const ${tagIdentifier} = (
+        templateVar = this.#getTemplateVar(tag, true);
+        this.#extractor.write(`const ${templateVar} = (
 `);
         if (isIdentifier) {
           if (importPath) {
@@ -2540,22 +2512,23 @@ scope: ${scopeExpr}
         }
         this.#extractor.write("\n);\n");
       } else {
-        tagIdentifier = varShared("missingTag");
+        templateVar = varShared("missingTag");
       }
       const attrTagTree = this.#getAttrTagTree(tag);
       if (attrTagTree) {
-        this.#writeAttrTagTree(attrTagTree, tagIdentifier);
+        this.#writeAttrTagTree(attrTagTree, templateVar);
         this.#extractor.write(";\n");
       }
     }
-    if (renderId) {
-      this.#extractor.write(`const ${varLocal("rendered_" + renderId)} = `);
+    if (!isHTML && tag.var || hasHoists(tag)) {
+      renderVar = this.#getRenderVar(tag, true);
+      this.#extractor.write(`const ${renderVar} = `);
     }
     if (isHTML) {
       this.#extractor.write(`${varShared("renderNativeTag")}("`).copy(isEmptyRange2(tag.name) ? tagName : tag.name).write('")');
-    } else if (tagIdentifier) {
+    } else if (templateVar) {
       this.#extractor.write(
-        `${varShared(isTemplate ? "renderTemplate" : "renderDynamicTag")}(${tagIdentifier})`
+        `${varShared(isTemplate ? "renderTemplate" : "renderDynamicTag")}(${templateVar})`
       );
     } else {
       this.#extractor.write(varShared("missingTag"));
@@ -2567,14 +2540,26 @@ scope: ${scopeExpr}
     }
     this.#writeTagInputObject(tag);
     this.#extractor.write(");\n");
-    if (renderId && tag.var) {
+    if (tag.var) {
       this.#extractor.write(`{const `);
       this.#closeBrackets[this.#closeBrackets.length - 1]++;
-      this.#copyWithMutationsReplaced(tag.var.value);
-      this.#extractor.write(
-        ` = ${varLocal("rendered_" + renderId)}.return.${ATTR_UNAMED2};
+      if (renderVar) {
+        const mutatedVars = getMutatedVars(tag);
+        this.#copyWithMutationsReplaced(tag.var.value);
+        this.#extractor.write(` = ${renderVar}.return.${ATTR_UNAMED2};
+`);
+        if (mutatedVars) {
+          for (const binding of mutatedVars) {
+            this.#extractor.write(
+              `const ${varLocal(`change__${binding.name}`)} = ${varShared("change")}(${JSON.stringify(binding.name) + (binding.sourceName && binding.sourceName !== binding.name ? `, ${JSON.stringify(binding.sourceName)}` : "")}, ${renderVar}.return${binding.objectPath || ""});
 `
-      );
+            );
+          }
+        }
+      } else if (isHTML) {
+        this.#extractor.copy(tag.var.value).write(` = ${varShared("el")}(${JSON.stringify(def.name)});
+`);
+      }
     }
   }
   #endChildren() {
@@ -2670,8 +2655,10 @@ scope: ${scopeExpr}
                       const valueLiteral = this.#read(boundRange.value);
                       this.#extractor.copy(boundRange.value).copy(boundRange.types).write(`
 )${SEP_COMMA_NEW_LINE}"`).copy(defaultMapPosition).copy(name).write(
-                        `Change"(_${valueLiteral}) {
-${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}`
+                        `Change"(
+// @ts-ignore
+_${valueLiteral}) {
+${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`) : ""}`
                       ).copy(boundRange.value).write(`= _${valueLiteral};
 }`);
                     } else if (boundRange.member.computed) {
@@ -2787,8 +2774,8 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       this.#writeTagNameComment(firstAttrTag);
       this.#extractor.write("]: ");
       if (isRepeated) {
-        const tagId = this.#tagIds.get(firstAttrTag.owner);
-        if (tagId) {
+        const templateVar = this.#getTemplateVar(firstAttrTag.owner);
+        if (templateVar) {
           let accessor = `"${name}"`;
           let curTag = firstAttrTag.parent;
           while (curTag) {
@@ -2800,7 +2787,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
             curTag = curTag.parent;
           }
           this.#extractor.write(
-            `${varShared("attrTagFor")}(${varLocal("tag_" + tagId)},${accessor})([`
+            `${varShared("attrTagFor")}(${templateVar},${accessor})([`
           );
         } else {
           this.#extractor.write(`${varShared("attrTag")}([`);
@@ -2924,13 +2911,11 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     if (tag.params || hasBodyContent) {
       this.#extractor.write("[");
       if (this.#interop) {
-        const tagId = this.#tagIds.get(
+        const templateVar = this.#getTemplateVar(
           tag.type === 16 /* AttrTag */ ? tag.owner : tag
         );
-        if (tagId) {
-          this.#extractor.write(
-            `${varShared("contentFor")}(${varLocal("tag_" + tagId)})`
-          );
+        if (templateVar) {
+          this.#extractor.write(`${varShared("contentFor")}(${templateVar})`);
         } else {
           this.#extractor.write(varShared("content"));
         }
@@ -2951,16 +2936,13 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       }
       let didReturn = false;
       if (body == null ? void 0 : body.content) {
-        didReturn = this.#writeChildren(tag, body.content);
+        didReturn = this.#writeChildren(body.content);
       }
       if (!tag.params) {
         this.#extractor.write(`return () => {
 `);
       }
-      this.#writeReturn(
-        didReturn ? `${varLocal("return")}.return` : void 0,
-        tag.body
-      );
+      this.#writeReturn(didReturn ? varLocal("return") : void 0, tag.body);
       if (body == null ? void 0 : body.content) {
         this.#endChildren();
       }
@@ -2985,7 +2967,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     return this.#scriptLang === "ts" /* ts */ ? `${varShared("any")} as ${type}` : `/** @type {${type}} */(${varShared("any")})`;
   }
   #copyWithMutationsReplaced(range) {
-    const mutations = this.#mutationOffsets;
+    const mutations = this.#mutations;
     if (!mutations) return this.#extractor.copy(range);
     const len = mutations.length;
     let curOffset = range.start;
@@ -2994,23 +2976,23 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       let maxIndex = len;
       while (minIndex < maxIndex) {
         const midIndex = minIndex + maxIndex >>> 1;
-        if (mutations[midIndex] >= curOffset) {
+        if (mutations[midIndex].start >= curOffset) {
           maxIndex = midIndex;
         } else {
           minIndex = midIndex + 1;
         }
       }
-      const nextOffset = maxIndex === len ? range.end : mutations[maxIndex];
-      if (nextOffset >= range.end) {
+      const mutation = maxIndex !== len && mutations[maxIndex];
+      if (!mutation || mutation.start >= range.end) {
         this.#extractor.copy({
           start: curOffset,
           end: range.end
         });
         return;
       }
-      this.#extractor.copy({ start: curOffset, end: nextOffset });
-      this.#extractor.write(`${varLocal("return")}.mutate.`);
-      curOffset = nextOffset;
+      this.#extractor.copy({ start: curOffset, end: mutation.start });
+      this.#extractor.write(`${varLocal(`change__${mutation.binding.name}`)}.`);
+      curOffset = mutation.start;
       minIndex = maxIndex + 1;
     } while (true);
   }
@@ -3162,7 +3144,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     if (body) {
       if (body.content) {
         this.#extractor.write("(() => {\n");
-        this.#writeChildren(tag, body.content);
+        this.#writeChildren(body.content);
         this.#extractor.write("return ");
       }
       this.#extractor.write("{\n");
@@ -3264,13 +3246,27 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       return tag.name.expressions[0].value;
     }
   }
-  #getRenderId(tag) {
-    let renderId = this.#renderIds.get(tag);
-    if (!renderId && (tag.var || hasHoists(tag))) {
-      renderId = this.#renderId++;
-      this.#renderIds.set(tag, renderId);
+  #getRenderVar(tag, declared = false) {
+    let id = RENDER_VAR.get(tag);
+    if (!id && declared) {
+      RENDER_VAR.set(tag, id = varLocal("rendered_" + this.#getTagId(tag)));
+    }
+    return id;
+  }
+  #getTemplateVar(tag, declared = false) {
+    let id = TEMPLATE_VAR.get(tag);
+    if (!id && declared) {
+      TEMPLATE_VAR.set(tag, id = varLocal("tag_" + this.#getTagId(tag)));
+    }
+    return id;
+  }
+  #getTagId(tag) {
+    let id = TAG_ID.get(tag);
+    if (id === void 0) {
+      id = this.#tagId++;
+      TAG_ID.set(tag, id);
     }
-    return renderId;
+    return id;
   }
   #getScopeExpression(body) {
     const sources = getHoistSources(body);
@@ -3278,39 +3274,27 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     return sources ? `{ ${hoists ? `...${hoists}, ` : ""}${sources.join(SEP_COMMA_SPACE)} }` : hoists;
   }
   #getBodyHoistScopeExpression(body) {
-    let hoistIds;
+    let hoistVars;
     if (body) {
       for (const child of body) {
-        const renderId = child.type === 1 /* Tag */ && this.#renderIds.get(child);
-        if (renderId && (!child.var || hasHoists(child))) {
-          if (hoistIds) {
-            hoistIds.push(renderId);
-          } else {
-            hoistIds = [renderId];
+        if (child.type === 1 /* Tag */) {
+          const renderVar = this.#getRenderVar(child);
+          if (renderVar && (!child.var || hasHoists(child))) {
+            if (hoistVars) {
+              hoistVars.push(renderVar);
+            } else {
+              hoistVars = [renderVar];
+            }
           }
         }
       }
     }
-    if (hoistIds) {
-      if (hoistIds.length === 1) {
-        return `${varShared("readScope")}(${varLocal("rendered_" + hoistIds[0])})`;
+    if (hoistVars) {
+      if (hoistVars.length === 1) {
+        return `${varShared("readScope")}(${hoistVars[0]})`;
       }
-      let result = `${varShared("readScopes")}({ `;
-      let sep = "";
-      for (const renderId of hoistIds) {
-        result += sep + `${varLocal("rendered_" + renderId)}`;
-        sep = SEP_COMMA_SPACE;
-      }
-      return result + " })";
-    }
-  }
-  #ensureTagId(tag) {
-    let tagId = this.#tagIds.get(tag);
-    if (!tagId) {
-      tagId = this.#tagId++;
-      this.#tagIds.set(tag, tagId);
+      return `${varShared("readScopes")}({ ${hoistVars.join(SEP_COMMA_SPACE)} })`;
     }
-    return tagId;
   }
   #getNamedAttrModifierIndex(attr) {
     const start = attr.name.start + 1;

package/marko.internal.d.ts

@@ -17,7 +17,6 @@ declare global {
     namespace _ {
       export const voidReturn: MarkoReturn<void>;
       export const scope: unique symbol;
-      export const out: Marko.Out;
       export const never: never;
       export const any: any;
 
@@ -42,6 +41,10 @@ declare global {
 
       export const content: DefaultBodyContentKey;
 
+      export function el<Name extends string>(
+        name: Name,
+      ): Marko.NativeTags[Name]["return"]["value"];
+
       export function contentFor<Name>(
         tag: Name,
       ): [0] extends [1 & Name]
@@ -105,8 +108,7 @@ declare global {
                 : never
             : never;
         }[keyof Rendered]
-      > &
-        Record<any, never>;
+      >;
 
       export function readScope<Value>(
         value: Value,
@@ -122,22 +124,23 @@ declare global {
               ? never
               : Scope
             : never
-      > &
-        Record<any, never>;
-
-      export function mutable<Lookup>(lookup: Lookup): UnionToIntersection<
-        Lookup extends readonly (infer Item)[]
-          ? Item extends
-              | readonly [infer LocalName extends string, infer Data]
-              | readonly [infer LocalName, infer SourceName, infer Data]
-            ? Data extends {
-                [K in `${SourceName extends string
-                  ? SourceName
-                  : LocalName}Change`]: (value: infer V, ...args: any[]) => any;
-              }
-              ? { [K in LocalName]: V }
-              : { readonly [K in LocalName]: unknown }
-            : never
+      >;
+
+      export function change<const Item>(...item: Item): UnionToIntersection<
+        Item extends
+          | readonly [infer LocalName extends string, infer Data]
+          | readonly [
+              infer LocalName extends string,
+              infer SourceName,
+              infer Data,
+            ]
+          ? Data extends {
+              [K in `${SourceName extends string
+                ? SourceName
+                : LocalName}Change`]: (value: infer V, ...args: any[]) => any;
+            }
+            ? { [K in LocalName]: V }
+            : { readonly [K in LocalName]: unknown }
           : never
       >;
 
@@ -513,10 +516,6 @@ type BodyParamsWithDefault<Body extends AnyMarkoBody> =
       : Params
     : never;
 
-type Scopes<Input> = [0] extends [1 & Input]
-  ? never
-  : MergeScopes<FlatScopes<Input>>;
-
 type ComponentEventHandlers<Component extends Marko.Component> = {
   [K in Exclude<
     keyof Component,
@@ -527,7 +526,7 @@ type ComponentEventHandlers<Component extends Marko.Component> = {
   >]: Component[K] extends (...args: any) => any ? Component[K] : never;
 };
 
-type FlatScopes<Input> = [0] extends [1 & Input]
+type Scopes<Input> = [0] extends [1 & Input]
   ? never
   :
       | (Input[("content" | "renderBody") & keyof Input] extends infer Prop
@@ -539,7 +538,7 @@ type FlatScopes<Input> = [0] extends [1 & Input]
           ? Prop extends { [Symbol.iterator]: any }
             ? Prop extends readonly any[]
               ? never
-              : FlatScopes<Prop>
+              : Scopes<Prop>
             : never
           : never);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marko/language-tools",
   "description": "Marko Language Tools",
-  "version": "2.5.43",
+  "version": "2.5.45",
   "bugs": "https://github.com/marko-js/language-server/issues/new?template=Bug_report.md",
   "peerDependencies": {
     "@marko/compiler": "^5.28.4"