mokup 0.1.0 → 0.2.1

package/dist/vite.cjs

@@ -142,6 +142,18 @@ function toHonoPath(route) {
   });
   return `/${segments.join("/")}`;
 }
+function isValidStatus(status) {
+  return typeof status === "number" && Number.isFinite(status) && status >= 200 && status <= 599;
+}
+function resolveStatus(routeStatus, responseStatus) {
+  if (isValidStatus(routeStatus)) {
+    return routeStatus;
+  }
+  if (isValidStatus(responseStatus)) {
+    return responseStatus;
+  }
+  return 200;
+}
 function applyRouteOverrides(response, route) {
   const headers = new Headers(response.headers);
   const hasHeaders = !!route.headers && Object.keys(route.headers).length > 0;
@@ -150,7 +162,7 @@ function applyRouteOverrides(response, route) {
       headers.set(key, value);
     }
   }
-  const status = route.status ?? response.status;
+  const status = resolveStatus(route.status, response.status);
   if (status === response.status && !hasHeaders) {
     return response;
   }
@@ -336,17 +348,28 @@ function normalizePlaygroundPath(value) {
   const normalized = value.startsWith("/") ? value : `/${value}`;
   return normalized.length > 1 && normalized.endsWith("/") ? normalized.slice(0, -1) : normalized;
 }
