@zenithbuild/cli 0.6.4 → 0.6.5

package/dist/build.js

@@ -18,6 +18,8 @@ import { createRequire } from 'node:module';
 import { basename, dirname, extname, join, relative, resolve } from 'node:path';
 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';
 
@@ -189,7 +191,8 @@ function buildComponentExpressionRewrite(compPath, componentSource, compIr, comp
         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 : [];
@@ -235,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) {
@@ -2287,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;
@@ -2298,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);
@@ -2352,10 +2361,17 @@ 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,
@@ -2372,12 +2388,15 @@ export async function build(options) {
             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)) {
@@ -2414,15 +2433,10 @@ export async function build(options) {
                 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) {
@@ -2461,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
@@ -2481,15 +2514,28 @@ 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,

package/dist/component-instance-ir.js

@@ -0,0 +1,217 @@
+function deepClone(value) {
+    return value === undefined ? undefined : JSON.parse(JSON.stringify(value));
+}
+
+function escapeIdentifier(identifier) {
+    return identifier.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function replaceIdentifierRefs(input, renameMap) {
+    let output = String(input || '');
+    const entries = [...renameMap.entries()].sort((a, b) => b[0].length - a[0].length);
+    for (const [from, to] of entries) {
+        const pattern = new RegExp(`\\b${escapeIdentifier(from)}\\b`, 'g');
+        output = output.replace(pattern, to);
+    }
+    return output;
+}
+
+function collectRenameTargets(compIr, extractDeclaredIdentifiers) {
+    const targets = new Set();
+
+    const stateBindings = Array.isArray(compIr?.hoisted?.state) ? compIr.hoisted.state : [];
+    for (const entry of stateBindings) {
+        if (typeof entry?.key === 'string' && entry.key.length > 0) {
+            targets.add(entry.key);
+        }
+    }
+
+    const functions = Array.isArray(compIr?.hoisted?.functions) ? compIr.hoisted.functions : [];
+    for (const fnName of functions) {
+        if (typeof fnName === 'string' && fnName.length > 0) {
+            targets.add(fnName);
+        }
+    }
+
+    const signals = Array.isArray(compIr?.hoisted?.signals) ? compIr.hoisted.signals : [];
+    for (const signalName of signals) {
+        if (typeof signalName === 'string' && signalName.length > 0) {
+            targets.add(signalName);
+        }
+    }
+
+    const declarations = Array.isArray(compIr?.hoisted?.declarations) ? compIr.hoisted.declarations : [];
+    for (const declaration of declarations) {
+        if (typeof declaration !== 'string') {
+            continue;
+        }
+        for (const identifier of extractDeclaredIdentifiers(declaration)) {
+            targets.add(identifier);
+        }
+    }
+
+    return [...targets];
+}
+
+function buildRefIdentifierMap(baseIr, renameMap, resolveStateKeyFromBindings) {
+    const baseState = Array.isArray(baseIr?.hoisted?.state) ? baseIr.hoisted.state : [];
+    const baseRefs = Array.isArray(baseIr?.ref_bindings) ? baseIr.ref_bindings : [];
+
+    return baseRefs.map((binding) => {
+        const raw = typeof binding?.identifier === 'string' ? binding.identifier : null;
+        const resolvedBase = raw ? resolveStateKeyFromBindings(raw, baseState) : null;
+        const rewritten = resolvedBase ? (renameMap.get(resolvedBase) || null) : null;
+        return {
+            raw,
+            rewritten: rewritten || null
+        };
+    }).filter((entry) => typeof entry.raw === 'string' && typeof entry.rewritten === 'string');
+}
+
+export function cloneComponentIrForInstance(compIr, instanceId, extractDeclaredIdentifiers, resolveStateKeyFromBindings) {
+    const suffix = `__inst${instanceId}`;
+    const cloned = deepClone(compIr);
+    const renameTargets = collectRenameTargets(compIr, extractDeclaredIdentifiers);
+    const renameMap = new Map(renameTargets.map((name) => [name, `${name}${suffix}`]));
+
+    if (Array.isArray(cloned?.expressions)) {
+        cloned.expressions = cloned.expressions.map((expr) => replaceIdentifierRefs(expr, renameMap));
+    }
+
+    if (Array.isArray(cloned?.expression_bindings)) {
+        cloned.expression_bindings = cloned.expression_bindings.map((binding) => {
+            if (!binding || typeof binding !== 'object') {
+                return binding;
+            }
+            return {
+                ...binding,
+                literal: typeof binding.literal === 'string' ? replaceIdentifierRefs(binding.literal, renameMap) : binding.literal,
+                compiled_expr: typeof binding.compiled_expr === 'string'
+                    ? replaceIdentifierRefs(binding.compiled_expr, renameMap)
+                    : binding.compiled_expr,
+                component_instance: typeof binding.component_instance === 'string'
+                    ? replaceIdentifierRefs(binding.component_instance, renameMap)
+                    : binding.component_instance,
+                component_binding: typeof binding.component_binding === 'string'
+                    ? replaceIdentifierRefs(binding.component_binding, renameMap)
+                    : binding.component_binding
+            };
+        });
+    }
+
+    if (cloned?.hoisted) {
+        if (Array.isArray(cloned.hoisted.declarations)) {
+            cloned.hoisted.declarations = cloned.hoisted.declarations.map((line) => replaceIdentifierRefs(line, renameMap));
+        }
+        if (Array.isArray(cloned.hoisted.functions)) {
+            cloned.hoisted.functions = cloned.hoisted.functions.map((name) => renameMap.get(name) || name);
+        }
+        if (Array.isArray(cloned.hoisted.signals)) {
+            cloned.hoisted.signals = cloned.hoisted.signals.map((name) => renameMap.get(name) || name);
+        }
+        if (Array.isArray(cloned.hoisted.state)) {
+            cloned.hoisted.state = cloned.hoisted.state.map((entry) => {
+                if (!entry || typeof entry !== 'object') {
+                    return entry;
+                }
+                const key = typeof entry.key === 'string' ? (renameMap.get(entry.key) || entry.key) : entry.key;
+                const value = typeof entry.value === 'string' ? replaceIdentifierRefs(entry.value, renameMap) : entry.value;
+                return { ...entry, key, value };
+            });
+        }
+        if (Array.isArray(cloned.hoisted.code)) {
+            cloned.hoisted.code = cloned.hoisted.code.map((line) => replaceIdentifierRefs(line, renameMap));
+        }
+    }
+
+    if (Array.isArray(cloned?.ref_bindings)) {
+        const clonedState = Array.isArray(cloned?.hoisted?.state) ? cloned.hoisted.state : [];
+        cloned.ref_bindings = cloned.ref_bindings.map((binding) => {
+            if (!binding || typeof binding !== 'object' || typeof binding.identifier !== 'string') {
+                return binding;
+            }
+            const resolved = resolveStateKeyFromBindings(binding.identifier, clonedState);
+            return {
+                ...binding,
+                identifier: resolved || binding.identifier
+            };
+        });
+    }
+
+    const refIdentifierPairs = buildRefIdentifierMap(compIr, renameMap, resolveStateKeyFromBindings);
+    return {
+        ir: cloned,
+        renameMap,
+        refIdentifierPairs
+    };
+}
+
+export function applyOccurrenceRewritePlans(pageIr, occurrencePlans, resolveBindingMetadata) {
+    const expressions = Array.isArray(pageIr?.expressions) ? pageIr.expressions : [];
+    const bindings = Array.isArray(pageIr?.expression_bindings) ? pageIr.expression_bindings : [];
+    const refBindings = Array.isArray(pageIr?.ref_bindings) ? pageIr.ref_bindings : [];
+
+    let exprCursor = 0;
+    let refCursor = 0;
+
+    for (const plan of occurrencePlans) {
+        const sequence = Array.isArray(plan?.expressionSequence) ? plan.expressionSequence : [];
+        for (const item of sequence) {
+            if (typeof item?.raw !== 'string') {
+                continue;
+            }
+            let found = -1;
+            for (let index = exprCursor; index < expressions.length; index++) {
+                if (expressions[index] === item.raw) {
+                    found = index;
+                    break;
+                }
+            }
+            if (found === -1) {
+                continue;
+            }
+            const rewritten = typeof item.rewritten === 'string' && item.rewritten.length > 0
+                ? item.rewritten
+                : item.raw;
+            expressions[found] = rewritten;
+            const binding = bindings[found];
+            if (binding && typeof binding === 'object') {
+                if (binding.literal === item.raw) {
+                    binding.literal = rewritten;
+                }
+                if (binding.compiled_expr === item.raw) {
+                    binding.compiled_expr = rewritten;
+                }
+                const resolved = resolveBindingMetadata(plan.rewrite, item.binding);
+                if (resolved) {
+                    binding.compiled_expr = resolved.compiled_expr;
+                    binding.signal_index = resolved.signal_index;
+                    binding.signal_indices = resolved.signal_indices;
+                    binding.state_index = resolved.state_index;
+                    binding.component_instance = resolved.component_instance;
+                    binding.component_binding = resolved.component_binding;
+                }
+            }
+            exprCursor = found + 1;
+        }
+
+        const refSequence = Array.isArray(plan?.refSequence) ? plan.refSequence : [];
+        for (const refItem of refSequence) {
+            if (typeof refItem?.raw !== 'string' || typeof refItem?.rewritten !== 'string') {
+                continue;
+            }
+            let found = -1;
+            for (let index = refCursor; index < refBindings.length; index++) {
+                if (refBindings[index]?.identifier === refItem.raw) {
+                    found = index;
+                    break;
+                }
+            }
+            if (found === -1) {
+                continue;
+            }
+            refBindings[found].identifier = refItem.rewritten;
+            refCursor = found + 1;
+        }
+    }
+}

package/dist/component-occurrences.js

@@ -0,0 +1,152 @@
+import { readFileSync } from 'node:fs';
+import { extractTemplate, isDocumentMode } from './resolve-components.js';
+
+const OPEN_COMPONENT_TAG_RE = /<([A-Z][a-zA-Z0-9]*)(\s[^<>]*?)?\s*(\/?)>/g;
+
+export function collectExpandedComponentOccurrences(source, registry, sourceFile) {
+    /** @type {Array<{ name: string, attrs: string, ownerPath: string, componentPath: string }>} */
+    const occurrences = [];
+    walkSource(String(source || ''), registry, sourceFile, [], occurrences);
+    return occurrences;
+}
+
+function walkSource(source, registry, sourceFile, chain, occurrences) {
+    let cursor = 0;
+
+    while (cursor < source.length) {
+        const tag = findNextKnownTag(source, registry, cursor);
+        if (!tag) {
+            return;
+        }
+
+        let children = '';
+        let replaceEnd = tag.end;
+        if (!tag.selfClosing) {
+            const close = findMatchingClose(source, tag.name, tag.end);
+            if (!close) {
+                throw new Error(`Unclosed component tag <${tag.name}> in ${sourceFile} at offset ${tag.start}`);
+            }
+            children = source.slice(tag.end, close.contentEnd);
+            replaceEnd = close.tagEnd;
+        }
+
+        const compPath = registry.get(tag.name);
+        if (!compPath) {
+            throw new Error(`Unknown component "${tag.name}" referenced in ${sourceFile}`);
+        }
+        if (chain.includes(tag.name)) {
+            const cycle = [...chain, tag.name].join(' -> ');
+            throw new Error(`Circular component dependency detected: ${cycle}\nFile: ${sourceFile}`);
+        }
+
+        occurrences.push({
+            name: tag.name,
+            attrs: String(tag.attrs || '').trim(),
+            ownerPath: sourceFile,
+            componentPath: compPath
+        });
+
+        const compSource = readFileSync(compPath, 'utf8');
+        const nextTemplate = materializeTemplate(compSource, tag.name, children, compPath);
+        walkSource(nextTemplate, registry, compPath, [...chain, tag.name], occurrences);
+        cursor = replaceEnd;
+    }
+}
+
+function materializeTemplate(componentSource, name, children, componentPath) {
+    let template = extractTemplate(componentSource);
+    const slotCount = countSlots(template);
+
+    if (isDocumentMode(template)) {
+        if (slotCount !== 1) {
+            throw new Error(
+                `Document Mode component "${name}" must contain exactly one <slot />, found ${slotCount}.\nFile: ${componentPath}`
+            );
+        }
+        return replaceSlot(template, children);
+    }
+
+    if (children.trim().length > 0 && slotCount === 0) {
+        throw new Error(
+            `Component "${name}" has children but its template has no <slot />.\nEither add <slot /> to ${componentPath} or make the tag self-closing.`
+        );
+    }
+
+    if (slotCount > 0) {
+        template = replaceSlot(template, children || '');
+    }
+
+    return template;
+}
+
+function findNextKnownTag(source, registry, startIndex) {
+    OPEN_COMPONENT_TAG_RE.lastIndex = startIndex;
+    let match;
+    while ((match = OPEN_COMPONENT_TAG_RE.exec(source)) !== null) {
+        const name = match[1];
+        if (!registry.has(name)) {
+            continue;
+        }
+        if (isInsideExpressionScope(source, match.index)) {
+            continue;
+        }
+        return {
+            name,
+            attrs: String(match[2] || ''),
+            start: match.index,
+            end: OPEN_COMPONENT_TAG_RE.lastIndex,
+            selfClosing: match[3] === '/'
+        };
+    }
+    return null;
+}
+
+function isInsideExpressionScope(source, index) {
+    let depth = 0;
+    for (let i = 0; i < index; i++) {
+        if (source[i] === '{') {
+            depth += 1;
+        } else if (source[i] === '}') {
+            depth = Math.max(0, depth - 1);
+        }
+    }
+    return depth > 0;
+}
+
+function findMatchingClose(source, tagName, startAfterOpen) {
+    let depth = 1;
+    const escapedName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const tagRe = new RegExp(`<(/?)${escapedName}(?:\\s[^<>]*?)?\\s*(/?)>`, 'g');
+    tagRe.lastIndex = startAfterOpen;
+
+    let match;
+    while ((match = tagRe.exec(source)) !== null) {
+        const isClose = match[1] === '/';
+        const isSelfClose = match[2] === '/';
+        if (isSelfClose && !isClose) {
+            continue;
+        }
+        if (isClose) {
+            depth -= 1;
+            if (depth === 0) {
+                return {
+                    contentEnd: match.index,
+                    tagEnd: match.index + match[0].length
+                };
+            }
+        } else {
+            depth += 1;
+        }
+    }
+
+    return null;
+}
+
+function countSlots(template) {
+    const matches = template.match(/<slot\s*>\s*<\/slot>|<slot\s*\/>|<slot\s*>/gi);
+    return matches ? matches.length : 0;
+}
+
+function replaceSlot(template, content) {
+    return template.replace(/<slot\s*>\s*<\/slot>|<slot\s*\/>|<slot\s*>/i, content);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenithbuild/cli",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Deterministic project orchestrator for Zenith framework",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@zenithbuild/compiler": "0.6.4",
+    "@zenithbuild/compiler": "^0.6.5",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {