create-orbit-app 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Asahi Kawanobe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/create-orbit.mjs

@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, cpSync, writeFileSync, readFileSync } from "node:fs";
+import { resolve, basename, join } from "node:path";
+import { createInterface } from "node:readline";
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const TEMPLATE_DIR = resolve(__dirname, "..", "template");
+
+const CLAUDE_MD = `# CLAUDE.md
+
+## プロジェクト概要
+
+<!-- プロジェクトの説明を書く -->
+
+## コマンド
+
+\`\`\`bash
+pnpm install    # 依存インストール
+pnpm dev        # 開発サーバー起動 (http://localhost:5173)
+pnpm build      # プロダクションビルド
+pnpm preview    # ビルド結果プレビュー
+\`\`\`
+
+## 技術スタック
+
+- **ツールチェーン**: Vite+（Rolldown, Oxlint, Oxfmt）
+- **UI**: React 19
+- **ルーティング**: orbit-router（ディレクトリベース）
+- **データ取得**: orbit-query
+- **フォーム**: orbit-form（React Compiler 互換）
+- **バリデーション**: Zod
+- **CSS**: Tailwind CSS
+
+## ディレクトリ規約
+
+\`\`\`
+src/routes/page.tsx              → /
+src/routes/layout.tsx            → ルートレイアウト
+src/routes/about/page.tsx        → /about
+src/routes/users/[id]/page.tsx   → /users/:id
+\`\`\`
+
+### ファイル規約
+
+- \`page.tsx\` — ページコンポーネント（「目次」として読めること）
+- \`hooks.ts\` — カスタムフック（1フック1関心事）
+- \`server.ts\` — サーバー側データアクセス関数
+- \`schema.ts\` — Zod スキーマ + 型定義
+- \`layout.tsx\` — レイアウト（\`{children}\` で子を囲む）
+- \`loading.tsx\` — ローディング状態
+- \`error.tsx\` — エラー境界
+- \`not-found.tsx\` — 404 ページ
+
+### page.tsx のデータフロー
+
+\`\`\`tsx
+const [search, setSearch] = useSearchParams(searchSchema); // State
+const { data: tasks } = useTasks();                        // Fetch
+const filtered = useTaskFilter(tasks, search.q);           // Transform
+const { mutate: toggle } = useToggleTask();                // Mutate
+return <div>...</div>;                                     // Render
+\`\`\`
+
+## 設計思想
+
+- **読みやすさ > 書きやすさ** — 短さのために処理を隠さない
+- **隠すな、揃えろ** — 暗黙の動作より明示的なコード
+- **React Compiler 前提** — useMemo / useCallback / React.memo は書かない
+- **YAGNI** — 必要になるまで作らない
+`;
+
+const AGENTS_MD = `# AGENTS.md
+
+## Project Overview
+
+<!-- Describe your project here -->
+
+## Commands
+
+\`\`\`bash
+pnpm install    # Install dependencies
+pnpm dev        # Start dev server (http://localhost:5173)
+pnpm build      # Production build
+pnpm preview    # Preview build
+\`\`\`
+
+## Tech Stack
+
+- **Toolchain**: Vite+ (Rolldown, Oxlint, Oxfmt)
+- **UI**: React 19
+- **Routing**: orbit-router (directory-based)
+- **Data Fetching**: orbit-query
+- **Forms**: orbit-form (React Compiler compatible)
+- **Validation**: Zod
+- **CSS**: Tailwind CSS
+
+## Directory Conventions
+
+\`\`\`
+src/routes/page.tsx              → /
+src/routes/layout.tsx            → Root layout
+src/routes/about/page.tsx        → /about
+src/routes/users/[id]/page.tsx   → /users/:id
+\`\`\`
+
+### File Conventions
+
+- \`page.tsx\` — Page component (should read like a table of contents)
+- \`hooks.ts\` — Custom hooks (one concern per hook)
+- \`server.ts\` — Server-side data access functions
+- \`schema.ts\` — Zod schemas + type definitions
+- \`layout.tsx\` — Layout (\`{children}\` wrapper)
+- \`loading.tsx\` — Loading state
+- \`error.tsx\` — Error boundary
+- \`not-found.tsx\` — 404 page
+
+### Data Flow in page.tsx
+
+\`\`\`tsx
+const [search, setSearch] = useSearchParams(searchSchema); // State
+const { data: tasks } = useTasks();                        // Fetch
+const filtered = useTaskFilter(tasks, search.q);           // Transform
+const { mutate: toggle } = useToggleTask();                // Mutate
+return <div>...</div>;                                     // Render
+\`\`\`
+
+## Design Philosophy
+
+- **Readability > Writability** — Don't hide logic for brevity
+- **Explicit over implicit** — No magic, align everything
+- **React Compiler first** — No useMemo / useCallback / React.memo
+- **YAGNI** — Don't build it until you need it
+`;
+
+// --- Helpers ---
+
+function prompt(rl, question) {
+  return new Promise((resolve) => rl.question(question, resolve));
+}
+
+function select(rl, question, options) {
+  return new Promise((resolve) => {
+    console.log(question);
+    options.forEach((opt, i) => console.log(`  ${i + 1}. ${opt.label}`));
+    rl.question(`\n  Choose [1-${options.length}]: `, (answer) => {
+      const idx = parseInt(answer, 10) - 1;
+      resolve(options[idx]?.value ?? options[0].value);
+    });
+  });
+}
+
+// --- Main ---
+
+async function main() {
+  const args = process.argv.slice(2);
+  const projectName = args[0];
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+  console.log();
+  console.log("  ◎ create-orbit");
+  console.log();
+
+  const name = projectName || (await prompt(rl, "  Project name: "));
+  if (!name) {
+    console.log("  Project name is required.");
+    rl.close();
+    process.exit(1);
+  }
+
+  const agent = await select(rl, "\n  AI instructions file:", [
+    { label: "CLAUDE.md  (Claude Code)", value: "claude" },
+    { label: "AGENTS.md  (Other AI tools)", value: "agents" },
+    { label: "None", value: "none" },
+  ]);
+
+  rl.close();
+
+  const targetDir = resolve(process.cwd(), name);
+
+  if (existsSync(targetDir)) {
+    console.log(`\n  Directory "${name}" already exists.`);
+    process.exit(1);
+  }
+
+  // Copy template
+  cpSync(TEMPLATE_DIR, targetDir, { recursive: true });
+
+  // Rename _gitignore to .gitignore (npm strips .gitignore from published packages)
+  const gitignoreSrc = join(targetDir, "_gitignore");
+  const gitignoreDest = join(targetDir, ".gitignore");
+  if (existsSync(gitignoreSrc)) {
+    const { renameSync } = await import("node:fs");
+    renameSync(gitignoreSrc, gitignoreDest);
+  }
+
+  // Update package.json name
+  const pkgPath = join(targetDir, "package.json");
+  const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+  pkg.name = basename(name);
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+
+  // Update index.html title
+  const htmlPath = join(targetDir, "index.html");
+  let html = readFileSync(htmlPath, "utf-8");
+  html = html.replace("{{PROJECT_NAME}}", basename(name));
+  writeFileSync(htmlPath, html);
+
+  // Write agent file
+  if (agent === "claude") {
+    writeFileSync(join(targetDir, "CLAUDE.md"), CLAUDE_MD);
+  } else if (agent === "agents") {
+    writeFileSync(join(targetDir, "AGENTS.md"), AGENTS_MD);
+  }
+
+  // Install dependencies
+  console.log();
+  console.log("  Installing dependencies...");
+  try {
+    execSync("pnpm install", { cwd: targetDir, stdio: "inherit" });
+  } catch {
+    console.log("  ⚠ pnpm install failed. Run it manually after setup.");
+  }
+
+  // Git init
+  try {
+    execSync("git init", { cwd: targetDir, stdio: "ignore" });
+    execSync("git add -A", { cwd: targetDir, stdio: "ignore" });
+    execSync('git commit -m "init: create-orbit"', {
+      cwd: targetDir,
+      stdio: "ignore",
+    });
+  } catch {
+    // git not available, skip silently
+  }
+
+  console.log();
+  console.log(`  ✓ Project created at ./${name}`);
+  console.log();
+  console.log("  Next steps:");
+  console.log(`    cd ${name}`);
+  console.log("    pnpm dev");
+  console.log();
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -1,11 +1,22 @@
 {
   "name": "create-orbit-app",
-  "version": "0.0.1",
-  "description": "Create a new Orbit app — directory-based, AI-friendly React framework on Vite+",
-  "author": "ashunar0",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ashunar0/orbit-router"
-  }
-}
+  "version": "0.1.0",
+  "description": "Create a new Orbit project",
+  "type": "module",
+  "bin": {
+    "create-orbit": "./bin/create-orbit.mjs"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "orbit",
+    "react",
+    "vite",
+    "router",
+    "form",
+    "query"
+  ],
+  "license": "MIT"
+}

