@zenithbuild/cli 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenithbuild/cli",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "CLI for Zenith framework - dev server, build tools, and plugin management",
   "type": "module",
   "bin": {
@@ -50,15 +50,16 @@
   },
   "private": false,
   "peerDependencies": {
-    "@zenithbuild/core": "^1.3.0"
+    "@zenithbuild/core": "^1.3.0",
+    "@zenithbuild/compiler": "^1.3.0"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@zenithbuild/compiler": "workspace:*"
   },
   "dependencies": {
-    "@zenithbuild/compiler": "1.3.6",
-    "@zenithbuild/bundler": "1.3.4",
-    "@zenithbuild/router": "1.3.0",
+    "@zenithbuild/bundler": "workspace:*",
+    "@zenithbuild/router": "workspace:*",
     "glob": "^13.0.0",
     "picocolors": "^1.0.0"
   }

package/src/commands/build.ts

@@ -6,7 +6,7 @@
 
 import { requireProject } from '../utils/project'
 import * as logger from '../utils/logger'
-import { buildSSG } from '../../../zenith-compiler/dist/index.js'
+import { buildSSG } from '../ssg-build.ts'
 
 export interface BuildOptions {
     outDir?: string

package/src/commands/dev.ts

@@ -24,18 +24,25 @@ import { serve, type ServerWebSocket } from 'bun'
 import { requireProject } from '../utils/project'
 import * as logger from '../utils/logger'
 import * as brand from '../utils/branding'
-import { generateRuntime, type ZenManifest } from '@zenithbuild/bundler'
+import {
+    generateRuntime,
+    generateBundleJS,
+    compileCssAsync,
+    resolveGlobalsCss,
+    bundlePageScript
+} from '@zenithbuild/bundler'
+import type { ZenManifest } from '@zenithbuild/bundler'
+import { generateRouteDefinition } from '@zenithbuild/router/manifest'
 import { compile } from '@zenithbuild/compiler'
-import { discoverLayouts } from '@zenithbuild/compiler/layouts'
+import { discoverLayouts } from '../discovery/layouts.ts'
+import { discoverComponents } from '../discovery/componentDiscovery.ts'
 import { processLayout } from '@zenithbuild/compiler/transform'
-import { generateBundleJS } from '@zenithbuild/compiler/runtime'
 import { loadZenithConfig } from '@zenithbuild/compiler/config'
 import {
     PluginRegistry,
     createPluginContext,
     getPluginDataByNamespace
 } from '@zenithbuild/compiler/registry'
-import { compileCssAsync, resolveGlobalsCss } from '@zenithbuild/compiler/css'
 import {
     createBridgeAPI,
     runPluginHooks,
@@ -63,8 +70,6 @@ const pageCache = new Map<string, CompiledPage>()
  * Bundle page script using Rolldown to resolve npm imports at compile time.
  * Only called when compiler emits a BundlePlan - bundler performs no inference.
  */
-import { bundlePageScript } from '@zenithbuild/compiler/bundler'
-import { generateRouteDefinition } from '@zenithbuild/compiler/bundler'
 import type { BundlePlan } from '@zenithbuild/compiler'
 
 export async function dev(options: DevOptions = {}): Promise<void> {
@@ -157,19 +162,33 @@ export async function dev(options: DevOptions = {}): Promise<void> {
             const layoutsDir = path.join(pagesDir, '../layouts')
             const componentsDir = path.join(pagesDir, '../components')
             const layouts = discoverLayouts(layoutsDir)
+
+            // Manual component discovery since compiler is pure
+            const components = new Map<string, any>([...layouts])
+            if (fs.existsSync(componentsDir)) {
+                const discovered = discoverComponents(componentsDir)
+                for (const [k, v] of discovered) {
+                    components.set(k, v)
+                }
+            }
+
             const source = fs.readFileSync(pagePath, 'utf-8')
 
             const result = await compile(source, pagePath, {
-                componentsDir: fs.existsSync(componentsDir) ? componentsDir : undefined,
-                components: layouts
+                components: components
             })
             if (!result.finalized || !result.finalized.manifest) throw new Error('Compilation failed')
 
+
             const routeDef = generateRouteDefinition(pagePath, pagesDir)
 
             // Use the new bundler to generate the runtime + author script
             // This replaces all the manual regex patching and string concatenation
-            const manifest: ZenManifest = result.finalized.manifest
+            const manifest: ZenManifest = {
+                routes: [routeDef],
+                layouts: {}, // Dev server handles layouts dynamically
+                components: {}
+            }
             const { code } = generateRuntime(manifest, true)
 
             return {

package/src/discovery/componentDiscovery.ts

@@ -0,0 +1,98 @@
+/**
+ * Component Discovery
+ * 
+ * Discovers and catalogs components in a Zenith project using standard 
+ * file system walking and the unified native "syscall" for metadata.
+ */
+
+import * as fs from 'fs'
+import * as path from 'path'
+import { parseZenFile, type TemplateNode, type ExpressionIR } from '@zenithbuild/compiler'
+
+export interface SlotDefinition {
+    name: string | null  // null = default slot, string = named slot
+    location: {
+        line: number
+        column: number
+    }
+}
+
+export interface ComponentMetadata {
+    name: string          // Component name (e.g., "Card", "Button")
+    path: string          // Absolute path to .zen file
+    template: string      // Raw template HTML
+    nodes: TemplateNode[] // Parsed template nodes
+    expressions: ExpressionIR[] // Component-level expressions
+    slots: SlotDefinition[]
+    props: string[]       // Declared props
+    states: Record<string, string> // Declared state (name -> initializer)
+    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
+}
+
+/**
+ * Discover all components in a directory recursively
+ */
+export function discoverComponents(baseDir: string): Map<string, ComponentMetadata> {
+    const components = new Map<string, ComponentMetadata>()
+
+    if (!fs.existsSync(baseDir)) return components;
+
+    const walk = (dir: string) => {
+        const files = fs.readdirSync(dir);
+        for (const file of files) {
+            const fullPath = path.join(dir, file);
+            if (fs.statSync(fullPath).isDirectory()) {
+                walk(fullPath);
+            } else if (file.endsWith('.zen')) {
+                const name = path.basename(file, '.zen');
+                try {
+                    // Call the "One True Bridge" in metadata mode
+                    const ir = parseZenFile(fullPath, undefined, { mode: 'metadata' });
+
+                    // Map IR to ComponentMetadata format
+                    components.set(name, {
+                        name,
+                        path: fullPath,
+                        template: ir.template.raw,
+                        nodes: ir.template.nodes,
+                        expressions: ir.template.expressions,
+                        slots: [], // Native bridge needs to return slot info in IR if used
+                        props: ir.props || [],
+                        states: ir.script?.states || {},
+                        styles: ir.styles?.map((s: any) => s.raw) || [],
+                        script: ir.script?.raw || null,
+                        scriptAttributes: ir.script?.attributes || null,
+                        hasScript: !!ir.script,
+                        hasStyles: ir.styles?.length > 0
+                    });
+                } catch (e) {
+                    console.error(`[Zenith Discovery] Failed to parse component ${file}:`, e);
+                }
+            }
+        }
+    };
+
+    walk(baseDir);
+    return components;
+}
+
+/**
+ * Universal Zenith Component Tag Rule: PascalCase
+ */
+export function isComponentTag(tagName: string): boolean {
+    return tagName.length > 0 && tagName[0] === tagName[0]?.toUpperCase()
+}
+
+/**
+ * Get component metadata by name
+ */
+export function getComponent(
+    components: Map<string, ComponentMetadata>,
+    name: string
+): ComponentMetadata | undefined {
+    return components.get(name)
+}

package/src/discovery/layouts.ts

@@ -0,0 +1,50 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import { parseZenFile } from '@zenithbuild/compiler'
+
+export interface LayoutMetadata {
+    name: string
+    filePath: string
+    props: string[]
+    states: Map<string, any>
+    html: string
+    scripts: string[]
+    styles: string[]
+}
+
+/**
+ * Discover layouts in a directory using standard file system walking
+ * and the unified native bridge for metadata.
+ */
+export function discoverLayouts(layoutsDir: string): Map<string, LayoutMetadata> {
+    const layouts = new Map<string, LayoutMetadata>()
+
+    if (!fs.existsSync(layoutsDir)) return layouts
+
+    const files = fs.readdirSync(layoutsDir)
+    for (const file of files) {
+        if (file.endsWith('.zen')) {
+            const fullPath = path.join(layoutsDir, file)
+            const name = path.basename(file, '.zen')
+
+            try {
+                // Call the "One True Bridge" in metadata mode
+                const ir = parseZenFile(fullPath, undefined, { mode: 'metadata' })
+
+                layouts.set(name, {
+                    name,
+                    filePath: fullPath,
+                    props: ir.props || [],
+                    states: new Map(),
+                    html: ir.template.raw,
+                    scripts: ir.script ? [ir.script.content] : [],
+                    styles: ir.styles?.map((s: any) => s.raw) || []
+                })
+            } catch (e) {
+                console.error(`[Zenith Layout Discovery] Failed to parse layout ${file}:`, e)
+            }
+        }
+    }
+
+    return layouts
+}

package/src/serve.ts

@@ -0,0 +1,92 @@
+/**
+ * Zenith Development Server
+ * 
+ * SPA-compatible server that:
+ * - Serves static assets directly (js, css, ico, images)
+ * - Serves index.html for all other routes (SPA fallback)
+ * 
+ * This enables client-side routing to work on:
+ * - Direct URL entry
+ * - Hard refresh
+ * - Back/forward navigation
+ */
+
+import { serve } from "bun"
+import path from "path"
+
+const distDir = path.resolve(process.cwd(), "dist")
+
+// File extensions that should be served as static assets
+const STATIC_EXTENSIONS = new Set([
+    ".js",
+    ".css",
+    ".ico",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".svg",
+    ".webp",
+    ".woff",
+    ".woff2",
+    ".ttf",
+    ".eot",
+    ".json",
+    ".map"
+])
+
+serve({
+    port: 3000,
+
+    async fetch(req) {
+        const url = new URL(req.url)
+        const pathname = url.pathname
+
+        // Get file extension
+        const ext = path.extname(pathname).toLowerCase()
+
+        // Check if this is a static asset request
+        if (STATIC_EXTENSIONS.has(ext)) {
+            const filePath = path.join(distDir, pathname)
+            const file = Bun.file(filePath)
+
+            // Check if file exists
+            if (await file.exists()) {
+                return new Response(file)
+            }
+
+            // Static file not found
+            return new Response("Not found", { status: 404 })
+        }
+
+        // For all other routes, serve index.html (SPA fallback)
+        const indexPath = path.join(distDir, "index.html")
+        const indexFile = Bun.file(indexPath)
+
+        if (await indexFile.exists()) {
+            return new Response(indexFile, {
+                headers: {
+                    "Content-Type": "text/html; charset=utf-8"
+                }
+            })
+        }
+
+        // No index.html found - likely need to run build first
+        return new Response(
+            `<html>
+        <head><title>Zenith - Build Required</title></head>
+        <body style="font-family: system-ui; padding: 2rem; text-align: center;">
+          <h1>Build Required</h1>
+          <p>Run <code>zenith build</code> first to compile the pages.</p>
+        </body>
+      </html>`,
+            {
+                status: 500,
+                headers: { "Content-Type": "text/html; charset=utf-8" }
+            }
+        )
+    }
+})
+
+console.log("🚀 Zenith dev server running at http://localhost:3000")
+console.log("   SPA mode: All routes serve index.html")