@zenithbuild/core 0.6.1 → 0.6.2

package/compiler/spa-build.ts

@@ -18,7 +18,7 @@ import {
   discoverPages,
   generateRouteDefinition,
   routePathToRegex
-} from "../router/manifest"
+} from "@zenithbuild/router/manifest"
 
 interface CompiledPage {
   routePath: string

package/compiler/ssg-build.ts

@@ -16,7 +16,7 @@ import path from "path"
 import { compileZenSource } from "./index"
 import { discoverLayouts } from "./discovery/layouts"
 import { processLayout } from "./transform/layoutProcessor"
-import { discoverPages, generateRouteDefinition } from "../router/manifest"
+import { discoverPages, generateRouteDefinition } from "@zenithbuild/router/manifest"
 import { analyzePageSource, getAnalysisSummary, getBuildOutputType, type PageAnalysis } from "./build-analyzer"
 import { generateBundleJS } from "../runtime/bundle-generator"
 import { loadContent } from "../cli/utils/content"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenithbuild/core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Core library for the Zenith framework",
   "license": "MIT",
   "type": "module",
@@ -59,6 +59,7 @@
     "typescript": "^5"
   },
   "dependencies": {
+    "@zenithbuild/router": "latest",
     "@types/acorn": "^6.0.4",
     "@types/marked": "^6.0.0",
     "@types/parse5": "^7.0.0",

package/router/index.ts

@@ -1,8 +1,12 @@
 /**
  * Zenith Router
  * 
- * File-based SPA router for Zenith framework.
- * Includes routing, navigation, and ZenLink components.
+ * This module re-exports from @zenithbuild/router package.
+ * 
+ * The router has been extracted to its own package for:
+ * - Independent versioning
+ * - Better separation of concerns
+ * - Easier maintenance
  * 
  * @example
  * ```ts
@@ -16,61 +20,9 @@
  *   console.log('On blog section')
  * }
  * ```
+ * 
+ * @deprecated Import directly from '@zenithbuild/router' for new projects
  */
 
-// Core router types and utilities
-export * from "./types"
-export * from "./manifest"
-
-// Router runtime (core router implementation)
-// These are the primary exports for router functionality
-export {
-  initRouter,
-  resolveRoute,
-  navigate,
-  getRoute,
-  onRouteChange,
-  beforeEach,
-  afterEach,
-  isActive,
-  prefetch,
-  isPrefetched
-} from "./runtime"
-
-// Navigation utilities (additional helpers and zen* prefixed exports)
-// Note: Some functions like navigate, isActive, prefetch are also in runtime
-// We export runtime's versions above, and navigation's unique functions here
-export {
-  // Navigation API (zen* prefixed names)
-  zenNavigate,
-  zenBack,
-  zenForward,
-  zenGo,
-  zenIsActive,
-  zenPrefetch,
-  zenIsPrefetched,
-  zenGetRoute,
-  zenGetParam,
-  zenGetQuery,
-  createZenLink,
-  zenLink,
-  // Additional navigation utilities (not in runtime)
-  back,
-  forward,
-  go,
-  getParam,
-  getQuery,
-  isExternalUrl,
-  shouldUseSPANavigation,
-  normalizePath,
-  setGlobalTransition,
-  getGlobalTransition,
-  createTransitionContext
-} from "./navigation/index"
-
-// Navigation-specific types
-export type {
-  ZenLinkProps,
-  TransitionContext,
-  TransitionHandler
-} from "./navigation/index"
+// Re-export everything from @zenithbuild/router
+export * from "@zenithbuild/router"

package/runtime/bundle-generator.ts

@@ -876,6 +876,310 @@ export function generateBundleJS(): string {
   global.processRawSections = processRawSections;
   global.slugify = slugify;
   
+  // ============================================
+  // SPA Router Runtime
+  // ============================================
+  
+  (function() {
+    'use strict';
+    
+    // Current route state
+    var currentRoute = {
+      path: '/',
+      params: {},
+      query: {}
+    };
+    
+    // Route listeners
+    var routeListeners = new Set();
+    
+    // Router outlet element
+    var routerOutlet = null;
+    
+    // Page modules registry
+    var pageModules = {};
+    
+    // Route manifest
+    var routeManifest = [];
+    
+    /**
+     * Parse query string
+     */
+    function parseQueryString(search) {
+      var query = {};
+      if (!search || search === '?') return query;
+      var params = new URLSearchParams(search);
+      params.forEach(function(value, key) { query[key] = value; });
+      return query;
+    }
+    
+    /**
+     * Resolve route from pathname
+     */
+    function resolveRoute(pathname) {
+      var normalizedPath = pathname === '' ? '/' : pathname;
+      
+      for (var i = 0; i < routeManifest.length; i++) {
+        var route = routeManifest[i];
+        var match = route.regex.exec(normalizedPath);
+        if (match) {
+          var params = {};
+          for (var j = 0; j < route.paramNames.length; j++) {
+            var paramValue = match[j + 1];
+            if (paramValue !== undefined) {
+              params[route.paramNames[j]] = decodeURIComponent(paramValue);
+            }
+          }
+          return { record: route, params: params };
+        }
+      }
+      return null;
+    }
+    
+    /**
+     * Clean up previous page
+     */
+    function cleanupPreviousPage() {
+      // Trigger unmount lifecycle hooks
+      if (global.__zenith && global.__zenith.triggerUnmount) {
+        global.__zenith.triggerUnmount();
+      }
+      
+      // Remove previous page styles
+      var prevStyles = document.querySelectorAll('style[data-zen-page-style]');
+      prevStyles.forEach(function(s) { s.remove(); });
+      
+      // Clean up window properties
+      if (global.__zenith_cleanup) {
+        global.__zenith_cleanup.forEach(function(key) {
+          try { delete global[key]; } catch(e) {}
+        });
+      }
+      global.__zenith_cleanup = [];
+    }
+    
+    /**
+     * Inject styles
+     */
+    function injectStyles(styles) {
+      styles.forEach(function(content, i) {
+        var style = document.createElement('style');
+        style.setAttribute('data-zen-page-style', String(i));
+        style.textContent = content;
+        document.head.appendChild(style);
+      });
+    }
+    
+    /**
+     * Execute scripts
+     */
+    function executeScripts(scripts) {
+      scripts.forEach(function(content) {
+        try {
+          var fn = new Function(content);
+          fn();
+        } catch (e) {
+          console.error('[Zenith Router] Script error:', e);
+        }
+      });
+    }
+    
+    /**
+     * Render page
+     */
+    function renderPage(pageModule) {
+      if (!routerOutlet) {
+        console.warn('[Zenith Router] No router outlet');
+        return;
+      }
+      
+      cleanupPreviousPage();
+      routerOutlet.innerHTML = pageModule.html;
+      injectStyles(pageModule.styles);
+      executeScripts(pageModule.scripts);
+      
+      // Trigger mount lifecycle hooks after scripts are executed
+      if (global.__zenith && global.__zenith.triggerMount) {
+        global.__zenith.triggerMount();
+      }
+    }
+    
+    /**
+     * Notify listeners
+     */
+    function notifyListeners(route, prevRoute) {
+      routeListeners.forEach(function(listener) {
+        try { listener(route, prevRoute); } catch(e) {}
+      });
+    }
+    
+    /**
+     * Resolve and render
+     */
+    function resolveAndRender(path, query, updateHistory, replace) {
+      replace = replace || false;
+      var prevRoute = Object.assign({}, currentRoute);
+      var resolved = resolveRoute(path);
+      
+      if (resolved) {
+        currentRoute = {
+          path: path,
+          params: resolved.params,
+          query: query,
+          matched: resolved.record
+        };
+        
+        var pageModule = pageModules[resolved.record.path];
+        if (pageModule) {
+          renderPage(pageModule);
+        }
+      } else {
+        currentRoute = { path: path, params: {}, query: query, matched: undefined };
+        console.warn('[Zenith Router] No route matched:', path);
+        
+        // Render 404 if available
+        if (routerOutlet) {
+          routerOutlet.innerHTML = '<div style="padding: 2rem; text-align: center;"><h1>404</h1><p>Page not found</p></div>';
+        }
+      }
+      
+      if (updateHistory) {
+        var url = path + (Object.keys(query).length ? '?' + new URLSearchParams(query) : '');
+        if (replace) {
+          history.replaceState(null, '', url);
+        } else {
+          history.pushState(null, '', url);
+        }
+      }
+      
+      notifyListeners(currentRoute, prevRoute);
+      global.__zenith_route = currentRoute;
+    }
+    
+    /**
+     * Handle popstate
+     */
+    function handlePopState() {
+      resolveAndRender(
+        location.pathname,
+        parseQueryString(location.search),
+        false,
+        false
+      );
+    }
+    
+    /**
+     * Navigate (public API)
+     */
+    function navigate(to, options) {
+      options = options || {};
+      var path, query = {};
+      
+      if (to.includes('?')) {
+        var parts = to.split('?');
+        path = parts[0];
+        query = parseQueryString('?' + parts[1]);
+      } else {
+        path = to;
+      }
+      
+      if (!path.startsWith('/')) {
+        var currentDir = currentRoute.path.split('/').slice(0, -1).join('/');
+        path = currentDir + '/' + path;
+      }
+      
+      var normalizedPath = path === '' ? '/' : path;
+      var currentPath = currentRoute.path === '' ? '/' : currentRoute.path;
+      var isSamePath = normalizedPath === currentPath;
+      
+      if (isSamePath && JSON.stringify(query) === JSON.stringify(currentRoute.query)) {
+        return;
+      }
+      
+      resolveAndRender(path, query, true, options.replace || false);
+    }
+    
+    /**
+     * Get current route
+     */
+    function getRoute() {
+      return Object.assign({}, currentRoute);
+    }
+    
+    /**
+     * Subscribe to route changes
+     */
+    function onRouteChange(listener) {
+      routeListeners.add(listener);
+      return function() { routeListeners.delete(listener); };
+    }
+    
+    /**
+     * Check if path is active
+     */
+    function isActive(path, exact) {
+      if (exact) return currentRoute.path === path;
+      return currentRoute.path.startsWith(path);
+    }
+    
+    /**
+     * Prefetch a route
+     */
+    var prefetchedRoutes = new Set();
+    function prefetch(path) {
+      var normalizedPath = path === '' ? '/' : path;
+      
+      if (prefetchedRoutes.has(normalizedPath)) {
+        return Promise.resolve();
+      }
+      prefetchedRoutes.add(normalizedPath);
+      
+      var resolved = resolveRoute(normalizedPath);
+      if (!resolved) {
+        return Promise.resolve();
+      }
+      
+      // In SPA build, all modules are already loaded
+      return Promise.resolve();
+    }
+    
+    /**
+     * Initialize router
+     */
+    function initRouter(manifest, modules, outlet) {
+      routeManifest = manifest;
+      Object.assign(pageModules, modules);
+      
+      if (outlet) {
+        routerOutlet = typeof outlet === 'string' 
+          ? document.querySelector(outlet) 
+          : outlet;
+      }
+      
+      window.addEventListener('popstate', handlePopState);
+      
+      // Initial route resolution
+      resolveAndRender(
+        location.pathname,
+        parseQueryString(location.search),
+        false
+      );
+    }
+    
+    // Expose router API globally
+    global.__zenith_router = {
+      navigate: navigate,
+      getRoute: getRoute,
+      onRouteChange: onRouteChange,
+      isActive: isActive,
+      prefetch: prefetch,
+      initRouter: initRouter
+    };
+    
+    // Also expose navigate directly for convenience
+    global.navigate = navigate;
+  })();
+  
   // ============================================
   // HMR Client (Development Only)
   // ============================================