create-nowaki 0.10.0 → 0.12.0

package/index.js

@@ -3,8 +3,8 @@
 // 対話ウィザード（TTY 時）: プロジェクト名・パッケージマネージャ・git・依存インストール。
 // 非対話（CI / `-y` / パイプ）では既定値で黙って生成する。
 //
-// フラグ: -y/--yes（質問を飛ばす）, --install（非対話でも入れる）, --no-install,
-//         --no-git, --pm <npm|pnpm|yarn|bun>
+// フラグ: -t/--template <basics|minimal>, -y/--yes（質問を飛ばす）,
+//         --install（非対話でも入れる）, --no-install, --no-git, --pm <npm|pnpm|yarn|bun>
 
 import { cp, mkdir, readdir, readFile, writeFile, rename } from "node:fs/promises";
 import path from "node:path";
@@ -27,19 +27,35 @@ const yellow = wrap("33");
 
 // --- 引数 ---
 const args = argv.slice(2);
-const flags = new Set(args.filter((a) => a.startsWith("-")));
-const positionals = args.filter((a) => !a.startsWith("-"));
-const pmFlag = (() => {
-  const i = args.indexOf("--pm");
+// 値をとるフラグ。これらの直後の引数は positional ではない。
+const VALUE_FLAGS = new Set(["--pm", "--template", "-t"]);
+const flagAt = (...names) => {
+  const i = args.findIndex((a) => names.includes(a));
   return i >= 0 ? args[i + 1] : null;
-})();
+};
+const flags = new Set(args.filter((a) => a.startsWith("-")));
+const positionals = [];
+for (let i = 0; i < args.length; i++) {
+  if (args[i].startsWith("-")) {
+    if (VALUE_FLAGS.has(args[i])) i++; // フラグの値を飛ばす
+    continue;
+  }
+  positionals.push(args[i]);
+}
+const pmFlag = flagAt("--pm");
+const templateFlag = flagAt("--template", "-t");
 const yes = flags.has("-y") || flags.has("--yes");
 const noInstall = flags.has("--no-install");
 const forceInstall = flags.has("--install");
 const noGit = flags.has("--no-git");
 const interactive = !!stdin.isTTY && !!stdout.isTTY && !yes;
 
-const templateDir = path.join(path.dirname(fileURLToPath(import.meta.url)), "template");
+const templatesDir = path.join(path.dirname(fileURLToPath(import.meta.url)), "templates");
+// 利用可能なテンプレート（templates/<name>、_shared は共通設定）。
+const TEMPLATES = [
+  { value: "basics", hint: "starter with an interactive island" },
+  { value: "minimal", hint: "a single page, zero islands" },
+];
 
 // --- パッケージマネージャ検出（`npm create` の user-agent から）---
 function detectPM() {
@@ -67,6 +83,20 @@ async function confirm(question, def = true) {
   if (!a) return def;
   return a === "y" || a === "yes";
 }
+// 番号 or 名前で選ぶ簡易メニュー（依存なし）。
+async function select(question, options, def) {
+  if (!rl) return def;
+  console.log(`  ${question}`);
+  options.forEach((o, i) => {
+    const d = o.value === def ? dim(" (default)") : "";
+    console.log(`    ${dim(`${i + 1})`)} ${bold(o.value)}${d}  ${dim(o.hint ?? "")}`);
+  });
+  const a = (await rl.question(`  ${dim(`(${def})`)} › `)).trim().toLowerCase();
+  if (!a) return def;
+  const byNum = options[Number.parseInt(a, 10) - 1];
+  if (byNum) return byNum.value;
+  return options.some((o) => o.value === a) ? a : def;
+}
 
 // --- 質問 ---
 let name = positionals[0] || (await ask("Project name?", interactive ? "my-app" : "nowaki-app"));
@@ -87,6 +117,17 @@ try {
   // 無ければOK
 }
 
+// テンプレート選択（-t/--template or 対話メニュー、既定 basics）。
+let template = templateFlag || (interactive ? await select("Template?", TEMPLATES, "basics") : "basics");
+template = String(template).toLowerCase();
+if (!TEMPLATES.some((t) => t.value === template)) {
+  console.error(
+    `\n  ${red("✗")} unknown template "${template}" (choose: ${TEMPLATES.map((t) => t.value).join(", ")}).\n`,
+  );
+  rl?.close();
+  process.exit(1);
+}
+
 let pm = pmFlag || detectPM();
 if (interactive && !pmFlag) pm = (await ask("Package manager?", pm)).trim() || pm;
 if (!["npm", "pnpm", "yarn", "bun"].includes(pm)) pm = "npm";
@@ -103,8 +144,10 @@ const doInstall = noInstall
 rl?.close();
 
 // --- 生成 ---
