@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/dev-server/serve-app.js

@@ -0,0 +1,727 @@
+import { serve, default as Bun } from "../bun-shim.js";
+import fs from "node:fs";
+import path from "node:path";
+import { detectShell, processShell, composeShellWithPage, stripDocumentWrapper, isSpaNavigation, extractContainerContent, extractLayoutMetadata } from "../app-shell.js";
+import {
+  getHmrServer,
+  injectHotReload,
+  isCssOnlyChange,
+  shouldIgnoreFile,
+  shouldReloadOnChange,
+  stopHmrServer
+} from "../hot-reload.js";
+import { partialsCache } from "../includes.js";
+import { pageShipsSignalsRuntime } from "../runtime-injection.js";
+import { BUILD_ID_HEADER, getBuildId } from "../build-id.js";
+import { FRAGMENT_CACHE_CONTROL, spaNavVaryHeaders } from "../spa-nav.js";
+import { stateDir } from "../state-dir.js";
+import { plugin as stxPlugin } from "../plugin.js";
+import { createRouter, matchRoute, formatRoutes, findErrorPage } from "../router.js";
+import {
+  loadMiddlewareFromDirectory,
+  runMiddleware,
+  createMiddlewareContext,
+  createRouteLocation,
+  clearMiddleware,
+  getMiddlewareNames
+} from "../route-middleware.js";
+import { resetHead } from "../head.js";
+import { extractPageMetaFromSource } from "../page-meta.js";
+import { clearComponentCache } from "../utils.js";
+import { extractPageResponseStatus, readResponseHeaders, readResponseStatus } from "../page-response.js";
+import {
+  buildCss,
+  colors,
+  extractSidebarConfig,
+  findAvailablePort,
+  injectCss,
+  openNativeWindow,
+  rebuildCss,
+  setupKeyboardShortcuts
+} from "./index.js";
+async function readPageResponseStatus(filePath) {
+  try {
+    return extractPageResponseStatus(await Bun.file(filePath).text());
+  } catch {
+    return;
+  }
+}
+function serveStaticFile(filePath) {
+  const file = Bun.file(filePath), ext = path.extname(filePath).toLowerCase(), contentTypes = {
+    ".html": "text/html",
+    ".css": "text/css",
+    ".js": "text/javascript",
+    ".json": "application/json",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".svg": "image/svg+xml",
+    ".ico": "image/x-icon",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+    ".ttf": "font/ttf",
+    ".otf": "font/otf",
+    ".eot": "application/vnd.ms-fontobject"
+  }, cacheHeaders = [".js", ".css", ".json"].includes(ext) ? {
+    "Cache-Control": "no-store, no-cache, must-revalidate",
+    Pragma: "no-cache",
+    Expires: "0"
+  } : {};
+  return new Response(file, {
+    headers: {
+      "Content-Type": contentTypes[ext] || "application/octet-stream",
+      ...cacheHeaders
+    }
+  });
+}
+export async function serveApp(appDir = ".", options = {}) {
+  const port = options.port || 3000, watch = options.watch !== !1, hotReload = options.hotReload !== !1 && watch;
+  let hmrServer = null, actualHmrPort = options.hmrPort || port + 1;
+  const absoluteAppDir = path.resolve(appDir), { loadStxConfig } = await import("../index.js"), projectConfig = await loadStxConfig(absoluteAppDir), stxRoot = projectConfig.root && projectConfig.root !== "." ? path.join(absoluteAppDir, projectConfig.root) : absoluteAppDir, pagesDirName = options.pagesDir || projectConfig.pagesDir || "pages", pagesDir = path.join(stxRoot, pagesDirName);
+  if (!fs.existsSync(pagesDir)) {
+    console.error(`${colors.red}Error: No '${pagesDirName}' directory found${colors.reset}`);
+    console.log(`${colors.dim}Looked in: ${colors.bright}${pagesDir}${colors.reset}`);
+    console.log(`${colors.dim}Run stx dev from the app directory, pass it as an argument (stx dev <dir>),${colors.reset}`);
+    console.log(`${colors.dim}point at another directory with --pages <dir>, or set pagesDir in stx.config.ts.${colors.reset}`);
+    console.log(`${colors.dim}Starting fresh? Create ${pagesDirName}/index.stx for the homepage.${colors.reset}`);
+    return !1;
+  }
+  const routes = createRouter(stxRoot, { pagesDir: pagesDirName });
+  if (routes.length === 0) {
+    console.error(`${colors.red}Error: No page files found in ${colors.bright}${pagesDir}${colors.reset}`);
+    return !1;
+  }
+  console.log(`${colors.blue}Found ${colors.bright}${routes.length}${colors.blue} routes${colors.reset}`);
+  const pluginPageDirs = projectConfig?._pluginPageDirs || [], pluginRoutes = [];
+  for (const { dir: pluginDir, prefix: pluginPrefix } of pluginPageDirs)
+    if (fs.existsSync(pluginDir)) {
+      const pRoutes = createRouter(path.dirname(pluginDir), { pagesDir: path.basename(pluginDir) });
+      for (const route of pRoutes) {
+        const prefixedPattern = pluginPrefix === "/" ? route.pattern : `${pluginPrefix}${route.pattern === "/" ? "" : route.pattern}`;
+        pluginRoutes.push({
+          route: { ...route, pattern: prefixedPattern },
+          prefix: pluginPrefix
+        });
+      }
+      if (pRoutes.length > 0)
+        console.log(`${colors.blue}Plugin pages: ${colors.bright}${pRoutes.length}${colors.blue} routes at ${colors.cyan}${pluginPrefix}${colors.reset}`);
+    }
+  const builtPluginPages = new Map;
+  let shell = null, shellPath = null;
+  if (options.stxOptions?.shell !== !1) {
+    shellPath = await detectShell(absoluteAppDir, options.stxOptions?.shell);
+    if (shellPath) {
+      shell = await processShell(shellPath, options.stxOptions || {});
+      if (shell)
+        console.log(`${colors.blue}Using app shell: ${colors.bright}${path.relative(absoluteAppDir, shellPath)}${colors.reset} ${colors.dim}(deprecated: use layouts/default.stx instead)${colors.reset}`);
+    }
+  }
+  clearMiddleware();
+  await loadMiddlewareFromDirectory(absoluteAppDir);
+  const loadedMiddleware = getMiddlewareNames();
+  if (loadedMiddleware.length > 0)
+    console.log(`${colors.blue}Loaded ${colors.bright}${loadedMiddleware.length}${colors.blue} middleware: ${colors.dim}${loadedMiddleware.join(", ")}${colors.reset}`);
+  let apiRoutes = {}, customRouter = null;
+  try {
+    const { loadStxConfig } = await import("../index.js"), projectConfig = await loadStxConfig(absoluteAppDir);
+    if (projectConfig?.apiRouter) {
+      customRouter = projectConfig?.apiRouter;
+      console.log(`${colors.blue}Using custom router for API handling${colors.reset}`);
+    }
+    if (projectConfig?.apiRoutes) {
+      apiRoutes = projectConfig.apiRoutes;
+      const routeCount = Object.keys(apiRoutes).length;
+      if (routeCount > 0)
+        console.log(`${colors.blue}Loaded ${colors.bright}${routeCount} API route${routeCount > 1 ? "s" : ""}${colors.reset}`);
+    }
+    if (projectConfig?.broadcasting?.enabled)
+      try {
+        const { startBroadcasting, loadChannels } = await import("../broadcasting.js"), bcConfig = projectConfig.broadcasting;
+        await startBroadcasting(bcConfig);
+        const bcPort = bcConfig.port ?? 6001;
+        console.log(`${colors.magenta}Broadcasting on ${colors.cyan}ws://localhost:${bcPort}/ws${colors.reset}`);
+        const channelsFile = path.join(process.cwd(), "channels.ts");
+        if (fs.existsSync(channelsFile))
+          try {
+            const count = await loadChannels(channelsFile);
+            console.log(`${colors.blue}Loaded ${colors.bright}${count} broadcast channel${count !== 1 ? "s" : ""}${colors.blue} from channels.ts${colors.reset}`);
+          } catch (err) {
+            console.warn(`${colors.yellow}Failed to load channels.ts: ${err.message}${colors.reset}`);
+          }
+      } catch (err) {
+        console.warn(`${colors.yellow}Broadcasting failed to start: ${err.message}${colors.reset}`);
+      }
+  } catch {}
+  const outputDir = stateDir(absoluteAppDir, "output");
+  fs.mkdirSync(outputDir, { recursive: !0 });
+  const builtPages = new Map, streamingRoutes = new Set, renderErrorPage = async (statusCode) => {
+    const errorPagePath = findErrorPage(pagesDir, statusCode);
+    if (!errorPagePath)
+      return null;
+    try {
+      const result = await Bun.build({
+        entrypoints: [errorPagePath],
+        outdir: outputDir,
+        plugins: [stxPlugin],
+        publicPath: "/",
+        define: {
+          "process.env.NODE_ENV": '"development"'
+        },
+        ...options.stxOptions
+      });
+      if (!result.success)
+        return null;
+      const htmlOutput = result.outputs.find((o) => o.path.endsWith(".html"));
+      if (!htmlOutput)
+        return null;
+      return await Bun.file(htmlOutput.path).text();
+    } catch {
+      return null;
+    }
+  }, decidedResponses = new Map, buildPage = async (route, requestParams) => {
+    try {
+      const { processDirectives, extractVariables, defaultConfig, loadStxConfig, injectRouterScript } = await import("../index.js"), { checkCache, cacheTemplate, readFileCached, templateCache } = await import("../caching.js"), projectConfig = await loadStxConfig(absoluteAppDir), resolveRel = (dir) => {
+        if (!dir)
+          return dir;
+        if (path.isAbsolute(dir))
+          return dir;
+        return path.resolve(absoluteAppDir, dir);
+      }, merged = {
+        ...defaultConfig,
+        ...projectConfig,
+        ...options.stxOptions,
+        autoShell: !0
+      };
+      if (options.debugDirectives)
+        merged.debug = !0;
+      merged.partialsDir = resolveRel(merged.partialsDir);
+      merged.componentsDir = resolveRel(merged.componentsDir);
+      merged.layoutsDir = resolveRel(merged.layoutsDir);
+      merged.storesDir = resolveRel(merged.storesDir || "stores");
+      merged.cachePath = resolveRel(merged.cachePath) ?? stateDir(absoluteAppDir, "cache");
+      const isStaticBuild = !requestParams && !options.profile, cacheEnabled = merged.cache !== !1;
+      if (cacheEnabled && isStaticBuild) {
+        const memEntry = templateCache.get(route.filePath);
+        if (memEntry)
+          try {
+            if ((await fs.promises.stat(route.filePath)).mtime.getTime() <= memEntry.mtime) {
+              let valid = !0;
+              for (const dep of memEntry.dependencies) {
+                if (!fs.existsSync(dep)) {
+                  valid = !1;
+                  break;
+                }
+                if ((await fs.promises.stat(dep)).mtime.getTime() > memEntry.mtime) {
+                  valid = !1;
+                  break;
+                }
+              }
+              if (valid) {
+                let output = memEntry.output;
+                if (shell)
+                  output = stripDocumentWrapper(output, { preserveHead: !0 });
+                const decided = decidedResponses.get(route.filePath);
+                return {
+                  route,
+                  content: output,
+                  status: decided?.status ?? await readPageResponseStatus(route.filePath),
+                  headers: decided?.headers
+                };
+              }
+            }
+          } catch {}
+        const cached = await checkCache(route.filePath, merged);
+        if (cached) {
+          let output = cached;
+          if (shell)
+            output = stripDocumentWrapper(output, { preserveHead: !0 });
+          const decided = decidedResponses.get(route.filePath);
+          return {
+            route,
+            content: output,
+            status: decided?.status ?? await readPageResponseStatus(route.filePath),
+            headers: decided?.headers
+          };
+        }
+      }
+      const content = cacheEnabled ? await readFileCached(route.filePath) : await Bun.file(route.filePath).text(), responseStatus = extractPageResponseStatus(content), { classifyAllScripts } = await import("../index.js"), classified = classifyAllScripts(content), serverScripts = classified.server.map((s) => s.content);
+      let templateContent = content;
+      for (const s of classified.server)
+        templateContent = templateContent.replace(s.fullTag, "");
+      const context = {
+        __filename: route.filePath,
+        __dirname: path.dirname(route.filePath),
+        params: requestParams ?? {},
+        __stx_runtime_head: {}
+      };
+      for (const scriptBody of serverScripts)
+        try {
+          await extractVariables(scriptBody, context, route.filePath);
+        } catch (e) {
+          if (options.stxOptions?.debug)
+            console.error("[stx] variable extraction error", route.filePath, e?.message || e);
+        }
+      const dependencies = new Set;
+      let output;
+      if (options.profile) {
+        const t0 = performance.now();
+        output = await processDirectives(templateContent, context, route.filePath, merged, dependencies);
+        const ms = performance.now() - t0, rel = path.relative(absoluteAppDir, route.filePath) || route.filePath;
+        console.log(`[stx:profile] ${rel} \u2192 ${ms.toFixed(2)}ms`);
+      } else
+        output = await processDirectives(templateContent, context, route.filePath, merged, dependencies);
+      if (!shell)
+        output = await injectRouterScript(output, { router: merged.router });
+      {
+        const { interpolateScriptExpressions } = await import("../expressions.js");
+        output = output.replace(/<script\b([^>]*)>([\s\S]*?)<\/script>/g, (full, attrs, body) => {
+          if (!/function\s+__stx_setup_/.test(body))
+            return full;
+          return `<script${attrs}>${interpolateScriptExpressions(body, context)}</script>`;
+        });
+      }
+      if (shell)
+        output = stripDocumentWrapper(output, { preserveHead: !0 });
+      if (cacheEnabled && isStaticBuild)
+        await cacheTemplate(route.filePath, output, dependencies, merged);
+      const { extractStreamBoundaries } = await import("../streaming.js");
+      let boundaries = extractStreamBoundaries(context);
+      const streamTemplates = context.__streamTemplates;
+      if (streamTemplates && typeof streamTemplates === "object" && Object.keys(streamTemplates).length > 0) {
+        const dataFns = context.streamBoundaries || {}, fragmentConfig = { ...merged, autoShell: !1 }, tplBoundaries = Object.keys(streamTemplates).map((id) => ({
+          id,
+          render: async () => {
+            const data = typeof dataFns[id] === "function" ? await dataFns[id]() : void 0;
+            return processDirectives(streamTemplates[id], { ...context, $boundary: data }, route.filePath, fragmentConfig, new Set);
+          }
+        })), tplIds = new Set(tplBoundaries.map((b) => b.id));
+        boundaries = [...(boundaries || []).filter((b) => !tplIds.has(b.id)), ...tplBoundaries];
+      }
+      if (boundaries && boundaries.length > 0)
+        streamingRoutes.add(route.pattern);
+      else
+        boundaries = void 0;
+      const decidedStatus = readResponseStatus(context), decidedHeaders = readResponseHeaders(context);
+      if (isStaticBuild)
+        decidedResponses.set(route.filePath, { status: decidedStatus, headers: decidedHeaders });
+      return {
+        route,
+        content: output,
+        status: decidedStatus ?? responseStatus,
+        headers: decidedHeaders,
+        boundaries
+      };
+    } catch (error) {
+      console.error(`${colors.red}Error building ${colors.bright}${route.pattern}${colors.reset}:`, error);
+      return null;
+    }
+  }, BUILD_CONCURRENCY = 8, buildAllPages = async () => {
+    builtPages.clear();
+    builtPluginPages.clear();
+    for (let i = 0;i < routes.length; i += BUILD_CONCURRENCY) {
+      const chunk = routes.slice(i, i + BUILD_CONCURRENCY), results = await Promise.all(chunk.map((route) => buildPage(route)));
+      for (const built of results)
+        if (built)
+          builtPages.set(built.route.pattern, built);
+    }
+    for (let i = 0;i < pluginRoutes.length; i += BUILD_CONCURRENCY) {
+      const chunk = pluginRoutes.slice(i, i + BUILD_CONCURRENCY), results = await Promise.all(chunk.map(({ route }) => buildPage(route)));
+      for (const built of results)
+        if (built)
+          builtPluginPages.set(built.route.pattern, built);
+    }
+    return builtPages.size > 0;
+  };
+  console.log(`${colors.blue}Building pages...${colors.reset}`);
+  if (!await buildAllPages()) {
+    console.error(`${colors.red}No pages were successfully built${colors.reset}`);
+    return !1;
+  }
+  await buildCss(absoluteAppDir);
+  let actualPort = port;
+  try {
+    actualPort = await findAvailablePort(port);
+    if (actualPort !== port)
+      console.log(`${colors.yellow}Port ${port} is busy, using port ${actualPort} instead${colors.reset}`);
+  } catch {
+    console.error(`${colors.red}Could not find an available port${colors.reset}`);
+    return !1;
+  }
+  if (hotReload) {
+    const desiredHmrPort = options.hmrPort || actualPort + 1;
+    hmrServer = getHmrServer({ wsPort: desiredHmrPort, verbose: !1 });
+    actualHmrPort = hmrServer.start(desiredHmrPort);
+  }
+  const injectRouteParams = (content, params) => {
+    const paramsScript = `<script data-stx-route-params>(function(){var p=${JSON.stringify(params).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029")};window.__stx_rp=p;if(window.stx){window.stx._rp=p;if(window.stx.setRouteParams)window.stx.setRouteParams(p)}})()</script>`;
+    if (content.includes("</head>"))
+      return content.replace("</head>", `${paramsScript}</head>`);
+    if (content.includes("<body"))
+      return content.replace(/<body([^>]*)>/, `<body$1>${paramsScript}`);
+    return paramsScript + content;
+  };
+  console.log(`${colors.blue}Starting server...${colors.reset}`);
+  const server = serve({
+    port: actualPort,
+    async fetch(request) {
+      const url = new URL(request.url), publicDirName = projectConfig?.publicDir || "public", publicPath = path.join(absoluteAppDir, publicDirName, url.pathname), distPath = path.join(absoluteAppDir, url.pathname), outputPath = path.join(outputDir, url.pathname), [publicStat, distStat, outputStat] = await Promise.all([
+        fs.promises.stat(publicPath).catch(() => null),
+        fs.promises.stat(distPath).catch(() => null),
+        fs.promises.stat(outputPath).catch(() => null)
+      ]);
+      if (publicStat?.isFile())
+        return serveStaticFile(publicPath);
+      if (distStat?.isFile())
+        return serveStaticFile(distPath);
+      if (outputStat?.isFile())
+        return serveStaticFile(outputPath);
+      if (url.pathname.startsWith("/_stx/component/")) {
+        const componentName = decodeURIComponent(url.pathname.slice(16));
+        if (componentName)
+          try {
+            const componentTemplate = `<${componentName} />`, componentOpts = { ...buildConfig, autoShell: !1 }, html = await processDirectives(componentTemplate, {}, path.join(absoluteAppDir, "components", `${componentName}.stx`), componentOpts, new Set);
+            return new Response(html, { headers: { "Content-Type": "text/html" } });
+          } catch (e) {
+            return new Response(`<div class="stx-async-error">${e.message}</div>`, { status: 500, headers: { "Content-Type": "text/html" } });
+          }
+      }
+      if (url.pathname === "/_stx/img") {
+        const { handleImageRequest } = await import("../image-optimization/serve.js"), imgResponse = await handleImageRequest(request, {
+          publicDir: path.join(absoluteAppDir, publicDirName),
+          cacheDir: stateDir(absoluteAppDir, "cache", "img")
+        });
+        if (imgResponse)
+          return imgResponse;
+      }
+      if (customRouter)
+        try {
+          const routerResponse = await customRouter.handleRequest(request);
+          if (routerResponse.status !== 404)
+            return routerResponse;
+        } catch {}
+      if (apiRoutes[url.pathname])
+        try {
+          return await apiRoutes[url.pathname](request);
+        } catch (err) {
+          return new Response(JSON.stringify({ error: err.message }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" }
+          });
+        }
+      const routeMatch = matchRoute(url.pathname, routes);
+      if (routeMatch) {
+        let builtPage = builtPages.get(routeMatch.route.pattern);
+        const isStreamingRoute = streamingRoutes.has(routeMatch.route.pattern);
+        if (routeMatch.route.isDynamic && Object.keys(routeMatch.params).length > 0 || isStreamingRoute) {
+          const rebuilt = await buildPage(routeMatch.route, routeMatch.params);
+          if (rebuilt)
+            builtPage = rebuilt;
+        }
+        if (builtPage) {
+          const responseStatus = builtPage.status ?? 200, pageHeaders = builtPage.headers ?? {}, pageMeta = (routeMatch.route.filePath ? extractPageMetaFromSource(await Bun.file(routeMatch.route.filePath).text().catch(() => "")) : null) ?? {};
+          if (pageMeta.validate) {
+            if (!await pageMeta.validate({ params: routeMatch.params })) {
+              const custom404 = await renderErrorPage(404);
+              if (custom404) {
+                let content = custom404;
+                content = await injectCss(content, absoluteAppDir);
+                if (hotReload)
+                  content = injectHotReload(content, actualHmrPort);
+                return new Response(content, {
+                  status: 404,
+                  headers: { "Content-Type": "text/html" }
+                });
+              }
+              return new Response("Not Found", { status: 404 });
+            }
+          }
+          if (pageMeta.middleware) {
+            const toRoute = createRouteLocation(url.pathname, routeMatch.params, pageMeta, url.search), middlewareContext = createMiddlewareContext(toRoute, null, request, { isServer: !0 }), middlewareResult = await runMiddleware(pageMeta.middleware, middlewareContext);
+            if (middlewareResult.redirect) {
+              const redirectUrl = middlewareResult.redirect.path, statusCode = middlewareResult.redirect.options.redirectCode || 302, headers = new Headers(middlewareResult.responseHeaders);
+              headers.set("Location", redirectUrl);
+              return new Response(null, {
+                status: statusCode,
+                headers
+              });
+            }
+            if (middlewareResult.abort) {
+              const { statusCode, message } = middlewareResult.abort.error;
+              return new Response(`<!DOCTYPE html><html><head><title>Error ${statusCode}</title></head><body><h1>Error ${statusCode}</h1><p>${message}</p></body></html>`, {
+                status: statusCode,
+                headers: { "Content-Type": "text/html" }
+              });
+            }
+            if (Object.keys(middlewareResult.state).length > 0) {
+              const stateScript = `<script>(function(){var s=typeof stx!=='undefined'?stx:{};s._ms=${JSON.stringify(middlewareResult.state)};if(s.setMiddlewareState)s.setMiddlewareState(s._ms);})()</script>`;
+              builtPage.content = builtPage.content.replace("</head>", `${stateScript}</head>`);
+            }
+          }
+          let content = builtPage.content;
+          if (shell && isSpaNavigation(request)) {
+            const layoutMetadata = extractLayoutMetadata(content), shipsRuntime = pageShipsSignalsRuntime(content), titleMatch = content.match(/<title[^>]*>([\s\S]*?)<\/title>/i), pageTitle = titleMatch ? titleMatch[1].trim() : "";
+            if (Object.keys(routeMatch.params).length > 0)
+              content = injectRouteParams(content, routeMatch.params);
+            content = await injectCss(content, absoluteAppDir);
+            const routerContainer = projectConfig?.router?.container || "main";
+            content = extractContainerContent(content, routerContainer);
+            return new Response(content, {
+              status: responseStatus,
+              headers: {
+                "Content-Type": "text/html",
+                "X-STX-Fragment": "true",
+                "X-STX-Layout": layoutMetadata.layout,
+                "X-STX-Layout-Group": layoutMetadata.group,
+                "X-STX-Runtime": shipsRuntime ? "true" : "false",
+                ...pageTitle && { "X-STX-Title": encodeURIComponent(pageTitle) },
+                [BUILD_ID_HEADER]: getBuildId(),
+                ...spaNavVaryHeaders(),
+                "Cache-Control": FRAGMENT_CACHE_CONTROL
+              }
+            });
+          }
+          if (shell)
+            content = composeShellWithPage(shell, content);
+          if (Object.keys(routeMatch.params).length > 0)
+            content = injectRouteParams(content, routeMatch.params);
+          content = await injectCss(content, absoluteAppDir);
+          if (hotReload)
+            content = injectHotReload(content, actualHmrPort);
+          if (options.native) {
+            const nativeSidebarInjection = "<style>[data-stx-sidebar],.stx-sidebar{display:none!important}</style><script>window.__craftNativeSidebar=true;document.documentElement.classList.add('has-native-sidebar')</script>";
+            if (content.includes("<head>"))
+              content = content.replace("<head>", `<head>${nativeSidebarInjection}`);
+            else
+              content = `<head>${nativeSidebarInjection}</head>` + content;
+          }
+          if (options.titlebarHidden) {
+            const tbInjection = "<style>html.stx-titlebar-hidden .stx-traffic-lights-dot{visibility:hidden}</style><script>document.documentElement.classList.add('stx-titlebar-hidden')</script>";
+            if (content.includes("<head>"))
+              content = content.replace("<head>", `<head>${tbInjection}`);
+            else
+              content = `<head>${tbInjection}</head>${content}`;
+          }
+          if (builtPage.boundaries && builtPage.boundaries.length > 0) {
+            const { renderStreamingPage, streamToResponse } = await import("../streaming.js");
+            return streamToResponse(renderStreamingPage(content, builtPage.boundaries, { timeoutMs: 30000 }), {
+              status: responseStatus,
+              headers: {
+                "Cache-Control": "no-store, no-cache, must-revalidate",
+                Pragma: "no-cache",
+                Expires: "0"
+              }
+            });
+          }
+          return new Response(content, {
+            status: responseStatus,
+            headers: {
+              "Content-Type": "text/html",
+              ...spaNavVaryHeaders(),
+              "Cache-Control": "no-store, no-cache, must-revalidate",
+              Pragma: "no-cache",
+              Expires: "0",
+              ...pageHeaders
+            }
+          });
+        }
+      }
+      if (pluginRoutes.length > 0) {
+        const allPluginPatterns = pluginRoutes.map((pr) => pr.route), pluginMatch = matchRoute(url.pathname, allPluginPatterns);
+        if (pluginMatch) {
+          const builtPage = builtPluginPages.get(pluginMatch.route.pattern);
+          if (builtPage) {
+            let content = builtPage.content;
+            if (shell)
+              content = composeShellWithPage(shell, content);
+            if (Object.keys(pluginMatch.params).length > 0)
+              content = injectRouteParams(content, pluginMatch.params);
+            content = await injectCss(content, absoluteAppDir);
+            if (hotReload)
+              content = injectHotReload(content, actualHmrPort);
+            return new Response(content, {
+              status: builtPage.status ?? 200,
+              headers: {
+                "Content-Type": "text/html",
+                "Cache-Control": "no-store, no-cache, must-revalidate",
+                Pragma: "no-cache",
+                Expires: "0"
+              }
+            });
+          }
+        }
+        for (const { prefix: pluginPrefix } of pluginPageDirs)
+          if (pluginPrefix !== "/" && url.pathname.startsWith(pluginPrefix)) {
+            const pluginIndex = builtPluginPages.get(pluginPrefix) || builtPluginPages.get(pluginPrefix + "/");
+            if (pluginIndex) {
+              let content = pluginIndex.content;
+              if (shell)
+                content = composeShellWithPage(shell, content);
+              content = await injectCss(content, absoluteAppDir);
+              if (hotReload)
+                content = injectHotReload(content, actualHmrPort);
+              return new Response(content, {
+                headers: {
+                  "Content-Type": "text/html",
+                  "Cache-Control": "no-store, no-cache, must-revalidate",
+                  Pragma: "no-cache",
+                  Expires: "0"
+                }
+              });
+            }
+          }
+      }
+      const indexPage = builtPages.get("/");
+      if (indexPage) {
+        let content = indexPage.content;
+        content = await injectCss(content, absoluteAppDir);
+        if (hotReload)
+          content = injectHotReload(content, actualHmrPort);
+        if (options.native) {
+          const nativeSidebarInjection = "<style>[data-stx-sidebar],.stx-sidebar{display:none!important}</style><script>window.__craftNativeSidebar=true;document.documentElement.classList.add('has-native-sidebar')</script>";
+          if (content.includes("<head>"))
+            content = content.replace("<head>", `<head>${nativeSidebarInjection}`);
+          else
+            content = `<head>${nativeSidebarInjection}</head>` + content;
+        }
+        return new Response(content, {
+          headers: {
+            "Content-Type": "text/html",
+            "Cache-Control": "no-store, no-cache, must-revalidate",
+            Pragma: "no-cache",
+            Expires: "0"
+          }
+        });
+      }
+      const custom404 = await renderErrorPage(404);
+      if (custom404) {
+        let content = custom404;
+        content = await injectCss(content, absoluteAppDir);
+        if (hotReload)
+          content = injectHotReload(content, actualHmrPort);
+        return new Response(content, {
+          status: 404,
+          headers: { "Content-Type": "text/html" }
+        });
+      }
+      return new Response("Not Found", { status: 404 });
+    },
+    async error(error) {
+      const custom500 = await renderErrorPage(500);
+      if (custom500)
+        return new Response(custom500, {
+          status: 500,
+          headers: { "Content-Type": "text/html" }
+        });
+      return new Response(`<pre>${error}
+${error.stack}</pre>`, {
+        headers: { "Content-Type": "text/html" }
+      });
+    }
+  });
+  console.clear();
+  console.log(`
+${colors.blue}stx${colors.reset}  ${colors.green}${process.env.stx_VERSION || "v0.0.10"}${colors.reset}  ${colors.dim}ready in ${Math.random() * 10 + 5 | 0}.${Math.random() * 90 + 10 | 0} ms${colors.reset}`);
+  console.log(`
+${colors.bright}\u2192  ${colors.cyan}http://localhost:${actualPort}/${colors.reset}`);
+  if (hotReload)
+    console.log(`${colors.dim}   HMR: ws://localhost:${actualHmrPort}${colors.reset}`);
+  console.log(`
+${colors.yellow}Routes:${colors.reset}`);
+  const allRouteStrings = [...formatRoutes(routes, absoluteAppDir)];
+  for (const { route: pluginRoute } of pluginRoutes)
+    allRouteStrings.push(`${pluginRoute.pattern}`);
+  allRouteStrings.forEach((str, i) => {
+    const prefix = i === allRouteStrings.length - 1 ? "\u2514\u2500 " : "\u251C\u2500 ";
+    console.log(`  ${colors.green}${prefix}${colors.reset}${str}`);
+  });
+  console.log(`
+Press ${colors.cyan}h${colors.reset} + ${colors.cyan}Enter${colors.reset} to show shortcuts`);
+  setupKeyboardShortcuts(server.url.toString(), () => {
+    if (hmrServer)
+      stopHmrServer();
+    server.stop();
+  });
+  if (options.native) {
+    let sidebarConfig;
+    const indexPath = path.join(pagesDir, "index.stx");
+    if (fs.existsSync(indexPath)) {
+      const templateContent = await Bun.file(indexPath).text();
+      sidebarConfig = extractSidebarConfig(templateContent);
+    }
+    const appWindow = projectConfig?.app?.window ?? {};
+    await openNativeWindow(actualPort, {
+      title: projectConfig?.app?.head?.title || path.basename(absoluteAppDir) || "stx App",
+      width: appWindow.width,
+      height: appWindow.height,
+      darkMode: appWindow.darkMode,
+      hotReload: appWindow.hotReload,
+      titlebarHidden: appWindow.titlebarHidden ?? options.titlebarHidden === !0,
+      nativeSidebar: !!sidebarConfig,
+      sidebarConfig
+    });
+  }
+  if (watch) {
+    console.log(`${colors.blue}Watching for changes...${colors.reset}`);
+    const isStaticAsset = (filename) => {
+      return filename.startsWith("public/") || filename.startsWith("public\\");
+    }, isTemplateFile = (filename) => {
+      const ext = filename.toLowerCase();
+      return ext.endsWith(".stx") || ext.endsWith(".html") || ext.endsWith(".md");
+    }, watcher = fs.watch(absoluteAppDir, { recursive: !0 }, async (eventType, filename) => {
+      if (!filename || shouldIgnoreFile(filename))
+        return;
+      if (shouldReloadOnChange(filename))
+        if (isStaticAsset(filename)) {
+          console.log(`${colors.cyan}${filename} changed${colors.reset}`);
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        } else if (isTemplateFile(filename)) {
+          console.log(`${colors.yellow}${filename} changed, rebuilding...${colors.reset}`);
+          partialsCache.clear();
+          clearComponentCache();
+          try {
+            const { invalidateFileCache, templateCache } = await import("../caching.js");
+            invalidateFileCache(path.resolve(absoluteAppDir, filename));
+            templateCache.delete(path.resolve(absoluteAppDir, filename));
+          } catch {}
+          if (shellPath && filename) {
+            if (path.resolve(absoluteAppDir, filename) === shellPath || path.basename(shellPath) === filename) {
+              const newShell = await processShell(shellPath, options.stxOptions || {});
+              if (newShell)
+                shell = newShell;
+            }
+          }
+          await buildAllPages();
+          await rebuildCss(absoluteAppDir);
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        } else {
+          console.log(`${colors.yellow}${filename} changed, rebuilding...${colors.reset}`);
+          partialsCache.clear();
+          clearComponentCache();
+          try {
+            const { invalidateFileCache, templateCache } = await import("../caching.js");
+            invalidateFileCache(path.resolve(absoluteAppDir, filename));
+            templateCache.delete(path.resolve(absoluteAppDir, filename));
+          } catch {}
+          await buildAllPages();
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        }
+      else if (isCssOnlyChange(filename)) {
+        console.log(`${colors.cyan}CSS ${filename} changed${colors.reset}`);
+        if (hotReload && hmrServer)
+          hmrServer.updateCss(filename);
+      }
+    });
+    process.on("SIGINT", () => {
+      watcher.close();
+      if (hmrServer)
+        stopHmrServer();
+      server.stop();
+      process.exit(0);
+    });
+  }
+  return !0;
+}