-function normalizeBase(base) {
+function normalizeBase$1(base) {
   if (!base || base === "/") {
     return "";
   }
   return base.endsWith("/") ? base.slice(0, -1) : base;
 }
+function resolvePlaygroundRequestPath(base, playgroundPath) {
+  const normalizedBase = normalizeBase$1(base);
+  const normalizedPath = normalizePlaygroundPath(playgroundPath);
+  if (!normalizedBase) {
+    return normalizedPath;
+  }
+  if (normalizedPath.startsWith(normalizedBase)) {
+    return normalizedPath;
+  }
+  return `${normalizedBase}${normalizedPath}`;
+}
 function injectPlaygroundHmr(html, base) {
   if (html.includes("mokup-playground-hmr")) {
     return html;
   }
-  const normalizedBase = normalizeBase(base);
+  const normalizedBase = normalizeBase$1(base);
   const clientPath = `${normalizedBase}/@vite/client`;
   const snippet = [
     '<script type="module" id="mokup-playground-hmr">',
@@ -370,6 +393,29 @@ function injectPlaygroundHmr(html, base) {
   return `${html}
 ${snippet}`;
 }
+function injectPlaygroundSw(html, script) {
+  if (!script) {
+    return html;
+  }
+  if (html.includes("mokup-playground-sw")) {
+    return html;
+  }
+  const snippet = [
+    '<script type="module" id="mokup-playground-sw">',
+    script,
+    "<\/script>"
+  ].join("\n");
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `${snippet}
+</head>`);
+  }
+  if (html.includes("</body>")) {
+    return html.replace("</body>", `${snippet}
+</body>`);
+  }
+  return `${html}
+${snippet}`;
+}
 function isViteDevServer$1(server) {
   return !!server && "ws" in server;
 }
@@ -508,25 +554,31 @@ function createPlaygroundMiddleware(params) {
     if (!params.config.enabled) {
       return next();
     }
+    const server = params.getServer?.();
+    const requestPath = resolvePlaygroundRequestPath(server?.config?.base ?? "/", playgroundPath);
     const requestUrl = req.url ?? "/";
     const url = new URL(requestUrl, "http://mokup.local");
     const pathname = url.pathname;
-    if (!pathname.startsWith(playgroundPath)) {
+    const matchedPath = pathname.startsWith(requestPath) ? requestPath : pathname.startsWith(playgroundPath) ? playgroundPath : null;
+    if (!matchedPath) {
       return next();
     }
-    const subPath = pathname.slice(playgroundPath.length);
+    const subPath = pathname.slice(matchedPath.length);
     if (subPath === "") {
       const suffix = url.search ?? "";
       res.statusCode = 302;
-      res.setHeader("Location", `${playgroundPath}/${suffix}`);
+      res.setHeader("Location", `${matchedPath}/${suffix}`);
       res.end();
       return;
     }
     if (subPath === "" || subPath === "/" || subPath === "/index.html") {
       try {
         const html = await node_fs.promises.readFile(indexPath, "utf8");
-        const server = params.getServer?.();
-        const output = isViteDevServer$1(server) ? injectPlaygroundHmr(html, server.config.base ?? "/") : html;
+        let output = html;
+        if (isViteDevServer$1(server)) {
+          output = injectPlaygroundHmr(output, server.config.base ?? "/");
+          output = injectPlaygroundSw(output, params.getSwScript?.());
+        }
         const contentType = mimeTypes[".html"] ?? "text/html; charset=utf-8";
         sendFile(res, output, contentType);
       } catch (error) {
@@ -537,13 +589,12 @@ function createPlaygroundMiddleware(params) {
       return;
     }
     if (subPath === "/routes") {
-      const server = params.getServer?.();
       const dirs = params.getDirs?.() ?? [];
       const baseRoot = resolveGroupRoot(dirs, server?.config?.root);
       const groups = resolveGroups(dirs, baseRoot);
       const routes = params.getRoutes();
       sendJson(res, {
-        basePath: playgroundPath,
+        basePath: matchedPath,
         count: routes.length,
         groups: groups.map((group) => ({ key: group.key, label: group.label })),
         routes: routes.map((route) => toPlaygroundRoute(route, baseRoot, groups))
@@ -768,12 +819,12 @@ function normalizeMiddlewares(value, source, logger) {
   }
   const list = Array.isArray(value) ? value : [value];
   const middlewares = [];
-  for (const entry of list) {
+  for (const [index, entry] of list.entries()) {
     if (typeof entry !== "function") {
       logger.warn(`Invalid middleware in ${source}`);
       continue;
     }
-    middlewares.push({ handle: entry, source });
+    middlewares.push({ handle: entry, source, index });
   }
   return middlewares;
 }
@@ -996,7 +1047,7 @@ async function scanRoutes(params) {
       continue;
     }
     const rules = await loadRules(fileInfo.file, params.server, params.logger);
-    for (const rule of rules) {
+    for (const [index, rule] of rules.entries()) {
       if (!rule || typeof rule !== "object") {
         continue;
       }
@@ -1025,6 +1076,7 @@ async function scanRoutes(params) {
       if (!resolved) {
         continue;
       }
+      resolved.ruleIndex = index;
       if (config.headers) {
         resolved.headers = { ...config.headers, ...resolved.headers ?? {} };
       }
@@ -1048,6 +1100,330 @@ async function scanRoutes(params) {
   return sortRoutes(routes);
 }
 
+const defaultSwPath = "/mokup-sw.js";
+const defaultSwScope = "/";
+function normalizeSwPath(path) {
+  if (!path) {
+    return defaultSwPath;
+  }
+  return path.startsWith("/") ? path : `/${path}`;
+}
+function normalizeSwScope(scope) {
+  if (!scope) {
+    return defaultSwScope;
+  }
+  return scope.startsWith("/") ? scope : `/${scope}`;
+}
+function normalizeBasePath(value) {
+  if (!value) {
+    return "/";
+  }
+  const normalized = value.startsWith("/") ? value : `/${value}`;
+  if (normalized.length > 1 && normalized.endsWith("/")) {
+    return normalized.slice(0, -1);
+  }
+  return normalized;
+}
+function resolveSwConfigFromEntries(entries, logger) {
+  let path = defaultSwPath;
+  let scope = defaultSwScope;
+  let register = true;
+  let unregister = false;
+  const basePaths = [];
+  let hasPath = false;
+  let hasScope = false;
+  let hasRegister = false;
+  let hasUnregister = false;
+  for (const entry of entries) {
+    const config = entry.sw;
+    if (config?.path) {
+      const next = normalizeSwPath(config.path);
+      if (!hasPath) {
+        path = next;
+        hasPath = true;
+      } else if (path !== next) {
+        logger.warn(`SW path "${next}" ignored; using "${path}".`);
+      }
+    }
+    if (config?.scope) {
+      const next = normalizeSwScope(config.scope);
+      if (!hasScope) {
+        scope = next;
+        hasScope = true;
+      } else if (scope !== next) {
+        logger.warn(`SW scope "${next}" ignored; using "${scope}".`);
+      }
+    }
+    if (typeof config?.register === "boolean") {
+      if (!hasRegister) {
+        register = config.register;
+        hasRegister = true;
+      } else if (register !== config.register) {
+        logger.warn(
+          `SW register="${String(config.register)}" ignored; using "${String(register)}".`
+        );
+      }
+    }
+    if (typeof config?.unregister === "boolean") {
+      if (!hasUnregister) {
+        unregister = config.unregister;
+        hasUnregister = true;
+      } else if (unregister !== config.unregister) {
+        logger.warn(
+          `SW unregister="${String(config.unregister)}" ignored; using "${String(unregister)}".`
+        );
+      }
+    }
+    if (typeof config?.basePath !== "undefined") {
+      const values = Array.isArray(config.basePath) ? config.basePath : [config.basePath];
+      for (const value of values) {
+        basePaths.push(normalizeBasePath(value));
+      }
+      continue;
+    }
+    const normalizedPrefix = normalizePrefix(entry.prefix ?? "");
+    if (normalizedPrefix) {
+      basePaths.push(normalizedPrefix);
+    }
+  }
+  return {
+    path,
+    scope,
+    register,
+    unregister,
+    basePaths: Array.from(new Set(basePaths))
+  };
+}
+function resolveSwConfig(options, logger) {
+  const swEntries = options.filter((entry) => entry.mode === "sw");
+  if (swEntries.length === 0) {
+    return null;
+  }
+  return resolveSwConfigFromEntries(swEntries, logger);
+}
+function resolveSwUnregisterConfig(options, logger) {
+  return resolveSwConfigFromEntries(options, logger);
+}
+function toViteImportPath(file, root) {
+  const absolute = pathe.isAbsolute(file) ? file : pathe.resolve(root, file);
+  const rel = pathe.relative(root, absolute);
+  if (!rel.startsWith("..") && !pathe.isAbsolute(rel)) {
+    return `/${toPosix(rel)}`;
+  }
+  return `/@fs/${toPosix(absolute)}`;
+}
+function shouldModuleize(handler) {
+  if (typeof handler === "function") {
+    return true;
+  }
+  if (typeof Response !== "undefined" && handler instanceof Response) {
+    return true;
+  }
+  return false;
+}
+function toBinaryBody(handler) {
+  if (handler instanceof ArrayBuffer) {
+    return node_buffer.Buffer.from(new Uint8Array(handler)).toString("base64");
+  }
+  if (handler instanceof Uint8Array) {
+    return node_buffer.Buffer.from(handler).toString("base64");
+  }
+  if (node_buffer.Buffer.isBuffer(handler)) {
+    return handler.toString("base64");
+  }
+  return null;
+}
+function buildManifestResponse(route, moduleId) {
+  if (moduleId) {
+    const response = {
+      type: "module",
+      module: moduleId
+    };
+    if (typeof route.ruleIndex === "number") {
+      response.ruleIndex = route.ruleIndex;
+    }
+    return response;
+  }
+  const handler = route.handler;
+  if (typeof handler === "string") {
+    return {
+      type: "text",
+      body: handler
+    };
+  }
+  const binary = toBinaryBody(handler);
+  if (binary) {
+    return {
+      type: "binary",
+      body: binary,
+      encoding: "base64"
+    };
+  }
+  return {
+    type: "json",
+    body: handler
+  };
+}
+function buildSwScript(params) {
+  const { routes, root } = params;
+  const runtimeImportPath = params.runtimeImportPath ?? "mokup/runtime";
+  const basePaths = params.basePaths ?? [];
+  const ruleModules = /* @__PURE__ */ new Map();
+  const middlewareModules = /* @__PURE__ */ new Map();
+  const manifestRoutes = routes.map((route) => {
+    const moduleId = shouldModuleize(route.handler) ? toViteImportPath(route.file, root) : null;
+    if (moduleId) {
+      ruleModules.set(moduleId, moduleId);
+    }
+    const middleware = route.middlewares?.map((entry) => {
+      const modulePath = toViteImportPath(entry.source, root);
+      middlewareModules.set(modulePath, modulePath);
+      return {
+        module: modulePath,
+        ruleIndex: entry.index
+      };
+    });
+    const response = buildManifestResponse(route, moduleId);
+    const manifestRoute = {
+      method: route.method,
+      url: route.template,
+      ...route.tokens ? { tokens: route.tokens } : {},
+      ...route.score ? { score: route.score } : {},
+      ...route.status ? { status: route.status } : {},
+      ...route.headers ? { headers: route.headers } : {},
+      ...route.delay ? { delay: route.delay } : {},
+      ...middleware && middleware.length > 0 ? { middleware } : {},
+      response
+    };
+    return manifestRoute;
+  });
+  const manifest = {
+    version: 1,
+    routes: manifestRoutes
+  };
+  const imports = [
+    `import { createRuntimeApp, handle } from ${JSON.stringify(runtimeImportPath)}`
+  ];
+  const moduleEntries = [];
+  let moduleIndex = 0;
+  for (const id of ruleModules.keys()) {
+    const name = `module${moduleIndex++}`;
+    imports.push(`import * as ${name} from '${id}'`);
+    moduleEntries.push({ id, name, kind: "rule" });
+  }
+  for (const id of middlewareModules.keys()) {
+    const name = `module${moduleIndex++}`;
+    imports.push(`import * as ${name} from '${id}'`);
+    moduleEntries.push({ id, name, kind: "middleware" });
+  }
+  const lines = [];
+  lines.push(...imports, "");
+  lines.push(
+    "const resolveModuleExport = (mod) => mod?.default ?? mod",
+    "",
+    "const toRuntimeRule = (value) => {",
+    "  if (typeof value === 'undefined') {",
+    "    return null",
+    "  }",
+    "  if (typeof value === 'function') {",
+    "    return { response: value }",
+    "  }",
+    "  if (value === null) {",
+    "    return { response: null }",
+    "  }",
+    "  if (typeof value === 'object') {",
+    "    if ('response' in value) {",
+    "      return value",
+    "    }",
+    "    if ('handler' in value) {",
+    "      const handlerRule = value",
+    "      return {",
+    "        response: handlerRule.handler,",
+    "        ...(typeof handlerRule.status === 'number' ? { status: handlerRule.status } : {}),",
+    "        ...(handlerRule.headers ? { headers: handlerRule.headers } : {}),",
+    "        ...(typeof handlerRule.delay === 'number' ? { delay: handlerRule.delay } : {}),",
+    "      }",
+    "    }",
+    "    return { response: value }",
+    "  }",
+    "  return { response: value }",
+    "}",
+    "",
+    "const toRuntimeRules = (value) => {",
+    "  if (typeof value === 'undefined') {",
+    "    return []",
+    "  }",
+    "  if (Array.isArray(value)) {",
+    "    return value.map(toRuntimeRule).filter(Boolean)",
+    "  }",
+    "  const rule = toRuntimeRule(value)",
+    "  return rule ? [rule] : []",
+    "}",
+    ""
+  );
+  lines.push(
+    `const manifest = ${JSON.stringify(manifest, null, 2)}`,
+    ""
+  );
+  if (moduleEntries.length > 0) {
+    lines.push("const moduleMap = {");
+    for (const entry of moduleEntries) {
+      if (entry.kind === "rule") {
+        lines.push(
+          `  ${JSON.stringify(entry.id)}: { default: toRuntimeRules(resolveModuleExport(${entry.name})) },`
+        );
+        continue;
+      }
+      lines.push(
+        `  ${JSON.stringify(entry.id)}: ${entry.name},`
+      );
+    }
+    lines.push("}", "");
+  }
+  const runtimeOptions = moduleEntries.length > 0 ? "{ manifest, moduleMap }" : "{ manifest }";
+  lines.push(
+    `const basePaths = ${JSON.stringify(basePaths)}`,
+    "",
+    "self.addEventListener('install', () => {",
+    "  self.skipWaiting()",
+    "})",
+    "",
+    "self.addEventListener('activate', (event) => {",
+    "  event.waitUntil(self.clients.claim())",
+    "})",
+    "",
+    "const shouldHandle = (request) => {",
+    "  if (!basePaths || basePaths.length === 0) {",
+    "    return true",
+    "  }",
+    "  const pathname = new URL(request.url).pathname",
+    "  return basePaths.some((basePath) => {",
+    "    if (basePath === '/') {",
+    "      return true",
+    "    }",
+    "    return pathname === basePath || pathname.startsWith(basePath + '/')",
+    "  })",
+    "}",
+    "",
+    "const registerHandler = async () => {",
+    `  const app = await createRuntimeApp(${runtimeOptions})`,
+    "  const handler = handle(app)",
+    "  self.addEventListener('fetch', (event) => {",
+    "    if (!shouldHandle(event.request)) {",
+    "      return",
+    "    }",
+    "    handler(event)",
+    "  })",
+    "}",
+    "",
+    "registerHandler().catch((error) => {",
+    "  console.error('[mokup] Failed to build service worker app:', error)",
+    "})",
+    ""
+  );
+  return lines.join("\n");
+}
+
 function buildRouteSignature(routes) {
   return routes.map(
     (route) => [
@@ -1075,9 +1451,61 @@ function resolvePlaygroundInput(list) {
   }
   return void 0;
 }
+function normalizeBase(base) {
+  if (!base) {
+    return "/";
+  }
+  if (base.startsWith(".")) {
+    return "/";
+  }
+  let normalized = base.startsWith("/") ? base : `/${base}`;
+  if (!normalized.endsWith("/")) {
+    normalized = `${normalized}/`;
+  }
+  return normalized;
+}
+function resolveRegisterPath(base, path) {
+  const normalizedBase = normalizeBase(base);
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  if (normalizedPath.startsWith(normalizedBase)) {
+    return normalizedPath;
+  }
+  return `${normalizedBase}${normalizedPath.slice(1)}`;
+}
+function resolveRegisterScope(base, scope) {
+  const normalizedBase = normalizeBase(base);
+  const normalizedScope = scope.startsWith("/") ? scope : `/${scope}`;
+  if (normalizedScope.startsWith(normalizedBase)) {
+    return normalizedScope;
+  }
+  return `${normalizedBase}${normalizedScope.slice(1)}`;
+}
+function resolveSwImportPath(base) {
+  const normalizedBase = normalizeBase(base);
+  return `${normalizedBase}@id/mokup/sw`;
+}
+function resolveSwRuntimeImportPath(base) {
+  const normalizedBase = normalizeBase(base);
+  return `${normalizedBase}@id/mokup/runtime`;
+}
+function hasMiddlewareStack(middlewares) {
+  const candidate = middlewares;
+  return Array.isArray(candidate.stack);
+}
+function addMiddlewareFirst(server, middleware) {
+  if (hasMiddlewareStack(server.middlewares)) {
+    server.middlewares.stack.unshift({ route: "", handle: middleware });
+    return;
+  }
+  server.middlewares.use(middleware);
+}
 function createMokupPlugin(options = {}) {
   let root = node_process.cwd();
+  let base = "/";
+  let command = "serve";
   let routes = [];
+  let serverRoutes = [];
+  let swRoutes = [];
   let app = null;
   let previewWatcher = null;
   let currentServer = null;
@@ -1087,6 +1515,9 @@ function createMokupPlugin(options = {}) {
   const watchEnabled = optionList.every((entry) => entry.watch !== false);
   const playgroundConfig = resolvePlaygroundOptions(resolvePlaygroundInput(optionList));
   const logger = createLogger(logEnabled);
+  const hasSwEntries = optionList.some((entry) => entry.mode === "sw");
+  const swConfig = resolveSwConfig(optionList, logger);
+  const unregisterConfig = resolveSwUnregisterConfig(optionList, logger);
   const resolveAllDirs = () => {
     const dirs = [];
     const seen = /* @__PURE__ */ new Set();
@@ -1101,15 +1532,55 @@ function createMokupPlugin(options = {}) {
     }
     return dirs;
   };
+  const hasSwRoutes = () => !!swConfig && swRoutes.length > 0;
+  const resolveSwRequestPath = (path) => resolveRegisterPath(base, path);
+  const resolveSwRegisterScope = (scope) => resolveRegisterScope(base, scope);
+  const swVirtualId = "virtual:mokup-sw";
+  const resolvedSwVirtualId = `\0${swVirtualId}`;
+  function buildSwLifecycleScript(importPath = "mokup/sw") {
+    const shouldUnregister = unregisterConfig.unregister === true || !hasSwEntries;
+    if (shouldUnregister) {
+      const path2 = resolveSwRequestPath(unregisterConfig.path);
+      const scope2 = resolveSwRegisterScope(unregisterConfig.scope);
+      return [
+        `import { unregisterMokupServiceWorker } from ${JSON.stringify(importPath)}`,
+        "(async () => {",
+        `  await unregisterMokupServiceWorker({ path: ${JSON.stringify(path2)}, scope: ${JSON.stringify(scope2)} })`,
+        "})()"
+      ].join("\n");
+    }
+    if (!swConfig || swConfig.register === false) {
+      return null;
+    }
+    if (!hasSwRoutes()) {
+      return null;
+    }
+    const path = resolveSwRequestPath(swConfig.path);
+    const scope = resolveSwRegisterScope(swConfig.scope);
+    return [
+      `import { registerMokupServiceWorker } from ${JSON.stringify(importPath)}`,
+      "(async () => {",
+      `  const registration = await registerMokupServiceWorker({ path: ${JSON.stringify(path)}, scope: ${JSON.stringify(scope)} })`,
+      "  if (import.meta.hot && registration) {",
+      "    import.meta.hot.on('mokup:routes-changed', () => {",
+      "      registration.update()",
+      "    })",
+      "  }",
+      "})()"
+    ].join("\n");
+  }
   const playgroundMiddleware = createPlaygroundMiddleware({
     getRoutes: () => routes,
     config: playgroundConfig,
     logger,
     getServer: () => currentServer,
-    getDirs: () => resolveAllDirs()
+    getDirs: () => resolveAllDirs(),
+    getSwScript: () => buildSwLifecycleScript(resolveSwImportPath(base))
   });
   const refreshRoutes = async (server) => {
     const collected = [];
+    const collectedServer = [];
+    const collectedSw = [];
     for (const entry of optionList) {
       const dirs = resolveDirs(entry.dir, root);
       const scanParams = {
@@ -1128,9 +1599,19 @@ function createMokupPlugin(options = {}) {
       }
       const scanned = await scanRoutes(scanParams);
       collected.push(...scanned);
+      if (entry.mode === "sw") {
+        collectedSw.push(...scanned);
+        if (entry.sw?.fallback !== false) {
+          collectedServer.push(...scanned);
+        }
+      } else {
+        collectedServer.push(...scanned);
+      }
     }
     routes = sortRoutes(collected);
-    app = createHonoApp(routes);
+    serverRoutes = sortRoutes(collectedServer);
+    swRoutes = sortRoutes(collectedSw);
+    app = serverRoutes.length > 0 ? createHonoApp(serverRoutes) : null;
     const signature = buildRouteSignature(routes);
     if (isViteDevServer(server) && server.ws) {
       if (lastSignature && signature !== lastSignature) {
@@ -1146,14 +1627,99 @@ function createMokupPlugin(options = {}) {
   return {
     name: "mokup:vite",
     enforce: "pre",
+    resolveId(id) {
+      if (id === swVirtualId) {
+        return resolvedSwVirtualId;
+      }
+      return null;
+    },
+    async load(id) {
+      if (id !== resolvedSwVirtualId) {
+        return null;
+      }
+      if (swRoutes.length === 0) {
+        await refreshRoutes();
+      }
+      return buildSwScript({
+        routes: swRoutes,
+        root,
+        basePaths: swConfig?.basePaths ?? []
+      });
+    },
+    async buildStart() {
+      if (!swConfig || command !== "build") {
+        return;
+      }
+      await refreshRoutes();
+      if (!hasSwRoutes()) {
+        return;
+      }
+      const fileName = swConfig.path.startsWith("/") ? swConfig.path.slice(1) : swConfig.path;
+      this.emitFile({
+        type: "chunk",
+        id: swVirtualId,
+        fileName
+      });
+    },
+    async transformIndexHtml(html) {
+      if (swRoutes.length === 0) {
+        await refreshRoutes(currentServer ?? void 0);
+      }
+      const script = buildSwLifecycleScript();
+      if (!script) {
+        return html;
+      }
+      return {
+        html,
+        tags: [
+          {
+            tag: "script",
+            attrs: { type: "module" },
+            children: script,
+            injectTo: "head"
+          }
+        ]
+      };
+    },
     configResolved(config) {
       root = config.root;
+      base = config.base ?? "/";
+      command = config.command;
     },
     async configureServer(server) {
       currentServer = server;
       await refreshRoutes(server);
-      server.middlewares.use(playgroundMiddleware);
-      server.middlewares.use(createMiddleware(() => app, logger));
+      addMiddlewareFirst(server, playgroundMiddleware);
+      const swPath = swConfig ? resolveSwRequestPath(swConfig.path) : null;
+      if (swPath && hasSwRoutes()) {
+        server.middlewares.use(async (req, res, next) => {
+          const requestUrl = req.url ?? "/";
+          const parsed = new URL(requestUrl, "http://mokup.local");
+          if (parsed.pathname !== swPath) {
+            return next();
+          }
+          try {
+            const code = buildSwScript({
+              routes: swRoutes,
+              root,
+              runtimeImportPath: resolveSwRuntimeImportPath(base),
+              basePaths: swConfig?.basePaths ?? []
+            });
+            res.statusCode = 200;
+            res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(code);
+          } catch (error) {
+            res.statusCode = 500;
+            res.setHeader("Content-Type", "text/plain; charset=utf-8");
+            res.end("Failed to generate mokup service worker.");
+            logger.error("SW generation failed:", error);
+          }
+        });
+      }
+      if (serverRoutes.length > 0) {
+        server.middlewares.use(createMiddleware(() => app, logger));
+      }
       if (!watchEnabled) {
         return;
       }
@@ -1179,8 +1745,36 @@ function createMokupPlugin(options = {}) {
     async configurePreviewServer(server) {
       currentServer = server;
       await refreshRoutes(server);
-      server.middlewares.use(playgroundMiddleware);
-      server.middlewares.use(createMiddleware(() => app, logger));
+      addMiddlewareFirst(server, playgroundMiddleware);
+      const swPath = swConfig ? resolveSwRequestPath(swConfig.path) : null;
+      if (swPath && hasSwRoutes()) {
+        server.middlewares.use(async (req, res, next) => {
+          const requestUrl = req.url ?? "/";
+          const parsed = new URL(requestUrl, "http://mokup.local");
+          if (parsed.pathname !== swPath) {
+            return next();
+          }
+          try {
+            const code = buildSwScript({
+              routes: swRoutes,
+              root,
+              basePaths: swConfig?.basePaths ?? []
+            });
+            res.statusCode = 200;
+            res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(code);
+          } catch (error) {
+            res.statusCode = 500;
+            res.setHeader("Content-Type", "text/plain; charset=utf-8");
+            res.end("Failed to generate mokup service worker.");
+            logger.error("SW generation failed:", error);
+          }
+        });
+      }
+      if (serverRoutes.length > 0) {
+        server.middlewares.use(createMiddleware(() => app, logger));
+      }
       if (!watchEnabled) {
         return;
       }