create-cirro 0.0.29

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 osawa-naotaka
+
+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-cirro.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+import { fileURLToPath } from "node:url";
+import { createProject } from "../src/create.js";
+
+const targetDir = process.argv[2];
+
+if (!targetDir) {
+    console.error("Usage: pnpm create cirro <directory>");
+    console.error("Example: pnpm create cirro my-site");
+    process.exit(1);
+}
+
+const templateDir = fileURLToPath(new URL("../template", import.meta.url));
+
+try {
+    const { projectName, target } = createProject(targetDir, templateDir);
+    console.log(`Created a new Cirro site "${projectName}" at ${target}`);
+    console.log("");
+    console.log("Next steps:");
+    console.log(`  cd ${targetDir}`);
+    console.log("  pnpm install");
+    console.log("  pnpm dev");
+} catch (err) {
+    console.error(`create-cirro: ${err instanceof Error ? err.message : String(err)}`);
+    process.exit(1);
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "create-cirro",
+    "version": "0.0.29",
+    "description": "Scaffold a new Cirro site (React islands SSG with strict CSP)",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/osawa-naotaka/cirro.git"
+    },
+    "bin": {
+        "create-cirro": "./bin/create-cirro.js"
+    },
+    "files": [
+        "bin",
+        "src",
+        "template"
+    ],
+    "scripts": {
+        "test": "vitest run"
+    },
+    "devDependencies": {
+        "vitest": "^4.1.10"
+    }
+}

package/src/create.js

@@ -0,0 +1,28 @@
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { basename, join, resolve } from "node:path";
+
+// スキャフォールディングの本体（16_SCAFFOLDING.md 4.2）。テンプレートを targetDir へコピーし、
+// _package.json → package.json（{{PROJECT_NAME}} 置換）・_gitignore → .gitignore にリネームする。
+// 失敗はすべて throw（bin 側がメッセージを表示して非ゼロ終了する）。
+export function createProject(targetDir, templateDir) {
+    const target = resolve(targetDir);
+    const projectName = basename(target);
+
+    if (!/^[a-z0-9][a-z0-9._-]*$/.test(projectName)) {
+        throw new Error(`invalid project name "${projectName}": use lowercase letters, digits, "-", ".", "_" (it becomes the npm package name)`);
+    }
+    if (existsSync(target) && readdirSync(target).length > 0) {
+        throw new Error(`target directory is not empty: ${target}`);
+    }
+
+    mkdirSync(target, { recursive: true });
+    cpSync(templateDir, target, { recursive: true });
+
+    const pkgTemplatePath = join(target, "_package.json");
+    const pkg = readFileSync(pkgTemplatePath, "utf-8").replaceAll("{{PROJECT_NAME}}", projectName);
+    writeFileSync(join(target, "package.json"), pkg);
+    rmSync(pkgTemplatePath);
+    renameSync(join(target, "_gitignore"), join(target, ".gitignore"));
+
+    return { projectName, target };
+}

package/template/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/template/_package.json

@@ -0,0 +1,24 @@
+{
+    "name": "{{PROJECT_NAME}}",
+    "version": "0.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "cirro dev",
+        "build": "tsc && cirro build",
+        "preview": "vite preview",
+        "typecheck": "tsc"
+    },
+    "dependencies": {
+        "cirrojs": "^0.0.29",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.3",
+        "typescript": "^7.0.2",
+        "vite": "^8.1.4"
+    }
+}

package/template/src/islands/Counter.tsx

@@ -0,0 +1,11 @@
+import { useState } from "react";
+
+// クライアントで閉じるリアクティブ要素（島）の最小例。
+export function Counter({ initial = 0 }: { initial?: number }) {
+    const [count, setCount] = useState(initial);
+    return (
+        <button type="button" onClick={() => setCount((c) => c + 1)}>
+            count: {count}
+        </button>
+    );
+}

package/template/src/islands/Island.ts

@@ -0,0 +1,5 @@
+import { createIsland } from "cirrojs/server";
+import islands from "./registry";
+
+// 純データの registry から型安全な <Island> を生成する（renderToString はこちら側＝サーバー専用）。
+export const Island = createIsland(islands);

package/template/src/islands/registry.ts