+// 共通設定（_shared）→ 選択テンプレートの順に重ねる。
 await mkdir(dest, { recursive: true });
-await cp(templateDir, dest, { recursive: true });
+await cp(path.join(templatesDir, "_shared"), dest, { recursive: true });
+await cp(path.join(templatesDir, template), dest, { recursive: true });
 
 // npm は公開時に .gitignore を除外するので、テンプレートでは _gitignore で持ち、ここで戻す。
 try {
@@ -123,7 +166,9 @@ try {
   // package.json が無ければ素通し
 }
 
-console.log(`\n  ${green("✓")} created ${bold(name)} ${dim(`(${path.relative(process.cwd(), dest) || "."})`)}`);
+console.log(
+  `\n  ${green("✓")} created ${bold(name)} ${dim(`(${template} template · ${path.relative(process.cwd(), dest) || "."})`)}`,
+);
 
 // git init（任意）
 if (doGit) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nowaki",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Scaffold a new Nowaki app",
   "license": "MIT",
   "author": "VorEdge <dev@voredge.com>",
@@ -24,7 +24,7 @@
   },
   "files": [
     "index.js",
-    "template"
+    "templates"
   ],
   "engines": {
     "node": ">=22"

package/{template → templates/_shared}/AGENTS.md

@@ -12,6 +12,7 @@ npm run dev        # nowaki dev   — dev server with hot reload (http://localho
 npm run build      # nowaki build — production build (dist/client + dist/server)
 npm run start      # nowaki start — serve the production build
 npm run prerender  # nowaki prerender — static export
+npx nowaki upgrade # update nowaki (CLI) + @nowaki-dev/runtime to latest
 ```
 
 ## Project layout
@@ -38,16 +39,23 @@ nowaki.config.mjs   plugins (optional)
    `onClick`/hooks in route or `components/` files.
 3. **Use explicit file extensions in relative imports**:
    `import Counter from "../islands/Counter.tsx"` (not `"../islands/Counter"`).
-4. **Routes** are components with an optional server-only `loader` and `action`:
+4. **Routes** are components with an optional server-only `loader` and `action`.
+   Optional types come from `@nowaki-dev/runtime` — `PageProps<typeof loader>`
+   infers the page's `data`, `LoaderContext` types `params`/cookies/headers:
    ```tsx
    // routes/blog/[slug].tsx
-   export const loader = async ({ params }) => ({ post: await db.post(params.slug) }); // server-only
-   export async function action(ctx) {            // runs on non-GET requests
+   import type { LoaderContext, PageProps } from "@nowaki-dev/runtime";
+   export const loader = async ({ params }: LoaderContext) => ({ post: await db.post(params.slug) }); // server-only
+   export async function action(ctx: LoaderContext) {  // runs on non-GET requests
      const form = await ctx.formData();
      return ctx.redirect("/blog");                 // Post/Redirect/Get
    }
-   export default function Post({ data }) { return <article><h1>{data.post.title}</h1></article>; }
+   export default function Post({ data }: PageProps<typeof loader>) { return <article><h1>{data.post.title}</h1></article>; }
    ```
+   A catch-all segment `routes/files/[...path].tsx` matches `/files/a/b/c`;
+   `params.path` is the array `["a","b","c"]`. Add `export const revalidate = 60`
+   (seconds) to a route for ISR: the HTML is cached and regenerated in the
+   background when stale (don't put per-user data on an ISR page).
 5. **API routes** are `routes/api/*.ts` with per-method exports; return a value
    (JSON-encoded) or a `Response`:
    ```ts
@@ -69,7 +77,7 @@ nowaki.config.mjs   plugins (optional)
    ```ts
    // actions/todos.ts
    "use server";
-   import { getContext } from "@nowaki-dev/runtime/server/functions.mjs";
+   import { getContext } from "@nowaki-dev/runtime";
    export async function addTodo(text: string) { /* runs on the server */ }
    ```
    Call it from an island like a normal async function:
@@ -77,6 +85,12 @@ nowaki.config.mjs   plugins (optional)
 8. **Jetstream islands** (server-reactive, zero client JS) — give an island
    `export const live = { state, on }`; buttons use `data-live="handler"` instead
    of `onClick`. State lives on the server; the server pushes HTML patches.
+9. **Loading / error UI** (client navigation) — `routes/loading.tsx` renders
+   while a navigation is in flight; `routes/error.tsx` (props `{ error, reset }`,
+   type `ErrorPageProps`) renders if it fails. Both nest by directory. In
+   `error.tsx`, mark the message element `data-nowaki-error` and the retry button
+   `data-nowaki-reset`. Visited pages are kept in a ~30s Router Cache, so
+   back/forward is instant. These are server components, not islands.
 
 ## Don't
 

package/{template → templates/_shared}/README.md

@@ -15,6 +15,18 @@ Other scripts: `npm run build`, `npm run start`, `npm run prerender`.
 Pass `--host` to expose dev on your LAN, `--open` to open the browser:
 `npm run dev -- --host --open`.
 
+## Update
+
+```bash
+npx nowaki upgrade        # bumps nowaki (CLI) and @nowaki-dev/runtime to latest
+```
+
+`nowaki upgrade` detects your package manager and updates both packages,
+rewriting the `package.json` ranges. (A plain `npm update` won't cross a
+`0.x` minor, so prefer `nowaki upgrade` — or install `@latest` by hand.)
+Pin a version with `--to`, e.g. `npx nowaki upgrade --to 0.11.0`. Pre-1.0,
+check the release notes before upgrading; minors can include breaking changes.
+
 ## Structure
 
 ```

package/{template → templates/_shared}/package.json

@@ -9,11 +9,11 @@
     "prerender": "nowaki prerender"
   },
   "dependencies": {
-    "@nowaki-dev/runtime": "^0.9.0",
+    "@nowaki-dev/runtime": "^0.10.0",
     "preact": "^10.25.4",
     "preact-render-to-string": "^6.5.13"
   },
   "devDependencies": {
-    "nowaki": "^0.10.0"
+    "nowaki": "^0.11.0"
   }
 }