package/template/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.orbit
+*.local

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "my-orbit-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vp build",
+    "preview": "vp preview",
+    "check": "vp check",
+    "fmt": "vp fmt",
+    "lint": "vp lint"
+  },
+  "dependencies": {
+    "orbit-form": "^0.1.6",
+    "orbit-query": "^0.1.1",
+    "orbit-router": "^0.2.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.9.0",
+    "vite-plus": "^0.1.12"
+  }
+}

package/template/src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/src/app.tsx

@@ -0,0 +1,13 @@
+import { routes, NotFound } from "virtual:orbit-router/routes";
+import { Router } from "orbit-router";
+import { createQueryClient, QueryProvider } from "orbit-query";
+
+const queryClient = createQueryClient();
+
+export function App() {
+  return (
+    <QueryProvider client={queryClient}>
+      <Router routes={routes} NotFound={NotFound} />
+    </QueryProvider>
+  );
+}

package/template/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="orbit-router/client" />

package/template/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./app.css";
+import { App } from "./app";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/src/routes/about/page.tsx

@@ -0,0 +1,11 @@
+export default function About() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-2">About</h1>
+      <p className="text-gray-500">
+        This project was created with{" "}
+        <code className="text-sm bg-gray-100 px-1.5 py-0.5 rounded">create-orbit</code>.
+      </p>
+    </div>
+  );
+}

