bun-plugin-stx 0.2.57 → 0.2.65

package/README.md

@@ -1076,3 +1076,4 @@ The documentation will include:
 - Usage examples
 
 This makes it easy for developers to understand how to use your web components in their HTML.
+

package/dist/serve.d.ts

@@ -11,7 +11,10 @@ export declare interface ServeOptions {
   partialsDir?: string
   publicDir?: string
   quiet?: boolean
+  autoIncrementPort?: boolean | number
   stxModule?: typeof import('@stacksjs/stx') | Promise<typeof import('@stacksjs/stx')>
+  i18n?: import('@stacksjs/stx').ResolvedI18n
+  site?: import('@stacksjs/stx').SiteConfig
   routes?: Record<string, (req: Request) => Response | Promise<Response>>
   onRequest?: (req: Request) =>
     | Response

package/dist/serve.js

@@ -8745,6 +8745,8 @@ async function serve(options) {
       if (pluginLoaded?._pluginPageDirs)
         stxConfig._pluginPageDirs = pluginLoaded._pluginPageDirs;
     }
+    if (stxMod && typeof stxMod.preloadIconCollection === "function")
+      await stxMod.preloadIconCollection("lucide");
   } catch {}
   const componentsDir = options.componentsDir ?? stxConfig.componentsDir ?? defaultStxConfig.componentsDir;
   const layoutsDir = options.layoutsDir ?? stxConfig.layoutsDir ?? defaultStxConfig.layoutsDir;
