@marko/language-tools 2.5.61 → 2.5.63

package/dist/index.js

@@ -689,8 +689,14 @@ var emptyView = {
   offsetAt(_offset) {
     return;
   },
+  offsetsAt(_offset) {
+    return [];
+  },
   rangeAt(_start, _end) {
     return;
+  },
+  tokensIn(_start, _end) {
+    return [];
   }
 };
 var Extractor = class {
@@ -709,16 +715,46 @@ var Extractor = class {
       if (typeof range === "string") {
         this.#generated += range;
       } else {
+        let linkedSources;
+        let mapping = 0 /* full */;
+        if (Array.isArray(range)) {
+          if (!range.length) return this;
+          if (range.length > 1) linkedSources = range.slice(1);
+          mapping = 1 /* alias */;
+          range = range[0];
+        }
+        const { code } = this.#parsed;
+        const sourceStart = Math.min(range.start, code.length);
+        const length = Math.max(sourceStart, Math.min(code.length, range.end)) - sourceStart;
         this.#tokens.push({
           generatedStart: this.#generated.length,
-          sourceStart: range.start,
-          length: Math.min(this.#parsed.code.length, range.end) - range.start
+          sourceStart,
+          generatedLength: length,
+          sourceLength: length,
+          mapping,
+          linkedSources
         });
-        this.#generated += this.#parsed.read(range);
+        this.#generated += code.slice(sourceStart, sourceStart + length);
       }
     }
     return this;
   }
+  anchor(range) {
+    if (range) {
+      const { code } = this.#parsed;
+      const sourceStart = Math.min(range.start, code.length);
+      const length = Math.max(sourceStart, Math.min(code.length, range.end)) - sourceStart;
+      this.#tokens.push({
+        generatedStart: this.#generated.length,
+        sourceStart,
+        generatedLength: 0,
+        sourceLength: length,
+        mapping: 2 /* anchor */,
+        linkedSources: void 0
+      });
+    }
+    return this;
+  }
   end() {
     return new Extracted(this.#parsed, this.#generated, this.#tokens);
   }
@@ -727,32 +763,78 @@ var Extracted = class {
   constructor(parsed, generated, tokens) {
     this.parsed = parsed;
     this.#generated = generated;
-    if (tokens.length === 0) {
-      this.#generatedToSource = this.#sourceToGenerated = emptyView;
-    } else {
-      this.#generatedToSource = new GeneratedToSourceView(tokens);
-      this.#sourceToGenerated = new SourceToGeneratedView(
-        [...tokens].sort(sortBySourceThenGenerated)
-      );
-    }
+    this.#tokens = tokens;
   }
   parsed;
   #generated;
+  #tokens;
   #sourceToGenerated;
+  #sourceToGeneratedAll;
   #generatedToSource;
   #cachedGeneratedLines;
   get #generatedLines() {
     return this.#cachedGeneratedLines || (this.#cachedGeneratedLines = (0, import_htmljs_parser2.getLines)(this.#generated));
   }