package/template/src/routes/layout.tsx

@@ -0,0 +1,24 @@
+import { Link } from "orbit-router";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-gray-50 text-gray-900">
+      <nav className="flex items-center gap-6 px-6 py-4 border-b bg-white">
+        <Link href="/" className="font-semibold text-lg">
+          ◎
+        </Link>
+        <Link href="/" className="text-sm hover:text-blue-600">
+          Home
+        </Link>
+        <Link href="/about" className="text-sm hover:text-blue-600">
+          About
+        </Link>
+      </nav>
+      <main className="max-w-2xl mx-auto px-6 py-8">{children}</main>
+    </div>
+  );
+}

package/template/src/routes/not-found.tsx

@@ -0,0 +1,13 @@
+import { Link } from "orbit-router";
+
+export default function NotFound() {
+  return (
+    <div className="text-center py-16">
+      <h1 className="text-5xl font-bold mb-2">404</h1>
+      <p className="text-gray-500 mb-6">Page not found</p>
+      <Link href="/" className="text-blue-600 hover:underline">
+        Back to Home
+      </Link>
+    </div>
+  );
+}

package/template/src/routes/page.tsx

@@ -0,0 +1,25 @@
+import { Link } from "orbit-router";
+
+export default function Home() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-2">Welcome to Orbit</h1>
+      <p className="text-gray-500 mb-6">
+        Edit <code className="text-sm bg-gray-100 px-1.5 py-0.5 rounded">src/routes/page.tsx</code> to get started.
+      </p>
+      <div className="flex gap-4 text-sm">
+        <Link href="/about" className="text-blue-600 hover:underline">
+          About
+        </Link>
+        <a
+          href="https://github.com/asahi-and/orbit"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 hover:underline"
+        >
+          GitHub
+        </a>
+      </div>
+    </div>
+  );
+}

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", ".orbit"]
+}

package/template/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { orbitRouter } from "orbit-router";
+
+export default defineConfig({
+  plugins: [tailwindcss(), react(), orbitRouter()],
+});