create-nowaki 0.9.0 → 0.10.0

package/index.js

@@ -1,31 +1,157 @@
 #!/usr/bin/env node
-import { cp, mkdir, readdir } from "node:fs/promises";
+// `npm create nowaki` のスキャフォールダ。依存ゼロ（Node 組み込みのみ）。
+// 対話ウィザード（TTY 時）: プロジェクト名・パッケージマネージャ・git・依存インストール。
+// 非対話（CI / `-y` / パイプ）では既定値で黙って生成する。
+//
+// フラグ: -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);
+const flags = new Set(args.filter((a) => a.startsWith("-")));
+const positionals = args.filter((a) => !a.startsWith("-"));
+const pmFlag = (() => {
+  const i = args.indexOf("--pm");
+  return i >= 0 ? args[i + 1] : null;
+})();
+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");
+
+// --- パッケージマネージャ検出（`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";
+}
+
+// --- 質問 ---
+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
 }
 
+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();
+
+// --- 生成 ---
 await mkdir(dest, { recursive: true });
 await cp(templateDir, dest, { recursive: true });
 
-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");
+// 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(`(${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}\`.`);
+  }
+}
+
+// --- 次のステップ ---
+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,9 +1,9 @@
 {
   "name": "create-nowaki",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Scaffold a new Nowaki app",
   "license": "MIT",
-  "author": "Voredge <dev@voredge.com>",
+  "author": "VorEdge <dev@voredge.com>",
   "homepage": "https://nowaki.dev",
   "repository": {
     "type": "git",

package/template/AGENTS.md

@@ -0,0 +1,88 @@
+# AGENTS.md — building this Nowaki app
+
+Guidance for AI coding agents (Claude Code, Codex, Gemini, Cursor, Copilot, Grok,
+Kimi, …) working in this app. Nowaki is a full-stack framework with a Rust
+toolchain: pages render to HTML on the server, and only the components under
+`islands/` ship JavaScript and hydrate. Full docs: <https://nowaki.dev/docs>.
+
+## Commands
+
+```bash
+npm run dev        # nowaki dev   — dev server with hot reload (http://localhost:3000)
+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
+```
+
+## Project layout
+
+```
+routes/      file-based routes (pages + API). _layout.tsx, _middleware.ts,
+             _404.tsx, _500.tsx, [slug].tsx, api/*.ts
+islands/     interactive components — THE ONLY things that ship JS and hydrate
+components/  shared server components (no client JS)
+lib/         shared server code
+actions/     "use server" RPC modules (optional)
+nowaki.config.mjs   plugins (optional)
+```
+
+## Rules — follow these when generating code
+
+1. **Preact, not React.** Import hooks from `preact/hooks`
+   (`import { useState } from "preact/hooks"`). `react`, `react-dom`, and
+   `react/jsx-runtime` are aliased to `preact/compat`, so many React libraries
+   work, but write Preact.
+2. **Interactivity lives in `islands/`.** A component with `useState`, event
+   handlers, effects, etc. must be a file under `islands/`. A route or component
+   that imports an island stays server-HTML; only the island hydrates. Don't put
+   `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`:
+   ```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
+     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>; }
+   ```
+5. **API routes** are `routes/api/*.ts` with per-method exports; return a value
+   (JSON-encoded) or a `Response`:
+   ```ts
+   export const GET = (ctx) => ctx.json({ ok: true });
+   export const POST = async (ctx) => ctx.json({ got: await ctx.bodyJson() });
+   ```
+6. **Islands** are default-exported components:
+   ```tsx
+   // islands/Counter.tsx
+   import { useState } from "preact/hooks";
+   export default function Counter({ start = 0 }) {
+     const [n, setN] = useState(start);
+     return <button onClick={() => setN(n + 1)}>count: {n}</button>;
+   }
+   ```
+7. **Server functions** — a module with a top-of-file `"use server"` directive
+   becomes RPC; the client gets a tiny fetch proxy, the implementation stays on
+   the server. Validate arguments; read auth via `getContext()`:
+   ```ts
+   // actions/todos.ts
+   "use server";
+   import { getContext } from "@nowaki-dev/runtime/server/functions.mjs";
+   export async function addTodo(text: string) { /* runs on the server */ }
+   ```
+   Call it from an island like a normal async function:
+   `import { addTodo } from "../actions/todos.ts";`
+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.
+
+## Don't
+
+- Don't add a build tool (Vite/webpack/Babel) or a `tsconfig` paths setup — the
+  Rust toolchain handles transform/resolve/bundle.
+- Don't import React directly hoping for React internals; it's Preact under the hood.
+- Don't put interactive components outside `islands/`.
+- Don't read secrets on the client. Only `PUBLIC_*` env vars reach the browser;
+  everything else is server-only (loaders, actions, server functions).

package/template/CLAUDE.md

@@ -0,0 +1,10 @@
+# CLAUDE.md
+
+This app's agent guidance is in **[AGENTS.md](./AGENTS.md)** — read it first.
+
+TL;DR: Nowaki renders pages to HTML; only components under `islands/` ship JS and
+hydrate. Write **Preact** (hooks from `preact/hooks`), use **explicit file
+extensions** in relative imports, put interactive components in `islands/`, and
+use route `loader`/`action`, `routes/api/*.ts`, `"use server"` modules, or
+Jetstream islands (`export const live`) as needed. Commands: `npm run dev`,
+`npm run build`, `npm run start`. Docs: https://nowaki.dev/docs

package/template/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/template/_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/template/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/package.json

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

package/template/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"
+  ]
+}