create-nowaki 0.12.0 → 0.14.0

package/index.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-// `npm create nowaki` のスキャフォールダ。依存ゼロ（Node 組み込みのみ）。
-// 対話ウィザード（TTY 時）: プロジェクト名・パッケージマネージャ・git・依存インストール。
-// 非対話（CI / `-y` / パイプ）では既定値で黙って生成する。
+// Scaffolder for `npm create nowaki`. Zero dependencies (Node built-ins only).
+// Interactive wizard (on a TTY): project name, package manager, git, dependency install.
+// Non-interactive (CI / `-y` / pipe): no prompts, generates with defaults.
 //
-// フラグ: -t/--template <basics|minimal>, -y/--yes（質問を飛ばす）,
-//         --install（非対話でも入れる）, --no-install, --no-git, --pm <npm|pnpm|yarn|bun>
+// Flags: -t/--template <basics|minimal>, -y/--yes (skip prompts),
+//        --install (install even when non-interactive), --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";
@@ -15,7 +15,7 @@ import process from "node:process";
 
 const { stdin, stdout, env, argv, platform } = process;
 
-// --- 色（NO_COLOR と非 TTY を尊重）---
+// Respects NO_COLOR and non-TTY output.
 const useColor = !!stdout.isTTY && !env.NO_COLOR;
 const wrap = (code) => (s) => (useColor ? `\x1b[${code}m${s}\x1b[0m` : `${s}`);
 const cyan = wrap("36");
@@ -25,9 +25,8 @@ const green = wrap("32");
 const red = wrap("31");
 const yellow = wrap("33");
 
-// --- 引数 ---
 const args = argv.slice(2);
-// 値をとるフラグ。これらの直後の引数は positional ではない。
+// Flags that take a value. The argument right after one is not positional.
 const VALUE_FLAGS = new Set(["--pm", "--template", "-t"]);
 const flagAt = (...names) => {
   const i = args.findIndex((a) => names.includes(a));
@@ -37,7 +36,7 @@ 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++; // フラグの値を飛ばす
+    if (VALUE_FLAGS.has(args[i])) i++;
     continue;
   }
   positionals.push(args[i]);
@@ -51,13 +50,11 @@ 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";
@@ -66,7 +63,6 @@ function detectPM() {
   return "npm";
 }
 
-// --- バナー ---
 console.log();
 console.log(`  ${cyan(bold("Nowaki"))} ${dim("野分")}  ${dim("· create a new app")}`);
 console.log();
@@ -83,7 +79,6 @@ 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}`);
@@ -98,14 +93,12 @@ async function select(question, options, def) {
   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 名に正規化（ディレクトリ名は入力のまま）
+// Keep the directory name as typed; normalize only package.json's name to a valid npm name.
 const pkgName = name.toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^[._-]+/, "") || "nowaki-app";
 const dest = path.resolve(process.cwd(), name);
 
-// 既存の空でないディレクトリは中止
 try {
   const existing = await readdir(dest);
   if (existing.length > 0) {
@@ -113,11 +106,8 @@ try {
     rl?.close();
     process.exit(1);
   }
-} catch {
-  // 無ければOK
-}
+} catch {}
 
-// テンプレート選択（-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)) {
@@ -132,8 +122,7 @@ 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 は常にスキップ。
+// Non-interactive (-y / CI / pipe): to avoid surprises, don't install unless --install is given.
 const doInstall = noInstall
   ? false
   : forceInstall
@@ -143,34 +132,27 @@ const doInstall = noInstall
       : false;
 rl?.close();
 
-// --- 生成 ---
-// 共通設定（_shared）→ 選択テンプレートの順に重ねる。
+// Layer the shared config (_shared), then the chosen template.
 await mkdir(dest, { recursive: true });
 await cp(path.join(templatesDir, "_shared"), dest, { recursive: true });
 await cp(path.join(templatesDir, template), dest, { recursive: true });
 
-// npm は公開時に .gitignore を除外するので、テンプレートでは _gitignore で持ち、ここで戻す。
+// npm strips .gitignore on publish, so templates ship _gitignore and it's renamed back here.
 try {
   await rename(path.join(dest, "_gitignore"), path.join(dest, ".gitignore"));
-} catch {
-  // _gitignore が無ければ素通し
-}
+} catch {}
 
-// 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 が無ければ素通し
-}
+} catch {}
 
 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" });
@@ -180,7 +162,6 @@ if (doGit) {
   }
 }
 
-// 依存インストール（任意）
 let installed = false;
 if (doInstall) {
   console.log(`\n  ${dim(`installing dependencies with ${pm}…`)}\n`);
@@ -193,7 +174,6 @@ if (doInstall) {
   }
 }
 
-// --- 次のステップ ---
 const runDev = pm === "npm" || pm === "bun" ? `${pm} run dev` : `${pm} dev`;
 console.log(`\n  ${bold("Next steps:")}`);
 console.log(`    cd ${name}`);

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "create-nowaki",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Scaffold a new Nowaki app",
   "license": "MIT",
-  "author": "VorEdge <dev@voredge.com>",
+  "author": "Tettu0530",
   "homepage": "https://nowaki.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nowaki-dev/nowaki.git",
+    "url": "git+https://github.com/Tettu0530/nowaki.git",
     "directory": "packages/create-nowaki"
   },
-  "bugs": "https://github.com/nowaki-dev/nowaki/issues",
+  "bugs": "https://github.com/Tettu0530/nowaki/issues",
   "keywords": [
     "nowaki",
     "create",

package/templates/_shared/AGENTS.md

@@ -71,6 +71,17 @@ nowaki.config.mjs   plugins (optional)
      return <button onClick={() => setN(n + 1)}>count: {n}</button>;
    }
    ```
