create-nowaki 0.9.1 → 0.11.0

package/index.js

@@ -1,31 +1,202 @@
 #!/usr/bin/env node
-import { cp, mkdir, readdir } from "node:fs/promises";
+// `npm create nowaki` のスキャフォールダ。依存ゼロ（Node 組み込みのみ）。
+// 対話ウィザード（TTY 時）: プロジェクト名・パッケージマネージャ・git・依存インストール。
+// 非対話（CI / `-y` / パイプ）では既定値で黙って生成する。
+//
+// フラグ: -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";
 import { fileURLToPath } from "node:url";
+import { createInterface } from "node:readline/promises";
+import { execFileSync } from "node:child_process";
+import process from "node:process";
+
+const { stdin, stdout, env, argv, platform } = process;
+
+// --- 色（NO_COLOR と非 TTY を尊重）---
+const useColor = !!stdout.isTTY && !env.NO_COLOR;
+const wrap = (code) => (s) => (useColor ? `\x1b[${code}m${s}\x1b[0m` : `${s}`);
+const cyan = wrap("36");
+const dim = wrap("2");
+const bold = wrap("1");
+const green = wrap("32");
+const red = wrap("31");
+const yellow = wrap("33");
+
+// --- 引数 ---
+const args = argv.slice(2);
+// 値をとるフラグ。これらの直後の引数は 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 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() {
+  const ua = env.npm_config_user_agent || "";
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("bun")) return "bun";
+  return "npm";
+}
 
-const name = process.argv[2] ?? "nowaki-app";
+// --- バナー ---
+console.log();
+console.log(`  ${cyan(bold("Nowaki"))} ${dim("野分")}  ${dim("· create a new app")}`);
+console.log();
+
+const rl = interactive ? createInterface({ input: stdin, output: stdout }) : null;
+async function ask(question, def) {
+  if (!rl) return def;
+  const a = (await rl.question(`  ${question} ${dim(`(${def})`)} `)).trim();
+  return a || def;
+}
+async function confirm(question, def = true) {
+  if (!rl) return def;
+  const a = (await rl.question(`  ${question} ${dim(def ? "(Y/n)" : "(y/N)")} `)).trim().toLowerCase();
+  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"));
+name = name.trim() || "nowaki-app";
+// package.json の name は valid な npm 名に正規化（ディレクトリ名は入力のまま）
+const pkgName = name.toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^[._-]+/, "") || "nowaki-app";
 const dest = path.resolve(process.cwd(), name);
-const templateDir = path.join(
-  path.dirname(fileURLToPath(import.meta.url)),
-  "template",
-);
 
