@b9g/shovel 0.2.13 → 0.2.15

package/bin/create.js

@@ -265,31 +265,48 @@ async function createProject(config, projectPath) {
   await mkdir(join(projectPath, "src"), { recursive: true });
   const ext = config.uiFramework === "crank" && config.useJSX ? config.typescript ? "tsx" : "jsx" : config.typescript ? "ts" : "js";
   const isCrank = config.uiFramework === "crank";
-  const entryFile = isCrank ? `src/server.${ext}` : `src/app.${ext}`;
+  const hasClientBundle = config.template === "static-site" || config.template === "full-stack";
+  const entryFile = hasClientBundle ? `src/server.${ext}` : `src/app.${ext}`;
   const startCmd = config.platform === "bun" ? "bun dist/server/supervisor.js" : "node dist/server/supervisor.js";
   const dependencies = {
     "@b9g/router": "^0.2.0",
     "@b9g/shovel": "^0.2.0"
   };
+  if (hasClientBundle) {
+    dependencies["@b9g/assets"] = "^0.2.0";
+  }
   if (isCrank) {
     dependencies["@b9g/crank"] = "^0.7.2";
-    dependencies["@b9g/assets"] = "^0.2.0";
+  }
+  if (config.uiFramework === "htmx") {
+    dependencies["htmx.org"] = "^2.0.0";
+  }
+  if (config.uiFramework === "alpine") {
+    dependencies["alpinejs"] = "^3.14.0";
   }
   const devDependencies = {};
   if (config.typescript) {
     devDependencies["@types/node"] = "^18.0.0";
     devDependencies["typescript"] = "^5.0.0";
   }
-  if (isCrank) {
+  if (hasClientBundle) {
     devDependencies["eslint"] = "^10.0.0";
     devDependencies["@eslint/js"] = "^10.0.0";
+    if (config.typescript) {
+      devDependencies["typescript-eslint"] = "^8.0.0";
+    } else {
+      devDependencies["globals"] = "^16.0.0";
+    }
+    if (isCrank) {
+      devDependencies["eslint-plugin-crank"] = "^0.2.0";
+    }
   }
   const scripts = {
     develop: `shovel develop ${entryFile} --platform ${config.platform}`,
     build: `shovel build ${entryFile} --platform ${config.platform}`,
     start: startCmd
   };
-  if (isCrank) {
+  if (hasClientBundle) {
     scripts.lint = "eslint src/";
   }
   const packageJSON = {
@@ -322,34 +339,61 @@ async function createProject(config, projectPath) {
       esModuleInterop: true,
       strict: true,
       skipLibCheck: true,
+      noEmit: true,
+      allowImportingTsExtensions: true,
       forceConsistentCasingInFileNames: true,
-      lib: ["ES2022", "WebWorker"]
+      lib: ["ES2022", "DOM", "DOM.Iterable", "WebWorker"]
     };
     if (config.uiFramework === "crank" && config.useJSX) {
       compilerOptions.jsx = "react-jsx";
       compilerOptions.jsxImportSource = "@b9g/crank";
     }
     const tsConfig = {
-      compilerOptions: {
-        ...compilerOptions,
-        types: ["@b9g/platform/globals"]
-      },
-      include: ["src/**/*"],
-      exclude: ["node_modules", "dist"]
+      compilerOptions,
+      include: [
+        "src/**/*",
+        "node_modules/@b9g/platform/src/globals.d.ts",
+        "dist/server/shovel.d.ts"
+      ],
+      exclude: []
     };
     await writeFile(
       join(projectPath, "tsconfig.json"),
       JSON.stringify(tsConfig, null, 2)
     );
   }
-  if (isCrank) {
-    const eslintConfig = `import js from "@eslint/js";
-
-export default [
+  if (hasClientBundle) {
+    const crankImport = isCrank ? `import crank from "eslint-plugin-crank";
+` : "";
+    const crankConfig = isCrank ? `
+  { plugins: { crank }, rules: crank.configs.recommended.rules },` : "";
+    let eslintConfig;
+    if (config.typescript) {
+      eslintConfig = `import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+${crankImport}
+export default tseslint.config(
   js.configs.recommended,
-  { ignores: ["dist/"] },
+  tseslint.configs.recommended,
+  { ignores: ["dist/"] },${crankConfig}
+);
+`;
+    } else {
+      let langOpts = "globals: globals.browser";
+      let filesOpt = "";
+      if (isCrank && config.useJSX) {
+        filesOpt = `files: ["**/*.{js,jsx}"], `;
+        langOpts += ", parserOptions: { ecmaFeatures: { jsx: true } }";
+      }
+      eslintConfig = `import js from "@eslint/js";
+import globals from "globals";
+${crankImport}
+export default [
+  { ${filesOpt}...js.configs.recommended, languageOptions: { ${langOpts} } },
+  { ignores: ["dist/"] },${crankConfig}
 ];
 `;
+    }
     await writeFile(join(projectPath, "eslint.config.js"), eslintConfig);
   }
   const readme = generateReadme(config);
@@ -477,44 +521,35 @@ function generateStaticSite(config) {
 function generateStaticSiteVanilla(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `// ${config.name} - Static Site
-// Renders HTML pages server-side
-
-self.addEventListener("fetch", (event) => {
-  event.respondWith(handleRequest(event.request));
-});
-
-async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
-  const url = new URL(request.url);
+  return {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
-  if (url.pathname === "/") {
-    return new Response(renderPage("Home", \`
-      <h1>Welcome to ${config.name}</h1>
-      <p>Edit <code>src/app.${ext}</code> to get started.</p>
-      <button id="counter">Clicked: 0</button>
-      <script>
-        let count = 0;
-        const btn = document.getElementById("counter");
-        btn.addEventListener("click", () => btn.textContent = "Clicked: " + ++count);
-      </script>
-      <p><a href="/about">About</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+const router = new Router();
+router.use(assets());
 
-  if (url.pathname === "/about") {
-    return new Response(renderPage("About", \`
-      <h1>About</h1>
-      <p>This is a static site built with <strong>Shovel</strong>.</p>
-      <p><a href="/">Home</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
+    <button id="counter">Clicked: 0</button>
+    <p><a href="/about">About</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  return new Response("Not Found", { status: 404 });
-}
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a static site built with <strong>Shovel</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
 function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
   return \`<!DOCTYPE html>
@@ -529,56 +564,64 @@ ${css}
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
-`;
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`,
+    [`client.${ext}`]: `const btn = document.getElementById("counter");
+if (btn) {
+  let count = 0;
+  btn.addEventListener("click", () => btn.textContent = "Clicked: " + ++count);
+}
+`
+  };
 }
 function generateStaticSiteHtmx(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `// ${config.name} - Static Site with HTMX
-// Server-rendered HTML with HTMX interactions
-
-self.addEventListener("fetch", (event) => {
-  event.respondWith(handleRequest(event.request));
-});
-
-async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
-  const url = new URL(request.url);
+  const files = {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
-  if (url.pathname === "/") {
-    return new Response(renderPage("Home", \`
-      <h1>Welcome to ${config.name}</h1>
-      <p>Edit <code>src/app.${ext}</code> to get started.</p>
-      <button hx-get="/greeting" hx-target="#result" hx-swap="innerHTML">Get Greeting</button>
-      <div id="result"></div>
-      <p><a href="/about">About</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+const router = new Router();
+router.use(assets());
 
-  if (url.pathname === "/greeting") {
-    const hour = new Date().getHours();
-    const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
-    return new Response(\`<p>\${greeting}! The time is \${new Date().toLocaleTimeString()}.</p>\`, {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
+    <button hx-get="/greeting" hx-target="#result" hx-swap="innerHTML">Get Greeting</button>
+    <div id="result"></div>
+    <p><a href="/about">About</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  if (url.pathname === "/about") {
-    return new Response(renderPage("About", \`
-      <h1>About</h1>
-      <p>This is a static site built with <strong>Shovel</strong> and <strong>HTMX</strong>.</p>
-      <p><a href="/">Home</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+router.route("/greeting").get(() => {
+  const hour = new Date().getHours();
+  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
+  return new Response(\`<p>\${greeting}! The time is \${new Date().toLocaleTimeString()}.</p>\`, {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  return new Response("Not Found", { status: 404 });
-}
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a static site built with <strong>Shovel</strong> and <strong>HTMX</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
 function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
   return \`<!DOCTYPE html>
@@ -587,56 +630,64 @@ function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})$
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>\${title} - ${config.name}</title>
-  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <style>
 ${css}
   </style>
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`,
+    [`client.${ext}`]: `import "htmx.org";
+`
+  };
+  if (t) {
+    files[`env.d.ts`] = `declare module "htmx.org";
 `;
+  }
+  return files;
 }
 function generateStaticSiteAlpine(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `// ${config.name} - Static Site with Alpine.js
-// Server-rendered HTML with Alpine.js interactions
-
-self.addEventListener("fetch", (event) => {
-  event.respondWith(handleRequest(event.request));
-});
-
-async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
-  const url = new URL(request.url);
+  const files = {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
-  if (url.pathname === "/") {
-    return new Response(renderPage("Home", \`
-      <h1>Welcome to ${config.name}</h1>
-      <p>Edit <code>src/app.${ext}</code> to get started.</p>
-      <div x-data="{ count: 0 }">
-        <button @click="count++">Clicked: <span x-text="count"></span></button>
-      </div>
-      <p><a href="/about">About</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+const router = new Router();
+router.use(assets());
 
-  if (url.pathname === "/about") {
-    return new Response(renderPage("About", \`
-      <h1>About</h1>
-      <p>This is a static site built with <strong>Shovel</strong> and <strong>Alpine.js</strong>.</p>
-      <p><a href="/">Home</a></p>
-    \`), {
-      headers: { "Content-Type": "text/html" },
-    });
-  }
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
+    <div x-data="{ count: 0 }">
+      <button @click="count++">Clicked: <span x-text="count"></span></button>
+    </div>
+    <p><a href="/about">About</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  return new Response("Not Found", { status: 404 });
-}
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a static site built with <strong>Shovel</strong> and <strong>Alpine.js</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
 function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
   return \`<!DOCTYPE html>
@@ -645,17 +696,38 @@ function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})$
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>\${title} - ${config.name}</title>
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
   <style>
 ${css}
   </style>
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`,
+    [`client.${ext}`]: `import Alpine from "alpinejs";
+Alpine.start();
+`
+  };
+  if (t) {
+    files[`env.d.ts`] = `declare module "alpinejs" {
+  interface Alpine {
+    start(): void;
+    plugin(plugin: unknown): void;
+    [key: string]: unknown;
+  }
+  const alpine: Alpine;
+  export default alpine;
+}
 `;
+  }
+  return files;
 }
 function generateStaticSiteCrank(config) {
   const t = config.typescript;
@@ -666,7 +738,8 @@ function generateStaticSiteCrank(config) {
 import {Router} from "@b9g/router";
 import {assets} from "@b9g/assets/middleware";
 import {Page, Counter} from "./components";
-import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(assets());
@@ -726,8 +799,7 @@ export function Page({title, children, clientUrl}${t ? ": {title: string, childr
 export function *Counter(${t ? "this: Context" : ""}) {
   let count = 0;
   const handleClick = () => {
-    count++;
-    this.refresh();
+    this.refresh(() => count++);
   };
   for ({} of this) {
     yield <button onclick={handleClick}>Clicked: {count}</button>;
@@ -747,7 +819,8 @@ import {renderer} from "@b9g/crank/html";
 import {Router} from "@b9g/router";
 import {assets} from "@b9g/assets/middleware";
 import {Page, Counter} from "./components";
-import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(assets());
@@ -808,8 +881,7 @@ export function Page({title, children, clientUrl}${t ? ": {title: string, childr
 export function *Counter(${t ? "this: Context" : ""}) {
   let count = 0;
   const handleClick = () => {
-    count++;
-    this.refresh();
+    this.refresh(() => count++);
   };
   for ({} of this) {
     yield jsx\`<button onclick=\${handleClick}>Clicked: \${count}</button>\`;
@@ -838,11 +910,16 @@ function generateFullStack(config) {
 function generateFullStackVanilla(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `import {Router} from "@b9g/router";
+  return {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
 import {logger} from "@b9g/router/middleware";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(logger());
+router.use(assets());
 
 // API routes
 router.route("/api/hello").get(() => {
@@ -861,17 +938,9 @@ router.route("/api/echo").post(async (req) => {
 router.route("/").get(() => {
   return new Response(renderPage("Home", \`
     <h1>Welcome to ${config.name}</h1>
-    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
     <button id="call-api">Call API</button>
     <div id="result"></div>
-    <script>
-      document.getElementById("call-api").addEventListener("click", async () => {
-        const res = await fetch("/api/hello");
-        const data = await res.json();
-        document.getElementById("result").innerHTML =
-          "<p>" + data.message + "</p><p><small>" + data.timestamp + "</small></p>";
-      });
-    </script>
     <ul>
       <li><a href="/about">About</a></li>
       <li><a href="/api/hello">API: /api/hello</a></li>
@@ -904,6 +973,7 @@ ${css}
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
@@ -911,16 +981,35 @@ ${css}
 self.addEventListener("fetch", (event) => {
   event.respondWith(router.handle(event.request));
 });
-`;
+`,
+    [`client.${ext}`]: `const callBtn = document.getElementById("call-api");
+if (callBtn) {
+  callBtn.addEventListener("click", async () => {
+    const res = await fetch("/api/hello");
+    const data = await res.json();
+    const result = document.getElementById("result");
+    if (result) {
+      result.innerHTML =
+        \`<p>\${data.message}</p><p><small>\${data.timestamp}</small></p>\`;
+    }
+  });
+}
+`
+  };
 }
 function generateFullStackHtmx(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `import {Router} from "@b9g/router";
+  const files = {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
 import {logger} from "@b9g/router/middleware";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(logger());
+router.use(assets());
 
 // API routes \u2014 return HTML fragments when HTMX requests, JSON otherwise
 router.route("/api/hello").get((req) => {
@@ -946,7 +1035,7 @@ router.route("/api/echo").post(async (req) => {
 router.route("/").get(() => {
   return new Response(renderPage("Home", \`
     <h1>Welcome to ${config.name}</h1>
-    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
     <button hx-get="/api/hello" hx-target="#result" hx-swap="innerHTML">Call API</button>
     <div id="result"></div>
     <ul>
@@ -975,13 +1064,13 @@ function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})$
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>\${title} - ${config.name}</title>
-  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <style>
 ${css}
   </style>
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
@@ -989,16 +1078,29 @@ ${css}
 self.addEventListener("fetch", (event) => {
   event.respondWith(router.handle(event.request));
 });
+`,
+    [`client.${ext}`]: `import "htmx.org";
+`
+  };
+  if (t) {
+    files[`env.d.ts`] = `declare module "htmx.org";
 `;
+  }
+  return files;
 }
 function generateFullStackAlpine(config) {
   const ext = config.typescript ? "ts" : "js";
   const t = config.typescript;
-  return `import {Router} from "@b9g/router";
+  const files = {
+    [`server.${ext}`]: `import {Router} from "@b9g/router";
 import {logger} from "@b9g/router/middleware";
+import {assets} from "@b9g/assets/middleware";
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(logger());
+router.use(assets());
 
 // API routes
 router.route("/api/hello").get(() => {
@@ -1017,7 +1119,7 @@ router.route("/api/echo").post(async (req) => {
 router.route("/").get(() => {
   return new Response(renderPage("Home", \`
     <h1>Welcome to ${config.name}</h1>
-    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <p>Edit <code>src/server.${ext}</code> to get started.</p>
     <div x-data="{ result: null }">
       <button @click="fetch('/api/hello').then(r => r.json()).then(d => result = d)">Call API</button>
       <div id="result" x-show="result">
@@ -1051,13 +1153,13 @@ function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})$
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>\${title} - ${config.name}</title>
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
   <style>
 ${css}
   </style>
 </head>
 <body>
   <main>\${content}</main>
+  <script src="\${clientUrl}" type="module"></script>
 </body>
 </html>\`;
 }
@@ -1065,7 +1167,24 @@ ${css}
 self.addEventListener("fetch", (event) => {
   event.respondWith(router.handle(event.request));
 });
+`,
+    [`client.${ext}`]: `import Alpine from "alpinejs";
+Alpine.start();
+`
+  };
+  if (t) {
+    files[`env.d.ts`] = `declare module "alpinejs" {
+  interface Alpine {
+    start(): void;
+    plugin(plugin: unknown): void;
+    [key: string]: unknown;
+  }
+  const alpine: Alpine;
+  export default alpine;
+}
 `;
+  }
+  return files;
 }
 function generateFullStackCrank(config) {
   const t = config.typescript;
@@ -1077,7 +1196,8 @@ import {Router} from "@b9g/router";
 import {logger} from "@b9g/router/middleware";
 import {assets} from "@b9g/assets/middleware";
 import {Page, Counter} from "./components";
-import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(logger());
@@ -1155,8 +1275,7 @@ export function Page({title, children, clientUrl}${t ? ": {title: string, childr
 export function *Counter(${t ? "this: Context" : ""}) {
   let count = 0;
   const handleClick = () => {
-    count++;
-    this.refresh();
+    this.refresh(() => count++);
   };
   for ({} of this) {
     yield <button onclick={handleClick}>Clicked: {count}</button>;
@@ -1177,7 +1296,8 @@ import {Router} from "@b9g/router";
 import {logger} from "@b9g/router/middleware";
 import {assets} from "@b9g/assets/middleware";
 import {Page, Counter} from "./components";
-import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
+${t ? `// @ts-expect-error \u2014 asset URL resolved by Shovel build system
+` : ""}import clientUrl from "./client.${ext}" with {assetBase: "/assets/"};
 
 const router = new Router();
 router.use(logger());
@@ -1256,8 +1376,7 @@ export function Page({title, children, clientUrl}${t ? ": {title: string, childr
 export function *Counter(${t ? "this: Context" : ""}) {
   let count = 0;
   const handleClick = () => {
-    count++;
-    this.refresh();
+    this.refresh(() => count++);
   };
   for ({} of this) {
     yield jsx\`<button onclick=\${handleClick}>Clicked: \${count}</button>\`;
@@ -1286,6 +1405,7 @@ function generateReadme(config) {
   };
   const ext = config.uiFramework === "crank" && config.useJSX ? config.typescript ? "tsx" : "jsx" : config.typescript ? "ts" : "js";
   const isCrank = config.uiFramework === "crank";
+  const hasClientBundle = config.template === "static-site" || config.template === "full-stack";
   let projectTree;
   if (isCrank) {
     projectTree = `${config.name}/
@@ -1295,6 +1415,14 @@ function generateReadme(config) {
 \u2502   \u2514\u2500\u2500 client.${ext}       # Client-side hydration
 \u251C\u2500\u2500 eslint.config.js
 \u251C\u2500\u2500 package.json
+${config.typescript ? "\u251C\u2500\u2500 tsconfig.json\n" : ""}\u2514\u2500\u2500 README.md`;
+  } else if (hasClientBundle) {
+    projectTree = `${config.name}/
+\u251C\u2500\u2500 src/
+\u2502   \u251C\u2500\u2500 server.${ext}   # Application entry point
+\u2502   \u2514\u2500\u2500 client.${ext}   # Client-side code
+\u251C\u2500\u2500 eslint.config.js
+\u251C\u2500\u2500 package.json
 ${config.typescript ? "\u251C\u2500\u2500 tsconfig.json\n" : ""}\u2514\u2500\u2500 README.md`;
   } else {
     projectTree = `${config.name}/
@@ -1320,7 +1448,7 @@ Open http://localhost:7777
 
 - \`npm run develop\` - Start development server
 - \`npm run build\` - Build for production
-- \`npm start\` - Run production build${isCrank ? "\n- `npm run lint` - Lint source files" : ""}
+- \`npm start\` - Run production build${hasClientBundle ? "\n- `npm run lint` - Lint source files" : ""}
 
 ## Project Structure
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b9g/shovel",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "ServiceWorker-first universal deployment platform. Write ServiceWorker apps once, deploy anywhere (Node/Bun/Cloudflare). Registry-based multi-app orchestration.",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,7 @@
     "@b9g/filesystem": "^0.2.0",
     "@b9g/http-errors": "^0.2.1",
     "@b9g/node-webworker": "^0.2.1",
-    "@b9g/platform": "^0.1.17",
+    "@b9g/platform": "^0.1.18",
     "@b9g/platform-bun": "^0.1.16",
     "@b9g/platform-cloudflare": "^0.1.15",
     "@b9g/platform-node": "^0.1.17",