@@ -9383,385 +9385,482 @@ ${output}`;
     "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
     "Access-Control-Allow-Headers": "Content-Type"
   };
-  const _server = bunServe({
-    port,
-    async fetch(req) {
-      const url = new URL(req.url);
-      let path = url.pathname;
-      if (req.method === "OPTIONS") {
-        return new Response(null, { headers: corsHeaders });
-      }
-      if (options.onRequest) {
-        const customResponse = await options.onRequest(req);
-        if (customResponse)
-          return customResponse;
-      }
-      const route = resolveRouteMiddleware(path);
-      const extraNames = extraProtectedPrefixes.some((p) => path === p || path.startsWith(p.endsWith("/") ? p : `${p}/`)) ? ["auth"] : [];
-      const requested = [...globalMiddlewareNames, ...route.names, ...extraNames];
-      if (requested.length > 0) {
-        const expanded = expandMiddlewareNames(requested);
-        const cookies = parseCookies(req);
-        const ctx = {
-          path,
-          url,
-          params: route.params,
-          cookies,
-          redirect: (to, status = 302) => {
-            const sep = to.includes("?") ? "&" : "?";
-            const next = encodeURIComponent(path + (url.search || ""));
-            return new Response(null, {
-              status,
-              headers: { Location: `${to}${sep}next=${next}` }
-            });
-          }
-        };
-        for (const entry of expanded) {
-          const colon = entry.indexOf(":");
-          const name = colon === -1 ? entry : entry.slice(0, colon);
-          const args = colon === -1 ? [] : entry.slice(colon + 1).split(",");
-          const handler = middlewareRegistry[name];
-          if (!handler) {
-            console.warn(`[stx serve] unknown middleware "${name}" on ${path}`);
-            continue;
-          }
-          const result = await handler(req, ctx, ...args);
-          if (result instanceof Response)
-            return result;
-        }
-      }
-      if (options.routes) {
-        const routeHandler = options.routes[path];
-        if (routeHandler) {
-          return routeHandler(req);
-        }
-      }
-      if (path.startsWith("/_stx/component/")) {
-        const componentName = decodeURIComponent(path.slice("/_stx/component/".length));
-        if (componentName) {
-          try {
-            const { processDirectives, defaultConfig: defaultConfig4 } = await stxModule;
-            const componentTemplate = `<${componentName} />`;
-            const componentOpts = {
-              ...defaultConfig4,
-              ...componentsDir && { componentsDir },
-              ...layoutsDir && { layoutsDir },
-              ...partialsDir && { partialsDir },
-              autoShell: false
-            };
-            const html = await processDirectives(componentTemplate, {}, `${componentsDir}/${componentName}.stx`, componentOpts, new Set);
-            return new Response(html, {
-              headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
-            });
-          } catch (e) {
-            return new Response(`<div class="stx-async-error">${e.message}</div>`, {
-              status: 500,
-              headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
-            });
-          }
-        }
-      }
-      if (path.startsWith("/api/data/") && req.method === "POST") {
-        try {
-          const tableName = path.replace("/api/data/", "").split("/")[0];
-          if (!tableName) {
-            return new Response(JSON.stringify({ error: "Table name required" }), {
-              status: 400,
-              headers: { "Content-Type": "application/json", ...corsHeaders }
-            });
-          }
-          if (!/^[a-zA-Z_]\w*$/.test(tableName)) {
-            return new Response(JSON.stringify({ error: "Invalid table name" }), {
-              status: 400,
-              headers: { "Content-Type": "application/json", ...corsHeaders }
-            });
+  const siteConfig = options.site;
+  const siteStxPromise = siteConfig || options.i18n ? options.stxModule ? Promise.resolve(options.stxModule) : defaultStxModule : null;
+  let i18nConfig = options.i18n ?? null;
+  if (!i18nConfig && siteConfig && siteStxPromise) {
+    try {
+      const { resolveI18n } = await siteStxPromise;
+      i18nConfig = resolveI18n(siteConfig) ?? null;
+    } catch {}
+  }
+  function localeFromPath(pathname) {
+    if (!i18nConfig)
+      return { locale: "en", path: pathname };
+    for (const loc of i18nConfig.locales) {
+      if (pathname === `/${loc}` || pathname === `/${loc}/`)
+        return { locale: loc, path: "/" };
+      if (pathname.startsWith(`/${loc}/`))
+        return { locale: loc, path: pathname.slice(loc.length + 1) };
+    }
+    return { locale: i18nConfig.defaultLocale, path: pathname };
+  }
+  async function applyI18nToResponse(res, locale, normalizedPath) {
+    if (!siteStxPromise)
+      return res;
+    const contentType = res.headers.get("content-type") || "";
+    if (!contentType.includes("text/html"))
+      return res;
+    const stx = await siteStxPromise;
+    let html = await res.text();
+    if (siteConfig && stx.injectThemeBootstrap)
+      html = stx.injectThemeBootstrap(html, siteConfig);
+    if (siteConfig && stx.injectSeo) {
+      const pageMeta = (siteConfig.pages ?? {})[normalizedPath] ?? {};
+      html = stx.injectSeo(html, siteConfig, pageMeta, normalizedPath);
+    }
+    if (i18nConfig && stx.buildLangPickerScript) {
+      const pickerScript = stx.buildLangPickerScript(i18nConfig, locale);
+      html = /<\/body>/i.test(html) ? html.replace(/<\/body>/i, `${pickerScript}
+</body>`) : html + pickerScript;
+    }
+    if (i18nConfig) {
+      const groupMeta = `<meta name="stx-layout-group" content="i18n:${locale}">`;
+      if (/<meta name="stx-layout-group"[^>]*>/i.test(html))
+        html = html.replace(/<meta name="stx-layout-group"[^>]*>/i, groupMeta);
+      else if (/<\/head>/i.test(html))
+        html = html.replace(/<\/head>/i, `${groupMeta}
+</head>`);
+      else
+        html = `${groupMeta}
+${html}`;
+    }
+    if (i18nConfig && locale !== i18nConfig.defaultLocale && siteConfig?.pages) {
+      const knownPaths = new Set(Object.keys(siteConfig.pages));
+      html = html.replace(/<a\b([^>]*?)\bhref="(\/[^"]*)"([^>]*)>/gi, (full, before, href, after) => {
+        if (href.startsWith("//"))
+          return full;
+        if (href === `/${locale}` || href === `/${locale}/` || href.startsWith(`/${locale}/`))
+          return full;
+        const m = href.match(/^(\/[^?#]*)(.*)$/);
+        if (!m)
+          return full;
+        const [, pathOnly, rest] = m;
+        const normalized = pathOnly === "/" ? "/" : pathOnly.replace(/\/$/, "");
+        if (!knownPaths.has(normalized))
+          return full;
+        const localized = normalized === "/" ? `/${locale}/` : `/${locale}${normalized}`;
+        return `<a${before}href="${localized}${rest}"${after}>`;
+      });
+    }
+    if (i18nConfig && stx.applyTranslations)
+      html = stx.applyTranslations(html, i18nConfig, locale);
+    const headers = new Headers(res.headers);
+    headers.delete("content-length");
+    return new Response(html, {
+      status: res.status,
+      statusText: res.statusText,
+      headers
+    });
+  }
+  const portAutoIncrement = options.autoIncrementPort ?? true;
+  const maxPortAttempts = portAutoIncrement === false ? 1 : typeof portAutoIncrement === "number" ? Math.max(1, portAutoIncrement) : 10;
+  let actualPort = port;
+  let _server;
+  let lastServeError;
+  for (let attempt = 0;attempt < maxPortAttempts; attempt++) {
+    try {
+      _server = bunServe({
+        port: actualPort,
+        async fetch(req) {
+          const url = new URL(req.url);
+          let path = url.pathname;
+          let i18nLocale = null;
+          if (i18nConfig && !url.pathname.startsWith("/api/")) {
+            const stripped = localeFromPath(url.pathname);
+            i18nLocale = stripped.locale;
+            if (stripped.path !== url.pathname) {
+              const rewritten = new URL(req.url);
+              rewritten.pathname = stripped.path;
+              req = new Request(rewritten, req);
+              path = stripped.path;
+            }
           }
-          const body = await req.json();
-          const { Database } = await import("bun:sqlite");
-          const dbPath = nodePath.resolve(process19.cwd(), "database/stacks.sqlite");
-          const db = new Database(dbPath);
-          try {
-            const tableInfo = db.query(`PRAGMA table_info("${tableName}")`).all();
-            const validColumns = tableInfo.map((c) => c.name).filter((n) => n !== "id" && n !== "created_at" && n !== "updated_at");
-            const columns = [];
-            const placeholders = [];
-            const values = [];
-            for (const col of validColumns) {
-              if (body[col] !== undefined && body[col] !== "") {
-                columns.push(col);
-                placeholders.push("?");
-                values.push(body[col]);
-              }
+          const _i18nResp = await (async () => {
+            if (req.method === "OPTIONS") {
+              return new Response(null, { headers: corsHeaders });
             }
-            const now = new Date().toISOString();
-            if (tableInfo.some((c) => c.name === "created_at")) {
-              columns.push("created_at");
-              placeholders.push("?");
-              values.push(now);
+            if (options.onRequest) {
+              const customResponse = await options.onRequest(req);
+              if (customResponse)
+                return customResponse;
             }
-            if (tableInfo.some((c) => c.name === "updated_at")) {
-              columns.push("updated_at");
-              placeholders.push("?");
-              values.push(now);
+            const route = resolveRouteMiddleware(path);
+            const extraNames = extraProtectedPrefixes.some((p) => path === p || path.startsWith(p.endsWith("/") ? p : `${p}/`)) ? ["auth"] : [];
+            const requested = [...globalMiddlewareNames, ...route.names, ...extraNames];
+            if (requested.length > 0) {
+              const expanded = expandMiddlewareNames(requested);
+              const cookies = parseCookies(req);
+              const ctx = {
+                path,
+                url,
+                params: route.params,
+                cookies,
+                redirect: (to, status = 302) => {
+                  const sep = to.includes("?") ? "&" : "?";
+                  const next = encodeURIComponent(path + (url.search || ""));
+                  return new Response(null, {
+                    status,
+                    headers: { Location: `${to}${sep}next=${next}` }
+                  });
+                }
+              };
+              for (const entry of expanded) {
+                const colon = entry.indexOf(":");
+                const name = colon === -1 ? entry : entry.slice(0, colon);
+                const args = colon === -1 ? [] : entry.slice(colon + 1).split(",");
+                const handler = middlewareRegistry[name];
+                if (!handler) {
+                  console.warn(`[stx serve] unknown middleware "${name}" on ${path}`);
+                  continue;
+                }
+                const result = await handler(req, ctx, ...args);
+                if (result instanceof Response)
+                  return result;
+              }
             }
-            if (columns.length === 0) {
-              return new Response(JSON.stringify({ error: "No valid fields provided" }), {
-                status: 400,
-                headers: { "Content-Type": "application/json", ...corsHeaders }
-              });
+            if (options.routes) {
+              const routeHandler = options.routes[path];
+              if (routeHandler) {
+                return routeHandler(req);
+              }
             }
-            const query = `INSERT INTO "${tableName}" (${columns.join(", ")}) VALUES (${placeholders.join(", ")})`;
-            const stmt = db.prepare(query);
-            const result = stmt.run(...values);
-            return new Response(JSON.stringify({
-              success: true,
-              id: result.lastInsertRowid,
-              message: "Record created successfully"
-            }), {
-              status: 201,
-              headers: { "Content-Type": "application/json", ...corsHeaders }
-            });
-          } catch (error) {
-            console.error("API Error:", error);
-            return new Response(JSON.stringify({
-              error: error.message || "Failed to create record"
-            }), {
-              status: 500,
-              headers: { "Content-Type": "application/json", ...corsHeaders }
-            });
-          } finally {
-            db.close();
-          }
-        } catch {}
-      }
-      if (path === "/index")
-        path = "/";
-      if (path === "/") {
-        const indexContent = await getRoute("/");
-        if (!indexContent) {
-          const homeContent = await getRoute("/home");
-          if (homeContent) {
-            return new Response(null, {
-              status: 302,
-              headers: {
-                Location: "/home",
-                ...corsHeaders
+            if (path.startsWith("/_stx/component/")) {
+              const componentName = decodeURIComponent(path.slice("/_stx/component/".length));
+              if (componentName) {
+                try {
+                  const { processDirectives, defaultConfig: defaultConfig4 } = await stxModule;
+                  const componentTemplate = `<${componentName} />`;
+                  const componentOpts = {
+                    ...defaultConfig4,
+                    ...componentsDir && { componentsDir },
+                    ...layoutsDir && { layoutsDir },
+                    ...partialsDir && { partialsDir },
+                    autoShell: false
+                  };
+                  const html = await processDirectives(componentTemplate, {}, `${componentsDir}/${componentName}.stx`, componentOpts, new Set);
+                  return new Response(html, {
+                    headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
+                  });
+                } catch (e) {
+                  return new Response(`<div class="stx-async-error">${e.message}</div>`, {
+                    status: 500,
+                    headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
+                  });
+                }
               }
-            });
-          }
-        }
-      }
-      const content = await getRoute(path);
-      if (content) {
-        const isSpaNav = req.headers.get("X-STX-Router") === "true";
-        if (isSpaNav) {
-          const layoutMatch = content.match(/<!-- stx-layout: ([^ ]+) -->/);
-          const pageLayout = layoutMatch ? layoutMatch[1] : "default";
-          const pageLayoutGroup = deriveLayoutGroup(pageLayout);
-          let fragment = content;
-          const headStyles = [];
-          const headMatch = content.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i);
-          if (headMatch) {
-            const headContent = headMatch[1];
-            let styleMatch;
-            const styleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
-            while ((styleMatch = styleRe.exec(headContent)) !== null) {
-              if (styleMatch[0].includes("data-crosswind")) {
-                const cssContent = styleMatch[0].replace(/<style[^>]*>/, "").replace(/<\/style>/, "");
-                const hiddenRule = cssContent.indexOf("[hidden]");
-                if (hiddenRule !== -1) {
-                  const afterPreflight = cssContent.indexOf("}", hiddenRule) + 1;
-                  const utilities = cssContent.slice(afterPreflight).trim();
-                  if (utilities) {
-                    headStyles.push(`<style data-crosswind="fragment">${utilities}</style>`);
+            }
+            if (path.startsWith("/api/data/") && req.method === "POST") {
+              try {
+                const tableName = path.replace("/api/data/", "").split("/")[0];
+                if (!tableName) {
+                  return new Response(JSON.stringify({ error: "Table name required" }), {
+                    status: 400,
+                    headers: { "Content-Type": "application/json", ...corsHeaders }
+                  });
+                }
+                if (!/^[a-zA-Z_]\w*$/.test(tableName)) {
+                  return new Response(JSON.stringify({ error: "Invalid table name" }), {
+                    status: 400,
+                    headers: { "Content-Type": "application/json", ...corsHeaders }
+                  });
+                }
+                const body = await req.json();
+                const { Database } = await import("bun:sqlite");
+                const dbPath = nodePath.resolve(process19.cwd(), "database/stacks.sqlite");
+                const db = new Database(dbPath);
+                try {
+                  const tableInfo = db.query(`PRAGMA table_info("${tableName}")`).all();
+                  const validColumns = tableInfo.map((c) => c.name).filter((n) => n !== "id" && n !== "created_at" && n !== "updated_at");
+                  const columns = [];
+                  const placeholders = [];
+                  const values = [];
+                  for (const col of validColumns) {
+                    if (body[col] !== undefined && body[col] !== "") {
+                      columns.push(col);
+                      placeholders.push("?");
+                      values.push(body[col]);
+                    }
+                  }
+                  const now = new Date().toISOString();
+                  if (tableInfo.some((c) => c.name === "created_at")) {
+                    columns.push("created_at");
+                    placeholders.push("?");
+                    values.push(now);
+                  }
+                  if (tableInfo.some((c) => c.name === "updated_at")) {
+                    columns.push("updated_at");
+                    placeholders.push("?");
+                    values.push(now);
                   }
+                  if (columns.length === 0) {
+                    return new Response(JSON.stringify({ error: "No valid fields provided" }), {
+                      status: 400,
+                      headers: { "Content-Type": "application/json", ...corsHeaders }
+                    });
+                  }
+                  const query = `INSERT INTO "${tableName}" (${columns.join(", ")}) VALUES (${placeholders.join(", ")})`;
+                  const stmt = db.prepare(query);
+                  const result = stmt.run(...values);
+                  return new Response(JSON.stringify({
+                    success: true,
+                    id: result.lastInsertRowid,
+                    message: "Record created successfully"
+                  }), {
+                    status: 201,
+                    headers: { "Content-Type": "application/json", ...corsHeaders }
+                  });
+                } catch (error) {
+                  console.error("API Error:", error);
+                  return new Response(JSON.stringify({
+                    error: error.message || "Failed to create record"
+                  }), {
+                    status: 500,
+                    headers: { "Content-Type": "application/json", ...corsHeaders }
+                  });
+                } finally {
+                  db.close();
                 }
-                continue;
-              }
-              headStyles.push(styleMatch[0]);
+              } catch {}
             }
-          }
-          const mainOpenMatch = fragment.match(/<main\b[^>]*>/i);
-          const mainCloseIdx = fragment.lastIndexOf("</main>");
-          if (mainOpenMatch && mainCloseIdx !== -1) {
-            const bodyMatch = content.match(/<body\b[^>]*>/i);
-            if (bodyMatch) {
-              const bodyStart = bodyMatch.index + bodyMatch[0].length;
-              const mainIdx = mainOpenMatch.index;
-              const beforeMain = content.slice(bodyStart, mainIdx);
-              let bodyStyleMatch;
-              const bodyStyleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
-              while ((bodyStyleMatch = bodyStyleRe.exec(beforeMain)) !== null) {
-                headStyles.push(bodyStyleMatch[0]);
+            if (path === "/index")
+              path = "/";
+            if (path === "/") {
+              const indexContent = await getRoute("/");
+              if (!indexContent) {
+                const homeContent = await getRoute("/home");
+                if (homeContent) {
+                  return new Response(null, {
+                    status: 302,
+                    headers: {
+                      Location: "/home",
+                      ...corsHeaders
+                    }
+                  });
+                }
               }
             }
-            const mainStart = mainOpenMatch.index + mainOpenMatch[0].length;
-            fragment = fragment.slice(mainStart, mainCloseIdx).trim();
-          }
-          const pageSetupScripts = [];
-          const allScriptRe = /<script\b[^>]*data-stx-scoped[^>]*>[\s\S]*?<\/script>/gi;
-          let setupMatch;
-          while ((setupMatch = allScriptRe.exec(content)) !== null) {
-            const scriptContent = setupMatch[0];
-            if (scriptContent.includes("__stx_early_mounts"))
-              continue;
-            if (scriptContent.includes("data-stx-reactive") && scriptContent.includes("window.__stx_reactive"))
-              continue;
-            pageSetupScripts.push(scriptContent);
-          }
-          const bridgeInitRe = /<script\b[^>]*data-stx-reactive[^>]*>(?![\s\S]*window\.__stx_reactive)[\s\S]*?<\/script>/gi;
-          while ((setupMatch = bridgeInitRe.exec(content)) !== null) {
-            pageSetupScripts.push(setupMatch[0]);
-          }
-          fragment = fragment.replace(/<script data-stx-scoped>\s*;?\(function\(\)\s*\{[\s\S]*?<\/script>/g, "");
-          const clearStale = "<script data-stx-page>if(window.stx)window.stx._latestSetup=null;</script>";
-          fragment = `${headStyles.join(`
+            const content = await getRoute(path);
+            if (content) {
+              const isSpaNav = req.headers.get("X-STX-Router") === "true";
+              if (isSpaNav) {
+                const layoutMatch = content.match(/<!-- stx-layout: ([^ ]+) -->/);
+                const pageLayout = layoutMatch ? layoutMatch[1] : "default";
+                const pageLayoutGroup = deriveLayoutGroup(pageLayout);
+                let fragment = content;
+                const headStyles = [];
+                const headMatch = content.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i);
+                if (headMatch) {
+                  const headContent = headMatch[1];
+                  let styleMatch;
+                  const styleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+                  while ((styleMatch = styleRe.exec(headContent)) !== null) {
+                    if (styleMatch[0].includes("data-crosswind")) {
+                      const cssContent = styleMatch[0].replace(/<style[^>]*>/, "").replace(/<\/style>/, "");
+                      const hiddenRule = cssContent.indexOf("[hidden]");
+                      if (hiddenRule !== -1) {
+                        const afterPreflight = cssContent.indexOf("}", hiddenRule) + 1;
+                        const utilities = cssContent.slice(afterPreflight).trim();
+                        if (utilities) {
+                          headStyles.push(`<style data-crosswind="fragment">${utilities}</style>`);
+                        }
+                      }
+                      continue;
+                    }
+                    headStyles.push(styleMatch[0]);
+                  }
+                }
+                const mainOpenMatch = fragment.match(/<main\b[^>]*>/i);
+                const mainCloseIdx = fragment.lastIndexOf("</main>");
+                if (mainOpenMatch && mainCloseIdx !== -1) {
+                  const bodyMatch = content.match(/<body\b[^>]*>/i);
+                  if (bodyMatch) {
+                    const bodyStart = bodyMatch.index + bodyMatch[0].length;
+                    const mainIdx = mainOpenMatch.index;
+                    const beforeMain = content.slice(bodyStart, mainIdx);
+                    let bodyStyleMatch;
+                    const bodyStyleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+                    while ((bodyStyleMatch = bodyStyleRe.exec(beforeMain)) !== null) {
+                      headStyles.push(bodyStyleMatch[0]);
+                    }
+                  }
+                  const mainStart = mainOpenMatch.index + mainOpenMatch[0].length;
+                  fragment = fragment.slice(mainStart, mainCloseIdx).trim();
+                }
+                const pageSetupScripts = [];
+                const allScriptRe = /<script\b[^>]*data-stx-scoped[^>]*>[\s\S]*?<\/script>/gi;
+                let setupMatch;
+                while ((setupMatch = allScriptRe.exec(content)) !== null) {
+                  const scriptContent = setupMatch[0];
+                  if (scriptContent.includes("__stx_early_mounts"))
+                    continue;
+                  if (scriptContent.includes("data-stx-reactive") && scriptContent.includes("window.__stx_reactive"))
+                    continue;
+                  pageSetupScripts.push(scriptContent);
+                }
+                const bridgeInitRe = /<script\b[^>]*data-stx-reactive[^>]*>(?![\s\S]*window\.__stx_reactive)[\s\S]*?<\/script>/gi;
+                while ((setupMatch = bridgeInitRe.exec(content)) !== null) {
+                  pageSetupScripts.push(setupMatch[0]);
+                }
+                fragment = fragment.replace(/<script data-stx-scoped>\s*;?\(function\(\)\s*\{[\s\S]*?<\/script>/g, "");
+                const clearStale = "<script data-stx-page>if(window.stx)window.stx._latestSetup=null;</script>";
+                fragment = `${headStyles.join(`
 `)}
 ${fragment}
 ${clearStale}
 ${pageSetupScripts.join(`
 `)}`;
-          return new Response(fragment, {
-            headers: {
-              "Content-Type": "text/html; charset=utf-8",
-              "X-STX-Fragment": "true",
-              "X-STX-Layout": pageLayout,
-              "X-STX-Layout-Group": pageLayoutGroup,
-              "Cache-Control": "no-cache",
-              ...corsHeaders
-            }
-          });
-        }
-        let cleaned = content;
-        let runtimeCount = 0;
-        cleaned = content.replace(/<script data-stx-scoped>\(function\(\)\{'use strict';var cloakStyle[\s\S]*?<\/script>/g, (match) => {
-          runtimeCount++;
-          return runtimeCount === 1 ? match : "";
-        });
-        return new Response(cleaned, {
-          headers: {
-            "Content-Type": "text/html; charset=utf-8",
-            "Cache-Control": "no-cache",
-            ...corsHeaders
-          }
-        });
-      }
-      const contentWithExt = await getRoute(`${path}.html`);
-      if (contentWithExt) {
-        return new Response(contentWithExt, {
-          headers: {
-            "Content-Type": "text/html; charset=utf-8",
-            "Cache-Control": "no-cache",
-            ...corsHeaders
-          }
-        });
-      }
-      if (path.startsWith("/chunk-") || path.endsWith(".js") || path.endsWith(".css")) {
-        try {
-          const buildFile = Bun.file(`.stx${path}`);
-          if (await buildFile.exists()) {
-            const ext = path.split(".").pop()?.toLowerCase();
-            const contentType = ext === "css" ? "text/css" : ext === "js" ? "application/javascript" : "text/plain";
-            return new Response(buildFile, {
-              headers: {
-                "Content-Type": contentType,
-                "Cache-Control": "no-cache"
-              }
-            });
-          }
-        } catch {}
-      }
-      if (path.startsWith("/assets/") || path.startsWith("/resources/assets/")) {
-        await ensureAssets();
-        const possiblePaths = [
-          path,
-          path.replace(/^\/assets\//, "/resources/assets/"),
-          path.replace(/^\/resources\/assets\//, "/assets/")
-        ];
-        for (const assetPath of possiblePaths) {
-          try {
-            const filePath = `.${assetPath}`;
-            const file = Bun.file(filePath);
-            if (await file.exists()) {
-              const ext = assetPath.split(".").pop()?.toLowerCase();
-              if (ext === "ts") {
-                const transpiler = new Bun.Transpiler({
-                  loader: "ts"
-                });
-                const code = await file.text();
-                const transpiled = transpiler.transformSync(code);
-                return new Response(transpiled, {
+                return new Response(fragment, {
                   headers: {
-                    "Content-Type": "application/javascript",
-                    "Cache-Control": "no-cache"
+                    "Content-Type": "text/html; charset=utf-8",
+                    "X-STX-Fragment": "true",
+                    "X-STX-Layout": pageLayout,
+                    "X-STX-Layout-Group": pageLayoutGroup,
+                    "Cache-Control": "no-cache",
+                    ...corsHeaders
                   }
                 });
               }
-              return new Response(file, {
+              let cleaned = content;
+              let runtimeCount = 0;
+              cleaned = content.replace(/<script data-stx-scoped>\(function\(\)\{'use strict';var cloakStyle[\s\S]*?<\/script>/g, (match) => {
+                runtimeCount++;
+                return runtimeCount === 1 ? match : "";
+              });
+              return new Response(cleaned, {
                 headers: {
-                  "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
-                  "Cache-Control": "public, max-age=31536000"
+                  "Content-Type": "text/html; charset=utf-8",
+                  "Cache-Control": "no-cache",
+                  ...corsHeaders
                 }
               });
             }
-          } catch {
-            continue;
-          }
-        }
-      }
-      if ((req.method === "GET" || req.method === "HEAD") && path !== "/") {
-        const publicRoot = nodePath.resolve(process19.cwd(), publicDir);
-        let safePathname;
-        try {
-          safePathname = decodeURIComponent(path);
-        } catch {
-          safePathname = path;
-        }
-        if (!safePathname.includes("\x00")) {
-          const resolvedPath = nodePath.resolve(publicRoot, `.${safePathname}`);
-          const isInsidePublicRoot = resolvedPath === publicRoot || resolvedPath.startsWith(`${publicRoot}${nodePath.sep}`);
-          if (isInsidePublicRoot) {
-            try {
-              const file = Bun.file(resolvedPath);
-              if (await file.exists()) {
-                const stat4 = await file.stat().catch(() => null);
-                if (stat4 && !stat4.isDirectory()) {
-                  const ext = resolvedPath.split(".").pop()?.toLowerCase();
-                  return new Response(file, {
+            const contentWithExt = await getRoute(`${path}.html`);
+            if (contentWithExt) {
+              return new Response(contentWithExt, {
+                headers: {
+                  "Content-Type": "text/html; charset=utf-8",
+                  "Cache-Control": "no-cache",
+                  ...corsHeaders
+                }
+              });
+            }
+            if (path.startsWith("/chunk-") || path.endsWith(".js") || path.endsWith(".css")) {
+              try {
+                const buildFile = Bun.file(`.stx${path}`);
+                if (await buildFile.exists()) {
+                  const ext = path.split(".").pop()?.toLowerCase();
+                  const contentType = ext === "css" ? "text/css" : ext === "js" ? "application/javascript" : "text/plain";
+                  return new Response(buildFile, {
                     headers: {
-                      "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
-                      "Cache-Control": "public, max-age=3600"
+                      "Content-Type": contentType,
+                      "Cache-Control": "no-cache"
                     }
                   });
                 }
+              } catch {}
+            }
+            if (path.startsWith("/assets/") || path.startsWith("/resources/assets/")) {
+              await ensureAssets();
+              const possiblePaths = [
+                path,
+                path.replace(/^\/assets\//, "/resources/assets/"),
+                path.replace(/^\/resources\/assets\//, "/assets/")
+              ];
+              for (const assetPath of possiblePaths) {
+                try {
+                  const filePath = `.${assetPath}`;
+                  const file = Bun.file(filePath);
+                  if (await file.exists()) {
+                    const ext = assetPath.split(".").pop()?.toLowerCase();
+                    if (ext === "ts") {
+                      const transpiler = new Bun.Transpiler({
+                        loader: "ts"
+                      });
+                      const code = await file.text();
+                      const transpiled = transpiler.transformSync(code);
+                      return new Response(transpiled, {
+                        headers: {
+                          "Content-Type": "application/javascript",
+                          "Cache-Control": "no-cache"
+                        }
+                      });
+                    }
+                    return new Response(file, {
+                      headers: {
+                        "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
+                        "Cache-Control": "public, max-age=31536000"
+                      }
+                    });
+                  }
+                } catch {
+                  continue;
+                }
               }
-            } catch {}
-          }
-        }
-      }
-      if (path === "/favicon.ico") {
-        return new Response(null, { status: 204 });
-      }
-      const files = await discoverFiles();
-      const availableRoutes = [];
-      for (const filePath of files) {
-        let normalizedPath = filePath.replace(/^\.\//, "").replace(/\\/g, "/");
-        for (const pattern of patterns) {
-          const normalizedPattern = pattern.replace(/\\/g, "/").replace(/\/$/, "");
-          if (normalizedPath.startsWith(`${normalizedPattern}/`)) {
-            normalizedPath = normalizedPath.slice(normalizedPattern.length + 1);
-            break;
-          }
-        }
-        let route2 = normalizedPath.replace(/\.(stx|md|html)$/, "");
-        if (route2.startsWith("pages/")) {
-          route2 = route2.slice(6);
-        }
-        availableRoutes.push(`<li><a href="/${route2}">/${route2}</a></li>`);
-      }
-      const routesList = availableRoutes.join(`
+            }
+            if ((req.method === "GET" || req.method === "HEAD") && path !== "/") {
+              const publicRoot = nodePath.resolve(process19.cwd(), publicDir);
+              let safePathname;
+              try {
+                safePathname = decodeURIComponent(path);
+              } catch {
+                safePathname = path;
+              }
+              if (!safePathname.includes("\x00")) {
+                const resolvedPath = nodePath.resolve(publicRoot, `.${safePathname}`);
+                const isInsidePublicRoot = resolvedPath === publicRoot || resolvedPath.startsWith(`${publicRoot}${nodePath.sep}`);
+                if (isInsidePublicRoot) {
+                  try {
+                    const file = Bun.file(resolvedPath);
+                    if (await file.exists()) {
+                      const stat4 = await file.stat().catch(() => null);
+                      if (stat4 && !stat4.isDirectory()) {
+                        const ext = resolvedPath.split(".").pop()?.toLowerCase();
+                        return new Response(file, {
+                          headers: {
+                            "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
+                            "Cache-Control": "public, max-age=3600"
+                          }
+                        });
+                      }
+                    }
+                  } catch {}
+                }
+              }
+            }
+            if (path === "/favicon.ico") {
+              return new Response(null, { status: 204 });
+            }
+            const files = await discoverFiles();
+            const availableRoutes = [];
+            for (const filePath of files) {
+              let normalizedPath = filePath.replace(/^\.\//, "").replace(/\\/g, "/");
+              for (const pattern of patterns) {
+                const normalizedPattern = pattern.replace(/\\/g, "/").replace(/\/$/, "");
+                if (normalizedPath.startsWith(`${normalizedPattern}/`)) {
+                  normalizedPath = normalizedPath.slice(normalizedPattern.length + 1);
+                  break;
+                }
+              }
+              let route2 = normalizedPath.replace(/\.(stx|md|html)$/, "");
+              if (route2.startsWith("pages/")) {
+                route2 = route2.slice(6);
+              }
+              availableRoutes.push(`<li><a href="/${route2}">/${route2}</a></li>`);
+            }
+            const routesList = availableRoutes.join(`
 `);
-      return new Response(`
+            return new Response(`
         <!DOCTYPE html>
         <html>
           <head>
@@ -9789,11 +9888,35 @@ ${pageSetupScripts.join(`
           </body>
         </html>
       `, {
-        status: 404,
-        headers: { "Content-Type": "text/html; charset=utf-8" }
+              status: 404,
+              headers: { "Content-Type": "text/html; charset=utf-8" }
+            });
+          })();
+          return applyI18nToResponse(_i18nResp, i18nLocale ?? (i18nConfig?.defaultLocale ?? "en"), path);
+        }
       });