@@ -0,0 +1,6 @@
+import { Counter } from "./Counter";
+
+// 島の単一の真実。ここに登録した名前を <Island name="..."> とクライアントの両方が参照する。
+export default {
+    counter: Counter,
+} as const;

package/template/src/pages/about.tsx

@@ -0,0 +1,24 @@
+import { Link } from "cirrojs";
+import { defineCascadeLayer, resetCss } from "cirrojs/layout";
+
+// About ページ（静的・島なし → このページはクライアント JS の島が存在しない）。
+export function AboutPage() {
+    defineCascadeLayer();
+    resetCss();
+    return (
+        <html lang="ja">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>About - cirro</title>
+            </head>
+            <body>
+                <h1>About</h1>
+                <p>cirro プロトタイプの About ページです。島を含まない純粋な静的ページです。</p>
+                <p>
+                    <Link to="/">← home</Link>
+                </p>
+            </body>
+        </html>
+    );
+}

package/template/src/pages/home.tsx

@@ -0,0 +1,32 @@
+import { at, genCssFn, Link } from "cirrojs";
+import { defineCascadeLayer, resetCss } from "cirrojs/layout";
+import { Island } from "../islands/Island";
+
+// ホームページ（本文は静的 HTML、Counter だけが島）。
+export function HomePage() {
+    // reset css
+    defineCascadeLayer();
+    resetCss();
+
+    const cssPC = genCssFn((fn) => at("@media (min-width: 800px)", fn()));
+
+    const pageTitle = cssPC({ padding: "1rem", font_size: "2rem" });
+
+    return (
+        <html lang="ja">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>cirro prototype</title>
+            </head>
+            <body>
+                <h1 className={pageTitle}>cirro プロトタイプ</h1>
+                <p>この本文は静的 HTML です。下のカウンターだけがクライアントで動く「島」です。</p>
+                <nav>
+                    <Link to="/about">about</Link> | <Link to="/posts/hello">post: hello</Link> | <Link to="/posts/world">post: world</Link>
+                </nav>
+                <Island name="counter" props={{ initial: 3 }} />
+            </body>
+        </html>
+    );
+}

package/template/src/pages/post.tsx

@@ -0,0 +1,27 @@
+import { defineCascadeLayer, resetCss } from "cirrojs/layout";
+import { Island } from "../islands/Island";
+import type { PageProps } from "cirrojs";
+import { Link } from "cirrojs";
+
+// 動的ルート /posts/[slug] のページ。params.slug を受け取る。
+export function PostPage({ params }: PageProps<undefined, { slug: string }>) {
+    defineCascadeLayer();
+    resetCss();
+    return (
+        <html lang="ja">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{`post: ${params.slug}`}</title>
+            </head>
+            <body>
+                <h1>{`Post: ${params.slug}`}</h1>
+                <p>これは動的ルート /posts/[slug] のページです。</p>
+                <p>
+                    <Link to="/">← home</Link>
+                </p>
+                <Island name="counter" props={{ initial: 1 }} />
+            </body>
+        </html>
+    );
+}

package/template/src/routes.ts

@@ -0,0 +1,20 @@
+import { createRouteFn } from "cirrojs";
+import { AboutPage } from "./pages/about";
+import { HomePage } from "./pages/home";
+import { PostPage } from "./pages/post";
+
+export { runWithRegistry } from "cirrojs";
+
+const { defineRoutes, route } = createRouteFn();
+
+// サイトのルート定義（Config Base Routing）。
+export default defineRoutes(
+    route({ type: "static", path: "/index.html", component: HomePage }),
+    route({ type: "static", path: "/about.html", component: AboutPage }),
+    route({
+        type: "dynamic",
+        path: ({ slug }) => `/posts/${slug}.html`,
+        getStaticPaths: () => [{ slug: "hello" }, { slug: "world" }],
+        component: PostPage,
+    }),
+);

package/template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "jsx": "react-jsx",
+        "strict": true,
+        "verbatimModuleSyntax": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "types": ["vite/client"]
+    },
+    "include": ["src", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,8 @@
+import react from "@vitejs/plugin-react";
+import { cirro } from "cirrojs/vite";
+import { defineConfig } from "vite";
+
+// React プラグインは利用者が明示的に追加する（cirro は内包しない）。
+export default defineConfig({
+    plugins: [react(), cirro({ routes: "./src/routes.ts", islands: "./src/islands/registry.ts" })],
+});