hono-svelte 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.2
+
+- `hono-svelte init` now scaffolds a complete runnable app (works with
+  `npx`, `bunx` and `pnpm dlx` — writes text files only, no install/network).
+  Minimal flavor (default): `package.json`, `tsconfig.json`, `.gitignore`,
+  `vite.config.ts` (with `pages({ dts: true })`), two pages (`index` zero-JS,
+  `hello` with `data`), `src/routes/index.ts`, `src/styles.css`.
+  `init --full` adds auth (cookie session), dashboard with nested layout,
+  and typed RPC (`hc<AppType>`) — `/auth` → login → `/dashboard`.
+  Generated scripts (`dev`/`build`/`typecheck`/`start`) run under npm and bun.
+  `InitFlavor` type exported.
+
 ## 0.4.1
 
 - Fix `hono-svelte init` refusing every file on Windows: `isSafeAppPath()`

package/README.md

@@ -193,7 +193,20 @@ app.onError(errorHandler()); // renders `500.svelte` with status 500
 ## CLI
 
 ```sh
-npx hono-svelte init                  # scaffold src/pages, vite.config.ts, env.d.ts
+# Start a new app (works with npx, bunx or pnpm dlx — no install needed):
+bunx hono-svelte init                 # minimal: 2 pages + routes + configs
+bunx hono-svelte init --full          # + auth, dashboard w/ layout, typed RPC
+
+cd my-app && bun install && bun run dev   # or: npm install && npm run dev
+```
+
+`init` scaffolds a complete runnable app: `package.json`, `tsconfig.json`,
+`vite.config.ts` (with `pages({ dts: true })`), `src/pages/` and
+`src/routes/`. The `--full` flavor adds cookie-session auth, a dashboard with
+nested layout, and a typed API (`hc<AppType>`) — open `/auth`, sign in, explore
+`/dashboard`. Generated scripts run under npm and bun.
+
+```sh
 npx hono-svelte doctor                # check dist, link and vite config
 npx hono-svelte doctor --app=./my-app # check another app directory
 ```

package/dist/cli.js

@@ -4,7 +4,7 @@
 import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { doctorChecks, checkAppLink, initFiles, isSafeAppPath } from "./scaffold.js";
