@zenithbuild/core 0.4.6 → 0.4.7

package/compiler/discovery/componentDiscovery.ts

@@ -26,6 +26,8 @@ export interface ComponentMetadata {
     slots: SlotDefinition[]
     props: string[]       // Declared props
     styles: string[]      // Raw CSS from <style> blocks
+    script: string | null         // Raw script content for bundling
+    scriptAttributes: Record<string, string> | null  // Script attributes (setup, lang)
     hasScript: boolean
     hasStyles: boolean
 }
@@ -112,6 +114,8 @@ function parseComponentFile(filePath: string): ComponentMetadata | null {
         slots,
         props,
         styles,
+        script: ir.script?.raw || null,                    // Store raw script content
+        scriptAttributes: ir.script?.attributes || null,   // Store script attributes
         hasScript: ir.script !== null,
         hasStyles: ir.styles.length > 0
     }

package/compiler/discovery/layouts.ts

@@ -41,8 +41,17 @@ export function discoverLayouts(layoutsDir: string): Map<string, LayoutMetadata>
                 if (match[1]) styles.push(match[1].trim())
             }
 
-            // Extract HTML (everything except script/style)
-            let html = source.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+            // Extract HTML (everything except inline scripts/style)
+            // Preserve external script tags (<script src="...">) but remove inline <script setup> blocks
+            // Use a function-based replace to check for src attribute
+            let html = source.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, content) => {
+                // Keep script tags with src attribute (external scripts)
+                if (attrs.includes('src=')) {
+                    return match;
+                }
+                // Remove inline scripts (those without src)
+                return '';
+            })
             html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '').trim()
 
             layouts.set(name, {

package/compiler/index.ts

@@ -53,6 +53,7 @@ export function compileZenSource(
     filePath,
     template,
     script,
+    // componentScripts: [],
     styles
   }
 

package/compiler/ir/types.ts

@@ -6,11 +6,23 @@
  * without any runtime execution or transformation.
  */
 
+/**
+ * Component Script IR - represents a component's script block
+ * Used for collecting and bundling component scripts
+ */
+export type ComponentScriptIR = {
+  name: string                           // Component name (e.g., 'HeroSection')
+  script: string                         // Raw script content
+  props: string[]                        // Declared props
+  scriptAttributes: Record<string, string>  // Script attributes (setup, lang)
+}
+
 export type ZenIR = {
   filePath: string
   template: TemplateIR
   script: ScriptIR | null
   styles: StyleIR[]
+  componentScripts?: ComponentScriptIR[]  // Scripts from used components
 }
 
 export type TemplateIR = {

package/compiler/parse/parseTemplate.ts

@@ -22,10 +22,18 @@ function generateExpressionId(): string {
 
 /**
  * Strip script and style blocks from HTML before parsing
+ * Preserves external script tags (<script src="...">) but removes inline scripts
  */
 function stripBlocks(html: string): string {
-  // Remove script blocks
-  let stripped = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+  // Remove only inline script blocks (those WITHOUT src attribute), preserve external scripts
+  let stripped = html.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, content) => {
+    // Keep script tags with src attribute (external scripts)
+    if (attrs.includes('src=')) {
+      return match;
+    }
+    // Remove inline scripts (those without src)
+    return '';
+  })
   // Remove style blocks
   stripped = stripped.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
   return stripped

package/compiler/parse/scriptAnalysis.ts

@@ -45,6 +45,7 @@ export function extractProps(script: string): string[] {
 
 /**
  * Transform script by removing state and prop declarations
+ * Also strips .zen imports (resolved at compile time) and other compile-time-only imports
  */
 export function transformStateDeclarations(script: string): string {
     let transformed = script
@@ -62,6 +63,13 @@ export function transformStateDeclarations(script: string): string {
     // Remove zenith/runtime imports
     transformed = transformed.replace(/import\s+{[^}]+}\s+from\s+['"]zenith\/runtime['"]\s*;?[ \t]*/g, '')
 
+    // Remove .zen file imports (resolved at compile time)
+    // Matches: import Name from '.../file.zen'; or import Name from '.../file.zen'
+    transformed = transformed.replace(/import\s+\w+\s+from\s+['"][^'"]*\.zen['"];?\s*/g, '')
+
+    // Remove relative imports with destructuring (components are inlined)
+    transformed = transformed.replace(/import\s+{[^}]*}\s+from\s+['"][^'"]+\.zen['"];?\s*/g, '')
+
     // Transform zenith:content imports to global lookups
     transformed = transformed.replace(
         /import\s*{\s*([^}]+)\s*}\s*from\s*['"]zenith:content['"]\s*;?/g,

package/compiler/runtime/transformIR.ts

@@ -11,6 +11,7 @@ import { generateHydrationRuntime, generateExpressionRegistry } from './generate
 import { analyzeAllExpressions } from './dataExposure'
 import { generateNavigationRuntime } from './navigation'
 import { extractStateDeclarations, extractProps, transformStateDeclarations } from '../parse/scriptAnalysis'
+import { transformAllComponentScripts } from '../transform/componentScriptTransformer'
 
 export interface RuntimeCode {
   expressions: string  // Expression wrapper functions
@@ -70,6 +71,9 @@ export function transformIR(ir: ZenIR): RuntimeCode {
   // Transform script (remove state and prop declarations, they're handled by runtime)
   const scriptCode = transformStateDeclarations(scriptContent)
 
+  // Transform component scripts for instance-scoped execution
+  const componentScriptCode = transformAllComponentScripts(ir.componentScripts || [])
+
   // Generate complete runtime bundle
   const bundle = generateRuntimeBundle({
     expressions,
@@ -78,7 +82,8 @@ export function transformIR(ir: ZenIR): RuntimeCode {
     navigationRuntime,
     stylesCode,
     scriptCode,
-    stateInitCode
+    stateInitCode,
+    componentScriptCode  // Component factories
   })
 
   return {
@@ -103,6 +108,7 @@ function generateRuntimeBundle(parts: {
   stylesCode: string
   scriptCode: string
   stateInitCode: string
+  componentScriptCode: string  // Component factories
 }): string {
   // Extract function declarations from script code to register on window
   const functionRegistrations = extractFunctionRegistrations(parts.scriptCode)
@@ -129,6 +135,9 @@ ${functionRegistrations}
 ${parts.stateInitCode ? `// State initialization
 ${parts.stateInitCode}` : ''}
 
+${parts.componentScriptCode ? `// Component factories (instance-scoped)
+${parts.componentScriptCode}` : ''}
+
 // Export hydration functions
 if (typeof window !== 'undefined') {
   window.zenithHydrate = window.__zenith_hydrate || function(state, container) {
@@ -187,10 +196,21 @@ if (typeof window !== 'undefined') {
     // Get the router outlet or body
     const container = document.querySelector('#app') || document.body;
     
-    // Hydrate with state
+    // Hydrate with state (expressions, bindings)
     if (window.__zenith_hydrate) {
       window.__zenith_hydrate(state, {}, {}, {}, container);
     }
+    
+    // Hydrate components by discovering data-zen-component markers
+    // This is the ONLY place component instantiation happens - driven by DOM markers
+    if (window.__zenith && window.__zenith.hydrateComponents) {
+      window.__zenith.hydrateComponents(container);
+    }
+    
+    // Trigger page-level mount lifecycle
+    if (window.__zenith && window.__zenith.triggerMount) {
+      window.__zenith.triggerMount();
+    }
   }
   
   // Run on DOM ready

package/compiler/transform/componentResolver.ts

@@ -5,19 +5,19 @@
  * Uses compound component pattern for named slots (Card.Header, Card.Footer).
  */
 
-import type { TemplateNode, ComponentNode, ElementNode, ZenIR, LoopContext } from '../ir/types'
+import type { TemplateNode, ComponentNode, ElementNode, ZenIR, LoopContext, ComponentScriptIR } from '../ir/types'
 import type { ComponentMetadata } from '../discovery/componentDiscovery'
 import { extractSlotsFromChildren, resolveSlots } from './slotResolver'
 import { throwOrphanCompoundError, throwUnresolvedComponentError } from '../validate/invariants'
 
-// Track which components have been used (for style collection)
+// Track which components have been used (for style and script collection)
 const usedComponents = new Set<string>()
 
 /**
  * Resolve all component nodes in a template IR
  * 
  * Recursively replaces ComponentNode instances with their resolved templates
- * Also collects styles from used components and adds them to the IR
+ * Also collects styles AND scripts from used components and adds them to the IR
  */
 export function resolveComponentsInIR(
     ir: ZenIR,
@@ -35,6 +35,17 @@ export function resolveComponentsInIR(
         .filter((meta): meta is ComponentMetadata => meta !== undefined && meta.styles.length > 0)
         .flatMap(meta => meta.styles.map(raw => ({ raw })))
 
+    // Collect scripts from all used components (for bundling)
+    const componentScripts: ComponentScriptIR[] = Array.from(usedComponents)
+        .map(name => components.get(name))
+        .filter((meta): meta is ComponentMetadata => meta !== undefined && meta.script !== null)
+        .map(meta => ({
+            name: meta.name,
+            script: meta.script!,
+            props: meta.props,
+            scriptAttributes: meta.scriptAttributes || {}
+        }))
+
     return {
         ...ir,
         template: {
@@ -42,7 +53,9 @@ export function resolveComponentsInIR(
             nodes: resolvedNodes
         },
         // Merge component styles with existing page styles
-        styles: [...ir.styles, ...componentStyles]
+        styles: [...ir.styles, ...componentStyles],
+        // Add component scripts for bundling
+        componentScripts: [...(ir.componentScripts || []), ...componentScripts]
     }
 }
 
@@ -192,11 +205,12 @@ function resolveComponent(
     const resolvedTemplate = resolveSlots(templateNodes, resolvedSlots)
 
     // Forward attributes from component usage to the root element
-    // This ensures onclick, class, and other attributes are preserved
+    // Also adds data-zen-component marker for hydration-driven instantiation
     const forwardedTemplate = forwardAttributesToRoot(
         resolvedTemplate,
         componentNode.attributes,
-        componentNode.loopContext
+        componentNode.loopContext,
+        componentMeta.hasScript ? componentName : undefined  // Only mark if component has script
     )
 
     // Recursively resolve any nested components in the resolved template
@@ -210,16 +224,16 @@ function resolveComponent(
  * 
  * When using <Button onclick="increment">Text</Button>,
  * the onclick should be applied to the <button> element in Button.zen template.
+ * 
+ * Also adds data-zen-component marker if componentName is provided,
+ * enabling hydration-driven instantiation.
  */
 function forwardAttributesToRoot(
     nodes: TemplateNode[],
     attributes: ComponentNode['attributes'],
-    loopContext?: LoopContext
+    loopContext?: LoopContext,
+    componentName?: string  // If provided, adds hydration marker
 ): TemplateNode[] {
-    if (attributes.length === 0) {
-        return nodes
-    }
-
     // Find the first non-text element (the root element)
     const rootIndex = nodes.findIndex(n => n.type === 'element')
     if (rootIndex === -1) {
@@ -228,10 +242,19 @@ function forwardAttributesToRoot(
 
     const root = nodes[rootIndex] as ElementNode
 
-    // Merge attributes: component usage attributes override template defaults
-    // Also preserve the parent's loopContext on forwarded attributes
+    // Start with existing attributes
     const mergedAttributes = [...root.attributes]
 
+    // Add component hydration marker if this component has a script
+    if (componentName) {
+        mergedAttributes.push({
+            name: 'data-zen-component',
+            value: componentName,
+            location: { line: 0, column: 0 }
+        })
+    }
+
+    // Forward attributes from component usage
     for (const attr of attributes) {
         const existingIndex = mergedAttributes.findIndex(a => a.name === attr.name)
 

package/compiler/transform/componentScriptTransformer.ts

@@ -0,0 +1,147 @@
+/**
+ * Component Script Transformer
+ * 
+ * Transforms component scripts for instance-scoped execution.
+ * Uses namespace binding pattern for cleaner output:
+ *   const { signal, effect, onMount, ... } = __inst;
+ * 
+ * Then rewrites zen* prefixed calls to unprefixed:
+ *   zenSignal(v)  → signal(v)
+ *   zenEffect(fn) → effect(fn)
+ *   zenOnMount(fn) → onMount(fn)
+ */
+
+import type { ComponentScriptIR } from '../ir/types'
+
+/**
+ * Namespace bindings - destructured from the instance
+ * This is added at the top of every component script
+ */
+const NAMESPACE_BINDINGS = `const { 
+    signal, state, memo, effect, ref, 
+    batch, untrack, onMount, onUnmount 
+} = __inst;`
+
+/**
+ * Mapping of zen* prefixed names to unprefixed names
+ * These get rewritten to use the destructured namespace
+ */
+const ZEN_PREFIX_MAPPINGS: Record<string, string> = {
+    'zenSignal': 'signal',
+    'zenState': 'state',
+    'zenMemo': 'memo',
+    'zenEffect': 'effect',
+    'zenRef': 'ref',
+    'zenBatch': 'batch',
+    'zenUntrack': 'untrack',
+    'zenOnMount': 'onMount',
+    'zenOnUnmount': 'onUnmount',
+}
+
+/**
+ * Transform a component's script content for instance-scoped execution
+ * 
+ * @param componentName - Name of the component
+ * @param scriptContent - Raw script content from the component
+ * @param props - Declared prop names
+ * @returns Transformed script ready for bundling
+ */
+export function transformComponentScript(
+    componentName: string,
+    scriptContent: string,
+    props: string[]
+): string {
+    let transformed = scriptContent
+
+    // Strip import statements for .zen files (resolved at compile time)
+    transformed = transformed.replace(
+        /import\s+\w+\s+from\s+['"][^'"]*\.zen['"];?\s*/g,
+        ''
+    )
+
+    // Strip any other relative imports (components are inlined)
+    transformed = transformed.replace(
+        /import\s+{[^}]*}\s+from\s+['"][^'"]+['"];?\s*/g,
+        ''
+    )
+
+    // Rewrite zen* prefixed calls to unprefixed (uses namespace bindings)
+    for (const [zenName, unprefixedName] of Object.entries(ZEN_PREFIX_MAPPINGS)) {
+        // Match the zen* name as a standalone call
+        const regex = new RegExp(`(?<!\\w)${zenName}\\s*\\(`, 'g')
+        transformed = transformed.replace(regex, `${unprefixedName}(`)
+    }
+
+    return transformed.trim()
+}
+
+/**
+ * Generate a component factory function
+ * 
+ * IMPORTANT: Factories are PASSIVE - they are registered but NOT invoked here.
+ * Instantiation is driven by the hydrator when it discovers component markers.
+ * 
+ * @param componentName - Name of the component
+ * @param transformedScript - Script content after hook rewriting
+ * @param propNames - Declared prop names for destructuring
+ * @returns Component factory registration code (NO eager instantiation)
+ */
+export function generateComponentFactory(
+    componentName: string,
+    transformedScript: string,
+    propNames: string[]
+): string {
+    const propsDestructure = propNames.length > 0
+        ? `const { ${propNames.join(', ')} } = props || {};`
+        : ''
+
+    // Register factory only - NO instantiation
+    // Hydrator will call instantiate() when it finds data-zen-component markers
+    return `
+// Component Factory: ${componentName}
+// Instantiation is driven by hydrator, not by bundle load
+__zenith.defineComponent('${componentName}', function(props, rootElement) {
+    const __inst = __zenith.createInstance('${componentName}', rootElement);
+    
+    // Namespace bindings (instance-scoped primitives)
+    ${NAMESPACE_BINDINGS}
+    
+    ${propsDestructure}
+    
+    // Component script (instance-scoped)
+    ${transformedScript}
+    
+    // Execute mount lifecycle (rootElement is already in DOM)
+    __inst.mount();
+    
+    return __inst;
+});
+`
+}
+
+/**
+ * Transform all component scripts from collected ComponentScriptIR
+ * 
+ * @param componentScripts - Array of component script IRs
+ * @returns Combined JavaScript code for all component factories
+ */
+export function transformAllComponentScripts(
+    componentScripts: ComponentScriptIR[]
+): string {
+    if (!componentScripts || componentScripts.length === 0) {
+        return ''
+    }
+
+    const factories = componentScripts
+        .filter(comp => comp.script && comp.script.trim().length > 0)
+        .map(comp => {
+            const transformed = transformComponentScript(
+                comp.name,
+                comp.script,
+                comp.props
+            )
+            return generateComponentFactory(comp.name, transformed, comp.props)
+        })
+
+    return factories.join('\n')
+}

package/dist/cli.js

@@ -7,6 +7,12 @@
 #!/usr/bin/env bun
 #!/usr/bin/env bun
 #!/usr/bin/env bun
+#!/usr/bin/env bun
+#!/usr/bin/env bun
+#!/usr/bin/env bun
+#!/usr/bin/env bun
+#!/usr/bin/env bun
+#!/usr/bin/env bun
 // @bun
 var __create = Object.create;
 var __getProtoOf = Object.getPrototypeOf;