@vesk/compiler 0.1.1 → 0.2.8

package/dist/vsk-tsx.js

@@ -1,141 +1,49 @@
 import { parse } from '@vesk/compiler/src/parser';
 import { getPropsType } from '@vesk/compiler/src/ir-generator';
-import { skipWhitespace, findBalancedEnd, splitTopLevel, startsWithIdentifier, stripDeclKeyword, stripTrailingSemicolons, isWhitespaceChar, isIdentStart, isIdentChar, htmlTagEnd, collapseNewlineWhitespace, } from '@vesk/compiler/src/scan';
+import { skipWhitespace, findBalancedEnd, startsWithIdentifier, stripDeclKeyword, stripTrailingSemicolons, isWhitespaceChar, isIdentStart, isIdentChar, htmlTagEnd, } from '@vesk/compiler/src/scan';
 import { containsIdentifier, isIdentifierImported } from '@vesk/compiler/src/tokens';
-function applyEdits(source, edits) {
-    const sorted = edits.sort((a, b) => b.start - a.start || b.end - a.end);
-    let out = source;
-    for (const e of sorted) {
-        out = out.slice(0, e.start) + e.text + out.slice(e.end);
-    }
-    return out;
-}
-/**
- * Collects edit operations that rewrite `&[...] = track<...>(...)`
- * declarations into plain typed `let` declarations, using the parsed AST so
- * nested generics (`track<Map<string, number>>(...)`), type annotations and
- * nested statement positions are handled without regex. `wrapped` is the
- * fake component source (offsets inside it), `prefixLen` the distance from
- * the start of `wrapped` to the start of the real body text.
- */
-function collectTrackDeclEdits(wrapped, ast, prefixLen) {
-    const edits = [];
-    function walk(stmts) {
-        for (const stmt of stmts) {
-            if (!stmt)
-                continue;
-            if (stmt.type === 'VariableDeclaration') {
-                const decls = stmt.declarations || [];
-                for (let di = 0; di < decls.length; di++) {
-                    const decl = decls[di];
-                    const id = decl.id;
-                    if (!id || id.type !== 'ArrayPattern' || id.lazy !== true)
-                        continue;
-                    if (!decl.init)
-                        continue;
-                    const names = (id.elements || [])
-                        .map((el) => (el ? el.name : null))
-                        .filter((n) => typeof n === 'string');
-                    const initText = wrapped.slice(decl.init.start, decl.init.end);
-                    // The first declarator's replacement must also absorb the statement's
-                    // `const`/`let`/`var` keyword, which starts at `stmt.start`, not at
-                    // the declarator's start.
-                    const start = di === 0 ? stmt.start : decl.start;
-                    const end = decl.end;
-                    // Don't duplicate the statement terminator already present after the
-                    // declaration (avoids `let x = ...;;`).
-                    const terminator = wrapped[end] === ';' ? '' : ';';
-                    if (names.length === 0) {
-                        edits.push({ start: start - prefixLen, end: end - prefixLen, text: `let _ = ${initText}${terminator}` });
-                        continue;
-                    }
-                    const annotation = id.typeAnnotation?.typeAnnotation
-                        ? wrapped.slice(id.typeAnnotation.typeAnnotation.start, id.typeAnnotation.typeAnnotation.end).trim()
-                        : decl.init.typeArguments
-                            ? wrapped.slice(decl.init.typeArguments.start + 1, decl.init.typeArguments.end - 1).trim()
-                            : '';
-                    const first = names[0];
-                    let replacement;
-                    if (annotation) {
-                        replacement = `let ${first}: ${annotation} = (${initText} as unknown as ${annotation});`;
-                    }
-                    else {
-                        replacement = `let ${first}: any = ${initText};`;
-                    }
-                    for (let n = 1; n < names.length; n++) {
-                        replacement += ` let ${names[n]}: any = ${first};`;
-                    }
-                    // The last emitted statement sits directly before `end`; drop its
-                    // terminator when the source already provides one (avoids `;;`).
-                    if (wrapped[end] === ';')
-                        replacement = replacement.slice(0, -1);
-                    edits.push({ start: start - prefixLen, end: end - prefixLen, text: replacement });
-                }
-                continue;
-            }
-            const kids = [];
-            if (stmt.consequent)
-                kids.push(stmt.consequent);
-            if (stmt.alternate)
-                kids.push(stmt.alternate);
-            if (Array.isArray(stmt.body))
-                kids.push(...stmt.body);
-            else if (stmt.body && stmt.body.type)
-                kids.push(stmt.body);
-            if (Array.isArray(stmt.cases)) {
-                for (const c of stmt.cases)
-                    if (Array.isArray(c.consequent))
-                        kids.push(...c.consequent);
-            }
-            if (stmt.handler)
-                kids.push(stmt.handler.body);
-            if (stmt.finalizer)
-                kids.push(stmt.finalizer.body);
-            walk(kids);
-        }
-    }
-    walk(ast.body);
-    return edits;
-}
-const REWRITER_WRAPPER = 'component __VskRewriter() { ';
-const REWRITER_WRAPPER_LEN = REWRITER_WRAPPER.length;
-function rewriteTrackDecls(text) {
-    if (!text.includes('&['))
-        return text;
-    const wrapped = REWRITER_WRAPPER + text + ' }';
-    let ast;
-    try {
-        ast = parse(wrapped);
+const FULL_DATA = {
+    verification: true,
+    completion: true,
+    semantic: true,
+    navigation: true,
+    structure: true,
+    format: true,
+};
+const REACTIVE_DATA = { ...FULL_DATA, customData: { vesk: { reactive: true } } };
+class VskGen {
+    code = '';
+    mappings = [];
+    styleRegions = [];
+    /** Counts track-decl rewrites so typedCells cell names stay unique within a codegen run. */
+    cellCount = 0;
+    /** Appends `text`; when a source range is given, records a mapping. */
+    add(text, srcStart, srcEnd, data = FULL_DATA) {
+        const start = this.code.length;
+        this.code += text;
+        if (text.length > 0 && srcStart !== undefined && srcEnd !== undefined && srcEnd > srcStart) {
+            this.mappings.push({
+                sourceOffsets: [srcStart],
+                generatedOffsets: [start],
+                lengths: [srcEnd - srcStart],
+                generatedLengths: [text.length],
+                data,
+            });
+        }
     }
-    catch {
-        return text;
+    /** Appends synthetic text with no source mapping. */
+    addRaw(text) {
+        this.code += text;
     }
-    const edits = collectTrackDeclEdits(wrapped, ast, REWRITER_WRAPPER_LEN);
-    if (edits.length === 0)
-        return text;
-    return applyEdits(text, edits);
-}
-function stripStyleBlocks(text) {
-    const out = [];
-    let i = 0;
-    while (i < text.length) {
-        if (text[i] === '<' && text.slice(i, i + 6) === '<style') {
-            const next = i + 6;
-            if (next >= text.length || isWhitespaceChar(text[next]) || text[next] === '>' || text[next] === '/') {
-                const openEnd = htmlTagEnd(text, i);
-                if (openEnd !== -1) {
-                    const closeIdx = text.indexOf('</style>', openEnd);
-                    if (closeIdx !== -1) {
-                        i = closeIdx + '</style>'.length;
-                        continue;
-                    }
-                }
-            }
+    prepend(text) {
+        this.code = text + this.code;
+        for (const m of this.mappings) {
+            m.generatedOffsets = m.generatedOffsets.map((o) => o + text.length);
         }
-        out.push(text[i]);
-        i++;
     }
-    return out.join('');
+    recordStyle(start, end, content) {
+        this.styleRegions.push({ start, end, content });
+    }
 }
 function getComponents(ast) {
     const out = [];
@@ -183,15 +91,394 @@ function getJSXTagName(el) {
         return name.namespace.name + ':' + name.name.name;
     return null;
 }
-function tsxBlock(source, body, indent) {
+/** Collapses newline+whitespace runs to single spaces and records the raw index of every kept character. */
+function collapseWithMap(value) {
+    let out = '';
+    const map = [];
+    let i = 0;
+    while (i < value.length) {
+        const c = value[i];
+        if (c === '\n') {
+            out += ' ';
+            map.push(i);
+            while (i < value.length && isWhitespaceChar(value[i]))
+                i++;
+            continue;
+        }
+        out += c;
+        map.push(i);
+        i++;
+    }
+    return { text: out, map };
+}
+function isStatementMode(node) {
+    const stmts = node.body?.body ?? [];
+    return !(stmts.length === 1 && stmts[0].type === 'ReturnStatement');
+}
+/** Index of the first whole-word occurrence of `word` in `text`, or -1. */
+function findFirstKeyword(text, word) {
+    let i = 0;
+    while (i < text.length) {
+        if (isIdentStart(text[i])) {
+            let j = i + 1;
+            while (j < text.length && isIdentChar(text[j]))
+                j++;
+            if (text.slice(i, j) === word)
+                return i;
+            i = j;
+            continue;
+        }
+        i++;
+    }
+    return -1;
+}
+/**
+ * Removes a trailing `client` keyword (plus surrounding whitespace) from a
+ * component header, replacing it with a single trailing space. Returns the
+ * kept text and the length of the source range it covers.
+ */
+function stripTrailingClientRange(text) {
+    let end = text.length;
+    while (end > 0 && isWhitespaceChar(text[end - 1]))
+        end--;
+    let wordStart = end;
+    while (wordStart > 0 && isIdentChar(text[wordStart - 1]))
+        wordStart--;
+    if (text.slice(wordStart, end) === 'client') {
+        return { text: text.slice(0, wordStart).trimEnd() + ' ', end: wordStart };
+    }
+    return { text, end: text.length };
+}
+/** Index of the first depth-0 whole-word occurrence of `sep` in `text`, or -1 (splitTopLevel semantics). */
+function findTopLevelSep(text, sep) {
+    let depth = 0;
+    let i = 0;
+    while (i < text.length) {
+        const c = text[i];
+        if (c === '"' || c === "'" || c === '`') {
+            let j = i + 1;
+            while (j < text.length) {
+                const q = text[j];
+                if (q === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (q === c) {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            i = j;
+            continue;
+        }
+        if (c === '/' && (text[i + 1] === '/' || text[i + 1] === '*')) {
+            let j = i + 2;
+            if (text[i + 1] === '/') {
+                while (j < text.length && text[j] !== '\n')
+                    j++;
+            }
+            else {
+                while (j < text.length && !(text[j] === '*' && text[j + 1] === '/'))
+                    j++;
+                j = Math.min(j + 2, text.length);
+            }
+            i = j;
+            continue;
+        }
+        if (c === '(' || c === '[' || c === '{')
+            depth++;
+        else if (c === ')' || c === ']' || c === '}') {
+            if (depth > 0)
+                depth--;
+        }
+        else if (depth === 0 && c === sep[0] && text.slice(i, i + sep.length) === sep) {
+            const before = i === 0 ? ' ' : text[i - 1];
+            const after = i + sep.length < text.length ? text[i + sep.length] : ' ';
+            if (!isIdentChar(before) && !isIdentChar(after))
+                return i;
+        }
+        i++;
+    }
+    return -1;
+}
+function trailingWsLen(text) {
+    let n = 0;
+    while (n < text.length && isWhitespaceChar(text[text.length - 1 - n]))
+        n++;
+    return n;
+}
+function leadingWsLen(text) {
+    let n = 0;
+    while (n < text.length && isWhitespaceChar(text[n]))
+        n++;
+    return n;
+}
+function isTrackDeclStatement(stmt) {
+    if (!stmt || stmt.type !== 'VariableDeclaration')
+        return false;
+    return (stmt.declarations || []).some((d) => d && d.id && d.id.type === 'ArrayPattern' && d.id.lazy === true && d.init);
+}
+/**
+ * Emits the rewrite for a `const &[count] = track(0)` declarator. Mirrors
+ * the exact text produced by the previous string-level rewrite: the first
+ * declarator absorbs the statement's `const`/`let`/`var` keyword, the
+ * replacement always ends with `;` unless the source statement already
+ * provides a terminator (checked on the emitted statement text, exactly
+ * like the old `wrapped[end] === ';'` rule).
+ */
+function emitTrackDeclStatement(g, source, stmt, indent, isLast, opts) {
+    const fullText = stripTrailingSemicolons(source.slice(stmt.start, stmt.end).trimEnd());
+    const text = fullText + (!fullText.endsWith('}') && !isLast ? ';' : '');
+    const decls = stmt.declarations || [];
+    g.add(indent);
+    let prevEnd = stmt.start;
+    for (let di = 0; di < decls.length; di++) {
+        const decl = decls[di];
+        const id = decl.id;
+        const isLazy = id && id.type === 'ArrayPattern' && id.lazy === true && decl.init;
+        if (!isLazy) {
+            g.addRaw(source.slice(prevEnd, decl.start));
+            g.add(source.slice(decl.start, decl.end), decl.start, decl.end);
+            prevEnd = decl.end;
+            continue;
+        }
+        if (di > 0)
+            g.addRaw(source.slice(prevEnd, decl.start));
+        const ch = text[decl.end - stmt.start] ?? ' ';
+        const elements = (id.elements || []);
+        const names = elements
+            .map((el) => (el ? el.name : null))
+            .filter((n) => typeof n === 'string');
+        const initText = source.slice(decl.init.start, decl.init.end);
+        if (names.length === 0) {
+            g.add('let _ = ');
+            g.add(initText, decl.init.start, decl.init.end);
+            if (ch !== ';')
+                g.addRaw(';');
+            prevEnd = decl.end;
+            continue;
+        }
+        const annotation = id.typeAnnotation?.typeAnnotation
+            ? source.slice(id.typeAnnotation.typeAnnotation.start, id.typeAnnotation.typeAnnotation.end).trim()
+            : decl.init.typeArguments
+                ? source.slice(decl.init.typeArguments.start + 1, decl.init.typeArguments.end - 1).trim()
+                : '';
+        const annStart = id.typeAnnotation?.typeAnnotation
+            ? id.typeAnnotation.typeAnnotation.start
+            : decl.init.typeArguments
+                ? decl.init.typeArguments.start + 1
+                : -1;
+        const annEnd = id.typeAnnotation?.typeAnnotation
+            ? id.typeAnnotation.typeAnnotation.end
+            : decl.init.typeArguments
+                ? decl.init.typeArguments.end - 1
+                : -1;
+        const first = names[0];
+        const firstRange = [elements[0].start, elements[0].end];
+        const dropLastSemi = ch === ';';
+        if (opts.typedCells) {
+            const cellName = g.cellCount === 0 ? '__cell' : `__cell${g.cellCount}`;
+            g.cellCount++;
+            // The cell holds a Tracked<T>, NOT a T — leave its type to inference
+            // from `track<T>(init)` so raw-cell aliases stay correctly typed too.
+            // Annotating it with the value annotation made `&[v, cell]` emit
+            // `cell: T = <Tracked>` (unsound), and broke passing `cell` to APIs
+            // expecting `Tracked<unknown>` (e.g. useFetch `into`).
+            g.add(`const ${cellName} = `);
+            g.add(initText, decl.init.start, decl.init.end);
+            g.add(';');
+            // First binding: the VALUE read from the cell.
+            g.add(' let ');
+            g.add(first, firstRange[0], firstRange[1], REACTIVE_DATA);
+            if (annotation) {
+                g.add(': ');
+                g.add(annotation, annStart, annEnd);
+            }
+            g.add(` = ${cellName}.get();`);
+            // Raw-cell aliases: inferred Tracked<T>, never the value annotation.
+            for (let n = 1; n < names.length; n++) {
+                g.add(' let ');
+                g.add(names[n], elements[n].start, elements[n].end, REACTIVE_DATA);
+                g.add(` = ${cellName};`);
+            }
+            if (dropLastSemi)
+                g.code = g.code.slice(0, -1);
+        }
+        else {
+            if (annotation) {
+                g.add('let ');
+                g.add(first, firstRange[0], firstRange[1], REACTIVE_DATA);
+                g.add(': ');
+                g.add(annotation, annStart, annEnd);
+                g.add(' = (');
+                g.add(initText, decl.init.start, decl.init.end);
+                g.add(' as unknown as ');
+                g.add(annotation, annStart, annEnd);
+                g.add(');');
+            }
+            else {
+                g.add('let ');
+                g.add(first, firstRange[0], firstRange[1], REACTIVE_DATA);
+                g.add(': any = ');
+                g.add(initText, decl.init.start, decl.init.end);
+                g.add(';');
+            }
+            for (let n = 1; n < names.length; n++) {
+                g.add(' let ');
+                g.add(names[n], elements[n].start, elements[n].end, REACTIVE_DATA);
+                g.add(': any = ');
+                g.add(first, firstRange[0], firstRange[1]);
+                g.add(';');
+                if (n === names.length - 1 && dropLastSemi)
+                    g.code = g.code.slice(0, -1);
+            }
+            if (names.length === 1 && dropLastSemi)
+                g.code = g.code.slice(0, -1);
+        }
+        prevEnd = decl.end;
+    }
+    if (!isLast)
+        g.addRaw(';');
+}
+function emitBlock(g, source, body, indent, opts) {
     const stmts = body && body.type === 'BlockStatement'
         ? body.body
         : body ? (Array.isArray(body) ? body : [body]) : [];
-    const inner = tsxEmitBody(source, stmts, indent + '  ');
-    return `{\n${inner}\n${indent}}`;
+    g.addRaw('{\n');
+    emitBody(g, source, stmts, indent + '  ', opts);
+    g.addRaw('\n');
+    g.add(indent);
+    g.addRaw('}');
 }
-function tsxEmitJSXChildren(source, children) {
-    const parts = [];
+function emitJSXAttr(g, source, attr) {
+    if (attr.type === 'JSXSpreadAttribute') {
+        g.add(source.slice(attr.start, attr.end), attr.start, attr.end);
+        return;
+    }
+    const name = attr.name;
+    g.add(source.slice(name.start, name.end), name.start, name.end);
+    const v = attr.value;
+    if (!v)
+        return;
+    g.add(source.slice(name.end, v.start), name.end, v.start);
+    if (v.type === 'JSXExpressionContainer') {
+        g.add(source.slice(v.start, v.expression.start), v.start, v.expression.start);
+        g.add(source.slice(v.expression.start, v.expression.end), v.expression.start, v.expression.end);
+        g.add(source.slice(v.expression.end, v.end), v.expression.end, v.end);
+    }
+    else {
+        g.add(source.slice(v.start, v.end), v.start, v.end);
+    }
+}
+function emitJSXElement(g, source, el, opts) {
+    const op = el.openingElement;
+    const name = op.name;
+    let prev;
+    if (name) {
+        g.add(source.slice(op.start, name.start), op.start, name.start);
+        g.add(source.slice(name.start, name.end), name.start, name.end);
+        prev = name.end;
+    }
+    else {
+        prev = op.start + 1;
+    }
+    for (const attr of op.attributes ?? []) {
+        g.add(source.slice(prev, attr.start), prev, attr.start);
+        emitJSXAttr(g, source, attr);
+        prev = attr.end;
+    }
+    const tail = source.slice(prev, op.end);
+    if (op.selfClosing && !tail.includes('/')) {
+        const gt = tail.lastIndexOf('>');
+        const head = gt === -1 ? tail : tail.slice(0, gt);
+        if (head)
+            g.add(head, prev, prev + head.length);
+        g.addRaw('/>');
+    }
+    else {
+        g.add(tail, prev, op.end);
+    }
+    if (op.selfClosing)
+        return;
+    emitJSXChildren(g, source, el.children ?? [], opts);
+    if (el.closingElement) {
+        g.add(source.slice(el.closingElement.start, el.closingElement.end), el.closingElement.start, el.closingElement.end);
+    }
+}
+function emitJSXExprBody(g, source, expr, opts) {
+    if (expr.type === 'JSXElement')
+        return emitJSXElement(g, source, expr, opts);
+    if (expr.type === 'JSXFragment')
+        return emitJSXFragment(g, source, expr, opts);
+    g.add(source.slice(expr.start, expr.end), expr.start, expr.end);
+}
+function emitJSXFragment(g, source, frag, opts) {
+    g.addRaw('<>');
+    emitJSXChildren(g, source, frag.children ?? [], opts);
+    g.addRaw('</>');
+}
+/**
+ * Emits the `.map(...)` scaffolding for a `for (... of ...)` / `for (... in
+ * ...)` clause inside JSX text, mapping the array/object expression to its
+ * source range. `clauseStart` is the collapsed-text offset of the clause's
+ * first character (inside `text`) and `map` translates collapsed offsets
+ * back to raw source offsets.
+ */
+function emitForClauseMap(g, source, child, text, map, clauseStart, bodyEmit, emptyEmit) {
+    const clauseEnd = findBalancedEnd(text, clauseStart - 1);
+    const clause = text.slice(clauseStart, clauseEnd);
+    const ofIdx = findTopLevelSep(clause, 'of');
+    const inIdx = ofIdx === -1 ? findTopLevelSep(clause, 'in') : -1;
+    if (ofIdx === -1 && inIdx === -1)
+        return false;
+    const sepIdx = ofIdx === -1 ? inIdx : ofIdx;
+    const lhs = clause.slice(0, sepIdx);
+    const rhs = clause.slice(sepIdx + 2);
+    const arrExpr = rhs.trim();
+    const arrStartCollapsed = clauseStart + sepIdx + 2 + leadingWsLen(rhs);
+    const arrEndCollapsed = clauseStart + sepIdx + 2 + rhs.length - trailingWsLen(rhs);
+    const arrStart = arrStartCollapsed < map.length ? child.start + map[arrStartCollapsed] : child.start;
+    const arrEnd = arrEndCollapsed > 0 && arrEndCollapsed - 1 < map.length
+        ? child.start + map[arrEndCollapsed - 1] + 1
+        : child.start;
+    const itemVar = stripDeclKeyword(lhs).trim();
+    if (ofIdx !== -1) {
+        if (emptyEmit) {
+            g.addRaw('{ (() => { const _v = ');
+            g.add(arrExpr, arrStart, arrEnd);
+            g.addRaw('; return _v.length === 0 ? (');
+            emptyEmit();
+            g.addRaw(') : _v.map((');
+            g.addRaw(itemVar);
+            g.addRaw(': (typeof _v)[number]) => (');
+            bodyEmit();
+            g.addRaw(')); })() }');
+        }
+        else {
+            g.addRaw('{ ');
+            g.add(arrExpr, arrStart, arrEnd);
+            g.addRaw('.map((');
+            g.addRaw(itemVar);
+            g.addRaw(': (typeof ');
+            g.add(arrExpr, arrStart, arrEnd);
+            g.addRaw(')[number]) => (');
+            bodyEmit();
+            g.addRaw(')) }');
+        }
+    }
+    else {
+        g.addRaw('{ Object.keys(');
+        g.add(arrExpr, arrStart, arrEnd);
+        g.addRaw(').map((');
+        g.addRaw(itemVar);
+        g.addRaw(') => (');
+        bodyEmit();
+        g.addRaw(')) }');
+    }
+    return true;
+}
+function emitJSXChildren(g, source, children, opts) {
     let i = 0;
     let forPending = false;
     while (i < children.length) {
@@ -199,7 +486,7 @@ function tsxEmitJSXChildren(source, children) {
         if (child.type !== 'JSXText')
             forPending = false;
         if (child.type === 'JSXText') {
-            const text = collapseNewlineWhitespace(child.value);
+            const { text, map } = collapseWithMap(child.value);
             const trimmed = text.trim();
             if (!trimmed || trimmed.startsWith('//')) {
                 i++;
@@ -210,56 +497,42 @@ function tsxEmitJSXChildren(source, children) {
             if (forDecl !== null && nextChild !== undefined && (nextChild.type === 'JSXExpressionContainer' ||
                 nextChild.type === 'JSXElement' ||
                 nextChild.type === 'JSXFragment')) {
-                let bodyText;
-                if (nextChild.type === 'JSXExpressionContainer') {
-                    const exprNode = nextChild.expression;
-                    if (exprNode.type === 'JSXEmptyExpression') {
-                        parts.push(text);
-                        i++;
-                        continue;
+                const trimmedStartCollapsed = leadingWsLen(text);
+                const parenIdx = skipWhitespace(text, trimmedStartCollapsed + 3);
+                if (text[parenIdx] === '(') {
+                    const clauseStartCollapsed = parenIdx + 1;
+                    let consumed = 2;
+                    let emptyEmit = null;
+                    const emptyTextNode = children[i + 2];
+                    const emptyContainer = children[i + 3];
+                    if (emptyTextNode && emptyTextNode.type === 'JSXText' &&
+                        ['#empty', 'empty'].includes(emptyTextNode.value.trim()) &&
+                        emptyContainer && emptyContainer.type === 'JSXExpressionContainer' &&
+                        emptyContainer.expression.type !== 'JSXEmptyExpression') {
+                        consumed = 4;
+                        emptyEmit = () => emitJSXExprBody(g, source, emptyContainer.expression, opts);
                     }
-                    bodyText = tsxEmitJSXExprBody(source, exprNode);
-                }
-                else if (nextChild.type === 'JSXFragment') {
-                    bodyText = tsxEmitJSXFragment(source, nextChild);
-                }
-                else {
-                    bodyText = tsxEmitJSXElement(source, nextChild);
-                }
-                let emptyText = '';
-                let consumed = 2;
-                const emptyTextNode = children[i + 2];
-                const emptyContainer = children[i + 3];
-                if (emptyTextNode && emptyTextNode.type === 'JSXText' &&
-                    ['#empty', 'empty'].includes(emptyTextNode.value.trim()) &&
-                    emptyContainer && emptyContainer.type === 'JSXExpressionContainer' &&
-                    emptyContainer.expression.type !== 'JSXEmptyExpression') {
-                    emptyText = tsxEmitJSXExprBody(source, emptyContainer.expression);
-                    consumed = 4;
-                }
-                const ofParts = splitTopLevel(forDecl, 'of');
-                if (ofParts.length === 2) {
-                    const itemVar = stripDeclKeyword(ofParts[0]).trim();
-                    const arrExpr = ofParts[1].trim();
-                    const map = `{ ${arrExpr}.map((${itemVar}: (typeof ${arrExpr})[number]) => (${bodyText})) }`;
-                    if (emptyText) {
-                        parts.push(`{ (() => { const _v = ${arrExpr}; return _v.length === 0 ? (${emptyText}) : _v.map((${itemVar}: (typeof _v)[number]) => (${bodyText})); })() }`);
+                    let matched = false;
+                    if (nextChild.type === 'JSXExpressionContainer') {
+                        const exprNode = nextChild.expression;
+                        if (exprNode.type === 'JSXEmptyExpression') {
+                            g.add(text, child.start, child.end);
+                            i++;
+                            continue;
+                        }
+                        matched = emitForClauseMap(g, source, child, text, map, clauseStartCollapsed, () => emitJSXExprBody(g, source, exprNode, opts), emptyEmit);
+                    }
+                    else if (nextChild.type === 'JSXFragment') {
+                        matched = emitForClauseMap(g, source, child, text, map, clauseStartCollapsed, () => emitJSXFragment(g, source, nextChild, opts), emptyEmit);
                     }
                     else {
-                        parts.push(map);
+                        matched = emitForClauseMap(g, source, child, text, map, clauseStartCollapsed, () => emitJSXElement(g, source, nextChild, opts), emptyEmit);
+                    }
+                    if (matched) {
+                        i += consumed;
+                        forPending = true;
+                        continue;
                     }
-                    i += consumed;
-                    forPending = true;
-                    continue;
-                }
-                const inParts = splitTopLevel(forDecl, 'in');
-                if (inParts.length === 2) {
-                    const itemVar = stripDeclKeyword(inParts[0]).trim();
-                    const objExpr = inParts[1].trim();
-                    parts.push(`{ Object.keys(${objExpr}).map((${itemVar}) => (${bodyText})) }`);
-                    i += consumed;
-                    forPending = true;
-                    continue;
                 }
             }
             if (forPending && trimmed === '}') {
@@ -268,7 +541,7 @@ function tsxEmitJSXChildren(source, children) {
                 continue;
             }
             forPending = false;
-            parts.push(text);
+            g.add(text, child.start, child.end);
             i++;
         }
         else if (child.type === 'JSXExpressionContainer') {
@@ -276,165 +549,227 @@ function tsxEmitJSXChildren(source, children) {
                 i++;
                 continue;
             }
-            parts.push(`{${source.slice(child.expression.start, child.expression.end)}}`);
+            g.addRaw('{');
+            g.add(source.slice(child.expression.start, child.expression.end), child.expression.start, child.expression.end);
+            g.addRaw('}');
             i++;
         }
         else if (child.type === 'JSXElement') {
             if (getJSXTagName(child) === 'style') {
+                const openEnd = child.openingElement?.end ?? child.start;
+                const closeStart = child.closingElement?.start ?? child.end;
+                g.recordStyle(child.start, child.end, source.slice(openEnd, closeStart));
                 i++;
                 continue;
             }
-            parts.push(tsxEmitJSXElement(source, child));
+            emitJSXElement(g, source, child, opts);
             i++;
         }
         else if (child.type === 'JSXFragment') {
-            parts.push(tsxEmitJSXFragment(source, child));
+            emitJSXFragment(g, source, child, opts);
             i++;
         }
         else {
             i++;
         }
     }
-    return parts.join('');
 }
-function tsxEmitJSXExprBody(source, expr) {
-    if (expr.type === 'JSXElement')
-        return tsxEmitJSXElement(source, expr);
-    if (expr.type === 'JSXFragment')
-        return tsxEmitJSXFragment(source, expr);
-    return source.slice(expr.start, expr.end);
-}
-function tsxEmitJSXElement(source, el) {
-    const opening = source.slice(el.openingElement.start, el.openingElement.end);
-    if (el.openingElement.selfClosing)
-        return opening;
-    const inner = tsxEmitJSXChildren(source, el.children ?? []);
-    const closing = el.closingElement ? source.slice(el.closingElement.start, el.closingElement.end) : '';
-    return opening + inner + closing;
-}
-function tsxEmitJSXFragment(source, frag) {
-    const inner = tsxEmitJSXChildren(source, frag.children ?? []);
-    return '<>' + inner + '</>';
-}
-function tsxEmitIf(source, stmt, indent) {
-    const cond = source.slice(stmt.test.start, stmt.test.end);
-    let out = `${indent}if (${cond}) ${tsxBlock(source, stmt.consequent, indent)}`;
+function emitIf(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('if (');
+    g.add(source.slice(stmt.test.start, stmt.test.end), stmt.test.start, stmt.test.end);
+    g.addRaw(') ');
+    emitBlock(g, source, stmt.consequent, indent, opts);
     if (stmt.alternate) {
-        const altBlock = stmt.alternate.type === 'BlockStatement'
-            ? tsxBlock(source, stmt.alternate, indent)
-            : tsxBlock(source, [stmt.alternate], indent);
-        out += ` else ${altBlock}`;
+        g.addRaw(' else ');
+        emitBlock(g, source, stmt.alternate, indent, opts);
     }
-    return out;
 }
-function tsxEmitForOf(source, stmt, indent) {
-    const left = source.slice(stmt.left.start, stmt.left.end);
-    const right = source.slice(stmt.right.start, stmt.right.end);
-    return `${indent}for (${left} of ${right}) ${tsxBlock(source, stmt.body, indent)}`;
-}
-function tsxEmitForIn(source, stmt, indent) {
-    const left = source.slice(stmt.left.start, stmt.left.end);
-    const right = source.slice(stmt.right.start, stmt.right.end);
-    return `${indent}for (${left} in ${right}) ${tsxBlock(source, stmt.body, indent)}`;
-}
-function tsxEmitFor(source, stmt, indent) {
-    const init = stmt.init ? source.slice(stmt.init.start, stmt.init.end) : '';
-    const test = stmt.test ? source.slice(stmt.test.start, stmt.test.end) : '';
-    const update = stmt.update ? source.slice(stmt.update.start, stmt.update.end) : '';
-    return `${indent}for (${init}; ${test}; ${update}) ${tsxBlock(source, stmt.body, indent)}`;
-}
-function tsxEmitWhile(source, stmt, indent) {
-    const test = source.slice(stmt.test.start, stmt.test.end);
-    return `${indent}while (${test}) ${tsxBlock(source, stmt.body, indent)}`;
-}
-function tsxEmitDoWhile(source, stmt, indent) {
-    const test = source.slice(stmt.test.start, stmt.test.end);
-    return `${indent}do ${tsxBlock(source, stmt.body, indent)} while (${test});`;
-}
-function tsxEmitSwitch(source, stmt, indent) {
-    const disc = source.slice(stmt.discriminant.start, stmt.discriminant.end);
-    const lines = [`${indent}switch (${disc}) {`];
+function emitForOf(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('for (');
+    g.add(source.slice(stmt.left.start, stmt.left.end), stmt.left.start, stmt.left.end);
+    g.addRaw(' of ');
+    g.add(source.slice(stmt.right.start, stmt.right.end), stmt.right.start, stmt.right.end);
+    g.addRaw(') ');
+    emitBlock(g, source, stmt.body, indent, opts);
+}
+function emitForIn(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('for (');
+    g.add(source.slice(stmt.left.start, stmt.left.end), stmt.left.start, stmt.left.end);
+    g.addRaw(' in ');
+    g.add(source.slice(stmt.right.start, stmt.right.end), stmt.right.start, stmt.right.end);
+    g.addRaw(') ');
+    emitBlock(g, source, stmt.body, indent, opts);
+}
+function emitFor(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('for (');
+    if (stmt.init)
+        g.add(source.slice(stmt.init.start, stmt.init.end), stmt.init.start, stmt.init.end);
+    g.addRaw('; ');
+    if (stmt.test)
+        g.add(source.slice(stmt.test.start, stmt.test.end), stmt.test.start, stmt.test.end);
+    g.addRaw('; ');
+    if (stmt.update)
+        g.add(source.slice(stmt.update.start, stmt.update.end), stmt.update.start, stmt.update.end);
+    g.addRaw(') ');
+    emitBlock(g, source, stmt.body, indent, opts);
+}
+function emitWhile(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('while (');
+    g.add(source.slice(stmt.test.start, stmt.test.end), stmt.test.start, stmt.test.end);
+    g.addRaw(') ');
+    emitBlock(g, source, stmt.body, indent, opts);
+}
+function emitDoWhile(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('do ');
+    emitBlock(g, source, stmt.body, indent, opts);
+    g.addRaw(' while (');
+    g.add(source.slice(stmt.test.start, stmt.test.end), stmt.test.start, stmt.test.end);
+    g.addRaw(');');
+}
+function emitSwitch(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('switch (');
+    g.add(source.slice(stmt.discriminant.start, stmt.discriminant.end), stmt.discriminant.start, stmt.discriminant.end);
+    g.addRaw(') {');
+    let firstCase = true;
     for (const c of stmt.cases ?? []) {
+        g.addRaw(firstCase ? '\n' : '\n');
+        firstCase = false;
+        g.add(indent);
+        g.addRaw('  ');
         if (c.test) {
-            lines.push(`${indent}  case ${source.slice(c.test.start, c.test.end)}:`);
+            g.addRaw('case ');
+            g.add(source.slice(c.test.start, c.test.end), c.test.start, c.test.end);
+            g.addRaw(':');
         }
         else {
-            lines.push(`${indent}  default:`);
+            g.addRaw('default:');
         }
-        const bodyText = tsxEmitBody(source, c.consequent, indent + '    ');
-        if (bodyText)
-            lines.push(bodyText);
+        const before = g.code.length;
+        emitBody(g, source, c.consequent, indent + '    ', opts);
+        if (g.code.length > before)
+            g.addRaw('\n');
     }
-    lines.push(`${indent}}`);
-    return lines.join('\n');
+    g.addRaw('\n');
+    g.add(indent);
+    g.addRaw('}');
 }
-function tsxEmitTry(source, stmt, indent) {
-    let out = `${indent}try ${tsxBlock(source, stmt.block, indent)}`;
+function emitTry(g, source, stmt, indent, opts) {
+    g.add(indent);
+    g.addRaw('try ');
+    emitBlock(g, source, stmt.block, indent, opts);
     if (stmt.handler) {
-        const param = stmt.handler.param ? source.slice(stmt.handler.param.start, stmt.handler.param.end) : '';
-        out += ` catch${param ? ` (${param})` : ''} ${tsxBlock(source, stmt.handler.body, indent)}`;
+        g.addRaw(' catch');
+        if (stmt.handler.param) {
+            g.addRaw(' (');
+            g.add(source.slice(stmt.handler.param.start, stmt.handler.param.end), stmt.handler.param.start, stmt.handler.param.end);
+            g.addRaw(')');
+        }
+        g.addRaw(' ');
+        emitBlock(g, source, stmt.handler.body, indent, opts);
     }
     if (stmt.finalizer) {
-        out += ` finally ${tsxBlock(source, stmt.finalizer, indent)}`;
+        g.addRaw(' finally ');
+        emitBlock(g, source, stmt.finalizer, indent, opts);
     }
-    return out;
 }
-function tsxEmitStatement(source, stmt, indent, isLast) {
+function emitPlainStatement(g, source, stmt, indent, isLast) {
+    let text = stripTrailingSemicolons(source.slice(stmt.start, stmt.end).trimEnd());
+    if (text === '')
+        return;
+    g.add(indent);
+    g.add(text, stmt.start, stmt.end);
+    if (!text.endsWith('}') && !isLast)
+        g.addRaw(';');
+}
+function emitStatement(g, source, stmt, indent, isLast, opts) {
     switch (stmt.type) {
         case 'JSXElement':
-            if (getJSXTagName(stmt) === 'style')
-                return '';
-            return indent + tsxEmitJSXElement(source, stmt) + (isLast ? '' : ';');
+            if (getJSXTagName(stmt) === 'style') {
+                const openEnd = stmt.openingElement?.end ?? stmt.start;
+                const closeStart = stmt.closingElement?.start ?? stmt.end;
+                g.recordStyle(stmt.start, stmt.end, source.slice(openEnd, closeStart));
+                return;
+            }
+            g.add(indent);
+            emitJSXElement(g, source, stmt, opts);
+            if (!isLast)
+                g.addRaw(';');
+            return;
         case 'JSXFragment':
-            return indent + tsxEmitJSXFragment(source, stmt) + (isLast ? '' : ';');
+            g.add(indent);
+            emitJSXFragment(g, source, stmt, opts);
+            if (!isLast)
+                g.addRaw(';');
+            return;
         case 'JSXExpressionContainer': {
             if (stmt.expression.type === 'JSXEmptyExpression')
-                return '';
-            const text = `{${source.slice(stmt.expression.start, stmt.expression.end)}}`;
-            return indent + text + (isLast ? '' : ';');
+                return;
+            g.add(indent);
+            g.addRaw('{');
+            g.add(source.slice(stmt.expression.start, stmt.expression.end), stmt.expression.start, stmt.expression.end);
+            g.addRaw('}');
+            if (!isLast)
+                g.addRaw(';');
+            return;
         }
         case 'VeskBlock': {
             if (stmt.tag === 'empty')
-                return '';
-            const lines = [];
+                return;
             const innerStmts = stmt.body ?? [];
+            let firstLine = true;
             for (let i = 0; i < innerStmts.length; i++) {
-                const t = tsxEmitStatement(source, innerStmts[i], indent, isLast && i === innerStmts.length - 1);
-                if (t !== '')
-                    lines.push(t);
+                const before = g.code.length;
+                emitStatement(g, source, innerStmts[i], indent, isLast && i === innerStmts.length - 1, opts);
+                if (g.code.length > before) {
+                    if (!firstLine)
+                        g.addRaw('\n');
+                    firstLine = false;
+                }
             }
-            return lines.join('\n');
+            return;
         }
+        case 'VariableDeclaration':
+            if (isTrackDeclStatement(stmt)) {
+                emitTrackDeclStatement(g, source, stmt, indent, isLast, opts);
+                return;
+            }
+            return emitPlainStatement(g, source, stmt, indent, isLast);
         case 'IfStatement':
-            return tsxEmitIf(source, stmt, indent);
+            return emitIf(g, source, stmt, indent, opts);
         case 'ForOfStatement':
-            return tsxEmitForOf(source, stmt, indent);
+            return emitForOf(g, source, stmt, indent, opts);
         case 'ForInStatement':
-            return tsxEmitForIn(source, stmt, indent);
+            return emitForIn(g, source, stmt, indent, opts);
         case 'ForStatement':
-            return tsxEmitFor(source, stmt, indent);
+            return emitFor(g, source, stmt, indent, opts);
         case 'WhileStatement':
-            return tsxEmitWhile(source, stmt, indent);
+            return emitWhile(g, source, stmt, indent, opts);
         case 'DoWhileStatement':
-            return tsxEmitDoWhile(source, stmt, indent);
+            return emitDoWhile(g, source, stmt, indent, opts);
         case 'SwitchStatement':
-            return tsxEmitSwitch(source, stmt, indent);
+            return emitSwitch(g, source, stmt, indent, opts);
         case 'TryStatement':
-            return tsxEmitTry(source, stmt, indent);
+            return emitTry(g, source, stmt, indent, opts);
         case 'LabeledStatement': {
-            const body = tsxEmitStatement(source, stmt.body, indent, isLast);
-            return `${indent}${stmt.label.name}:\n${body}`;
-        }
-        default: {
-            let text = stripTrailingSemicolons(source.slice(stmt.start, stmt.end).trimEnd());
-            if (text === '')
-                return '';
-            return indent + text + (text.endsWith('}') || isLast ? '' : ';');
+            g.add(indent);
+            g.add(stmt.label.name, stmt.label.start, stmt.label.end);
+            g.addRaw(':\n');
+            emitStatement(g, source, stmt.body, indent, isLast, opts);
+            return;
         }
+        default:
+            return emitPlainStatement(g, source, stmt, indent, isLast);
     }
 }
-function tsxEmitBody(source, stmts, indent) {
-    const lines = [];
+function emitBody(g, source, stmts, indent, opts) {
+    let firstLine = true;
     let i = 0;
     while (i < stmts.length) {
         const stmt = stmts[i];
@@ -442,107 +777,254 @@ function tsxEmitBody(source, stmts, indent) {
         if (stmt.type === 'ForOfStatement' &&
             stmts[i + 1] && stmts[i + 1].type === 'VeskBlock' && stmts[i + 1].tag === 'empty') {
             const empty = stmts[i + 1];
-            lines.push(tsxEmitForOf(source, stmt, indent));
+            if (!firstLine)
+                g.addRaw('\n');
+            firstLine = false;
+            emitForOf(g, source, stmt, indent, opts);
             const inner = empty.body ?? [];
             if (inner.length > 0) {
-                const emptyText = tsxEmitBody(source, inner, indent + '  ');
-                const arrExpr = source.slice(stmt.right.start, stmt.right.end);
-                lines.push(`${indent}${arrExpr}.length === 0 && (() => {`);
-                lines.push(emptyText);
-                lines.push(`${indent}})();`);
+                g.addRaw('\n');
+                g.add(indent);
+                g.add(source.slice(stmt.right.start, stmt.right.end), stmt.right.start, stmt.right.end);
+                g.addRaw('.length === 0 && (() => {');
+                g.addRaw('\n');
+                emitBody(g, source, inner, indent + '  ', opts);
+                g.addRaw('\n');
+                g.add(indent);
+                g.addRaw('})();');
             }
             i += 2;
             continue;
         }
-        const text = tsxEmitStatement(source, stmt, indent, isLast);
-        if (text !== '')
-            lines.push(text);
+        const before = g.code.length;
+        emitStatement(g, source, stmt, indent, isLast, opts);
+        if (g.code.length > before) {
+            if (!firstLine)
+                g.addRaw('\n');
+            firstLine = false;
+        }
         i++;
     }
-    return lines.join('\n');
 }
-function isStatementMode(node) {
-    const stmts = node.body?.body ?? [];
-    return !(stmts.length === 1 && stmts[0].type === 'ReturnStatement');
+/**
+ * Emits `source[start, end)` as a mapped chunk, skipping any `<style>`
+ * blocks (recorded as style regions). Used for expression-mode bodies and
+ * the gaps around statements/expressions.
+ */
+function emitChunkMapped(g, source, start, end) {
+    if (end <= start)
+        return;
+    let pos = start;
+    let i = start;
+    while (i < end) {
+        if (source[i] === '<' && source.slice(i, i + 6) === '<style') {
+            const next = i + 6;
+            if (next < end && (isWhitespaceChar(source[next]) || source[next] === '>' || source[next] === '/')) {
+                const openEnd = htmlTagEnd(source, i);
+                if (openEnd !== -1 && openEnd <= end) {
+                    const closeIdx = source.indexOf('</style>', openEnd);
+                    if (closeIdx !== -1 && closeIdx + 8 <= end) {
+                        g.add(source.slice(pos, i), pos, i);
+                        g.recordStyle(i, closeIdx + 8, source.slice(openEnd, closeIdx));
+                        pos = closeIdx + 8;
+                        i = closeIdx + 8;
+                        continue;
+                    }
+                }
+            }
+        }
+        i++;
+    }
+    g.add(source.slice(pos, end), pos, end);
 }
-/** Replaces the first whole-word occurrence of `word` in `text`. */
-function replaceFirstKeyword(text, word, replacement) {
-    let i = 0;
-    while (i < text.length) {
-        if (isIdentStart(text[i])) {
-            let j = i + 1;
-            while (j < text.length && isIdentChar(text[j]))
-                j++;
-            if (text.slice(i, j) === word)
-                return text.slice(0, i) + replacement + text.slice(j);
-            i = j;
+function emitReturn(g, source, stmt, opts) {
+    g.add(source.slice(stmt.start, stmt.start + 6), stmt.start, stmt.start + 6);
+    const arg = stmt.argument;
+    if (!arg) {
+        emitChunkMapped(g, source, stmt.start + 6, stmt.end);
+        return;
+    }
+    emitChunkMapped(g, source, stmt.start + 6, arg.start);
+    if (arg.type === 'JSXElement')
+        emitJSXElement(g, source, arg, opts);
+    else if (arg.type === 'JSXFragment')
+        emitJSXFragment(g, source, arg, opts);
+    else
+        emitChunkMapped(g, source, arg.start, arg.end);
+    emitChunkMapped(g, source, arg.end, stmt.end);
+}
+/**
+ * Emits a statement-mode component body (bare JSX, control flow,
+ * guard-clause returns). The body text starts directly with the first
+ * statement (no leading whitespace) and the `{ ... }` wrapping is emitted
+ * by the caller.
+ */
+function emitBodyCore(g, source, stmts, opts) {
+    emitBody(g, source, stmts, '', opts);
+}
+/** Emits an expression-mode component body (`return <jsx>` or a bare expression). */
+function emitExpressionBody(g, source, coreStart, coreEnd, stmts, opts) {
+    let pos = coreStart;
+    for (const stmt of stmts) {
+        if (!stmt)
             continue;
+        emitChunkMapped(g, source, pos, stmt.start);
+        pos = stmt.start;
+        if (isTrackDeclStatement(stmt)) {
+            emitTrackDeclStatement(g, source, stmt, '', true, opts);
         }
-        i++;
+        else if (stmt.type === 'ReturnStatement') {
+            emitReturn(g, source, stmt, opts);
+        }
+        else {
+            emitChunkMapped(g, source, stmt.start, stmt.end);
+        }
+        pos = stmt.end;
     }
-    return text;
+    emitChunkMapped(g, source, pos, coreEnd);
 }
 /**
- * Removes a trailing `client` keyword from a component header (the header is
- * the text from the declaration start up to the body `{`), so `component Foo
- * client {` becomes `component Foo {`. Returns the text with the keyword
- * replaced by a single space.
+ * Emits `text` (covering source range [base, end)) with its first
+ * identifier split into its own mapping so hover/rename/definition land
+ * exactly on the component name.
  */
-function stripTrailingClient(text) {
-    let end = text.length;
-    while (end > 0 && isWhitespaceChar(text[end - 1]))
-        end--;
-    let wordStart = end;
-    while (wordStart > 0 && isIdentChar(text[wordStart - 1]))
-        wordStart--;
-    if (text.slice(wordStart, end) === 'client') {
-        return text.slice(0, wordStart).trimEnd() + ' ';
+function emitRestMapped(g, text, base, end) {
+    let i = 0;
+    while (i < text.length && !isIdentStart(text[i]))
+        i++;
+    if (i >= text.length) {
+        g.add(text, base, end);
+        return;
     }
-    return text;
+    let j = i + 1;
+    while (j < text.length && isIdentChar(text[j]))
+        j++;
+    g.add(text.slice(0, i), base, base + i);
+    g.add(text.slice(i, j), base + i, base + j);
+    g.add(text.slice(j), base + j, end);
 }
-export function vskToTsx(source) {
+function emitComponentHeader(g, source, start, bodyStart) {
+    const h = source.slice(start, bodyStart);
+    const k = findFirstKeyword(h, 'component');
+    if (k === -1) {
+        const { text, end } = stripTrailingClientRange(h);
+        if (!text.includes('(')) {
+            const trimmed = text.trimEnd();
+            g.add(trimmed, start, start + end - (text.length - trimmed.length));
+            g.addRaw('() ');
+        }
+        else {
+            g.add(text, start, start + end);
+        }
+        return;
+    }
+    g.add(h.slice(0, k), start, start + k);
+    g.add('function', start + k, start + k + 'component'.length);
+    const restBase = start + k + 'component'.length;
+    const { text: rest, end } = stripTrailingClientRange(h.slice(k + 'component'.length));
+    const transformed = h.slice(0, k) + 'function' + rest;
+    if (!transformed.includes('(')) {
+        const trimmed = rest.trimEnd();
+        emitRestMapped(g, trimmed, restBase, restBase + end - (rest.length - trimmed.length));
+        g.addRaw('() ');
+    }
+    else {
+        emitRestMapped(g, rest, restBase, restBase + end);
+    }
+}
+function emitComponent(g, source, node, start, opts) {
+    const body = node.body;
+    if (!body || body.start == null || body.end == null)
+        return;
+    emitComponentHeader(g, source, start, body.start);
+    const statementMode = isStatementMode(node);
+    const stmts = body.body ?? [];
+    if (statementMode) {
+        g.addRaw('{ ');
+        emitBodyCore(g, source, stmts, opts);
+        g.addRaw(' }');
+    }
+    else {
+        const raw = source.slice(body.start, body.end);
+        const rawLen = raw.length;
+        let s = 0;
+        let e = rawLen;
+        while (s < e && isWhitespaceChar(raw[s]))
+            s++;
+        while (e > s && isWhitespaceChar(raw[e - 1]))
+            e--;
+        const hasBraces = raw[s] === '{' && raw[e - 1] === '}';
+        let coreStart;
+        let coreEnd;
+        if (hasBraces) {
+            coreStart = body.start + s + 1;
+            coreEnd = body.start + e - 1;
+        }
+        else {
+            coreStart = body.start + s;
+            coreEnd = body.start + e;
+        }
+        while (coreStart < coreEnd && isWhitespaceChar(source[coreStart]))
+            coreStart++;
+        while (coreEnd > coreStart && isWhitespaceChar(source[coreEnd - 1]))
+            coreEnd--;
+        if (hasBraces)
+            g.addRaw('{ ');
+        emitExpressionBody(g, source, coreStart, coreEnd, stmts, opts);
+        if (hasBraces)
+            g.addRaw(' }');
+    }
+}
+function isModuleAst(ast) {
+    return (ast.body || []).some((s) => s.type === 'ImportDeclaration' ||
+        s.type === 'ExportNamedDeclaration' ||
+        s.type === 'ExportDefaultDeclaration' ||
+        s.type === 'ExportAllDeclaration');
+}
+export function compileVskCodegen(source, opts = {}) {
     let ast;
     try {
         ast = parse(source);
     }
-    catch {
-        return source;
+    catch (e) {
+        const pos = e.pos ?? 0;
+        return {
+            code: source,
+            mappings: [
+                {
+                    sourceOffsets: [0],
+                    generatedOffsets: [0],
+                    lengths: [source.length],
+                    generatedLengths: [source.length],
+                    data: FULL_DATA,
+                },
+            ],
+            styleRegions: [],
+            errors: [{ message: e.message, start: pos, end: pos + 1 }],
+        };
     }
     const clean = blankForClauses(source, ast);
-    const edits = [];
-    for (const { node, start } of getComponents(ast)) {
+    const g = new VskGen();
+    const components = getComponents(ast).sort((a, b) => a.start - b.start);
+    let pos = 0;
+    for (const { node, start } of components) {
         const body = node.body;
         if (!body || body.start == null || body.end == null)
             continue;
-        let transformed = stripTrailingClient(replaceFirstKeyword(clean.slice(start, body.start), 'component', 'function'));
-        if (!transformed.includes('(')) {
-            transformed = transformed.trimEnd() + '() ';
-        }
-        const statementMode = isStatementMode(node);
-        let wrapped;
-        if (statementMode) {
-            const bodyText = rewriteTrackDecls(tsxEmitBody(clean, body.body ?? [], ''));
-            wrapped = '{ ' + bodyText.trim() + ' }';
-        }
-        else {
-            const raw = clean.slice(body.start, body.end);
-            const inner = raw.trim();
-            const hasBraces = inner.startsWith('{') && inner.endsWith('}');
-            const core = hasBraces ? inner.slice(1, -1) : inner;
-            const bodyText = rewriteTrackDecls(stripStyleBlocks(core));
-            wrapped = hasBraces ? '{ ' + bodyText.trim() + ' }' : bodyText;
-        }
-        edits.push({ start, end: body.end, text: transformed + wrapped });
+        g.add(clean.slice(pos, start), pos, start);
+        emitComponent(g, clean, node, start, opts);
+        pos = body.end;
     }
-    const out = applyEdits(source, edits);
-    const isModule = (ast.body || []).some((s) => s.type === 'ImportDeclaration' ||
-        s.type === 'ExportNamedDeclaration' ||
-        s.type === 'ExportDefaultDeclaration' ||
-        s.type === 'ExportAllDeclaration');
-    if (isModule && containsIdentifier(out, 'Head') && !isIdentifierImported(out, 'Head')) {
-        return `declare const Head: (props: { children?: unknown }) => unknown;\n${out}`;
+    g.add(clean.slice(pos), pos, source.length);
+    let code = g.code;
+    if (isModuleAst(ast) && containsIdentifier(code, 'Head') && !isIdentifierImported(code, 'Head')) {
+        g.prepend('declare const Head: (props: { children?: Component }) => Component;\n');
+        code = g.code;
     }
-    return out;
+    return { code, mappings: g.mappings, styleRegions: g.styleRegions, errors: [] };
+}
+export function vskToTsx(source) {
+    return compileVskCodegen(source).code;
 }
 function isTypeDecl(stmt) {
     return (stmt.type === 'TSInterfaceDeclaration' ||
@@ -585,7 +1067,7 @@ export function generateVskDts(source) {
         const hasType = propsType !== null && propsType !== undefined;
         const collision = typeDeclNames.has(typeName);
         const signature = hasType
-            ? (collision ? propsType : typeName) + ' & { children?: unknown }'
+            ? (collision ? propsType : typeName) + ' & { children?: Component }'
             : 'any';
         if (hasType && !collision) {
             lines.push(`export type ${typeName} = ${propsType};`, '');
@@ -594,10 +1076,10 @@ export function generateVskDts(source) {
             lines.push(`export type ${typeName} = any;`, '');
         }
         if (defaultExport) {
-            lines.push(`export default function ${name}(props: ${signature}): unknown;`, '');
+            lines.push(`export default function ${name}(props: ${signature}): Component;`, '');
         }
         else {
-            lines.push(`export declare function ${name}(props: ${signature}): unknown;`, '');
+            lines.push(`export declare function ${name}(props: ${signature}): Component;`, '');
         }
     }
     return lines.join('\n');