+      break;
+    } catch (err) {
+      lastServeError = err;
+      const code = err?.code;
+      const message = String(err?.message ?? err ?? "");
+      const portConflict = code === "EADDRINUSE" || /EADDRINUSE/i.test(message) || /port \d+ (?:is |already )?in use/i.test(message) || /Failed to start server\. Is port \d+ in use\?/i.test(message);
+      if (portConflict && attempt < maxPortAttempts - 1) {
+        actualPort += 1;
+        continue;
+      }
+      throw err;
     }
-  });
+  }
+  if (!_server) {
+    const tried = maxPortAttempts === 1 ? `port ${port}` : `ports ${port}..${port + maxPortAttempts - 1}`;
+    console.error(`\x1B[31m[stx]\x1B[0m no free port available (tried ${tried}).`);
+    console.error(`\x1B[2m       set autoIncrementPort to a larger value, or free the port (lsof -nP -i :${port})\x1B[0m`);
+    throw lastServeError ?? new Error(`stx serve: no free port in range ${port}..${port + maxPortAttempts - 1}`);
+  }
+  if (actualPort !== port && !options.quiet) {
+    console.warn(`\x1B[33m[stx]\x1B[0m port ${port} in use \u2014 using \x1B[1m${actualPort}\x1B[0m instead`);
+  }
   if (!options.quiet) {
     const elapsed = (performance.now() - startTime).toFixed(0);
     const routeCount = sourceFiles?.length || 0;
@@ -9801,7 +9924,7 @@ ${pageSetupScripts.join(`
     console.log();
     console.log(`  \x1B[36m\x1B[1mstx\x1B[0m`);
     console.log();
-    console.log(`  \x1B[32m\u279C\x1B[0m  \x1B[1mLocal\x1B[0m:   \x1B[36mhttp://localhost:${port}/\x1B[0m`);
+    console.log(`  \x1B[32m\u279C\x1B[0m  \x1B[1mLocal\x1B[0m:   \x1B[36mhttp://localhost:${actualPort}/\x1B[0m`);
     console.log(`  \x1B[32m\u279C\x1B[0m  \x1B[1mRoutes\x1B[0m:  \x1B[2m${routeCount} files from ${patternsStr}\x1B[0m`);
     console.log();
     console.log(`  \x1B[2mready in ${elapsed}ms\x1B[0m`);
@@ -9817,7 +9940,7 @@ ${pageSetupScripts.join(`
         const cmd = line.trim().toLowerCase();
         if (cmd === "o") {
           const openCmd = process19.platform === "darwin" ? "open" : process19.platform === "win32" ? "start" : "xdg-open";
-          Bun.spawn([openCmd, `http://localhost:${port}/`]);
+          Bun.spawn([openCmd, `http://localhost:${actualPort}/`]);
         } else if (cmd === "q") {
           process19.exit(0);
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bun-plugin-stx",
   "type": "module",
-  "version": "0.2.57",
+  "version": "0.2.65",
   "description": "A Bun plugin that allows for using Laravel Blade-like syntax.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -73,7 +73,7 @@
     "typecheck": "bun tsc --noEmit"
   },
   "dependencies": {
-    "@stacksjs/stx": "0.2.57",
+    "@stacksjs/stx": "0.2.64",
     "stx-router": "0.2.57"
   }
 }