package/templates/basics/islands/Counter.tsx

@@ -0,0 +1,17 @@
+import { useState } from "preact/hooks";
+
+// クライアントでハイドレートする唯一のコンポーネント（島）。スタイルは routes/index.tsx の <style> に。
+export default function Counter({ start = 0 }: { start?: number }) {
+  const [count, setCount] = useState(start);
+  return (
+    <div class="counter">
+      <button class="counter__btn" type="button" aria-label="decrement" onClick={() => setCount((c) => c - 1)}>
+        −
+      </button>
+      <strong class="counter__value">{count}</strong>
+      <button class="counter__btn" type="button" aria-label="increment" onClick={() => setCount((c) => c + 1)}>
+        +
+      </button>
+    </div>
+  );
+}

package/templates/basics/routes/index.tsx

@@ -0,0 +1,72 @@
+import type { PageProps } from "@nowaki-dev/runtime";
+import Counter from "../islands/Counter.tsx";
+
+const CSS = `
+:root{--ink:#10151c;--muted:#56616f;--line:#e7e9ee;--bg:#fbfcfd;--cyan:#0e7c86;--cyan-soft:#e9f4f5}
+*{box-sizing:border-box}
+body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(70% 55% at 50% -8%, #eaf5f6 0%, transparent 70%)}
+.wrap{max-width:46rem;margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 1.5rem}
+.brand{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:800;letter-spacing:-0.03em;font-size:1.15rem}
+.brand small{font-weight:500;color:var(--muted);font-size:.8rem}
+.badge{display:inline-block;margin-top:2.2rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-soft);border:1px solid #cfe7e9;border-radius:999px;padding:.25rem .7rem}
+h1{font-size:clamp(2.1rem,1.3rem + 3vw,3rem);letter-spacing:-0.035em;line-height:1.05;margin:1rem 0 0}
+.lead{color:var(--muted);font-size:1.15rem;margin:.9rem 0 0;max-width:34rem}
+.card{margin-top:2.2rem;border:1px solid var(--line);border-radius:16px;background:#fff;padding:1.4rem 1.6rem;box-shadow:0 1px 2px rgba(16,21,28,.04),0 14px 34px -20px rgba(16,21,28,.22)}
+.card__label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
+.counter{margin-top:.9rem;display:inline-flex;align-items:center;gap:1rem}
+.counter__btn{width:2.4rem;height:2.4rem;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s,background .15s}
+.counter__btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
+.counter__value{font-size:1.5rem;font-variant-numeric:tabular-nums;min-width:2.6rem;text-align:center}
+.note{margin:.9rem 0 0;color:var(--muted);font-size:.92rem}
+.grid{margin-top:2.4rem;display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
+.tile{border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;background:#fff}
+.tile code{font:.85rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan)}
+.tile span{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem}
+.foot{margin-top:2.6rem;color:var(--muted);font-size:.92rem}
+a{color:var(--cyan);text-decoration:none;font-weight:500}
+a:hover{text-decoration:underline}
+@media(max-width:520px){.grid{grid-template-columns:1fr}}
+`;
+
+export const title = "Nowaki app";
+export const head = `<style>${CSS}</style>`;
+
+export const loader = async () => ({ greeting: "Welcome to Nowaki" });
+
+export default function Home({ data }: PageProps<typeof loader>) {
+  return (
+    <main class="wrap">
+      <div class="brand">
+        Nowaki <small>野分</small>
+      </div>
+
+      <span class="badge">basics template</span>
+      <h1>{data.greeting} 🌀</h1>
+      <p class="lead">
+        Full-stack, yet zero JavaScript by default. The counter below is the only{" "}
+        <strong>island</strong> that hydrates on the client.
+      </p>
+
+      <div class="card">
+        <div class="card__label">island · the only JS on this page</div>
+        <Counter start={0} />
+        <p class="note">Everything else is server-rendered HTML.</p>
+      </div>
+
+      <div class="grid">
+        <div class="tile">
+          <code>routes/index.tsx</code>
+          <span>This page. Edit it to get started.</span>
+        </div>
+        <div class="tile">
+          <code>islands/Counter.tsx</code>
+          <span>The interactive island that hydrates.</span>
+        </div>
+      </div>
+
+      <p class="foot">
+        Read the docs → <a href="https://nowaki.dev/docs">nowaki.dev/docs</a>
+      </p>
+    </main>
+  );
+}

