@zenithbuild/bundler 1.3.17 → 1.3.19

package/dev-server.js

@@ -14,15 +14,55 @@ const port = 3000;
 const start = async (projectRoot = process.env.PROJECT_ROOT || path.resolve(__dirname, '..')) => {
     console.log(`[DevServer] Starting Zenith for: ${projectRoot}`);
 
+    // Dynamic import of JS-based build logic (since dist/index.js is ESM)
+    const { compileCssAsync, generateBundleJS, resolveGlobalsCss } = await import('./dist/index.js');
+
     let controller;
     try {
         controller = new ZenithDevController(projectRoot);
     } catch (e) {
-        console.error("Failed to initialize ZenithDevController:", e);
+        console.error("Failed to initialize ZenithDevController:Native controller access is opaque", e);
         console.error("Ensure you have built the native module: 'napi build --platform'");
         process.exit(1);
     }
 
+    // Asset Cache
+    const assets = {
+        css: '',
+        bundle: '',
+        cssPath: null
+    };
+
+    // Helper: Rebuild Assets (JS Logic)
+    async function rebuildAssets() {
+        console.log('[DevServer] Rebuilding JS assets...');
+
+        // 1. Build CSS
+        const globalsCss = resolveGlobalsCss(projectRoot);
+        if (globalsCss) {
+            const res = await compileCssAsync({
+                input: globalsCss,
+                output: ':memory:',
+                minify: false
+            });
+            if (res.success) {
+                assets.css = res.css;
+                console.log('[DevServer] CSS Compiled');
+            } else {
+                console.error('[DevServer] CSS Compile Failed:', res.error);
+            }
+        }
+
+        // 2. Build Bundle
+        // optimizing: reusing previous bundle if only CSS changed? No, fast enough.
+        // We pass empty pluginData for now as we can't easily extract it from native controller.
+        assets.bundle = generateBundleJS({});
+        console.log('[DevServer] Bundle Generated');
+    }
+
+    // Initial Build
+    await rebuildAssets();
+
     // Create HTTP and WS Server
     const server = http.createServer(app);
     const wss = new WebSocketServer({ server });
@@ -40,7 +80,7 @@ const start = async (projectRoot = process.env.PROJECT_ROOT || path.resolve(__di
         });
     }
 