+   **Lazy hydration** (Astro-style `client:*` directives) controls *when* an
+   island hydrates — add a directive where you use it:
+   ```tsx
+   <Counter client:load />              // default — hydrate on load
+   <Counter client:idle />              // hydrate on requestIdleCallback
+   <Counter client:visible />           // hydrate when scrolled into view
+   <Chart client:media="(min-width: 768px)" />  // hydrate when the query matches
+   <Map client:only />                  // skip SSR, render only on the client
+   ```
+   Prefer `client:visible` / `client:idle` for below-the-fold or non-critical
+   islands to cut work on first load. The directives are typed (no prop leaks).
 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()`:
@@ -91,6 +102,15 @@ nowaki.config.mjs   plugins (optional)
    `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.
+10. **Typed navigation** — `dev`/`build` generate `.nowaki/types.d.ts` from your
+    routes (run `nowaki typegen` to refresh manually). Build links type-safely
+    from `@nowaki-dev/runtime/navigation`:
+    ```tsx
+    import { route, Link } from "@nowaki-dev/runtime/navigation";
+    <Link href="/about">About</Link>                       // static path, checked
+    <a href={route("/blog/[slug]", { slug })}>Post</a>      // dynamic, params typed
+    ```
+    Unknown paths, missing params, and wrong param keys are compile errors.
 
 ## Don't
 

package/templates/_shared/_gitignore

@@ -1,6 +1,8 @@
 node_modules/
 dist/
 .cache/
+.nowaki/
+.vercel/
 
 # env (keep secrets out of git; only PUBLIC_* reaches the client)
 .env

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

@@ -1,5 +1,5 @@
-// Nowaki アンビエント型。CSS / アセット / 仮想モジュールの import をエディタが理解できるように。
-// 編集不要（フレームワークの import 規約を型に伝えるだけ）。
+// Nowaki ambient types, so editors understand CSS / asset / virtual-module imports.
+// No need to edit (it only teaches the type checker the framework's import conventions).
 
 declare module "*.module.css" {
   const classes: Record<string, string>;
@@ -10,7 +10,7 @@ declare module "*.css" {
   export default css;
 }
 
-// アセット import は配信 URL（文字列）になる。
+// An asset import becomes its served URL (a string).
 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; }
@@ -29,14 +29,36 @@ 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 を許す。
+// Plugin virtual modules (resolveId/load in nowaki.config). Any export is allowed.
 declare module "virtual:*";
 
-// import.meta.env（PUBLIC_* と MODE がビルド時に inline される）。
-interface ImportMetaEnv {
-  readonly MODE: string;
-  readonly [key: `PUBLIC_${string}`]: string | undefined;
+// Extends preact's JSX.IntrinsicAttributes so client:* directives can go on any component.
+// This import makes the file a module, so the global types below are exposed via declare global.
+import "preact";
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      /** Hydrate on page load (default). */
+      "client:load"?: boolean;
+      /** Hydrate when idle, via requestIdleCallback. */
+      "client:idle"?: boolean;
+      /** Hydrate once visible, via IntersectionObserver. */
+      "client:visible"?: boolean;
+      /** Hydrate when the media query matches. e.g. client:media="(min-width: 768px)" */
+      "client:media"?: string;
+      /** Skip SSR and render on the client only (for islands using browser-only APIs). */
+      "client:only"?: boolean;
+    }
+  }
 }
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
+
+declare global {
+  // import.meta.env (PUBLIC_* and MODE are inlined at build time).
+  interface ImportMetaEnv {
+    readonly MODE: string;
+    readonly [key: `PUBLIC_${string}`]: string | undefined;
+  }
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
 }

package/templates/_shared/package.json

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

package/templates/_shared/tsconfig.json

@@ -23,6 +23,7 @@
   },
   "include": [
     "nowaki-env.d.ts",
+    ".nowaki/types.d.ts",
     "nowaki.config.*",
     "routes",
     "islands",

package/templates/basics/islands/Counter.tsx

@@ -1,6 +1,6 @@
 import { useState } from "preact/hooks";
 
-// クライアントでハイドレートする唯一のコンポーネント（島）。スタイルは routes/index.tsx の <style> に。
+// The only component (island) hydrated on the client. Styles live in the <style> in routes/index.tsx.
 export default function Counter({ start = 0 }: { start?: number }) {
   const [count, setCount] = useState(start);
   return (