-// 既存の空でないディレクトリへの上書きは防ぐ
+// 既存の空でないディレクトリは中止
 try {
   const existing = await readdir(dest);
   if (existing.length > 0) {
-    console.error(`✗ ディレクトリ "${name}" は空ではありません。中止します。`);
+    console.error(`\n  ${red("✗")} "${name}" already exists and is not empty. Aborting.\n`);
+    rl?.close();
     process.exit(1);
   }
 } catch {
-  // 存在しなければOK
+  // 無ければ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";
+const doGit = noGit ? false : await confirm("Initialize a git repository?", false);
+// 依存インストール: 対話なら確認（既定 Yes）。非対話（-y / CI / パイプ）は自動実行しない
+//（驚き防止）。非対話で入れたいときは --install。--no-install は常にスキップ。
+const doInstall = noInstall
+  ? false
+  : forceInstall
+    ? true
+    : interactive
+      ? await confirm(`Install dependencies with ${pm}?`, true)
+      : false;
+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 {
+  await rename(path.join(dest, "_gitignore"), path.join(dest, ".gitignore"));
+} catch {
+  // _gitignore が無ければ素通し
+}
+
+// package.json の name を設定
+try {
+  const pkgPath = path.join(dest, "package.json");
+  const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
+  pkg.name = pkgName;
+  await writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+} catch {
+  // package.json が無ければ素通し
+}
+
+console.log(
+  `\n  ${green("✓")} created ${bold(name)} ${dim(`(${template} template · ${path.relative(process.cwd(), dest) || "."})`)}`,
+);
+
+// git init（任意）
+if (doGit) {
+  try {
+    execFileSync("git", ["init", "-q"], { cwd: dest, stdio: "ignore" });
+    console.log(`  ${green("✓")} initialized a git repository`);
+  } catch {
+    console.log(`  ${yellow("!")} skipped git init (git not found)`);
+  }
+}
+
+// 依存インストール（任意）
+let installed = false;
+if (doInstall) {
+  console.log(`\n  ${dim(`installing dependencies with ${pm}…`)}\n`);
+  try {
+    execFileSync(pm, ["install"], { cwd: dest, stdio: "inherit", shell: platform === "win32" });
+    installed = true;
+    console.log(`\n  ${green("✓")} dependencies installed`);
+  } catch {
+    console.log(`\n  ${red("✗")} \`${pm} install\` failed — run it yourself after \`cd ${name}\`.`);
+  }
+}
 
-console.log(`\n🌀 Nowaki アプリを作成しました: ${name}\n`);
-console.log("次のステップ:");
-console.log(`  cd ${name}`);
-console.log("  pnpm install   # nowaki CLI とランタイムを取得 (Rust 不要)");
-console.log("  pnpm dev       # → http://127.0.0.1:3000\n");
+// --- 次のステップ ---
+const runDev = pm === "npm" || pm === "bun" ? `${pm} run dev` : `${pm} dev`;
+console.log(`\n  ${bold("Next steps:")}`);
+console.log(`    cd ${name}`);
+if (!installed) console.log(`    ${pm} install`);
+console.log(`    ${cyan(runDev)}   ${dim("# → http://localhost:3000")}`);
+console.log(`\n  ${dim("Docs:")} ${cyan("https://nowaki.dev/docs")}\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nowaki",
-  "version": "0.9.1",
+  "version": "0.11.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/templates/_shared/README.md

@@ -0,0 +1,36 @@
+# Nowaki app
+
+A full-stack app built with [Nowaki](https://nowaki.dev) — full-stack like
+Next.js, islands like Astro, on a Rust toolchain. Pages render to HTML; only the
+components under `islands/` ship JavaScript and hydrate.
+
+## Develop
+
+```bash
+npm install
+npm run dev      # http://localhost:3000
+```
+
+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`.
+
+## Structure
+
+```
+routes/      pages + API (file-based). _layout.tsx, _middleware.ts, [slug].tsx, api/*.ts
+islands/     interactive components — the only things that ship JS
+components/  shared server components (no client JS)
+lib/         shared server code
+actions/     "use server" RPC modules (optional)
+```
+
+## Notes
+
+- Write **Preact** — import hooks from `preact/hooks`. (`react` is aliased to
+  `preact/compat`, so many React libraries work.)
+- Use **explicit file extensions** in relative imports: `../islands/Counter.tsx`.
+- A route's `loader` runs only on the server; `action` handles non-GET requests.
+- `AGENTS.md` documents the conventions for AI coding agents.
+
+Docs: <https://nowaki.dev/docs>

package/templates/_shared/_gitignore

@@ -0,0 +1,12 @@
+node_modules/
+dist/
+.cache/
+
+# env (keep secrets out of git; only PUBLIC_* reaches the client)
+.env
+.env.local
+.env.*.local
+
+# logs / os
+*.log
+.DS_Store

package/templates/_shared/nowaki-env.d.ts

@@ -0,0 +1,42 @@
+// Nowaki アンビエント型。CSS / アセット / 仮想モジュールの import をエディタが理解できるように。
+// 編集不要（フレームワークの import 規約を型に伝えるだけ）。
+
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}
+declare module "*.css" {
+  const css: string;
+  export default css;
+}
+
+// アセット import は配信 URL（文字列）になる。
+declare module "*.svg" { const url: string; export default url; }
+declare module "*.png" { const url: string; export default url; }
+declare module "*.jpg" { const url: string; export default url; }
+declare module "*.jpeg" { const url: string; export default url; }
+declare module "*.gif" { const url: string; export default url; }
+declare module "*.webp" { const url: string; export default url; }
+declare module "*.avif" { const url: string; export default url; }
+declare module "*.ico" { const url: string; export default url; }
+declare module "*.woff" { const url: string; export default url; }
+declare module "*.woff2" { const url: string; export default url; }
+declare module "*.ttf" { const url: string; export default url; }
+declare module "*.otf" { const url: string; export default url; }
+declare module "*.mp4" { const url: string; export default url; }
+declare module "*.webm" { const url: string; export default url; }
+declare module "*.mp3" { const url: string; export default url; }
+declare module "*.wav" { const url: string; export default url; }
+declare module "*.pdf" { const url: string; export default url; }
+
+// プラグインの仮想モジュール（nowaki.config の resolveId/load）。任意の export を許す。
+declare module "virtual:*";
+
+// import.meta.env（PUBLIC_* と MODE がビルド時に inline される）。
+interface ImportMetaEnv {
+  readonly MODE: string;
+  readonly [key: `PUBLIC_${string}`]: string | undefined;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

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

@@ -14,6 +14,6 @@
     "preact-render-to-string": "^6.5.13"
   },
   "devDependencies": {
-    "nowaki": "^0.9.0"
+    "nowaki": "^0.10.0"
   }
 }

package/templates/_shared/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": [],
+    "paths": {
+      "react": ["./node_modules/preact/compat"],
+      "react-dom": ["./node_modules/preact/compat"],
+      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"]
+    }
+  },
+  "include": [
+    "nowaki-env.d.ts",
+    "nowaki.config.*",
+    "routes",
+    "islands",
+    "components",
+    "lib",
+    "actions"
+  ]
+}

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,73 @@
+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" });
+
+type Data = Awaited<ReturnType<typeof loader>>;
+
+export default function Home({ data }: { data: Data }) {
+  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>
-  );
-}