-    // Watcher Integration (Tactical Fix)
+    // Watcher Integration
     const watchPath = path.join(projectRoot, 'src/**/*.zen');
     console.log(`[Watcher] Watching ${watchPath}`);
     const watcher = chokidar.watch(watchPath, {
@@ -53,9 +93,15 @@ const start = async (projectRoot = process.env.PROJECT_ROOT || path.resolve(__di
             // 1. Tell Rust to re-compile (updates the AssetStore in RAM)
             console.time('Rebuild');
             await controller.rebuild();
+
+            // 2. Rebuild JS assets (CSS/Bundle)
+            if (filePath.endsWith('.css') || filePath.endsWith('.zen') || filePath.endsWith('.ts')) {
+                await rebuildAssets();
+            }
+
             console.timeEnd('Rebuild');
 
-            // 2. Tell the Browser to fetch the new assets
+            // 3. Tell the Browser to fetch the new assets
             notifyHMR();
         } catch (e) {
             console.error("Rebuild failed:", e);
@@ -64,10 +110,58 @@ const start = async (projectRoot = process.env.PROJECT_ROOT || path.resolve(__di
 
     // Serve Assets
     app.use(async (req, res, next) => {
-        // 1. Try to serve from memory store
+        // Intercept Asset Requests (that Native Controller fails on)
+        if (req.path === '/assets/styles.css') {
+            res.setHeader('Content-Type', 'text/css');
+            return res.send(assets.css);
+        }
+        if (req.path === '/assets/bundle.js') {
+            res.setHeader('Content-Type', 'application/javascript');
+            return res.send(assets.bundle);
+        }
+
+        // 1. Try to serve from native memory store (HTML mostly)
         const asset = controller.getAsset(req.path);
 
         if (asset) {
+            let content = asset;
+
+            // Inject Tags into HTML
+            if (req.path === '/' || req.path.endsWith('.html')) {
+                let html = content.toString();
+                const cssTag = `<link rel="stylesheet" href="/assets/styles.css">`;
+                const jsTag = `<script type="module" src="/assets/bundle.js"></script>`;
+
+                // HMR Script
+                const hmrScript = `
+    <script>
+    const ws = new WebSocket('ws://' + location.host);
+    ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'update') {
+            console.log('[HMR] Update received. Reloading...');
+            location.reload(); 
+        }
+    };
+    ws.onopen = () => console.log("[Zenith] HMR Connected");
+    </script>`;
+
+                if (html.includes("</head>")) {
+                    html = html.replace("</head>", `${cssTag}${hmrScript}</head>`);
+                } else {
+                    html = `${cssTag}${hmrScript}${html}`;
+                }
+
+                if (html.includes("</body>")) {
+                    html = html.replace("</body>", `${jsTag}</body>`);
+                } else {
+                    html = `${html}${jsTag}`;
+                }
+
+                res.setHeader('Content-Type', 'text/html');
+                return res.send(html);
+            }
+
             if (req.path.endsWith('.js')) {
                 res.setHeader('Content-Type', 'application/javascript');
             } else if (req.path.endsWith('.css')) {
@@ -76,15 +170,15 @@ const start = async (projectRoot = process.env.PROJECT_ROOT || path.resolve(__di
             return res.send(asset);
         }
 
-        // 2. SPA / HTML Fallback
+        // 2. Fallback HTML (if native returns nothing for /)
         if (req.path === '/' || !path.extname(req.path)) {
             res.send(`
 <!DOCTYPE html>
 <html>
 <head>
     <title>Zenith Dev</title>
-    <script type="module" src="/index.js"></script>
-    <link rel="stylesheet" href="/zenith.css">
+    <link rel="stylesheet" href="/assets/styles.css">
+    <script type="module" src="/assets/bundle.js"></script>
     <script>
     // HMR Client
     const ws = new WebSocket('ws://' + location.host);

package/dist/build-analyzer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Zenith Build Analyzer
+ *
+ * Analyzes .zen page source to determine build strategy:
+ * - Static: Pure HTML+CSS, no JS needed
+ * - Hydration: Has state/events/hooks, needs page-specific JS
+ * - SSR: Uses useFetchServer, needs server rendering
+ * - SPA: Uses ZenLink with passHref, needs client router
+ */
+export interface PageAnalysis {
+    /** Page has state declarations that need hydration */
+    hasState: boolean;
+    /** Page has event handlers (onclick, etc.) */
+    hasEventHandlers: boolean;
+    /** Page uses lifecycle hooks (zenOnMount, zenOnUnmount) */
+    hasLifecycleHooks: boolean;
+    /** Page uses useFetchServer (requires SSR) */
+    usesServerFetch: boolean;
+    /** Page uses useFetchClient (client-side data) */
+    usesClientFetch: boolean;
+    /** Page uses ZenLink with passHref (SPA navigation) */
+    usesZenLink: boolean;
+    /** Page uses reactive expressions in templates */
+    hasReactiveExpressions: boolean;
+    /** Computed: page needs any JavaScript */
+    needsHydration: boolean;
+    /** Computed: page is purely static (no JS) */
+    isStatic: boolean;
+    /** Computed: page needs SSR */
+    needsSSR: boolean;
+}
+/**
+ * Analyze a .zen page source to determine build requirements
+ */
+export declare function analyzePageSource(source: string): PageAnalysis;
+/**
+ * Get a human-readable summary of the page analysis
+ */
+export declare function getAnalysisSummary(analysis: PageAnalysis): string;
+/**
+ * Determine build output type for a page
+ */
+export type BuildOutputType = 'static' | 'hydrated' | 'ssr';
+export declare function getBuildOutputType(analysis: PageAnalysis): BuildOutputType;
+//# sourceMappingURL=build-analyzer.d.ts.map

package/dist/build-analyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-analyzer.d.ts","sourceRoot":"","sources":["../src/build-analyzer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,YAAY;IACzB,sDAAsD;IACtD,QAAQ,EAAE,OAAO,CAAA;IACjB,8CAA8C;IAC9C,gBAAgB,EAAE,OAAO,CAAA;IACzB,2DAA2D;IAC3D,iBAAiB,EAAE,OAAO,CAAA;IAC1B,8CAA8C;IAC9C,eAAe,EAAE,OAAO,CAAA;IACxB,kDAAkD;IAClD,eAAe,EAAE,OAAO,CAAA;IACxB,uDAAuD;IACvD,WAAW,EAAE,OAAO,CAAA;IACpB,kDAAkD;IAClD,sBAAsB,EAAE,OAAO,CAAA;IAE/B,0CAA0C;IAC1C,cAAc,EAAE,OAAO,CAAA;IACvB,8CAA8C;IAC9C,QAAQ,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,QAAQ,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAmD9D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAiBjE;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,CAAA;AAE3D,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,YAAY,GAAG,eAAe,CAI1E"}

package/dist/build-analyzer.js

@@ -0,0 +1,88 @@
+/**
+ * Zenith Build Analyzer
+ *
+ * Analyzes .zen page source to determine build strategy:
+ * - Static: Pure HTML+CSS, no JS needed
+ * - Hydration: Has state/events/hooks, needs page-specific JS
+ * - SSR: Uses useFetchServer, needs server rendering
+ * - SPA: Uses ZenLink with passHref, needs client router
+ */
+/**
+ * Analyze a .zen page source to determine build requirements
+ */
+export function analyzePageSource(source) {
+    // Extract script content for analysis
+    const scriptMatch = source.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+    const scriptContent = scriptMatch?.[1] || '';
+    // Extract template content (everything outside script/style)
+    const templateContent = source
+        .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+    // Check for state declarations: "state varName = ..."
+    const hasState = /\bstate\s+\w+\s*=/.test(scriptContent);
+    // Check for event handlers in template
+    const hasEventHandlers = /\bon(click|change|input|submit|focus|blur|keydown|keyup|keypress|mousedown|mouseup|mouseover|mouseout|mouseenter|mouseleave|load)\s*=\s*["'{]/.test(templateContent);
+    // Check for lifecycle hooks
+    const hasLifecycleHooks = /\bzen(OnMount|OnUnmount)\s*\(/.test(scriptContent);
+    // Check for server fetch
+    const usesServerFetch = /\buseFetchServer\s*\(/.test(scriptContent);
+    // Check for client fetch
+    const usesClientFetch = /\buseFetchClient\s*\(/.test(scriptContent);
+    // Check for ZenLink with passHref
+    const usesZenLink = /<ZenLink[^>]*passHref[^>]*>/.test(templateContent);
+    // Check for reactive expressions in template: {expression}
+    // Must be actual expressions, not just static text
+    // Exclude attribute values like href="/path"
+    const hasReactiveExpressions = /{[^{}]+}/.test(templateContent);
+    // Compute derived properties
+    const needsHydration = hasState || hasEventHandlers || hasLifecycleHooks ||
+        usesClientFetch || hasReactiveExpressions;
+    const isStatic = !needsHydration && !usesServerFetch;
+    const needsSSR = usesServerFetch;
+    return {
+        hasState,
+        hasEventHandlers,
+        hasLifecycleHooks,
+        usesServerFetch,
+        usesClientFetch,
+        usesZenLink,
+        hasReactiveExpressions,
+        needsHydration,
+        isStatic,
+        needsSSR
+    };
+}
+/**
+ * Get a human-readable summary of the page analysis
+ */
+export function getAnalysisSummary(analysis) {
+    const flags = [];
+    if (analysis.isStatic) {
+        flags.push('STATIC (no JS)');
+    }
+    else {
+        if (analysis.hasState)
+            flags.push('state');
+        if (analysis.hasEventHandlers)
+            flags.push('events');
+        if (analysis.hasLifecycleHooks)
+            flags.push('lifecycle');
+        if (analysis.hasReactiveExpressions)
+            flags.push('reactive');
+        if (analysis.usesClientFetch)
+            flags.push('clientFetch');
+    }
+    if (analysis.needsSSR)
+        flags.push('SSR');
+    if (analysis.usesZenLink)
+        flags.push('SPA');
+    return flags.length > 0 ? flags.join(', ') : 'minimal';
+}
+export function getBuildOutputType(analysis) {
+    if (analysis.needsSSR)
+        return 'ssr';
+    if (analysis.needsHydration)
+        return 'hydrated';
+    return 'static';
+}
+//# sourceMappingURL=build-analyzer.js.map

package/dist/build-analyzer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-analyzer.js","sourceRoot":"","sources":["../src/build-analyzer.ts"],"names":[],"mappings":"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"}

package/dist/bundle-generator.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Zenith Bundle Generator
+ *
+ * Generates the shared client runtime bundle that gets served as:
+ * - /assets/bundle.js in production
+ * - /runtime.js in development
+ *
+ * This is a cacheable, versioned file that contains:
+ * - Reactivity primitives (zenSignal, zenState, zenEffect, etc.)
+ * - Lifecycle hooks (zenOnMount, zenOnUnmount)
+ * - Hydration functions (zenithHydrate)
+ * - Event binding utilities
+ */
+/**
+ * Generate the complete client runtime bundle
+ * This is served as an external JS file, not inlined
+ */
+export declare function generateBundleJS(pluginData?: Record<string, any>): string;
+//# sourceMappingURL=bundle-generator.d.ts.map

package/dist/bundle-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-generator.d.ts","sourceRoot":"","sources":["../src/bundle-generator.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AAEH;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CA2zBzE"}