+  get #generatedToSourceView() {
+    return this.#generatedToSource ??= this.#tokens.length ? new GeneratedToSourceView(this.#tokens) : emptyView;
+  }
+  get #sourceToGeneratedView() {
+    if (this.#sourceToGenerated) return this.#sourceToGenerated;
+    let tokens;
+    for (const token of this.#tokens) {
+      if (token.mapping === 0 /* full */) {
+        if (tokens) tokens.push(token);
+        else tokens = [token];
+      }
+    }
+    return this.#sourceToGenerated = tokens ? new SourceToGeneratedView(tokens.sort(sortBySourceThenGenerated)) : emptyView;
+  }
+  get #sourceToGeneratedAllView() {
+    if (this.#sourceToGeneratedAll) return this.#sourceToGeneratedAll;
+    let hasAliases = false;
+    for (const token of this.#tokens) {
+      if (token.mapping === 1 /* alias */) {
+        hasAliases = true;
+        break;
+      }
+    }
+    if (!hasAliases) {
+      return this.#sourceToGeneratedAll = this.#sourceToGeneratedView;
+    }
+    const tokens = [];
+    for (const token of this.#tokens) {
+      if (token.mapping === 2 /* anchor */) continue;
+      tokens.push(token);
+      if (token.linkedSources) {
+        for (const link of token.linkedSources) {
+          const length = Math.min(
+            token.generatedLength,
+            Math.max(0, link.end - link.start)
+          );
+          tokens.push({
+            generatedStart: token.generatedStart,
+            sourceStart: link.start,
+            generatedLength: length,
+            sourceLength: length,
+            mapping: 1 /* alias */,
+            linkedSources: void 0
+          });
+        }
+      }
+    }
+    return this.#sourceToGeneratedAll = new SourceToGeneratedView(
+      tokens.sort(sortBySourceThenGenerated)
+    );
+  }
   sourceOffsetAt(generatedOffset) {
-    return this.#generatedToSource.offsetAt(generatedOffset);
+    return this.#generatedToSourceView.offsetAt(generatedOffset);
   }
   sourcePositionAt(generatedOffset) {
     const sourceOffset = this.sourceOffsetAt(generatedOffset);
     if (sourceOffset !== void 0) return this.parsed.positionAt(sourceOffset);
   }
   sourceRangeAt(generatedStart, generatedEnd) {
-    return this.#generatedToSource.rangeAt(generatedStart, generatedEnd);
+    return this.#generatedToSourceView.rangeAt(generatedStart, generatedEnd);
   }
   sourceLocationAt(generatedStart, generatedEnd) {
     const sourceRange = this.sourceRangeAt(generatedStart, generatedEnd);
@@ -761,7 +843,48 @@ var Extracted = class {
     }
   }
   generatedOffsetAt(sourceOffset) {
-    return this.#sourceToGenerated.offsetAt(sourceOffset);
+    return this.#sourceToGeneratedView.offsetAt(sourceOffset);
+  }
+  generatedOffsetsAt(sourceOffset) {
+    const offsets = this.#sourceToGeneratedAllView.offsetsAt(sourceOffset);
+    return offsets.length > 1 ? [...new Set(offsets)].sort(compareNumbers) : offsets;
+  }
+  sourceRangesAt(generatedStart, generatedEnd) {
+    const result = [];
+    for (const token of this.#generatedToSourceView.tokensIn(
+      generatedStart,
+      generatedEnd
+    )) {
+      if (token.mapping === 2 /* anchor */) {
+        pushUniqueRange(
+          result,
+          token.sourceStart,
+          token.sourceStart + token.sourceLength
+        );
+        continue;
+      }
+      const relStart = Math.max(0, generatedStart - token.generatedStart);
+      const relEnd = Math.min(
+        token.generatedLength,
+        generatedEnd - token.generatedStart
+      );
+      pushUniqueRange(
+        result,
+        token.sourceStart + relStart,
+        token.sourceStart + relEnd
+      );
+      if (token.linkedSources) {
+        for (const link of token.linkedSources) {
+          const linkLength = Math.max(0, link.end - link.start);
+          pushUniqueRange(
+            result,
+            link.start + Math.min(relStart, linkLength),
+            link.start + Math.min(relEnd, linkLength)
+          );
+        }
+      }
+    }
+    return result;
   }
   generatedPositionAt(sourceOffset) {
     const generatedOffset = this.generatedOffsetAt(sourceOffset);
@@ -770,7 +893,7 @@ var Extracted = class {
     }
   }
   generatedRangeAt(sourceStart, sourceEnd) {
-    return this.#sourceToGenerated.rangeAt(sourceStart, sourceEnd);
+    return this.#sourceToGeneratedView.rangeAt(sourceStart, sourceEnd);
   }
   generatedLocationAt(sourceStart, sourceEnd) {
     const generatedRange = this.generatedRangeAt(sourceStart, sourceEnd);
@@ -789,69 +912,152 @@ var Extracted = class {
 var TokenView = class {
   #tokens;
   #last;
+  #maxEnds;
   constructor(tokens) {
     this.#tokens = tokens;
     this.#last = tokens.length - 1;
   }
+  get #inMaxEnds() {
+    if (this.#maxEnds) return this.#maxEnds;
+    const tokens = this.#tokens;
+    const maxEnds = new Array(tokens.length);
+    let max = -1;
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      const end = this.inStart(token) + this.inLength(token);
+      if (end > max) max = end;
+      maxEnds[i] = max;
+    }
+    return this.#maxEnds = maxEnds;
+  }
   offsetAt(offset) {
+    const token = this.#tokenAt(offset);
+    if (token) {
+      return this.outStart(token) + (offset - this.inStart(token));
+    }
+  }
+  offsetsAt(offset) {
+    const result = [];
+    const tokens = this.#tokens;
     let min = 0;
     let max = this.#last;
     while (min < max) {
       const mid = 1 + min + max >>> 1;
-      if (this.inStart(this.#tokens[mid]) <= offset) {
+      if (this.inStart(tokens[mid]) <= offset) {
         min = mid;
       } else {
         max = mid - 1;
       }
     }
-    const token = this.#tokens[min];
-    const index = offset - this.inStart(token);
-    if (index >= 0 && index <= token.length) {
-      return this.outStart(token) + index;
+    const maxEnds = this.#inMaxEnds;
+    for (let i = min; i >= 0 && maxEnds[i] >= offset; i--) {
+      const token = tokens[i];
+      const index = offset - this.inStart(token);
+      if (index >= 0 && index <= this.inLength(token)) {
+        result.push(this.outStart(token) + index);
+      }
     }
+    return result;
+  }
+  tokensIn(inStart, inEnd) {
+    const result = [];
+    const tokens = this.#tokens;
+    if (!tokens.length) return result;
+    const maxEnds = this.#inMaxEnds;
+    let min = 0;
+    let max = this.#last;
+    if (maxEnds[max] <= inStart) return result;
+    while (min < max) {
+      const mid = min + max >> 1;
+      if (maxEnds[mid] > inStart) {
+        max = mid;
+      } else {
+        min = mid + 1;
+      }
+    }
+    for (let i = max; i < tokens.length; i++) {
+      const token = tokens[i];
+      const tokenInStart = this.inStart(token);
+      if (tokenInStart >= inEnd) break;
+      if (tokenInStart + this.inLength(token) > inStart) {
+        result.push(token);
+      }
+    }
+    return result;
   }
   rangeAt(inStart, inEnd) {
+    if (inStart >= inEnd) {
+      return this.#pointAt(inStart);
+    }
+    const tokens = this.#tokens;
+    const maxEnds = this.#inMaxEnds;
     let min = 0;
     let max = this.#last;
+    if (maxEnds[max] <= inStart) return this.#pointAt(inStart);
     while (min < max) {
       const mid = min + max >> 1;
-      const token = this.#tokens[mid];
-      const tokenInEnd = this.inStart(token) + token.length;
-      if (tokenInEnd > inStart) {
+      if (maxEnds[mid] > inStart) {
         max = mid;
       } else {
         min = mid + 1;
       }
     }
-    const startToken = this.#tokens[max];
+    const startToken = tokens[max];
     const startTokenInStart = this.inStart(startToken);
-    if (startTokenInStart >= inEnd) return;
+    if (startTokenInStart >= inEnd) return this.#pointAt(inStart);
     max = this.#last;
     while (min < max) {
       const mid = 1 + min + max >>> 1;
-      const token = this.#tokens[mid];
-      const tokenEnd = this.inStart(token) + token.length;
-      if (tokenEnd <= inEnd) {
+      if (this.inStart(tokens[mid]) < inEnd) {
         min = mid;
       } else {
         max = mid - 1;
       }
     }
-    const endToken = this.#tokens[min];
-    const endTokenInStart = this.inStart(endToken);
-    const endTokenInEnd = endTokenInStart + endToken.length;
-    if (endTokenInEnd < inStart) return;
-    const startIndex = inStart - startTokenInStart;
-    const endIndex = inEnd - endTokenInStart;
-    const start = this.outStart(startToken) + Math.max(0, startIndex);
-    const end = this.outStart(endToken) + Math.min(endToken.length, endIndex);
+    const endToken = tokens[min];
+    const start = this.outStart(startToken) + Math.max(0, inStart - startTokenInStart);
+    const end = this.outStart(endToken) + (endToken.mapping === 2 /* anchor */ ? endToken.sourceLength : Math.min(this.inLength(endToken), inEnd - this.inStart(endToken)));
+    if (end < start) {
+      return {
+        start,
+        end: this.outStart(startToken) + (startToken.mapping === 2 /* anchor */ ? startToken.sourceLength : Math.min(this.inLength(startToken), inEnd - startTokenInStart))
+      };
+    }
     return { start, end };
   }
+  #pointAt(offset) {
+    const out = this.offsetAt(offset);
+    if (out !== void 0) return { start: out, end: out };
+  }
+  #tokenAt(offset) {
+    const tokens = this.#tokens;
+    let min = 0;
+    let max = this.#last;
+    while (min < max) {
+      const mid = 1 + min + max >>> 1;
+      if (this.inStart(tokens[mid]) <= offset) {
+        min = mid;
+      } else {
+        max = mid - 1;
+      }
+    }
+    const maxEnds = this.#inMaxEnds;
+    for (let i = min; i >= 0 && maxEnds[i] >= offset; i--) {
+      const token = tokens[i];
+      const index = offset - this.inStart(token);
+      if (index >= 0 && index <= this.inLength(token)) {
+        return token;
+      }
+    }
+  }
 };
 var GeneratedToSourceView = class extends TokenView {
   inStart(token) {
     return token.generatedStart;
   }
+  inLength(token) {
+    return token.generatedLength;
+  }
   outStart(token) {
     return token.sourceStart;
   }
@@ -860,6 +1066,9 @@ var SourceToGeneratedView = class extends TokenView {
   inStart(token) {
     return token.sourceStart;
   }
+  inLength(token) {
+    return token.sourceLength;
+  }
   outStart(token) {
     return token.generatedStart;
   }
@@ -868,6 +1077,15 @@ function sortBySourceThenGenerated(a, b) {
   const delta = a.sourceStart - b.sourceStart;
   return delta === 0 ? b.generatedStart - a.generatedStart : delta;
 }
+function compareNumbers(a, b) {
+  return a - b;
+}
+function pushUniqueRange(ranges, start, end) {
+  for (const range of ranges) {
+    if (range.start === start && range.end === end) return;
+  }
+  ranges.push({ start, end });
+}
 
 // src/extractors/html/keywords.ts
 var builtinTagsRegex = (
@@ -1281,6 +1499,7 @@ function crawlProgramScope(parsed, ast) {
   const mutations = [];
   const potentialHoists = [];
   const potentialMutations = /* @__PURE__ */ new Map();
+  const analyzeMutations = hasTagVars(program.body);
   const programScope = {
     parent: void 0,
     hoists: false,
@@ -1356,7 +1575,7 @@ function crawlProgramScope(parsed, ast) {
                 "",
                 ATTR_UNNAMED
               )) {
-                const { name, objectPath, sourceName } = id;
+                const { name, range, objectPath, sourceName } = id;
                 const binding = parentScope.bindings[name] = {
                   type: 0 /* var */,
                   name,
@@ -1364,6 +1583,7 @@ function crawlProgramScope(parsed, ast) {
                   scope: parentScope,
                   hoisted: false,
                   mutated: false,
+                  range,
                   objectPath,
                   sourceName
                 };
@@ -1377,7 +1597,7 @@ function crawlProgramScope(parsed, ast) {
               hoists: false,
               bindings: {}
             };
-            if (child.params) {
+            if (analyzeMutations && child.params) {
               bodyScope.bindings ??= {};
               const parsedParams = ast.tagParams(child.params);
               if (parsedParams) {
@@ -1395,7 +1615,7 @@ function crawlProgramScope(parsed, ast) {
                 }
               }
             }
-            const scriptBody = ast.scriptBody(child);
+            const scriptBody = analyzeMutations && ast.scriptBody(child);
             if (scriptBody) {
               const nodes = potentialMutations.get(parentScope);
               if (nodes) {
@@ -1414,12 +1634,15 @@ function crawlProgramScope(parsed, ast) {
             for (const attr of child.attrs) {
               switch (attr.type) {
                 case 15 /* AttrSpread */: {
-                  checkForMutations(parentScope, ast.attrSpread(attr));
+                  if (analyzeMutations) {
+                    checkForMutations(parentScope, ast.attrSpread(attr));
+                  }
                   break;
                 }
                 case 10 /* AttrNamed */: {
                   switch ((_a2 = attr.value) == null ? void 0 : _a2.type) {
                     case 13 /* AttrValue */: {
+                      if (!analyzeMutations && !attr.value.bound) break;
                       let parsedValue = ast.attrValue(attr.value);
                       if (parsedValue) {
                         if (!attr.value.bound) {
@@ -1468,10 +1691,12 @@ function crawlProgramScope(parsed, ast) {
                       break;
                     }
                     case 14 /* AttrMethod */: {
-                      checkForMutations(
-                        parentScope,
-                        ast.attrMethod(attr.value)
-                      );
+                      if (analyzeMutations) {
+                        checkForMutations(
+                          parentScope,
+                          ast.attrMethod(attr.value)
+                        );
+                      }
                       break;
                     }
                   }
@@ -1513,21 +1738,32 @@ function getProgramBindings(node) {
   let hoists;
   let vars;
   for (const key in bindings) {
-    switch (bindings[key].type) {
-      case 2 /* hoisted */:
+    const binding = bindings[key];
+    switch (binding.type) {
+      case 2 /* hoisted */: {
+        const hoist = {
+          name: key,
+          sources: binding.bindings.map((it) => it.range)
+        };
         if (hoists) {
-          hoists.push(key);
+          hoists.push(hoist);
         } else {
-          hoists = [key];
+          hoists = [hoist];
         }
         break;
-      case 0 /* var */:
+      }
+      case 0 /* var */: {
+        const tagVar = {
+          name: key,
+          sources: [binding.range]
+        };
         if (vars) {
-          vars.push(key);
+          vars.push(tagVar);
         } else {
-          vars = [key];
+          vars = [tagVar];
         }
         break;
+      }
     }
   }
   if (hoists || vars) {
@@ -1558,11 +1794,12 @@ function getHoistSources(body) {
   if (body) {
     const { bindings } = Scopes.get(body);
     for (const key in bindings) {
-      if (bindings[key].hoisted) {
+      const binding = bindings[key];
+      if (binding.hoisted) {
         if (result) {
-          result.push(key);
+          result.push(binding);
         } else {
-          result = [key];
+          result = [binding];
         }
       }
     }
@@ -1570,16 +1807,9 @@ function getHoistSources(body) {
   return result;
 }
 function isMutatedVar(node, name) {
-  var _a;
-  let scope = Scopes.get(node.body);
-  while (scope) {
-    const binding = (_a = scope.bindings) == null ? void 0 : _a[name];
-    if ((binding == null ? void 0 : binding.type) === 0 /* var */ && binding.mutated) {
-      return true;
-    }
-    scope = scope.parent;
-  }
-  return false;
+  const scope = Scopes.get(node.body);
+  const binding = scope && resolveWritableVar(scope, name);
+  return binding ? binding.mutated : false;
 }
 function hasHoists(node) {
   return node.body ? Scopes.get(node.body).hoists : false;
@@ -1587,27 +1817,47 @@ function hasHoists(node) {
 function getBoundAttrRange(value) {
   return BoundAttrValueRange.get(value);
 }
+function hasTagVars(body) {
+  if (body) {
+    for (const child of body) {
+      switch (child.type) {
+        case 1 /* Tag */:
+        case 16 /* AttrTag */:
+          if (child.var || hasTagVars(child.body)) {
+            return true;
+          }
+          break;
+      }
+    }
+  }
+  return false;
+}
 function resolveWritableVar(scope, name) {
   var _a;
   let curScope = scope;
   do {
     const binding = (_a = curScope.bindings) == null ? void 0 : _a[name];
-    if ((binding == null ? void 0 : binding.type) === 0 /* var */ && binding.sourceName !== void 0) {
-      return binding;
+    if (binding) {
+      return binding.type === 0 /* var */ && binding.sourceName !== void 0 ? binding : void 0;
     }
   } while (curScope = curScope.parent);
 }
 function* getIdentifiers(lVal) {
+  for (const id of getIdentifierNodes(lVal)) {
+    yield id.name;
+  }
+}
+function* getIdentifierNodes(lVal) {
   switch (lVal.type) {
     case "Identifier":
-      yield lVal.name;
+      yield lVal;
       break;
     case "ObjectPattern":
       for (const prop of lVal.properties) {
         if (prop.type === "RestElement") {
-          yield* getIdentifiers(prop.argument);
+          yield* getIdentifierNodes(prop.argument);
         } else {
-          yield* getIdentifiers(prop.value);
+          yield* getIdentifierNodes(prop.value);
         }
       }
       break;
@@ -1615,15 +1865,15 @@ function* getIdentifiers(lVal) {
       for (const element of lVal.elements) {
         if (element) {
           if (element.type === "RestElement") {
-            yield* getIdentifiers(element.argument);
+            yield* getIdentifierNodes(element.argument);
           } else {
-            yield* getIdentifiers(element);
+            yield* getIdentifierNodes(element);
           }
         }
       }
       break;
     case "AssignmentPattern":
-      yield* getIdentifiers(lVal.left);
+      yield* getIdentifierNodes(lVal.left);
       break;
   }
 }
@@ -1632,6 +1882,7 @@ function* getVarIdentifiers(parsed, lVal, objectPath, sourceName) {
     case "Identifier":
       yield {
         name: lVal.name,
+        range: { start: lVal.start, end: lVal.start + lVal.name.length },
         objectPath,
         sourceName
       };
@@ -1694,9 +1945,17 @@ function trackMutations(node, scope, mutations, parentBlockShadows, parentBlockM
         blockMutations = [];
       }
       break;
-    case "ForStatement":
     case "ForInStatement":
     case "ForOfStatement":
+      if (node.left.type !== "VariableDeclaration") {
+        for (const id of getIdentifierNodes(node.left)) {
+          parentBlockMutations.push(id);
+        }
+      }
+      blockShadows = new Set(blockShadows);
+      blockMutations = [];
+      break;
+    case "ForStatement":
       blockShadows = new Set(blockShadows);
       blockMutations = [];
       break;
@@ -1727,7 +1986,9 @@ function trackMutations(node, scope, mutations, parentBlockShadows, parentBlockM
       }
       break;
     case "FunctionDeclaration":
-      trackShadows(node.id, scope, parentBlockShadows);
+      if (node.id) {
+        trackShadows(node.id, scope, parentBlockShadows);
+      }
       blockShadows = new Set(blockShadows);
       blockMutations = [];
       for (const param of node.params) {
@@ -1768,6 +2029,10 @@ function trackMutations(node, scope, mutations, parentBlockShadows, parentBlockM
     case "AssignmentExpression":
       if (node.left.type === "Identifier") {
         parentBlockMutations.push(node.left);
+      } else {
+        for (const id of getIdentifierNodes(node.left)) {
+          parentBlockMutations.push(id);
+        }
       }
       break;
   }
@@ -2098,7 +2363,7 @@ var ATTR_UNNAMED2 = "value";
 var REG_EXT = /(?<=[/\\][^/\\]+)\.[^.]+$/;
 var REG_BLOCK = /\s*{/y;
 var REG_NEW_LINE = /^|(\r?\n)/g;
-var REG_ATTR_ARG_LITERAL = /(?<=\s*)(["'])((?:[^"'\\]|\\.|(?!\1))*)\1\s*([,)])/my;
+var REG_ATTR_ARG_LITERAL = /(["'])((?:\\.|(?!\1)[^\\])*)\1\s*([,)])/y;
 var REG_TAG_IMPORT = /(?<=(['"]))<([^'">]+)>(?=\1)/;
 var REG_INPUT_TYPE = /\s*(interface|type)\s+Input\b/y;
 var REG_OBJECT_PROPERTY = /^[_$a-z][_$a-z0-9]*$/i;
@@ -2190,11 +2455,12 @@ var ScriptExtractor = class {
             if (templatePath) {
               const [{ length }] = tagImportMatch;
               const fromStart = node.start + tagImportMatch.index;
+              const fromEnd = fromStart + length;
               this.#extractor.copy({
                 start: node.start,
                 end: fromStart
               }).write(templatePath).copy({
-                start: fromStart + length,
+                start: fromEnd,
                 end: node.end
               }).write("\n");
               break;
@@ -2326,9 +2592,9 @@ function ${templateName}() {
     const body = this.#processBody(program);
     const bindings = getProgramBindings(program);
     if (bindings) {
-      for (const name of bindings.all) {
-        this.#extractor.write(
-          `const ${name} = ${varShared("hoist")}(() => ${varLocal(`hoist__${name}`)});
+      for (const binding of bindings.all) {
+        this.#extractor.write("const ").copy(binding.sources).write(
+          ` = ${varShared("hoist")}(() => ${varLocal(`hoist__${binding.name}`)});
 `
         );
       }
@@ -2337,16 +2603,17 @@ function ${templateName}() {
       this.#writeChildren(body.content);
       if (bindings) {
         if (bindings.vars) {
-          for (const name of bindings.vars) {
-            this.#extractor.write(
-              `var ${varLocal(`hoist__${name}`)} = ${name};
-`
-            );
+          for (const binding of bindings.vars) {
+            this.#extractor.write(`var ${varLocal(`hoist__${binding.name}`)} = `).copy(binding.sources[0]).write(";\n");
           }
         }
         if (bindings.hoists) {
           this.#extractor.write(
-            `var {${bindings.hoists.map((name) => `${name}: ${varLocal(`hoist__${name}`)}`).join(SEP_COMMA_SPACE)}} = ${this.#getBodyHoistScopeExpression(program.body)};
+            `var {${bindings.hoists.map(
+              (binding) => `${binding.name}: ${varLocal(`hoist__${binding.name}`)}`
+            ).join(
+              SEP_COMMA_SPACE
+            )}} = ${this.#getBodyHoistScopeExpression(program.body)};
 `
           );
         }
@@ -2354,7 +2621,7 @@ function ${templateName}() {
       this.#endChildren();
     }
     this.#extractor.write(
-      `${varShared("noop")}({ ${bindings ? bindings.all.join(SEP_COMMA_SPACE) + SEP_COMMA_SPACE : ""}${this.#api === RuntimeAPI.class ? "component, state, out, " : ""}input, $global, $signal });
+      `${varShared("noop")}({ ${bindings ? bindings.all.map((binding) => binding.name).join(SEP_COMMA_SPACE) + SEP_COMMA_SPACE : ""}${this.#api === RuntimeAPI.class ? "component, state, out, " : ""}input, $global, $signal });
 `
     );
     if (didReturn) {
@@ -2374,6 +2641,7 @@ function ${templateName}() {
     )}<${internalInput}, Marko.Directives & Input${typeArgsStr}>) => (${varShared(
       "ReturnWithScope"
     )}<${internalInput}, ${returnTypeStr}>)`;
+    const apiVar = varLocal("api");
     const templateOverrideClass = `${templateBaseClass}<{${this.#runtimeTypes ? getRuntimeOverrides(
       this.#api,
       this.#runtimeTypes,
@@ -2381,7 +2649,7 @@ function ${templateName}() {
       typeArgsStr,
       returnTypeStr
     ) : ""}
-  ${this.#interop ? `api: "${this.#api}",` : ""}
+  ${this.#interop ? `api: typeof ${apiVar},` : ""}
   _${typeParamsStr ? `<${internalApply} = 1>(): ${internalApply} extends 0
     ? ${typeParamsStr}() => <${internalInputWithExtends}>${renderAndReturn}
     : () => <${internalInputWithExtends}, ${typeParamsStr.slice(
@@ -2389,14 +2657,21 @@ function ${templateName}() {
       -1
     )}>${renderAndReturn};` : `(): () => <${internalInputWithExtends}>${renderAndReturn};`}
 }>`;
-    this.#extractor.copy(START_OF_FILE);
+    if (this.#interop) {
+      this.#extractor.write(
+        `const ${apiVar} = "${this.#api}";
+export { ${apiVar} as "~api" };
+`
+      );
+    }
+    this.#extractor.write(`export default new `).anchor(START_OF_FILE);
     if (this.#scriptLang === "ts" /* ts */) {
-      this.#extractor.write(`export default new (
+      this.#extractor.write(`(
   class Template extends ${templateOverrideClass} {}
 );
 `);
     } else {
-      this.#extractor.write(`export default new (
+      this.#extractor.write(`(
   /**
    * @extends {${removeNewLines(templateOverrideClass)}}
    */
@@ -2444,24 +2719,42 @@ function ${templateName}() {
     }
   }
   #writeReturn(returned, body) {
-    const scopeExpr = this.#getScopeExpression(body);
-    if (!returned && !scopeExpr) {
+    const hasScope = this.#hasScopeExpression(body);
+    if (!returned && !hasScope) {
       this.#extractor.write(`return ${varShared("voidReturn")};
 `);
       return;
     }
-    this.#extractor.write(`return new (class MarkoReturn<Return = void> {
+    if (this.#scriptLang === "ts" /* ts */) {
+      this.#extractor.write(`return new (class MarkoReturn<Return = void> {
 `);
-    if (scopeExpr) {
-      this.#extractor.write(
-        `readonly [${varShared("scope")}] = ${scopeExpr};
-`
-      );
-    }
-    this.#extractor.write(`declare return: Return;
+      if (hasScope) {
+        this.#extractor.write(`readonly [${varShared("scope")}] = `);
+        this.#writeScopeExpression(body);
+        this.#extractor.write(";\n");
+      }
+      this.#extractor.write(`declare return: Return;
 constructor(_?: Return) {}
 })(
 `);
+    } else {
+      this.#extractor.write(`return new (/**
+* @template [Return=void]
+*/
+class MarkoReturn {
+`);
+      if (hasScope) {
+        this.#extractor.write(`[${varShared("scope")}] = `);
+        this.#writeScopeExpression(body);
+        this.#extractor.write(";\n");
+      }
+      this.#extractor.write(`/** @type {Return} */
+return;
+/** @param {Return} [_] */
+constructor(_) {}
+})(
+`);
+    }
     this.#extractor.copy(returned);
     this.#extractor.write(");\n");
   }
@@ -2505,12 +2798,10 @@ constructor(_?: Return) {}
               const ifBody = this.#processBody(child);
               if (ifBody == null ? void 0 : ifBody.content) {
                 this.#writeChildren(ifBody.content, true);
-                const scopeExpr = this.#getScopeExpression(child.body);
-                if (scopeExpr) {
-                  this.#extractor.write(`return {
-scope: ${scopeExpr}
-};
-`);
+                if (this.#hasScopeExpression(child.body)) {
+                  this.#extractor.write("return {\nscope: ");
+                  this.#writeScopeExpression(child.body);
+                  this.#extractor.write("\n};\n");
                 }
                 this.#endChildren();
               }
@@ -2529,14 +2820,10 @@ scope: ${scopeExpr}
                   const alternateBody = this.#processBody(node);
                   if (alternateBody == null ? void 0 : alternateBody.content) {
                     this.#writeChildren(alternateBody.content, true);
-                    const scopeExpr = this.#getScopeExpression(node.body);
-                    if (scopeExpr) {
-                      this.#extractor.write(
-                        `return {
-scope: ${scopeExpr}
-};
-`
-                      );
+                    if (this.#hasScopeExpression(node.body)) {
+                      this.#extractor.write("return {\nscope: ");
+                      this.#writeScopeExpression(node.body);
+                      this.#extractor.write("\n};\n");
                     }
                     this.#endChildren();
                   }
@@ -2561,8 +2848,7 @@ scope: ${scopeExpr}
               this.#extractor.write(
                 `${varShared(getForTagRuntime(this.#parsed, child))}({
 `
-              );
-              this.#writeTagNameComment(child);
+              ).anchor(child.name);
               this.#writeAttrs(child);
               this.#extractor.write("\n}" + SEP_COMMA_NEW_LINE).copy(child.typeParams).write("(\n");
               this.#writeComments(child);
@@ -2684,9 +2970,7 @@ scope: ${scopeExpr}
     } else if (templateVar) {
       this.#extractor.write(
         `${varShared(isTemplate ? "renderTemplate" : "renderDynamicTag")}(${templateVar}`
-      );
-      this.#writeTagNameComment(tag);
-      this.#extractor.write(")");
+      ).anchor(tag.name).write(")");
     } else {
       this.#extractor.write(varShared("missingTag"));
     }
@@ -2720,9 +3004,6 @@ scope: ${scopeExpr}
       this.#extractor.write(`${varShared("interpolated")}\``).copy(tag.name).write("`");
     }
   }
-  #writeTagNameComment(tag) {
-    this.#extractor.write("/*").copy(this.#getDynamicTagExpression(tag) || tag.name).write("*/");
-  }
   #writePlaceholder(placeholder) {
     this.#writeComments(placeholder);
     this.#extractor.write("(").copy(placeholder.value).write(");\n");
@@ -2732,7 +3013,6 @@ scope: ${scopeExpr}
     this.#extractor.copy(scriptlet.value).write(";\n");
   }
   #writeAttrs(tag) {
-    var _a, _b, _c, _d, _e, _f;
     let hasAttrs = false;
     if (tag.shorthandId) {
       hasAttrs = true;
@@ -2754,19 +3034,9 @@ scope: ${scopeExpr}
       }
       this.#extractor.write("`" + SEP_COMMA_NEW_LINE);
     }
-    let attrWhitespaceStart = Math.max(
-      tag.name.end,
-      ((_a = tag.shorthandId) == null ? void 0 : _a.end) ?? -1,
-      ((_c = (_b = tag.shorthandClassNames) == null ? void 0 : _b[tag.shorthandClassNames.length - 1]) == null ? void 0 : _c.end) ?? -1,
-      ((_d = tag.var) == null ? void 0 : _d.end) ?? -1,
-      ((_e = tag.args) == null ? void 0 : _e.end) ?? -1,
-      ((_f = tag.params) == null ? void 0 : _f.end) ?? -1
-    );
     if (tag.attrs) {
       hasAttrs = true;
       for (const attr of tag.attrs) {
-        this.#copyWhitespaceWithin(attrWhitespaceStart, attr.start);
-        attrWhitespaceStart = attr.end;
         switch (attr.type) {
           case 15 /* AttrSpread */:
             this.#extractor.write(`...(
@@ -2787,18 +3057,18 @@ scope: ${scopeExpr}
             if (value) {
               switch (value.type) {
                 case 14 /* AttrMethod */:
-                  this.#extractor.write('"').copy(defaultMapPosition).copy(name).write('"').copy(value.typeParams);
+                  this.#extractor.write('"').anchor(defaultMapPosition).copy(name).write('"').copy(value.typeParams);
                   this.#copyWithMutationsReplaced(value.params);
                   this.#copyWithMutationsReplaced(value.body);
                   break;
                 case 13 /* AttrValue */: {
                   const boundRange = value.bound && getBoundAttrRange(value);
-                  this.#extractor.write('"').copy(defaultMapPosition).copy(name).write('": (\n');
+                  this.#extractor.write('"').anchor(defaultMapPosition).copy(name).write('": (\n');
                   if (boundRange) {
                     if (!boundRange.member) {
                       const valueLiteral = this.#read(boundRange.value);
                       this.#extractor.copy(boundRange.value).write(" ").copy(boundRange.types).write(`
-)${SEP_COMMA_NEW_LINE}"`).copy(defaultMapPosition).copy(name).write(
+)${SEP_COMMA_NEW_LINE}"`).anchor(defaultMapPosition).copy(name).write(
                         `Change"(
 // @ts-ignore
 _${valueLiteral}
@@ -2814,7 +3084,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
                         start: boundRange.member.end,
                         end: boundRange.member.end + 1
                       }).copy(boundRange.types).write(`
-)${SEP_COMMA_NEW_LINE}"`).copy(defaultMapPosition).copy(name).write('Change": (\n');
+)${SEP_COMMA_NEW_LINE}"`).anchor(defaultMapPosition).copy(name).write('Change": (\n');
                       if (modifier) {
                         this.#extractor.copy(boundRange.value).write("[`${\n").copy(boundRange.member).write("\n}Change`] && ((\n// @ts-ignore\n_\n)=>{\n").copy(boundRange.value).write("[`${\n").copy(boundRange.member).write("\n}Change`](").copy(modifier).write("(_));\n})");
                       } else {
@@ -2827,7 +3097,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
                         end: boundRange.member.end
                       };
                       this.#extractor.copy(memberRange).copy(boundRange.types).write(`
-)${SEP_COMMA_NEW_LINE}"`).copy(defaultMapPosition).copy(name).write('Change": (\n');
+)${SEP_COMMA_NEW_LINE}"`).anchor(defaultMapPosition).copy(name).write('Change": (\n');
                       if (modifier) {
                         this.#extractor.copy(memberRange).write("Change && ((\n// @ts-ignore\n_\n)=>{\n").copy(memberRange).write("Change(").copy(modifier).write("(_));\n})");
                       } else {
@@ -2882,7 +3152,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
                 this.#extractor.copy(attr.args);
               }
             } else {
-              this.#extractor.write('"').copy(defaultMapPosition).copy(name).write(`": ${modifier ? '""' : "true"}`);
+              this.#extractor.write('"').anchor(defaultMapPosition).copy(name).write(`": ${modifier ? '""' : "true"}`);
             }
             break;
           }
@@ -2890,10 +3160,6 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
         this.#extractor.write(SEP_COMMA_NEW_LINE);
       }
     }
-    this.#copyWhitespaceWithin(
-      attrWhitespaceStart,
-      tag.open.end - (tag.concise ? this.#code[tag.open.end] === ";" ? 1 : 0 : tag.selfClosed ? 2 : 1)
-    );
     return hasAttrs;
   }
   #writeAttrTags({ staticAttrTags, dynamicAttrTagParents }, constraintExpr) {
@@ -2927,9 +3193,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
       const isRepeated = attrTag.length > 1;
       const [firstAttrTag] = attrTag;
       const name = this.#getAttrTagName(firstAttrTag);
-      this.#extractor.write(`["${name}"`);
-      this.#writeTagNameComment(firstAttrTag);
-      this.#extractor.write("]: ");
+      this.#extractor.write(`["`).anchor(firstAttrTag.name).write(`${name}"]: `);
       if (isRepeated) {
         const templateVar = this.#getTemplateVar(firstAttrTag.owner);
         if (templateVar) {
@@ -2941,9 +3205,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
         }
         this.#extractor.write(`"${name}",`);
         for (const childNode of attrTag) {
-          this.#extractor.write(`{["${name}"`);
-          this.#writeTagNameComment(childNode);
-          this.#extractor.write("]: ");
+          this.#extractor.write(`{["`).anchor(childNode.name).write(`${name}"]: `);
           this.#writeTagInputObject(childNode);
           this.#extractor.write(`}${SEP_COMMA_NEW_LINE}`);
         }
@@ -2989,11 +3251,8 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
           break;
         }
         case "for": {
-          this.#extractor.write(
-            `${varShared(getForAttrTagRuntime(this.#parsed, tag))}({
-`
-          );
-          this.#writeTagNameComment(tag);
+          this.#extractor.write(`${varShared(getForAttrTagRuntime(this.#parsed, tag))}({
+`).anchor(tag.name);
           this.#writeAttrs(tag);
           this.#extractor.write("\n}, \n");
           this.#writeComments(tag);
@@ -3067,7 +3326,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
       hasBodyContent = true;
     }
     if (tag.params || hasBodyContent) {
-      this.#extractor.write("[");
+      this.#extractor.write("[").anchor(tag.name);
       if (this.#interop) {
         const templateVar = this.#getTemplateVar(
           tag.type === 16 /* AttrTag */ ? tag.owner : tag
@@ -3080,7 +3339,6 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
       } else {
         this.#extractor.write('"content"');
       }
-      this.#writeTagNameComment(tag);
       this.#extractor.write("]: ");
       if (tag.params) {
         this.#extractor.write("(");
@@ -3112,10 +3370,10 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
       this.#extractor.write(SEP_COMMA_NEW_LINE);
     }
     if (tag.type === 16 /* AttrTag */) {
-      this.#extractor.write("[/*").copy(tag.name).write(`*/Symbol.iterator]: ${varShared("any")}${SEP_COMMA_NEW_LINE}`);
+      this.#extractor.write("[").anchor(tag.name).write(`Symbol.iterator]: ${varShared("any")}${SEP_COMMA_NEW_LINE}`);
     }
     if (!hasInput) {
-      this.#writeTagNameComment(tag);
+      this.#extractor.anchor(tag.name);
     }
     if (writeInputObj) {
       this.#extractor.write("\n}");
@@ -3154,25 +3412,6 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
       minIndex = maxIndex + 1;
     } while (true);
   }
-  #copyWhitespaceWithin(start, end) {
-    const code = this.#code;
-    const max = Math.min(end, code.length);
-    let lastPos = start;
-    let pos = start;
-    while (pos < max) {
-      if (!isWhitespaceCode(code.charCodeAt(pos))) {
-        lastPos = pos + 1;
-        if (pos > lastPos) {
-          this.#extractor.copy({ start: lastPos, end: pos });
-        }
-        return;
-      }
-      pos++;
-    }
-    if (pos > lastPos) {
-      this.#extractor.copy({ start: lastPos, end: pos });
-    }
-  }
   #processBody(parent) {
     var _a;
     const { body } = parent;
@@ -3387,8 +3626,6 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
   }
   #getJSDocInputTypeFromNodes(nodes) {
     for (const node of nodes) {
-      const code = this.#read(node);
-      code;
       const info = this.#getJSDocInputTypeFromNode(node);
       if (info) return info;
     }
@@ -3435,10 +3672,23 @@ ${isMutatedVar(tag.parent, valueLiteral) ? varLocal(`change__${valueLiteral}.`)
     }
     return id;
   }
-  #getScopeExpression(body) {
+  #hasScopeExpression(body) {
+    return !!(getHoistSources(body) || this.#getBodyHoistScopeExpression(body));
+  }
+  #writeScopeExpression(body) {
     const sources = getHoistSources(body);
     const hoists = this.#getBodyHoistScopeExpression(body);
-    return sources ? `{ ${hoists ? `...${hoists}, ` : ""}${sources.join(SEP_COMMA_SPACE)} }` : hoists;
+    if (!sources) {
+      if (hoists) this.#extractor.write(hoists);
+      return;
+    }
+    this.#extractor.write(`{ ${hoists ? `...${hoists}, ` : ""}`);
+    let sep = SEP_EMPTY;
+    for (const binding of sources) {
+      this.#extractor.write(sep).copy(binding.range);
+      sep = SEP_COMMA_SPACE;
+    }
+    this.#extractor.write(" }");
   }
   #getBodyHoistScopeExpression(body) {
     let hoistVars;
@@ -3697,8 +3947,8 @@ function extractStyle(opts) {
               attr.type === 10 /* AttrNamed */ && ((_a = attr.value) == null ? void 0 : _a.type) === 13 /* AttrValue */ && /^['"]$/.test(code[attr.value.value.start])
             ) {
               const name = read(attr.name);
-              if (name === "#style" || name === "style" && node.nameText && name === "style" && ((_b = lookup.getTag(node.nameText)) == null ? void 0 : _b.html)) {
-                getExtractor("css").write(":root{").copy({
+              if (name === "#style" || name === "style" && node.nameText && ((_b = lookup.getTag(node.nameText)) == null ? void 0 : _b.html)) {
+                getExtractor(".css").write(":root{").copy({
                   start: attr.value.value.start + 1,
                   end: attr.value.value.end - 1
                 }).write("}");