package/templates/minimal/routes/index.tsx

@@ -0,0 +1,42 @@
+const CSS = `
+:root{--ink:#10151c;--muted:#56616f;--line:#e7e9ee;--bg:#fbfcfd;--cyan:#0e7c86;--cyan-soft:#e9f4f5}
+*{box-sizing:border-box}
+body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(70% 55% at 50% -8%, #eaf5f6 0%, transparent 70%)}
+.wrap{max-width:42rem;margin:0 auto;padding:clamp(4rem,10vw,8rem) 1.5rem}
+.brand{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:800;letter-spacing:-0.03em;font-size:1.15rem}
+.brand small{font-weight:500;color:var(--muted);font-size:.8rem}
+.badge{display:inline-block;margin-top:2.2rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-soft);border:1px solid #cfe7e9;border-radius:999px;padding:.25rem .7rem}
+h1{font-size:clamp(2.1rem,1.3rem + 3vw,3rem);letter-spacing:-0.035em;line-height:1.05;margin:1rem 0 0}
+.lead{color:var(--muted);font-size:1.15rem;margin:.9rem 0 0;max-width:32rem}
+p code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan);background:#eef2f3;padding:.1em .4em;border-radius:5px}
+.foot{margin-top:2.6rem;color:var(--muted);font-size:.92rem}
+a{color:var(--cyan);text-decoration:none;font-weight:500}
+a:hover{text-decoration:underline}
+`;
+
+export const title = "Nowaki";
+export const head = `<style>${CSS}</style>`;
+
+export default function Home() {
+  return (
+    <main class="wrap">
+      <div class="brand">
+        Nowaki <small>野分</small>
+      </div>
+
+      <span class="badge">minimal template</span>
+      <h1>Hello, Nowaki 🌀</h1>
+      <p class="lead">
+        This page is server-rendered HTML and ships <strong>zero JavaScript</strong>.
+      </p>
+      <p style="color:var(--muted);margin-top:1rem">
+        Edit <code>routes/index.tsx</code> to get started. Add interactive components under{" "}
+        <code>islands/</code> when you need them.
+      </p>
+
+      <p class="foot">
+        Read the docs → <a href="https://nowaki.dev/docs">nowaki.dev/docs</a>
+      </p>
+    </main>
+  );
+}

package/template/islands/Counter.tsx

@@ -1,12 +0,0 @@
-import { useState } from "preact/hooks";
-
-export default function Counter({ start = 0 }: { start?: number }) {
-  const [count, setCount] = useState(start);
-  return (
-    <div style="border:1px solid #ccc;padding:1rem;border-radius:8px;display:inline-flex;align-items:center;gap:1rem">
-      <button onClick={() => setCount((c) => c - 1)}>-</button>
-      <strong>{count}</strong>
-      <button onClick={() => setCount((c) => c + 1)}>+</button>
-    </div>
-  );
-}

package/template/routes/index.tsx

@@ -1,19 +0,0 @@
-import Counter from "../islands/Counter.tsx";
-
-export const title = "Nowaki App";
-
-export const loader = async () => {
-  return { message: "Nowaki へようこそ 🌀" };
-};
-
-type Data = Awaited<ReturnType<typeof loader>>;
-
-export default function Home({ data }: { data: Data }) {
-  return (
-    <main style="font-family:sans-serif;max-width:640px;margin:4rem auto">
-      <h1>{data.message}</h1>
-      <p>このカウンターだけがクライアントでハイドレートされる島です。</p>
-      <Counter start={0} />
-    </main>
-  );
-}