+import { doctorChecks, checkAppLink, initFiles, isSafeAppPath, } from "./scaffold.js";
 const args = process.argv.slice(2);
 const command = args[0];
 function flagValue(name) {
@@ -12,9 +12,14 @@ function flagValue(name) {
     const hit = args.find((a) => a.startsWith(pref));
     return hit ? hit.slice(pref.length) : undefined;
 }
+function hasFlag(name) {
+    return args.includes(`--${name}`);
+}
 const appRoot = flagValue("app") ?? process.cwd();
+const flavor = hasFlag("full") ? "full" : "minimal";
 function init() {
-    for (const file of initFiles()) {
+    const files = initFiles(flavor);
+    for (const file of files) {
         const dest = join(appRoot, file.path);
         if (!isSafeAppPath(appRoot, dest)) {
             console.error(`[hono-svelte] refusing to write outside ${appRoot}: ${file.path}`);
@@ -29,6 +34,16 @@ function init() {
         writeFileSync(dest, file.content);
         console.log(`[hono-svelte] wrote ${file.path}`);
     }
+    console.log(`[hono-svelte] done (${flavor}). Next:`);
+    if (flavor === "minimal") {
+        console.log(`  1. npm install   (or: bun install)`);
+        console.log(`  2. npm run dev   (or: bun run dev)`);
+        console.log(`  Tip: --full scaffolds auth + dashboard + layout + typed RPC.`);
+    }
+    else {
+        console.log(`  1. npm install   (or: bun install)`);
+        console.log(`  2. npm run dev   (or: bun run dev)   →  /auth → /dashboard`);
+    }
 }
 function packageRootForCli() {
     return join(dirname(fileURLToPath(import.meta.url)), "..");
@@ -54,6 +69,7 @@ if (command === "init")
 else if (command === "doctor")
     doctor();
 else {
-    console.log("Usage: hono-svelte <init|doctor> [--app=<dir>]");
+    console.log("Usage: hono-svelte <init|doctor> [--app=<dir>] [--full]");
+    console.log("  init [--full]   scaffold a runnable app (minimal by default)");
     process.exitCode = 1;
 }

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export type { AssetsResolver, ManifestAssetsOptions, ViteManifest, ViteManifestC
 export { notFoundHandler, errorHandler } from "./handlers.js";
 export type { ErrorPageOptions, ServerErrorHandlerOptions } from "./handlers.js";
 export { initFiles, doctorChecks, checkAppLink, versionsMatch, isSafeAppPath } from "./scaffold.js";
-export type { DoctorIssue, DoctorOptions, InitFile } from "./scaffold.js";
+export type { DoctorIssue, DoctorOptions, InitFile, InitFlavor } from "./scaffold.js";
 export type SsrPageLoader = () => Promise<{
     default: unknown;
 }>;

package/dist/scaffold.d.ts

@@ -3,7 +3,8 @@ export type InitFile = {
     content: string;
     skipIfExists: boolean;
 };
-export declare function initFiles(): InitFile[];
+export type InitFlavor = "minimal" | "full";
+export declare function initFiles(flavor?: InitFlavor): InitFile[];
 export type DoctorIssue = {
     /** Machine-readable code, e.g. "missing-dist". */
     code: string;

package/dist/scaffold.js

@@ -2,16 +2,19 @@
 //
 // The package exposes pure helpers (`initFiles`, `doctorChecks`) so they can
 // be unit-tested; the thin CLI wrapper lives in `src/cli.ts` (compiled to
-// `dist/cli.js`, invoked via the `hono-svelte-doctor` bin).
+// `dist/cli.js`, invoked via the `hono-svelte` bin).
+//
+// Runtime note: `init` writes plain text files only — no install, no network.
+// It works identically under `npx` (npm), `bunx` (bun) and `pnpm dlx`.
+// The generated app is runtime-agnostic too: `bun run dev`, `bun run build`
+// and `bun run start` work because every script shells out to `vite` / `node`
+// (both runnable from bun).
 import { existsSync } from "node:fs";
 import { isAbsolute, join, resolve } from "node:path";
-const ENV_DTS = `import type { RenderProps } from "hono-svelte";
-
-declare module "hono" {
-  interface ContextRenderer {
-    (entryName: string, props?: RenderProps): Response | Promise<Response>;
-  }
-}
+const ENV_DTS = `// Entry names are generated by \`pages({ dts: true })\` into
+// \`src/hono-svelte-entries.d.ts\` (see vite.config.ts). \`c.render()\` only
+// accepts those names — a typo fails the typecheck.
+ /// <reference path="./hono-svelte-entries.d.ts" />
 `;
 const VITE_CONFIG = `import build from "@hono/vite-build/node";
 import devServer from "@hono/vite-dev-server";
@@ -20,7 +23,7 @@ import { pages } from "hono-svelte/vite";
 import { resolve } from "node:path";
 import { defineConfig } from "vite";
 
-const appPages = pages();
+const appPages = pages({ dts: true });
 
 export default defineConfig(({ command, mode }) => {
   if (mode === "client") {
@@ -50,16 +53,298 @@ export default defineConfig(({ command, mode }) => {
   };
 });
 `;
+const PACKAGE_JSON = `{
+  "name": "my-hono-svelte-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --mode client",
+    "build:server": "vite build --mode production",
+    "typecheck": "tsc --noEmit",
+    "start": "node ./dist/index.js"
+  },
+  "dependencies": {
+    "hono": "^4",
+    "hono-svelte": "latest",
+    "svelte": "^5"
+  },
+  "devDependencies": {
+    "@hono/vite-build": "^1",
+    "@hono/vite-dev-server": "^0",
+    "@sveltejs/vite-plugin-svelte": "^7",
+    "@types/node": "^22",
+    "typescript": "^5",
+    "vite": "^8"
+  }
+}
+`;
+const TSCONFIG_JSON = `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src/**/*", "vite.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}
+`;
+const GITIGNORE_TEXT = `node_modules
+dist
+`;
 const INDEX_SVELTE = `<main>
   <h1>Welcome</h1>
-  <a href="/dashboard">Sign in</a>
+  <p><a href="/hello">Say hello</a></p>
 </main>
 `;
-export function initFiles() {
-    return [
+const HELLO_SVELTE = `<script lang="ts">
+  let { name }: { name?: string } = $props();
+</script>
+
+<main>
+  <h1>Hello, {name ?? "stranger"}!</h1>
+  <p><a href="/">Back home</a></p>
+</main>
+`;
+const STYLES_CSS = `body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+}
+
+main {
+  max-width: 640px;
+  margin: 4rem auto;
+  padding: 0 1rem;
+}
+`;
+const FULL_LIB_AUTH = `import type { Context } from "hono";
+import { getCookie } from "hono/cookie";
+
+export const SESSION_COOKIE = "hono_demo_session";
+export const SESSION_VALUE = "authenticated";
+
+export function hasSession(c: Context): boolean {
+  return getCookie(c, SESSION_COOKIE) === SESSION_VALUE;
+}
+`;
+const FULL_MW_AUTH = `import { createMiddleware } from "hono/factory";
+import { hasSession } from "../lib/auth";
+
+export function requireSession() {
+  return createMiddleware(async (c, next) => {
+    if (!hasSession(c)) return c.redirect("/auth");
+    return next();
+  });
+}
+`;
+const FULL_PAGE_AUTH = `<main>
+  <h1>Sign in</h1>
+  <form action="/auth/login" method="post">
+    <div>
+      <label for="email">Email</label>
+      <input id="email" name="email" type="email" required />
+    </div>
+    <div>
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" required />
+    </div>
+    <button type="submit">Sign in</button>
+  </form>
+  <p>Any email + password works.</p>
+  <p><a href="/">Back home</a></p>
+</main>
+`;
+const FULL_PAGE_DASH_INDEX = `<script lang="ts">
+  import { hc } from "hono/client";
+  import type { AppType } from "../../routes";
+
+  const client = hc<AppType>("/");
+
+  let count = $state(0);
+  let time = $state<string | null>(null);
+
+  async function fetchTime() {
+    const res = await client.api.clock.$get();
+    if (res.ok) time = (await res.json()).now;
+  }
+</script>
+
+<div>
+  <p>Count: {count}</p>
+  <button type="button" onclick={() => (count += 1)}>Increment</button>
+  <p>
+    <button type="button" onclick={fetchTime}>Fetch time</button>
+  </p>
+</div>
+`;
+const FULL_PAGE_DASH_PAGE1 = `<section>
+  <h2>Page 1 content</h2>
+  <p>Same layout, zero JS.</p>
+  <p><a href="/dashboard">Back to overview</a></p>
+</section>
+`;
+const FULL_PAGE_DASH_LAYOUT = `<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type Props = { title?: string; description?: string; children: Snippet };
+  let { title = "Dashboard", description = "", children }: Props = $props();
+</script>
+
+<main>
+  <header>
+    <h1>{title}</h1>
+  </header>
+  {@render children()}
+</main>
+`;
+const MIN_ROUTES_INDEX = `import { Hono } from "hono";
+import { shell } from "hono-svelte";
+
+const app = new Hono().use("/*", shell({ title: "My App" }));
+
+app.get("/", (c) => c.render("index"));
+app.get("/hello", (c) => c.render("hello", { data: { name: "Ada" } }));
+
+export default app;
+`;
+export function initFiles(flavor = "minimal") {
+    const base = [
+        { path: "package.json", content: PACKAGE_JSON, skipIfExists: true },
+        { path: "tsconfig.json", content: TSCONFIG_JSON, skipIfExists: true },
+        { path: ".gitignore", content: GITIGNORE_TEXT, skipIfExists: true },
         { path: "src/env.d.ts", content: ENV_DTS, skipIfExists: true },
         { path: "vite.config.ts", content: VITE_CONFIG, skipIfExists: true },
+        { path: "src/styles.css", content: STYLES_CSS, skipIfExists: true },
         { path: "src/pages/index.svelte", content: INDEX_SVELTE, skipIfExists: true },
+        { path: "src/pages/hello.svelte", content: HELLO_SVELTE, skipIfExists: true },
+        { path: "src/routes/index.ts", content: MIN_ROUTES_INDEX, skipIfExists: true },
+    ];
+    if (flavor === "minimal")
+        return base;
+    return [...base, ...fullFlavorFiles()];
+}
+function fullFlavorFiles() {
+    const dashboardRoutes = `import { Hono } from "hono";
+import { requireSession } from "../middleware/auth";
+
+const app = new Hono()
+  .get("/", requireSession(), (c) =>
+    c.render("dashboard/index", {
+      data: {
+        title: "Your space is ready.",
+        description: "Counter + clock via typed RPC.",
+      },
+    }),
+  )
+  .get("/page1", requireSession(), (c) =>
+    c.render("dashboard/page1", {
+      data: { title: "Page 1", description: "A second page, same layout." },
+    }),
+  );
+
+export default app;
+`;
+    const siteRoutes = `import { Hono } from "hono";
+import { hasSession } from "../lib/auth";
+
+const app = new Hono().get("/", async (c) => {
+  if (hasSession(c)) return c.redirect("/dashboard");
+  return c.render("index");
+});
+
+export default app;
+`;
+    const authRoutes = `import { Hono } from "hono";
+import { setCookie } from "hono/cookie";
+import { hasSession, SESSION_COOKIE, SESSION_VALUE } from "../lib/auth";
+
+const app = new Hono();
+
+app.get("/", (c) => {
+  if (hasSession(c)) return c.redirect("/dashboard");
+  return c.render("auth");
+});
+
+app.post("/login", async (c) => {
+  const body = await c.req.parseBody();
+  const email = String(body.email ?? "");
+  const password = String(body.password ?? "");
+  if (!email.includes("@") || !password) return c.redirect("/auth?error=invalid");
+  setCookie(c, SESSION_COOKIE, SESSION_VALUE, {
+    maxAge: 3600,
+    path: "/",
+    httpOnly: true,
+    sameSite: "Lax",
+  });
+  return c.redirect("/dashboard");
+});
+
+app.post("/logout", (c) => {
+  setCookie(c, SESSION_COOKIE, "", { maxAge: 0, path: "/" });
+  return c.redirect("/");
+});
+
+export default app;
+`;
+    const apiRoutes = `import { Hono } from "hono";
+import { hasSession } from "../lib/auth";
+
+const app = new Hono().get("/clock", (c) => {
+  if (!hasSession(c)) return c.json({ error: "Not authenticated" }, 401);
+  return c.json({ now: new Date().toISOString() });
+});
+
+export default app;
+`;
+    const appRoutes = `import { Hono } from "hono";
+import { shell } from "hono-svelte";
+import api from "./api";
+import auth from "./auth";
+import dashboard from "./dashboard";
+import site from "./site";
+
+const app = new Hono();
+
+const routes = app
+  .use("/*", shell({ title: "My App", lang: "en" }))
+  .route("/", site)
+  .route("/auth", auth)
+  .route("/dashboard", dashboard)
+  .route("/api", api);
+
+export type AppType = typeof routes;
+
+export default app;
+`;
+    return [
+        { path: "src/lib/auth.ts", content: FULL_LIB_AUTH, skipIfExists: true },
+        { path: "src/middleware/auth.ts", content: FULL_MW_AUTH, skipIfExists: true },
+        { path: "src/routes/index.ts", content: appRoutes, skipIfExists: false },
+        { path: "src/routes/site.ts", content: siteRoutes, skipIfExists: true },
+        { path: "src/routes/auth.ts", content: authRoutes, skipIfExists: true },
+        { path: "src/routes/dashboard.ts", content: dashboardRoutes, skipIfExists: true },
+        { path: "src/routes/api.ts", content: apiRoutes, skipIfExists: true },
+        { path: "src/pages/auth.svelte", content: FULL_PAGE_AUTH, skipIfExists: true },
+        {
+            path: "src/pages/dashboard/index.svelte",
+            content: FULL_PAGE_DASH_INDEX,
+            skipIfExists: true,
+        },
+        {
+            path: "src/pages/dashboard/page1.svelte",
+            content: FULL_PAGE_DASH_PAGE1,
+            skipIfExists: true,
+        },
+        {
+            path: "src/pages/dashboard/layout.svelte",
+            content: FULL_PAGE_DASH_LAYOUT,
+            skipIfExists: true,
+        },
     ];
 }
 export function versionsMatch(_linkedVersion, _appWants) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-svelte",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Server-side shell + multi-entry Svelte pages for Hono apps",
   "type": "module",
   "bin": {