@zenithbuild/core 0.3.3 → 0.4.1

package/cli/commands/dev.ts

@@ -1,19 +1,18 @@
-/**
- * @zenith/cli - Dev Command
- * 
- * Starts the development server with in-memory compilation and hot reload
- */
-
 import path from 'path'
 import fs from 'fs'
-import { serve } from 'bun'
+import { serve, type ServerWebSocket } from 'bun'
 import { requireProject } from '../utils/project'
 import * as logger from '../utils/logger'
+import * as brand from '../utils/branding'
 import { compileZenSource } from '../../compiler/index'
 import { discoverLayouts } from '../../compiler/discovery/layouts'
 import { processLayout } from '../../compiler/transform/layoutProcessor'
 import { generateRouteDefinition } from '../../router/manifest'
 import { generateBundleJS } from '../../runtime/bundle-generator'
+import { loadContent } from '../utils/content'
+import { loadZenithConfig } from '../../core/config/loader'
+import { PluginRegistry, createPluginContext } from '../../core/plugins/registry'
+import type { ContentItem } from '../../core/config/types'
 
 export interface DevOptions {
     port?: number
@@ -32,14 +31,52 @@ const pageCache = new Map<string, CompiledPage>()
 export async function dev(options: DevOptions = {}): Promise<void> {
     const project = requireProject()
     const port = options.port || parseInt(process.env.PORT || '3000', 10)
-
-    // Support both app/ and src/ directory structures
-    const appDir = project.root
     const pagesDir = project.pagesDir
+    const rootDir = project.root
+    const contentDir = path.join(rootDir, 'content')
+
+    // Load zenith.config.ts if present
+    const config = await loadZenithConfig(rootDir)
+    const registry = new PluginRegistry()
+
+    console.log('[Zenith] Config plugins:', config.plugins?.length ?? 0)
+
+    // Register plugins from config
+    for (const plugin of config.plugins || []) {
+        console.log('[Zenith] Registering plugin:', plugin.name)
+        registry.register(plugin)
+    }
 
-    logger.header('Zenith Dev Server')
-    logger.log(`Project: ${project.root}`)
-    logger.log(`Pages: ${project.pagesDir}`)
+    // Initialize content data
+    let contentData: Record<string, ContentItem[]> = {}
+
+    // Initialize plugins with context
+    const hasContentPlugin = registry.has('zenith-content')
+    console.log('[Zenith] Has zenith-content plugin:', hasContentPlugin)
+
+    if (hasContentPlugin) {
+        await registry.initAll(createPluginContext(rootDir, (data) => {
+            console.log('[Zenith] Content plugin set data, collections:', Object.keys(data))
+            contentData = data
+        }))
+    } else {
+        // Fallback to legacy content loading if no content plugin configured
+        console.log('[Zenith] Using legacy content loading from:', contentDir)
+        contentData = loadContent(contentDir)
+    }
+
+    console.log('[Zenith] Content collections loaded:', Object.keys(contentData))
+
+    const clients = new Set<ServerWebSocket<unknown>>()
+
+    // Branded Startup Panel
+    brand.showServerPanel({
+        project: project.root,
+        pages: project.pagesDir,
+        url: `http://localhost:${port}`,
+        hmr: true,
+        mode: 'In-memory compilation'
+    })
 
     // File extensions that should be served as static assets
     const STATIC_EXTENSIONS = new Set([
@@ -47,13 +84,6 @@ export async function dev(options: DevOptions = {}): Promise<void> {
         '.webp', '.woff', '.woff2', '.ttf', '.eot', '.json', '.map'
     ])
 
-    /**
-     * Generate the shared runtime JavaScript
-     */
-    function generateRuntimeJS(): string {
-        return generateBundleJS()
-    }
-
     /**
      * Compile a .zen page in memory
      */
@@ -61,22 +91,15 @@ export async function dev(options: DevOptions = {}): Promise<void> {
         try {
             const layoutsDir = path.join(pagesDir, '../layouts')
             const layouts = discoverLayouts(layoutsDir)
-
             const source = fs.readFileSync(pagePath, 'utf-8')
 
-            // Find suitable layout
             let processedSource = source
             let layoutToUse = layouts.get('DefaultLayout')
 
-            if (layoutToUse) {
-                processedSource = processLayout(source, layoutToUse)
-            }
+            if (layoutToUse) processedSource = processLayout(source, layoutToUse)
 
             const result = compileZenSource(processedSource, pagePath)
-
-            if (!result.finalized) {
-                throw new Error('Compilation failed: No finalized output')
-            }
+            if (!result.finalized) throw new Error('Compilation failed')
 
             const routeDef = generateRouteDefinition(pagePath, pagesDir)
 
@@ -88,110 +111,152 @@ export async function dev(options: DevOptions = {}): Promise<void> {
                 lastModified: Date.now()
             }
         } catch (error: any) {
-            logger.error(`Compilation error for ${pagePath}: ${error.message}`)
+            logger.error(`Compilation error: ${error.message}`)
             return null
         }
     }
 
-    /**
-     * Generate full HTML page from compiled output
-     */
-    function generateDevHTML(page: CompiledPage): string {
-        const runtimeTag = `<script src="/runtime.js"></script>`
-        const scriptTag = `<script>\n${page.script}\n</script>`
-        const allScripts = `${runtimeTag}\n${scriptTag}`
+    // Set up file watching for HMR
+    const watcher = fs.watch(path.join(pagesDir, '..'), { recursive: true }, (event, filename) => {
+        if (!filename) return
 
-        if (page.html.includes('</body>')) {
-            return page.html.replace('</body>', `${allScripts}\n</body>`)
+        if (filename.endsWith('.zen')) {
+            logger.hmr('Page', filename)
+            // Broadcast reload
+            for (const client of clients) {
+                client.send(JSON.stringify({ type: 'reload' }))
+            }
+        } else if (filename.endsWith('.css')) {
+            logger.hmr('CSS', filename)
+            for (const client of clients) {
+                client.send(JSON.stringify({
+                    type: 'style-update',
+                    url: filename.includes('global.css') ? '/styles/global.css' : `/${filename}`
+                }))
+            }
+        } else if (filename.startsWith('content') || filename.includes('zenith-docs')) {
+            logger.hmr('Content', filename)
+            // Reinitialize content plugin to reload data
+            if (registry.has('zenith-content')) {
+                registry.initAll(createPluginContext(rootDir, (data) => {
+                    contentData = data
+                }))
+            } else {
+                contentData = loadContent(contentDir)
+            }
+            for (const client of clients) {
+                client.send(JSON.stringify({ type: 'reload' }))
+            }
         }
-
-        return `${page.html}\n${allScripts}`
-    }
-
-    /**
-     * Find .zen page file for a given route
-     */
-    function findPageForRoute(route: string): string | null {
-        const exactPath = path.join(pagesDir, route === '/' ? 'index.zen' : `${route.slice(1)}.zen`)
-        if (fs.existsSync(exactPath)) return exactPath
-
-        const indexPath = path.join(pagesDir, route === '/' ? 'index.zen' : `${route.slice(1)}/index.zen`)
-        if (fs.existsSync(indexPath)) return indexPath
-
-        return null
-    }
-
-    const cachedRuntimeJS = generateRuntimeJS()
+    })
 
     const server = serve({
         port,
-        async fetch(req) {
+        fetch(req, server) {
+            const startTime = performance.now()
             const url = new URL(req.url)
             const pathname = url.pathname
             const ext = path.extname(pathname).toLowerCase()
 
-            if (pathname === '/runtime.js' || pathname === '/assets/bundle.js') {
-                return new Response(cachedRuntimeJS, {
-                    headers: {
-                        'Content-Type': 'application/javascript; charset=utf-8',
-                        'Cache-Control': 'no-cache'
-                    }
+            // Upgrade to WebSocket for HMR
+            if (pathname === '/hmr') {
+                const upgraded = server.upgrade(req)
+                if (upgraded) return undefined
+            }
+
+            // Handle Zenith assets
+            if (pathname === '/runtime.js') {
+                const response = new Response(generateBundleJS(), {
+                    headers: { 'Content-Type': 'application/javascript; charset=utf-8' }
                 })
+                logger.route('GET', pathname, 200, Math.round(performance.now() - startTime), 0, Math.round(performance.now() - startTime))
+                return response
             }
 
-            if (pathname === '/assets/styles.css' || pathname === '/styles/global.css' || pathname === '/app/styles/global.css') {
+            if (pathname === '/styles/global.css') {
                 const globalCssPath = path.join(pagesDir, '../styles/global.css')
                 if (fs.existsSync(globalCssPath)) {
                     const css = fs.readFileSync(globalCssPath, 'utf-8')
-                    return new Response(css, {
-                        headers: { 'Content-Type': 'text/css; charset=utf-8' }
-                    })
+                    const response = new Response(css, { headers: { 'Content-Type': 'text/css' } })
+                    logger.route('GET', pathname, 200, Math.round(performance.now() - startTime), 0, Math.round(performance.now() - startTime))
+                    return response
                 }
             }
 
+            // Static files
             if (STATIC_EXTENSIONS.has(ext)) {
                 const publicPath = path.join(pagesDir, '../public', pathname)
-                const distPath = path.join(pagesDir, '../dist', pathname)
-                const appRelativePath = path.join(pagesDir, '..', pathname)
-
-                for (const filePath of [publicPath, distPath, appRelativePath]) {
-                    const file = Bun.file(filePath)
-                    if (await file.exists()) {
-                        return new Response(file)
-                    }
+                if (fs.existsSync(publicPath)) {
+                    const response = new Response(Bun.file(publicPath))
+                    logger.route('GET', pathname, 200, Math.round(performance.now() - startTime), 0, Math.round(performance.now() - startTime))
+                    return response
                 }
-                return new Response('Not found', { status: 404 })
             }
 
-            const pagePath = findPageForRoute(pathname)
+            // Zenith Pages
+            const pagePath = findPageForRoute(pathname, pagesDir)
             if (pagePath) {
+                const compileStart = performance.now()
                 let cached = pageCache.get(pagePath)
                 const stat = fs.statSync(pagePath)
 
                 if (!cached || stat.mtimeMs > cached.lastModified) {
-                    const compiled = compilePageInMemory(pagePath)
-                    if (compiled) {
-                        pageCache.set(pagePath, compiled)
-                        cached = compiled
-                    }
+                    cached = compilePageInMemory(pagePath) || undefined
+                    if (cached) pageCache.set(pagePath, cached)
                 }
+                const compileEnd = performance.now()
 
                 if (cached) {
-                    const html = generateDevHTML(cached)
-                    return new Response(html, {
-                        headers: { 'Content-Type': 'text/html; charset=utf-8' }
-                    })
+                    const renderStart = performance.now()
+                    const html = generateDevHTML(cached, contentData)
+                    const renderEnd = performance.now()
+
+                    const totalTime = Math.round(performance.now() - startTime)
+                    const compileTime = Math.round(compileEnd - compileStart)
+                    const renderTime = Math.round(renderEnd - renderStart)
+
+                    logger.route('GET', pathname, 200, totalTime, compileTime, renderTime)
+                    return new Response(html, { headers: { 'Content-Type': 'text/html' } })
                 }
             }
 
+            logger.route('GET', pathname, 404, Math.round(performance.now() - startTime), 0, 0)
             return new Response('Not Found', { status: 404 })
+        },
+        websocket: {
+            open(ws) {
+                clients.add(ws)
+            },
+            close(ws) {
+                clients.delete(ws)
+            },
+            message() { }
         }
     })
 
-    logger.success(`Server running at http://localhost:${server.port}`)
-    logger.info('• In-memory compilation active')
-    logger.info('• Auto-recompile on file changes')
-    logger.info('Press Ctrl+C to stop')
+    process.on('SIGINT', () => {
+        watcher.close()
+        server.stop()
+        process.exit(0)
+    })
 
     await new Promise(() => { })
 }
+
+function findPageForRoute(route: string, pagesDir: string): string | null {
+    const exactPath = path.join(pagesDir, route === '/' ? 'index.zen' : `${route.slice(1)}.zen`)
+    if (fs.existsSync(exactPath)) return exactPath
+    const indexPath = path.join(pagesDir, route === '/' ? 'index.zen' : `${route.slice(1)}/index.zen`)
+    if (fs.existsSync(indexPath)) return indexPath
+    return null
+}
+
+function generateDevHTML(page: CompiledPage, contentData: any = {}): string {
+    const runtimeTag = `<script src="/runtime.js"></script>`
+    const contentTag = `<script>window.__ZENITH_CONTENT__ = ${JSON.stringify(contentData)};</script>`
+    const scriptTag = `<script>\n${page.script}\n</script>`
+    const allScripts = `${runtimeTag}\n${contentTag}\n${scriptTag}`
+    return page.html.includes('</body>')
+        ? page.html.replace('</body>', `${allScripts}\n</body>`)
+        : `${page.html}\n${allScripts}`
+}

package/cli/utils/branding.ts

@@ -151,3 +151,28 @@ ${pc.cyan('│')}                                                         ${pc.c
 ${pc.cyan('└─────────────────────────────────────────────────────────┘')}
 `)
 }
+
+/**
+ * Show dev server startup panel
+ */
+export function showServerPanel(options: {
+    project: string,
+    pages: string,
+    url: string,
+    hmr: boolean,
+    mode: string
+}) {
+    console.clear()
+    console.log(LOGO_COMPACT)
+    console.log(`${pc.cyan('────────────────────────────────────────────────────────────')}`)
+    console.log(` ${pc.magenta('🟣 Zenith Dev Server')}`)
+    console.log(`${pc.cyan('────────────────────────────────────────────────────────────')}`)
+    console.log(` ${pc.bold('Project:')}  ${pc.dim(options.project)}`)
+    console.log(` ${pc.bold('Pages:')}    ${pc.dim(options.pages)}`)
+    console.log(` ${pc.bold('Mode:')}     ${pc.cyan(options.mode)} ${pc.dim(`(${options.hmr ? 'HMR enabled' : 'HMR disabled'})`)}`)
+    console.log(`${pc.cyan('────────────────────────────────────────────────────────────')}`)
+    console.log(` ${pc.bold('Server:')}   ${pc.cyan(pc.underline(options.url))} ${pc.dim('(clickable)')}`)
+    console.log(` ${pc.bold('Hot Reload:')} ${options.hmr ? pc.green('Enabled ✅') : pc.red('Disabled ✗')}`)
+    console.log(`${pc.cyan('────────────────────────────────────────────────────────────')}`)
+    console.log(` ${pc.dim('Press Ctrl+C to stop')}\n`)
+}

package/cli/utils/content.ts

@@ -0,0 +1,112 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { marked } from 'marked';
+
+export interface ContentItem {
+    id?: string | number;
+    slug?: string | null;
+    collection?: string | null;
+    content?: string | null;
+    [key: string]: any | null;
+}
+
+/**
+ * Load all content from the content directory
+ */
+export function loadContent(contentDir: string): Record<string, ContentItem[]> {
+    if (!fs.existsSync(contentDir)) {
+        return {};
+    }
+
+    const collections: Record<string, ContentItem[]> = {};
+    const files = getAllFiles(contentDir);
+
+    for (const filePath of files) {
+        const ext = path.extname(filePath).toLowerCase();
+        const relativePath = path.relative(contentDir, filePath);
+        const collection = relativePath.split(path.sep)[0];
+        if (!collection) continue;
+
+        const slug = relativePath.replace(/\.(md|mdx|json)$/, '').replace(/\\/g, '/');
+        const id = slug;
+
+        const rawContent = fs.readFileSync(filePath, 'utf-8');
+
+        if (!collections[collection]) {
+            collections[collection] = [];
+        }
+
+        if (ext === '.json') {
+            try {
+                const data = JSON.parse(rawContent);
+                collections[collection].push({
+                    id,
+                    slug,
+                    collection,
+                    content: '',
+                    ...data
+                });
+            } catch (e) {
+                console.error(`Error parsing JSON file ${filePath}:`, e);
+            }
+        } else if (ext === '.md' || ext === '.mdx') {
+            const { metadata, content } = parseMarkdown(rawContent);
+            collections[collection].push({
+                id,
+                slug,
+                collection,
+                content,
+                ...metadata
+            });
+        }
+    }
+
+    return collections;
+}
+
+function getAllFiles(dir: string, fileList: string[] = []): string[] {
+    const files = fs.readdirSync(dir);
+    files.forEach((file: string) => {
+        const name = path.join(dir, file);
+        if (fs.statSync(name).isDirectory()) {
+            getAllFiles(name, fileList);
+        } else {
+            fileList.push(name);
+        }
+    });
+    return fileList;
+}
+
+function parseMarkdown(content: string): { metadata: Record<string, any>, content: string } {
+    const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
+    const match = content.match(frontmatterRegex);
+
+    if (!match) {
+        return { metadata: {}, content: content.trim() };
+    }
+
+    const [, yamlStr, body] = match;
+    const metadata: Record<string, any> = {};
+
+    if (yamlStr) {
+        yamlStr.split('\n').forEach(line => {
+            const [key, ...values] = line.split(':');
+            if (key && values.length > 0) {
+                const value = values.join(':').trim();
+                // Basic type conversion
+                if (value === 'true') metadata[key.trim()] = true;
+                else if (value === 'false') metadata[key.trim()] = false;
+                else if (!isNaN(Number(value))) metadata[key.trim()] = Number(value);
+                else if (value.startsWith('[') && value.endsWith(']')) {
+                    metadata[key.trim()] = value.slice(1, -1).split(',').map(v => v.trim().replace(/^['"]|['"]$/g, ''));
+                }
+                else metadata[key.trim()] = value.replace(/^['"]|['"]$/g, '');
+            }
+        });
+    }
+
+    return {
+        metadata,
+        content: marked.parse((body || '').trim()) as string
+    };
+}

package/cli/utils/logger.ts

@@ -4,37 +4,43 @@
  * Colored console output for CLI feedback
  */
 
-const colors = {
-    reset: '\x1b[0m',
-    bright: '\x1b[1m',
-    dim: '\x1b[2m',
-    red: '\x1b[31m',
-    green: '\x1b[32m',
-    yellow: '\x1b[33m',
-    blue: '\x1b[34m',
-    cyan: '\x1b[36m'
-}
+import pc from 'picocolors'
 
 export function log(message: string): void {
-    console.log(`${colors.cyan}[zenith]${colors.reset} ${message}`)
+    console.log(`${pc.cyan('[zenith]')} ${message}`)
 }
 
 export function success(message: string): void {
-    console.log(`${colors.green}✓${colors.reset} ${message}`)
+    console.log(`${pc.green('✓')} ${message}`)
 }
 
 export function warn(message: string): void {
-    console.log(`${colors.yellow}⚠${colors.reset} ${message}`)
+    console.log(`${pc.yellow('⚠')} ${message}`)
 }
 
 export function error(message: string): void {
-    console.error(`${colors.red}✗${colors.reset} ${message}`)
+    console.error(`${pc.red('✗')} ${message}`)
 }
 
 export function info(message: string): void {
-    console.log(`${colors.blue}ℹ${colors.reset} ${message}`)
+    console.log(`${pc.blue('ℹ')} ${message}`)
 }
 
 export function header(title: string): void {
-    console.log(`\n${colors.bright}${colors.cyan}${title}${colors.reset}\n`)
+    console.log(`\n${pc.bold(pc.cyan(title))}\n`)
+}
+
+export function hmr(type: 'CSS' | 'Page' | 'Layout' | 'Content', path: string): void {
+    console.log(`${pc.magenta('[HMR]')} ${pc.bold(type)} updated: ${pc.dim(path)}`)
+}
+
+export function route(method: string, path: string, status: number, totalMs: number, compileMs: number, renderMs: number): void {
+    const statusColor = status < 400 ? pc.green : pc.red
+    const timeColor = totalMs > 1000 ? pc.yellow : pc.gray
+
+    console.log(
+        `${pc.bold(method)} ${pc.cyan(path.padEnd(15))} ` +
+        `${statusColor(status)} ${pc.dim('in')} ${timeColor(`${totalMs}ms`)} ` +
+        `${pc.dim(`(compile: ${compileMs}ms, render: ${renderMs}ms)`)}`
+    )
 }