@constela/start 1.0.0 → 1.2.0

package/dist/runtime/entry-client.d.ts

@@ -22,6 +22,14 @@ interface EscapeHandler {
     name: string;
     mount: (element: HTMLElement, ctx: EscapeContext) => () => void;
 }
+/**
+ * Route context for the application
+ */
+interface RouteContext {
+    params: Record<string, string>;
+    query: Record<string, string>;
+    path: string;
+}
 /**
  * Options for initializing the client application
  */
@@ -29,6 +37,7 @@ interface InitClientOptions {
     program: CompiledProgram;
     container: HTMLElement;
     escapeHandlers?: EscapeHandler[];
+    route?: RouteContext;
 }
 /**
  * Initialize the client application with hydration and escape hatch support.
@@ -38,4 +47,4 @@ interface InitClientOptions {
  */
 declare function initClient(options: InitClientOptions): AppInstance;
 
-export { type EscapeContext, type EscapeHandler, type InitClientOptions, initClient };
+export { type EscapeContext, type EscapeHandler, type InitClientOptions, type RouteContext, initClient };

package/dist/runtime/entry-client.js

@@ -1,8 +1,8 @@
 // src/runtime/entry-client.ts
 import { hydrateApp } from "@constela/runtime";
 function initClient(options) {
-  const { program, container, escapeHandlers = [] } = options;
-  const appInstance = hydrateApp({ program, container });
+  const { program, container, escapeHandlers = [], route } = options;
+  const appInstance = hydrateApp({ program, container, ...route && { route } });
   const escapeElements = container.querySelectorAll(
     "[data-constela-escape]"
   );
@@ -35,6 +35,23 @@ function initClient(options) {
     } catch {
     }
   }
