@zenithbuild/cli 0.6.3 → 0.6.5

package/dist/build.js

@@ -16,13 +16,13 @@ import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { mkdir, readdir, rm, stat } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { basename, dirname, extname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { generateManifest } from './manifest.js';
 import { buildComponentRegistry, expandComponents, extractTemplate, isDocumentMode } from './resolve-components.js';
+import { collectExpandedComponentOccurrences } from './component-occurrences.js';
+import { applyOccurrenceRewritePlans, cloneComponentIrForInstance } from './component-instance-ir.js';
+import { resolveBundlerBin, resolveCompilerBin } from './toolchain-paths.js';
+import { maybeWarnAboutZenithVersionMismatch } from './version-check.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const CLI_ROOT = resolve(__dirname, '..');
 const require = createRequire(import.meta.url);
 let cachedTypeScript = undefined;
 
@@ -40,40 +40,6 @@ function loadTypeScriptApi() {
     return cachedTypeScript;
 }
 
-/**
- * Resolve a binary path from deterministic candidates.
- *
- * Supports both repository layout (../zenith-*) and installed package layout
- * under node_modules/@zenithbuild (../compiler, ../bundler).
- *
- * @param {string[]} candidates
- * @returns {string}
- */
-function resolveBinary(candidates) {
-    for (const candidate of candidates) {
-        if (existsSync(candidate)) {
-            return candidate;
-        }
-    }
-    return candidates[0];
-}
-
-const COMPILER_BIN = resolveBinary([
-    resolve(CLI_ROOT, '../compiler/target/release/zenith-compiler'),
-    resolve(CLI_ROOT, '../zenith-compiler/target/release/zenith-compiler')
-]);
-
-function getBundlerBin() {
-    const envBin = process.env.ZENITH_BUNDLER_BIN;
-    if (envBin && typeof envBin === 'string' && existsSync(envBin)) {
-        return envBin;
-    }
-    return resolveBinary([
-        resolve(CLI_ROOT, '../bundler/target/release/zenith-bundler'),
-        resolve(CLI_ROOT, '../zenith-bundler/target/release/zenith-bundler')
-    ]);
-}
-
 /**
  * Build a per-build warning emitter that deduplicates repeated compiler lines.
  *
@@ -133,9 +99,11 @@ function forwardStreamLines(stream, onLine) {
  * @param {object} compilerRunOptions
  * @param {(warning: string) => void} [compilerRunOptions.onWarning]
  * @param {boolean} [compilerRunOptions.suppressWarnings]
+ * @param {string} [compilerRunOptions.compilerBin]
  * @returns {object}
  */
 function runCompiler(filePath, stdinSource, compilerOpts = {}, compilerRunOptions = {}) {
+    const compilerBin = compilerRunOptions.compilerBin || resolveCompilerBin();
     const args = stdinSource !== undefined
         ? ['--stdin', filePath]
         : [filePath];
@@ -150,7 +118,7 @@ function runCompiler(filePath, stdinSource, compilerOpts = {}, compilerRunOption
         opts.input = stdinSource;
     }
 
-    const result = spawnSync(COMPILER_BIN, args, opts);
+    const result = spawnSync(compilerBin, args, opts);
 
     if (result.error) {
         throw new Error(`Compiler spawn failed for ${filePath}: ${result.error.message}`);
@@ -200,6 +168,8 @@ function stripStyleBlocks(source) {
  * @param {string} compPath
  * @param {string} componentSource
  * @param {object} compIr
+ * @param {object} compilerOpts
+ * @param {string} compilerBin
  * @returns {{
  *   map: Map<string, string>,
  *   bindings: Map<string, {
@@ -215,13 +185,14 @@ function stripStyleBlocks(source) {
  *   ambiguous: Set<string>
  * }}
  */
-function buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts) {
+function buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts, compilerBin) {
     const out = {
         map: new Map(),
         bindings: new Map(),
         signals: Array.isArray(compIr?.signals) ? compIr.signals : [],
         stateBindings: Array.isArray(compIr?.hoisted?.state) ? compIr.hoisted.state : [],
-        ambiguous: new Set()
+        ambiguous: new Set(),
+        sequence: []
     };
     const rewrittenExpressions = Array.isArray(compIr?.expressions) ? compIr.expressions : [];
     const rewrittenBindings = Array.isArray(compIr?.expression_bindings) ? compIr.expression_bindings : [];
@@ -236,7 +207,10 @@ function buildComponentExpressionRewrite(compPath, componentSource, compIr, comp
 
     let templateIr;
     try {
-        templateIr = runCompiler(compPath, templateOnly, compilerOpts, { suppressWarnings: true });
+        templateIr = runCompiler(compPath, templateOnly, compilerOpts, {
+            suppressWarnings: true,
+            compilerBin
+        });
     } catch {
         return out;
     }
@@ -264,6 +238,12 @@ function buildComponentExpressionRewrite(compPath, componentSource, compIr, comp
             }
             : null;
 
+        out.sequence.push({
+            raw,
+            rewritten,
+            binding: normalizedBinding
+        });
+
         if (!out.ambiguous.has(raw) && normalizedBinding) {
             const existingBinding = out.bindings.get(raw);
             if (existingBinding) {
@@ -327,7 +307,7 @@ function resolveRewrittenBindingMetadata(pageIr, componentRewrite, binding) {
     }
 
     const pageStateBindings = Array.isArray(pageIr?.hoisted?.state) ? pageIr.hoisted.state : [];
-    const pageSignals = Array.isArray(pageIr?.hoisted?.signals) ? pageIr.hoisted.signals : [];
+    const pageSignals = Array.isArray(pageIr?.signals) ? pageIr.signals : [];
     const pageStateIndexByKey = new Map();
     const pageSignalIndexByStateKey = new Map();
 
@@ -620,6 +600,107 @@ function applyExpressionRewrites(pageIr, expressionMap, bindingMap, ambiguous) {
     }
 }
 
+function applyScopedIdentifierRewrites(pageIr, scopeRewrite) {
+    if (!Array.isArray(pageIr?.expressions) || pageIr.expressions.length === 0) {
+        return;
+    }
+    const bindings = Array.isArray(pageIr.expression_bindings) ? pageIr.expression_bindings : [];
+    const rewriteContext = {
+        scopeRewrite
+    };
+
+    for (let index = 0; index < pageIr.expressions.length; index++) {
+        const current = pageIr.expressions[index];
+        if (typeof current === 'string') {
+            pageIr.expressions[index] = rewritePropsExpression(current, rewriteContext);
+        }
+
+        if (!bindings[index] || typeof bindings[index] !== 'object') {
+            continue;
+        }
+
+        if (typeof bindings[index].literal === 'string') {
+            bindings[index].literal = rewritePropsExpression(bindings[index].literal, rewriteContext);
+        }
+        if (typeof bindings[index].compiled_expr === 'string') {
+            bindings[index].compiled_expr = rewritePropsExpression(bindings[index].compiled_expr, rewriteContext);
+        }
+    }
+}
+
+function synthesizeSignalBackedCompiledExpressions(pageIr) {
+    if (!Array.isArray(pageIr?.expression_bindings) || pageIr.expression_bindings.length === 0) {
+        return;
+    }
+
+    const stateBindings = Array.isArray(pageIr?.hoisted?.state) ? pageIr.hoisted.state : [];
+    const signals = Array.isArray(pageIr?.signals) ? pageIr.signals : [];
+    if (stateBindings.length === 0 || signals.length === 0) {
+        return;
+    }
+
+    const signalIndexByStateKey = new Map();
+    for (let index = 0; index < signals.length; index++) {
+        const stateIndex = signals[index]?.state_index;
+        const stateKey = Number.isInteger(stateIndex) ? stateBindings[stateIndex]?.key : null;
+        if (typeof stateKey === 'string' && stateKey.length > 0) {
+            signalIndexByStateKey.set(stateKey, index);
+        }
+    }
+    if (signalIndexByStateKey.size === 0) {
+        return;
+    }
+
+    for (let index = 0; index < pageIr.expression_bindings.length; index++) {
+        const binding = pageIr.expression_bindings[index];
+        if (!binding || typeof binding !== 'object') {
+            continue;
+        }
+        if (typeof binding.compiled_expr === 'string' && binding.compiled_expr.includes('signalMap.get(')) {
+            continue;
+        }
+
+        const candidate = typeof binding.literal === 'string' && binding.literal.trim().length > 0
+            ? binding.literal
+            : typeof pageIr.expressions?.[index] === 'string'
+                ? pageIr.expressions[index]
+                : null;
+        if (typeof candidate !== 'string' || candidate.trim().length === 0) {
+            continue;
+        }
+
+        let rewritten = candidate;
+        const signalIndices = [];
+        for (const [stateKey, signalIndex] of signalIndexByStateKey.entries()) {
+            if (!rewritten.includes(stateKey)) {
+                continue;
+            }
+            const escaped = stateKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const pattern = new RegExp(`\\b${escaped}\\b`, 'g');
+            if (!pattern.test(rewritten)) {
+                continue;
+            }
+            rewritten = rewritten.replace(pattern, `signalMap.get(${signalIndex}).get()`);
+            signalIndices.push(signalIndex);
+        }
+
+        if (rewritten === candidate || signalIndices.length === 0) {
+            continue;
+        }
+
+        const uniqueSignalIndices = [...new Set(signalIndices)].sort((a, b) => a - b);
+        binding.compiled_expr = rewritten;
+        binding.signal_indices = uniqueSignalIndices;
+        if (uniqueSignalIndices.length === 1) {
+            binding.signal_index = uniqueSignalIndices[0];
+            const stateIndex = signals[uniqueSignalIndices[0]]?.state_index;
+            if (Number.isInteger(stateIndex)) {
+                binding.state_index = stateIndex;
+            }
+        }
+    }
+}
+
 function normalizeExpressionBindingDependencies(pageIr) {
     if (!Array.isArray(pageIr?.expression_bindings) || pageIr.expression_bindings.length === 0) {
         return;
@@ -1653,6 +1734,62 @@ function deriveScopedIdentifierAlias(value) {
     return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(candidate) ? candidate : ident;
 }
 
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function extractDeclaredIdentifiers(source) {
+    const text = String(source || '').trim();
+    if (!text) {
+        return [];
+    }
+
+    const ts = loadTypeScriptApi();
+    if (ts) {
+        const sourceFile = ts.createSourceFile('zenith-hoisted-declaration.ts', text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+        const identifiers = [];
+        const collectBindingNames = (name) => {
+            if (ts.isIdentifier(name)) {
+                identifiers.push(name.text);
+                return;
+            }
+            if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+                for (const element of name.elements) {
+                    if (ts.isBindingElement(element)) {
+                        collectBindingNames(element.name);
+                    }
+                }
+            }
+        };
+
+        for (const statement of sourceFile.statements) {
+            if (!ts.isVariableStatement(statement)) {
+                continue;
+            }
+            for (const declaration of statement.declarationList.declarations) {
+                collectBindingNames(declaration.name);
+            }
+        }
+
+        if (identifiers.length > 0) {
+            return identifiers;
+        }
+    }
+
+    const fallback = [];
+    const match = text.match(/^\s*(?:const|let|var)\s+([\s\S]+?);?\s*$/);
+    if (!match) {
+        return fallback;
+    }
+    const declarationList = match[1];
+    const identifierRe = /(?:^|,)\s*([A-Za-z_$][A-Za-z0-9_$]*)\s*(?::[^=,]+)?=/g;
+    let found;
+    while ((found = identifierRe.exec(declarationList)) !== null) {
+        fallback.push(found[1]);
+    }
+    return fallback;
+}
+
 /**
  * @param {Map<string, string>} map
  * @param {Set<string>} ambiguous
@@ -1698,9 +1835,131 @@ function buildScopedIdentifierRewrite(ir) {
         recordScopedIdentifierRewrite(out.map, out.ambiguous, deriveScopedIdentifierAlias(fnName), fnName);
     }
 
+    const declarations = Array.isArray(ir?.hoisted?.declarations) ? ir.hoisted.declarations : [];
+    for (const declaration of declarations) {
+        if (typeof declaration !== 'string') {
+            continue;
+        }
+        for (const identifier of extractDeclaredIdentifiers(declaration)) {
+            recordScopedIdentifierRewrite(out.map, out.ambiguous, deriveScopedIdentifierAlias(identifier), identifier);
+        }
+    }
+
     return out;
 }
 
+function rewriteIdentifiersWithinExpression(expr, scopeMap, scopeAmbiguous) {
+    const ts = loadTypeScriptApi();
+    if (!(scopeMap instanceof Map) || !ts) {
+        return expr;
+    }
+
+    const wrapped = `const __zenith_expr__ = (${expr});`;
+    let sourceFile;
+    try {
+        sourceFile = ts.createSourceFile('zenith-expression.ts', wrapped, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    } catch {
+        return expr;
+    }
+
+    const statement = sourceFile.statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return expr;
+    }
+    const initializer = statement.declarationList.declarations[0]?.initializer;
+    const root = initializer && ts.isParenthesizedExpression(initializer) ? initializer.expression : initializer;
+    if (!root) {
+        return expr;
+    }
+
+    const replacements = [];
+    const collectBoundNames = (name, target) => {
+        if (ts.isIdentifier(name)) {
+            target.add(name.text);
+            return;
+        }
+        if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+            for (const element of name.elements) {
+                if (ts.isBindingElement(element)) {
+                    collectBoundNames(element.name, target);
+                }
+            }
+        }
+    };
+    const shouldSkipIdentifier = (node, localBindings) => {
+        if (localBindings.has(node.text)) {
+            return true;
+        }
+        const parent = node.parent;
+        if (!parent) {
+            return false;
+        }
+        if (ts.isPropertyAccessExpression(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isPropertyAssignment(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isShorthandPropertyAssignment(parent)) {
+            return true;
+        }
+        if (ts.isBindingElement(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isParameter(parent) && parent.name === node) {
+            return true;
+        }
+        return false;
+    };
+    const visit = (node, localBindings) => {
+        let nextBindings = localBindings;
+        if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
+            nextBindings = new Set(localBindings);
+            if (node.name && ts.isIdentifier(node.name)) {
+                nextBindings.add(node.name.text);
+            }
+            for (const param of node.parameters) {
+                collectBoundNames(param.name, nextBindings);
+            }
+        }
+
+        if (ts.isIdentifier(node) && !shouldSkipIdentifier(node, nextBindings)) {
+            const rewritten = scopeMap.get(node.text);
+            if (
+                typeof rewritten === 'string' &&
+                rewritten.length > 0 &&
+                rewritten !== node.text &&
+                !(scopeAmbiguous instanceof Set && scopeAmbiguous.has(node.text))
+            ) {
+                replacements.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: rewritten
+                });
+            }
+        }
+
+        ts.forEachChild(node, (child) => visit(child, nextBindings));
+    };
+
+    visit(root, new Set());
+    if (replacements.length === 0) {
+        return expr;
+    }
+
+    let rewritten = wrapped;
+    for (const replacement of replacements.sort((a, b) => b.start - a.start)) {
+        rewritten = `${rewritten.slice(0, replacement.start)}${replacement.text}${rewritten.slice(replacement.end)}`;
+    }
+
+    const prefix = 'const __zenith_expr__ = (';
+    const suffix = ');';
+    if (!rewritten.startsWith(prefix) || !rewritten.endsWith(suffix)) {
+        return expr;
+    }
+    return rewritten.slice(prefix.length, rewritten.length - suffix.length);
+}
+
 /**
  * @param {string} expr
  * @param {{
@@ -1730,18 +1989,21 @@ function rewritePropsExpression(expr, rewriteContext = null) {
     const scopeMap = rewriteContext?.scopeRewrite?.map;
     const scopeAmbiguous = rewriteContext?.scopeRewrite?.ambiguous;
     const rootMatch = trimmed.match(/^([A-Za-z_$][A-Za-z0-9_$]*)([\s\S]*)$/);
-    if (!rootMatch || !(scopeMap instanceof Map)) {
+    if (!(scopeMap instanceof Map)) {
         return trimmed;
     }
+    if (!rootMatch) {
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
+    }
 
     const root = rootMatch[1];
     if (scopeAmbiguous instanceof Set && scopeAmbiguous.has(root)) {
-        return trimmed;
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
     }
 
     const rewrittenRoot = scopeMap.get(root);
     if (typeof rewrittenRoot !== 'string' || rewrittenRoot.length === 0 || rewrittenRoot === root) {
-        return trimmed;
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
     }
 
     return `${rewrittenRoot}${rootMatch[2]}`;
@@ -1874,13 +2136,21 @@ function deferComponentRuntimeBlock(source) {
  * @param {string} projectRoot
  * @param {object | null} [logger]
  * @param {boolean} [showInfo]
+ * @param {string} [bundlerBin]
  * @returns {Promise<void>}
  */
-function runBundler(envelope, outDir, projectRoot, logger = null, showInfo = true) {
+function runBundler(
+    envelope,
+    outDir,
+    projectRoot,
+    logger = null,
+    showInfo = true,
+    bundlerBin = resolveBundlerBin(projectRoot)
+) {
     return new Promise((resolvePromise, rejectPromise) => {
         const useStructuredLogger = Boolean(logger && typeof logger.childLine === 'function');
         const child = spawn(
-            getBundlerBin(),
+            bundlerBin,
             ['--out-dir', outDir],
             {
                 cwd: projectRoot,
@@ -1968,6 +2238,8 @@ async function collectAssets(rootDir) {
 export async function build(options) {
     const { pagesDir, outDir, config = {}, logger = null, showBundlerInfo = true } = options;
     const projectRoot = deriveProjectRootFromPagesDir(pagesDir);
+    const compilerBin = resolveCompilerBin(projectRoot);
+    const bundlerBin = resolveBundlerBin(projectRoot);
     const softNavigationEnabled = config.softNavigation === true || config.router === true;
     const compilerOpts = {
         typescriptDefault: config.typescriptDefault === true,
@@ -1978,6 +2250,15 @@ export async function build(options) {
     await rm(outDir, { recursive: true, force: true });
     await mkdir(outDir, { recursive: true });
 
+    if (logger) {
+        await maybeWarnAboutZenithVersionMismatch({
+            projectRoot,
+            logger,
+            command: 'build',
+            bundlerBinPath: bundlerBin
+        });
+    }
+
     // Derive src/ directory from pages/ directory
     const srcDir = resolve(pagesDir, '..');
 
@@ -2015,7 +2296,7 @@ export async function build(options) {
     for (const entry of manifest) {
         const sourceFile = join(pagesDir, entry.file);
         const rawSource = readFileSync(sourceFile, 'utf8');
-        const componentUsageAttrs = collectRecursiveComponentUsageAttrs(rawSource, registry, sourceFile);
+        const componentOccurrences = collectExpandedComponentOccurrences(rawSource, registry, sourceFile);
 
         const baseName = sourceFile.slice(0, -extname(sourceFile).length);
         let adjacentGuard = null;
@@ -2026,7 +2307,7 @@ export async function build(options) {
         }
 
         // 2a. Expand PascalCase component tags
-        const { expandedSource, usedComponents } = expandComponents(
+        const { expandedSource } = expandComponents(
             rawSource, registry, sourceFile
         );
         const extractedServer = extractServerScript(expandedSource, sourceFile, compilerOpts);
@@ -2037,7 +2318,10 @@ export async function build(options) {
             sourceFile,
             compileSource,
             compilerOpts,
-            { onWarning: emitCompilerWarning }
+            {
+                compilerBin,
+                onWarning: emitCompilerWarning
+            }
         );
 
         const hasGuard = (extractedServer.serverScript && extractedServer.serverScript.has_guard) || adjacentGuard !== null;
@@ -2077,19 +2361,42 @@ export async function build(options) {
         pageIr.hoisted.state = pageIr.hoisted.state || [];
         pageIr.hoisted.code = pageIr.hoisted.code || [];
         const seenStaticImports = new Set();
+        const occurrenceCountByPath = new Map();
+        for (const occurrence of componentOccurrences) {
+            const key = occurrence.componentPath || occurrence.name;
+            occurrenceCountByPath.set(key, (occurrenceCountByPath.get(key) || 0) + 1);
+        }
+
         const pageExpressionRewriteMap = new Map();
         const pageExpressionBindingMap = new Map();
         const pageAmbiguousExpressionMap = new Set();
         const knownRefKeys = new Set();
+        const componentOccurrencePlans = [];
         const pageScopeRewrite = buildScopedIdentifierRewrite(pageIr);
-        const pageSelfExpressionRewrite = buildComponentExpressionRewrite(sourceFile, compileSource, pageIr, compilerOpts);
+        const pageSelfExpressionRewrite = buildComponentExpressionRewrite(
+            sourceFile,
+            compileSource,
+            pageIr,
+            compilerOpts,
+            compilerBin
+        );
+        mergeExpressionRewriteMaps(
+            pageExpressionRewriteMap,
+            pageExpressionBindingMap,
+            pageAmbiguousExpressionMap,
+            pageSelfExpressionRewrite,
+            pageIr
+        );
         const componentScopeRewriteCache = new Map();
+        let componentInstanceCounter = 0;
 
         // 2c. Compile each used component separately for its script IR
-        for (const compName of usedComponents) {
-            const compPath = registry.get(compName);
+        for (const occurrence of componentOccurrences) {
+            const compName = occurrence.name;
+            const compPath = occurrence.componentPath || registry.get(compName);
             if (!compPath) continue;
             const componentSource = readFileSync(compPath, 'utf8');
+            const occurrenceCount = occurrenceCountByPath.get(compPath) || 0;
 
             let compIr;
             if (componentIrCache.has(compPath)) {
@@ -2100,7 +2407,10 @@ export async function build(options) {
                     compPath,
                     componentCompileSource,
                     compilerOpts,
-                    { onWarning: emitCompilerWarning }
+                    {
+                        compilerBin,
+                        onWarning: emitCompilerWarning
+                    }
                 );
                 componentIrCache.set(compPath, compIr);
             }
@@ -2113,19 +2423,20 @@ export async function build(options) {
 
             let expressionRewrite = componentExpressionRewriteCache.get(compPath);
             if (!expressionRewrite) {
-                expressionRewrite = buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts);
+                expressionRewrite = buildComponentExpressionRewrite(
+                    compPath,
+                    componentSource,
+                    compIr,
+                    compilerOpts,
+                    compilerBin
+                );
                 componentExpressionRewriteCache.set(compPath, expressionRewrite);
             }
 
-            let usageEntry = (componentUsageAttrs.get(compName) || [])[0] || { attrs: '', ownerPath: sourceFile };
-            if (!usageEntry || typeof usageEntry !== 'object') {
-                usageEntry = { attrs: '', ownerPath: sourceFile };
-            }
-
             let attrExpressionRewrite = pageSelfExpressionRewrite;
             let attrScopeRewrite = pageScopeRewrite;
-            const ownerPath = typeof usageEntry.ownerPath === 'string' && usageEntry.ownerPath.length > 0
-                ? usageEntry.ownerPath
+            const ownerPath = typeof occurrence.ownerPath === 'string' && occurrence.ownerPath.length > 0
+                ? occurrence.ownerPath
                 : sourceFile;
 
             if (ownerPath !== sourceFile) {
@@ -2136,7 +2447,10 @@ export async function build(options) {
                         ownerPath,
                         stripStyleBlocks(ownerSource),
                         compilerOpts,
-                        { onWarning: emitCompilerWarning }
+                        {
+                            compilerBin,
+                            onWarning: emitCompilerWarning
+                        }
                     );
                     componentIrCache.set(ownerPath, ownerIr);
                 }
@@ -2144,7 +2458,13 @@ export async function build(options) {
                 attrExpressionRewrite = componentExpressionRewriteCache.get(ownerPath);
                 if (!attrExpressionRewrite) {
                     const ownerSource = readFileSync(ownerPath, 'utf8');
-                    attrExpressionRewrite = buildComponentExpressionRewrite(ownerPath, ownerSource, ownerIr, compilerOpts);
+                    attrExpressionRewrite = buildComponentExpressionRewrite(
+                        ownerPath,
+                        ownerSource,
+                        ownerIr,
+                        compilerOpts,
+                        compilerBin
+                    );
                     componentExpressionRewriteCache.set(ownerPath, attrExpressionRewrite);
                 }
 
@@ -2155,17 +2475,36 @@ export async function build(options) {
                 }
             }
 
+            const useIsolatedInstance = occurrenceCount > 1;
+            const { ir: instanceIr, refIdentifierPairs } = useIsolatedInstance
+                ? cloneComponentIrForInstance(
+                    compIr,
+                    componentInstanceCounter++,
+                    extractDeclaredIdentifiers,
+                    resolveStateKeyFromBindings
+                )
+                : { ir: compIr, refIdentifierPairs: [] };
+            const instanceRewrite = useIsolatedInstance
+                ? buildComponentExpressionRewrite(
+                    compPath,
+                    componentSource,
+                    instanceIr,
+                    compilerOpts,
+                    compilerBin
+                )
+                : expressionRewrite;
+
             // 2d. Merge component IR into page IR
             mergeComponentIr(
                 pageIr,
-                compIr,
+                instanceIr,
                 compPath,
                 sourceFile,
                 {
                     includeCode: true,
                     cssImportsOnly: isDocMode,
                     documentMode: isDocMode,
-                    componentAttrs: typeof usageEntry.attrs === 'string' ? usageEntry.attrs : '',
+                    componentAttrs: typeof occurrence.attrs === 'string' ? occurrence.attrs : '',
                     componentAttrsRewrite: {
                         expressionRewrite: attrExpressionRewrite,
                         scopeRewrite: attrScopeRewrite
@@ -2175,21 +2514,36 @@ export async function build(options) {
                 knownRefKeys
             );
 
-            mergeExpressionRewriteMaps(
-                pageExpressionRewriteMap,
-                pageExpressionBindingMap,
-                pageAmbiguousExpressionMap,
-                expressionRewrite,
-                pageIr
-            );
+            if (useIsolatedInstance) {
+                componentOccurrencePlans.push({
+                    rewrite: instanceRewrite,
+                    expressionSequence: instanceRewrite.sequence,
+                    refSequence: refIdentifierPairs
+                });
+            } else {
+                mergeExpressionRewriteMaps(
+                    pageExpressionRewriteMap,
+                    pageExpressionBindingMap,
+                    pageAmbiguousExpressionMap,
+                    expressionRewrite,
+                    pageIr
+                );
+            }
         }
 
+        applyOccurrenceRewritePlans(
+            pageIr,
+            componentOccurrencePlans,
+            (rewrite, binding) => resolveRewrittenBindingMetadata(pageIr, rewrite, binding)
+        );
         applyExpressionRewrites(
             pageIr,
             pageExpressionRewriteMap,
             pageExpressionBindingMap,
             pageAmbiguousExpressionMap
         );
+        applyScopedIdentifierRewrites(pageIr, buildScopedIdentifierRewrite(pageIr));
+        synthesizeSignalBackedCompiledExpressions(pageIr);
         normalizeExpressionBindingDependencies(pageIr);
 
         rewriteLegacyMarkupIdentifiers(pageIr);
@@ -2204,7 +2558,7 @@ export async function build(options) {
     }
 
     if (envelopes.length > 0) {
-    await runBundler(envelopes, outDir, projectRoot, logger, showBundlerInfo);
+        await runBundler(envelopes, outDir, projectRoot, logger, showBundlerInfo, bundlerBin);
     }
 
     const assets = await collectAssets(outDir);