+  if (program.state?.["theme"]) {
+    const updateThemeClass = (value) => {
+      if (value === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+    const currentTheme = appInstance.getState?.("theme");
+    if (currentTheme) {
+      updateThemeClass(currentTheme);
+    }
+    if (appInstance.subscribe) {
+      const unsubscribeTheme = appInstance.subscribe("theme", updateThemeClass);
+      cleanupFns.push(unsubscribeTheme);
+    }
+  }
   let destroyed = false;
   return {
     destroy() {

package/dist/runtime/entry-server.d.ts

@@ -10,14 +10,35 @@ interface SSRContext {
     params: Record<string, string>;
     query: URLSearchParams;
 }
+interface WrapHtmlOptions {
+    theme?: 'dark' | 'light';
+    /** Import map entries for resolving bare module specifiers */
+    importMap?: Record<string, string>;
+    /** Path to bundled runtime for production builds. When provided, replaces @constela/runtime imports and excludes importmap. */
+    runtimePath?: string;
+}
+interface WidgetConfig {
+    /** The DOM element ID where the widget should be mounted */
+    id: string;
+    /** The compiled program for the widget */
+    program: CompiledProgram;
+}
 /**
  * Renders a CompiledProgram to HTML string using @constela/server's renderToString.
  *
  * @param program - The compiled program to render
- * @param _ctx - SSR context (reserved for future use)
+ * @param ctx - SSR context including route params
  * @returns Promise that resolves to HTML string
  */
-declare function renderPage(program: CompiledProgram, _ctx: SSRContext): Promise<string>;
+declare function renderPage(program: CompiledProgram, ctx: SSRContext): Promise<string>;
+/**
+ * Route context for hydration
+ */
+interface HydrationRouteContext {
+    params: Record<string, string>;
+    query: Record<string, string>;
+    path: string;
+}
 /**
  * Generates a hydration script for client-side initialization.
  *
@@ -25,11 +46,14 @@ declare function renderPage(program: CompiledProgram, _ctx: SSRContext): Promise
  * - Imports hydrateApp from @constela/runtime
  * - Serializes the program data
  * - Calls hydrateApp with the program and container element
+ * - Optionally mounts widgets using createApp
  *
  * @param program - The compiled program to hydrate
+ * @param widgets - Optional array of widget configurations to mount after hydration
+ * @param route - Optional route context for dynamic routes
  * @returns JavaScript module code as string
  */
-declare function generateHydrationScript(program: CompiledProgram): string;
+declare function generateHydrationScript(program: CompiledProgram, widgets?: WidgetConfig[], route?: HydrationRouteContext): string;
 /**
  * Wraps rendered content in a complete HTML document.
  *
@@ -44,8 +68,9 @@ declare function generateHydrationScript(program: CompiledProgram): string;
  * @param content - The rendered HTML content
  * @param hydrationScript - The hydration script code
  * @param head - Optional additional head content
+ * @param options - Optional configuration including theme
  * @returns Complete HTML document string
  */
-declare function wrapHtml(content: string, hydrationScript: string, head?: string): string;
+declare function wrapHtml(content: string, hydrationScript: string, head?: string, options?: WrapHtmlOptions): string;
 
-export { type SSRContext, generateHydrationScript, renderPage, wrapHtml };
+export { type HydrationRouteContext, type SSRContext, type WidgetConfig, type WrapHtmlOptions, generateHydrationScript, renderPage, wrapHtml };

package/dist/runtime/entry-server.js

@@ -2,7 +2,7 @@ import {
   generateHydrationScript,
   renderPage,
   wrapHtml
-} from "../chunk-QLDID7EZ.js";
+} from "../chunk-PUTC5BCP.js";
 export {
   generateHydrationScript,
   renderPage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/start",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Meta-framework for Constela applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "commander": "^12.0.0",
+    "esbuild": "^0.24.0",
     "fast-glob": "^3.3.0",
     "gray-matter": "^4.0.0",
     "hono": "^4.0.0",
@@ -39,11 +40,11 @@
     "remark-parse": "^11.0.0",
     "unified": "^11.0.0",
     "vite": "^6.0.0",
-    "@constela/compiler": "0.6.1",
+    "@constela/compiler": "0.7.0",
+    "@constela/server": "3.0.0",
+    "@constela/router": "8.0.0",
     "@constela/core": "0.7.0",
-    "@constela/router": "6.0.0",
-    "@constela/server": "2.0.0",
-    "@constela/runtime": "0.9.1"
+    "@constela/runtime": "0.10.0"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.4",

package/dist/chunk-JXIOHPG5.js

@@ -1,399 +0,0 @@
-// src/router/file-router.ts
-import fg from "fast-glob";
-import { existsSync, statSync } from "fs";
-import { join } from "path";
-function filePathToPattern(filePath, _routesDir) {
-  let normalized = filePath.replace(/\\/g, "/");
-  normalized = normalized.replace(/\.(ts|tsx|js|jsx)$/, "");
-  const segments = normalized.split("/");
-  const processedSegments = segments.map((segment) => {
-    if (segment.startsWith("[...") && segment.endsWith("]")) {
-      return "*";
-    }
-    if (segment.startsWith("[") && segment.endsWith("]")) {
-      const paramName = segment.slice(1, -1);
-      return `:${paramName}`;
-    }
-    return segment;
-  });
-  if (processedSegments.at(-1) === "index") {
-    processedSegments.pop();
-  }
-  const path = "/" + processedSegments.join("/");
-  if (path === "/") {
-    return "/";
-  }
-  return path.endsWith("/") ? path.slice(0, -1) : path;
-}
-function extractParams(filePath) {
-  const params = [];
-  const normalized = filePath.replace(/\\/g, "/");
-  const regex = /\[(?:\.\.\.)?([^\]]+)\]/g;
-  let match;
-  while ((match = regex.exec(normalized)) !== null) {
-    const paramName = match[1];
-    if (paramName !== void 0) {
-      params.push(paramName);
-    }
-  }
-  return params;
-}
-function determineRouteType(filePath) {
-  const normalized = filePath.replace(/\\/g, "/");
-  const fileName = normalized.split("/").pop() ?? "";
-  if (fileName.startsWith("_middleware.")) {
-    return "middleware";
-  }
-  if (normalized.startsWith("api/") || normalized.includes("/api/")) {
-    return "api";
-  }
-  return "page";
-}
-function shouldIncludeRoute(filePath) {
-  const normalized = filePath.replace(/\\/g, "/");
-  const fileName = normalized.split("/").pop() ?? "";
-  if (fileName.endsWith(".d.ts")) {
-    return false;
-  }
-  if (fileName.startsWith("_") && !fileName.startsWith("_middleware.")) {
-    return false;
-  }
-  return true;
-}
-async function scanRoutes(routesDir) {
-  if (!existsSync(routesDir)) {
-    throw new Error(`Routes directory does not exist: ${routesDir}`);
-  }
-  const stats = statSync(routesDir);
-  if (!stats.isDirectory()) {
-    throw new Error(`Routes path is not a directory: ${routesDir}`);
-  }
-  const files = await fg("**/*.{ts,tsx,js,jsx}", {
-    cwd: routesDir,
-    ignore: ["node_modules/**", "**/*.d.ts"],
-    onlyFiles: true,
-    followSymbolicLinks: false
-  });
-  const routes = [];
-  for (const filePath of files) {
-    if (!shouldIncludeRoute(filePath)) {
-      continue;
-    }
-    const route = {
-      file: join(routesDir, filePath),
-      pattern: filePathToPattern(filePath, routesDir),
-      type: determineRouteType(filePath),
-      params: extractParams(filePath)
-    };
-    routes.push(route);
-  }
-  routes.sort((a, b) => {
-    return compareRoutes(a, b);
-  });
-  return routes;
-}
-function compareRoutes(a, b) {
-  if (a.type === "middleware" && b.type !== "middleware") return -1;
-  if (b.type === "middleware" && a.type !== "middleware") return 1;
-  const segmentsA = a.pattern.split("/").filter(Boolean);
-  const segmentsB = b.pattern.split("/").filter(Boolean);
-  const minLen = Math.min(segmentsA.length, segmentsB.length);
-  for (let i = 0; i < minLen; i++) {
-    const segA = segmentsA[i] ?? "";
-    const segB = segmentsB[i] ?? "";
-    const typeA = getSegmentType(segA);
-    const typeB = getSegmentType(segB);
-    if (typeA !== typeB) {
-      return typeA - typeB;
-    }
-    if (typeA === 0 && segA !== segB) {
-      return segA.localeCompare(segB);
-    }
-  }
-  if (segmentsA.length !== segmentsB.length) {
-    return segmentsA.length - segmentsB.length;
-  }
-  return a.pattern.localeCompare(b.pattern);
-}
-function getSegmentType(segment) {
-  if (segment === "*") return 2;
-  if (segment.startsWith(":")) return 1;
-  return 0;
-}
-
-// src/static/index.ts
-import { extname, join as join2, normalize, resolve } from "path";
-import { existsSync as existsSync2, statSync as statSync2 } from "fs";
-var MIME_TYPES = {
-  // Images
-  ".ico": "image/x-icon",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".jpeg": "image/jpeg",
-  ".gif": "image/gif",
-  ".svg": "image/svg+xml",
-  ".webp": "image/webp",
-  // Fonts
-  ".woff": "font/woff",
-  ".woff2": "font/woff2",
-  ".ttf": "font/ttf",
-  ".otf": "font/otf",
-  ".eot": "application/vnd.ms-fontobject",
-  // Web assets
-  ".css": "text/css",
-  ".js": "text/javascript",
-  ".json": "application/json",
-  ".txt": "text/plain",
-  ".html": "text/html",
-  ".xml": "application/xml",
-  // Other
-  ".pdf": "application/pdf",
-  ".mp3": "audio/mpeg",
-  ".mp4": "video/mp4",
-  ".webm": "video/webm",
-  ".map": "application/json"
-};
-var DEFAULT_MIME_TYPE = "application/octet-stream";
-function isPathSafe(pathname) {
-  if (!pathname) {
-    return false;
-  }
-  if (!pathname.startsWith("/")) {
-    return false;
-  }
-  if (pathname.includes("\\")) {
-    return false;
-  }
-  if (pathname.includes("//")) {
-    return false;
-  }
-  if (pathname.includes("\0") || pathname.includes("%00")) {
-    return false;
-  }
-  let decoded;
-  try {
-    decoded = pathname;
-    let prevDecoded = "";
-    while (decoded !== prevDecoded) {
-      prevDecoded = decoded;
-      decoded = decodeURIComponent(decoded);
-    }
-  } catch {
-    return false;
-  }
-  if (decoded.includes("\0")) {
-    return false;
-  }
-  if (decoded.includes("..")) {
-    return false;
-  }
-  const segments = decoded.split("/").filter(Boolean);
-  for (const segment of segments) {
-    if (segment.startsWith(".")) {
-      return false;
-    }
-  }
-  return true;
-}
-function getMimeType(filePath) {
-  const ext = extname(filePath).toLowerCase();
-  return MIME_TYPES[ext] ?? DEFAULT_MIME_TYPE;
-}
-function hasObviousAttackPattern(pathname) {
-  if (!pathname) {
-    return true;
-  }
-  if (!pathname.startsWith("/")) {
-    return true;
-  }
-  if (pathname.includes("\\")) {
-    return true;
-  }
-  if (pathname.includes("//")) {
-    return true;
-  }
-  if (pathname.includes("\0") || pathname.includes("%00")) {
-    return true;
-  }
-  let decoded;
-  try {
-    decoded = pathname;
-    let prevDecoded = "";
-    while (decoded !== prevDecoded) {
-      prevDecoded = decoded;
-      decoded = decodeURIComponent(decoded);
-    }
-  } catch {
-    return true;
-  }
-  if (decoded.includes("\0")) {
-    return true;
-  }
-  const segments = decoded.split("/").filter(Boolean);
-  for (const segment of segments) {
-    if (segment.startsWith(".") && segment !== "..") {
-      return true;
-    }
-  }
-  if (decoded.startsWith("/..")) {
-    return true;
-  }
-  return false;
-}
-function resolveStaticFile(pathname, publicDir) {
-  if (hasObviousAttackPattern(pathname)) {
-    return {
-      exists: false,
-      filePath: null,
-      mimeType: null,
-      error: "path_traversal"
-    };
-  }
-  let decodedPathname;
-  try {
-    decodedPathname = decodeURIComponent(pathname);
-  } catch {
-    return {
-      exists: false,
-      filePath: null,
-      mimeType: null,
-      error: "path_traversal"
-    };
-  }
-  const relativePath = decodedPathname.slice(1);
-  const resolvedPath = normalize(join2(publicDir, relativePath));
-  const absolutePublicDir = resolve(publicDir);
-  const publicDirWithSep = absolutePublicDir.endsWith("/") ? absolutePublicDir : absolutePublicDir + "/";
-  if (!resolvedPath.startsWith(publicDirWithSep) && resolvedPath !== absolutePublicDir) {
-    return {
-      exists: false,
-      filePath: null,
-      mimeType: null,
-      error: "outside_public"
-    };
-  }
-  const mimeType = getMimeType(resolvedPath);
-  let exists = false;
-  if (existsSync2(resolvedPath)) {
-    try {
-      const stats = statSync2(resolvedPath);
-      exists = stats.isFile();
-    } catch {
-      exists = false;
-    }
-  }
-  return {
-    exists,
-    filePath: resolvedPath,
-    mimeType
-  };
-}
-
-// src/dev/server.ts
-import { createServer } from "http";
-import { createReadStream } from "fs";
-import { join as join3 } from "path";
-var DEFAULT_PORT = 3e3;
-var DEFAULT_HOST = "localhost";
-var DEFAULT_PUBLIC_DIR = "public";
-async function createDevServer(options = {}) {
-  const {
-    port = DEFAULT_PORT,
-    host = DEFAULT_HOST,
-    routesDir: _routesDir = "src/routes",
-    publicDir = join3(process.cwd(), DEFAULT_PUBLIC_DIR)
-  } = options;
-  let httpServer = null;
-  let actualPort = port;
-  const devServer = {
-    get port() {
-      return actualPort;
-    },
-    async listen() {
-      return new Promise((resolve2, reject) => {
-        httpServer = createServer((req, res) => {
-          const url = new URL(req.url ?? "/", `http://${req.headers.host}`);
-          const pathname = url.pathname;
-          const staticResult = resolveStaticFile(pathname, publicDir);
-          if (staticResult.error === "path_traversal" || staticResult.error === "outside_public") {
-            res.writeHead(403, { "Content-Type": "text/plain" });
-            res.end("Forbidden");
-            return;
-          }
-          if (staticResult.exists && staticResult.filePath && staticResult.mimeType) {
-            res.writeHead(200, { "Content-Type": staticResult.mimeType });
-            const stream = createReadStream(staticResult.filePath);
-            stream.pipe(res);
-            stream.on("error", () => {
-              if (!res.headersSent) {
-                res.writeHead(500, { "Content-Type": "text/plain" });
-              }
-              res.end("Internal Server Error");
-            });
-            return;
-          }
-          if (staticResult.filePath && !staticResult.exists) {
-            res.writeHead(404, { "Content-Type": "text/plain" });
-            res.end("Not Found");
-            return;
-          }
-          res.writeHead(200, { "Content-Type": "text/html" });
-          res.end("<html><body>Constela Dev Server</body></html>");
-        });
-        httpServer.on("error", (err) => {
-          reject(err);
-        });
-        httpServer.listen(port, host, () => {
-          const address = httpServer?.address();
-          if (address) {
-            actualPort = address.port;
-          }
-          resolve2();
-        });
-      });
-    },
-    async close() {
-      return new Promise((resolve2, reject) => {
-        if (!httpServer) {
-          resolve2();
-          return;
-        }
-        httpServer.close((err) => {
-          if (err) {
-            reject(err);
-          } else {
-            httpServer = null;
-            resolve2();
-          }
-        });
-      });
-    }
-  };
-  return devServer;
-}
-
-// src/build/index.ts
-async function build(options) {
-  const outDir = options?.outDir ?? "dist";
-  const routesDir = options?.routesDir ?? "src/routes";
-  let routes = [];
-  try {
-    const scannedRoutes = await scanRoutes(routesDir);
-    routes = scannedRoutes.map((r) => r.pattern);
-  } catch {
-  }
-  return {
-    outDir,
-    routes
-  };
-}
-
-export {
-  filePathToPattern,
-  scanRoutes,
-  isPathSafe,
-  getMimeType,
-  resolveStaticFile,
-  createDevServer,
-  build
-};

package/dist/chunk-QLDID7EZ.js

@@ -1,49 +0,0 @@
-// src/runtime/entry-server.ts
-import { renderToString } from "@constela/server";
-async function renderPage(program, _ctx) {
-  return await renderToString(program);
-}
-function escapeJsonForScript(json) {
-  return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
-function serializeProgram(program) {
-  const serializable = {
-    ...program,
-    // Convert Map to Object if actions is a Map
-    actions: program.actions instanceof Map ? Object.fromEntries(program.actions.entries()) : program.actions
-  };
-  return JSON.stringify(serializable);
-}
-function generateHydrationScript(program) {
-  const serializedProgram = escapeJsonForScript(serializeProgram(program));
-  return `import { hydrateApp } from '@constela/runtime';
-
-const program = ${serializedProgram};
-
-hydrateApp({
-  program,
-  container: document.getElementById('app')
-});`;
-}
-function wrapHtml(content, hydrationScript, head) {
-  return `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-${head ?? ""}
-</head>
-<body>
-<div id="app">${content}</div>
-<script type="module">
-${hydrationScript}
-</script>
-</body>
-</html>`;
-}
-
-export {
-  renderPage,
-  generateHydrationScript,
-  wrapHtml
-};