clawfire 0.5.0 → 0.6.0

package/templates/starter/CLAUDE.md

@@ -26,36 +26,38 @@ This is a **Clawfire** project — an AI-First Firebase app framework.
 ## Project Structure
 
 ```
-app/
-  store.ts              ← 인메모리 데이터 저장소 (Firebase 없이 동작)
-  pages/                ← 파일 기반 페이지 라우팅 (프론트엔드)
-    _layout.html        ← 루트 레이아웃 (모든 페이지 래핑)
-    _404.html           ← 404 에러 페이지
-    index.html          ← 홈 페이지 (/)
-    about.html          ← /about 페이지
-    todos/
-      index.html        ← /todos 페이지
-  components/           ← 재사용 HTML 컴포넌트
-    nav.html            ← <c-nav /> 네비게이션
-    footer.html         ← <c-footer /> 푸터
-  routes/               ← API 라우트 핸들러 (파일 기반 라우팅)
-    health.ts           ← 서버 상태 확인
-    todos/              ← Todo CRUD
+functions/                ← Backend (Firebase Functions, 독립 빌드 단위)
+  routes/                 ← API 라우트 핸들러 (파일 기반 라우팅)
+    health.ts             ← 서버 상태 확인
+    todos/                ← Todo CRUD
       list.ts
       create.ts
       update.ts
       delete.ts
-  schemas/              ← Firestore 모델 정의
+  schemas/                ← Firestore 모델 정의
     todo.ts
-public/                 ← 정적 파일 (CSS, JS, 이미지, 폰트)
-generated/              ← 자동 생성 파일 (DO NOT EDIT)
-functions/
-  index.ts              ← Firebase Functions 진입점 (배포용)
-dev.ts                  ← Dev 서버 진입점
-clawfire.config.ts      ← Clawfire 설정
-firebase.json           ← Firebase 설정
-firestore.rules         ← Firestore 보안 규칙
-firestore.indexes.json  ← Firestore 인덱스
+  store.ts                ← 인메모리 데이터 저장소 (Firebase 없이 동작)
+  index.ts                ← Firebase Functions 진입점 (배포용)
+  package.json            ← Backend 의존성 (firebase-admin, firebase-functions)
+  tsconfig.json           ← Backend TypeScript 설정
+app/                      ← Frontend only
+  pages/                  ← 파일 기반 페이지 라우팅 (프론트엔드)
+    _layout.html          ← 루트 레이아웃 (모든 페이지 래핑)
+    _404.html             ← 404 에러 페이지
+    index.html            ← 홈 페이지 (/)
+    about.html            ← /about 페이지
+    todos/
+      index.html          ← /todos 페이지
+  components/             ← 재사용 HTML 컴포넌트
+    nav.html              ← <c-nav /> 네비게이션
+    footer.html           ← <c-footer /> 푸터
+public/                   ← 정적 파일 (CSS, JS, 이미지, 폰트)
+generated/                ← 자동 생성 파일 (DO NOT EDIT)
+dev.ts                    ← Dev 서버 진입점
+clawfire.config.ts        ← Clawfire 설정
+firebase.json             ← Firebase 설정
+firestore.rules           ← Firestore 보안 규칙
+firestore.indexes.json    ← Firestore 인덱스
 ```
 
 ---
@@ -142,9 +144,9 @@ export const Todo = defineModel({
 파일 경로 = API 경로:
 
 ```
-app/routes/health.ts             → POST /api/health
-app/routes/todos/list.ts         → POST /api/todos/list
-app/routes/products/[id]/get.ts  → POST /api/products/:id/get
+functions/routes/health.ts             → POST /api/health
+functions/routes/todos/list.ts         → POST /api/todos/list
+functions/routes/products/[id]/get.ts  → POST /api/products/:id/get
 ```
 
 ---
@@ -187,16 +189,16 @@ throw Errors.conflict("Already exists");    // 409
 
 ### Step 1: Store 추가 (인메모리 모드)
 
-`app/store.ts`에 새 Map + CRUD 메서드 추가.
+`functions/store.ts`에 새 Map + CRUD 메서드 추가.
 
 ### Step 2: Schema 생성
 
-`app/schemas/product.ts` 생성 → `defineModel(...)`.
+`functions/schemas/product.ts` 생성 → `defineModel(...)`.
 
 ### Step 3: Routes 생성
 
 ```
-app/routes/products/
+functions/routes/products/
   list.ts     ← 목록 조회
   create.ts   ← 생성
   update.ts   ← 수정

package/templates/starter/app/pages/index.html

@@ -61,10 +61,11 @@
     <div class="mt-2"><span class="text-brand-400">app/components/</span> <span class="text-zinc-600 ml-2">&larr; Reusable HTML components</span></div>
     <div class="pl-4">nav.html <span class="text-zinc-600 ml-2">&larr; Used as <code class="text-zinc-500">&lt;c-nav /&gt;</code></span></div>
     <div class="pl-4">footer.html <span class="text-zinc-600 ml-2">&larr; Used as <code class="text-zinc-500">&lt;c-footer /&gt;</code></span></div>
-    <div class="mt-2"><span class="text-brand-400">app/routes/</span> <span class="text-zinc-600 ml-2">&larr; API endpoints (POST, Zod validation)</span></div>
-    <div class="pl-4">health.ts <span class="text-zinc-600 ml-2">&larr; <code class="text-zinc-500">POST /api/health</code></span></div>
-    <div class="pl-4">todos/*.ts <span class="text-zinc-600 ml-2">&larr; Todo CRUD APIs</span></div>
-    <div class="mt-2"><span class="text-brand-400">app/schemas/</span> <span class="text-zinc-600 ml-2">&larr; Firestore model definitions</span></div>
+    <div class="mt-2"><span class="text-brand-400">functions/</span> <span class="text-zinc-600 ml-2">&larr; Backend (Firebase Functions)</span></div>
+    <div class="pl-4">routes/health.ts <span class="text-zinc-600 ml-2">&larr; <code class="text-zinc-500">POST /api/health</code></span></div>
+    <div class="pl-4">routes/todos/*.ts <span class="text-zinc-600 ml-2">&larr; Todo CRUD APIs</span></div>
+    <div class="pl-4">schemas/todo.ts <span class="text-zinc-600 ml-2">&larr; Firestore model definitions</span></div>
+    <div class="pl-4">index.ts <span class="text-zinc-600 ml-2">&larr; Cloud Function entry point</span></div>
     <div class="mt-2"><span class="text-brand-400">public/</span> <span class="text-zinc-600 ml-2">&larr; Static assets (CSS, images, fonts)</span></div>
   </div>
 </div>
@@ -114,11 +115,11 @@
 <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
   <h2 class="text-lg font-semibold mb-4">How APIs Work</h2>
   <p class="text-zinc-500 text-sm mb-4">
-    Every file in <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">app/routes/</code> becomes a POST endpoint.
+    Every file in <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">functions/routes/</code> becomes a POST endpoint.
     Define input/output with Zod schemas, and get type safety + auto-generated docs.
   </p>
   <div class="bg-zinc-950 rounded-lg p-4 font-mono text-xs text-zinc-400 overflow-x-auto mb-4">
-    <div class="text-zinc-600">// app/routes/todos/create.ts</div>
+    <div class="text-zinc-600">// functions/routes/todos/create.ts</div>
     <div><span class="text-purple-400">import</span> { defineAPI, z } <span class="text-purple-400">from</span> <span class="text-green-400">"clawfire"</span>;</div>
     <div class="mt-2"><span class="text-purple-400">export default</span> <span class="text-blue-400">defineAPI</span>({</div>
     <div class="pl-4">input: z.<span class="text-blue-400">object</span>({ title: z.<span class="text-blue-400">string</span>() }),</div>

package/templates/starter/functions/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Clawfire Firebase Functions Entry Point
+ *
+ * This is the main entry point for your Firebase Functions.
+ * Routes are automatically registered from functions/routes/.
+ */
+import * as admin from "firebase-admin";
+import * as functions from "firebase-functions";
+import {
+  createRouter,
+  createAdminDB,
+  createSecurityMiddleware,
+} from "clawfire/functions";
+
+// Initialize Firebase Admin
+admin.initializeApp();
+
+// Create database wrapper
+export const db = createAdminDB(admin.firestore());
+
+// Create router with security middleware
+const router = createRouter({
+  auth: admin.auth(),
+  cors: [], // Add your allowed origins here
+  middleware: createSecurityMiddleware({
+    logRequests: true,
+    sanitize: true,
+  }),
+});
+
+// ── Register Routes ─────────────────────────────────────────────
+// Routes are registered here. Use /clawfire-api skill to auto-manage this.
+
+import healthRoute from "./routes/health.js";
+router.register("/health", healthRoute);
+
+import todosListRoute from "./routes/todos/list.js";
+router.register("/todos/list", todosListRoute);
+
+import todosCreateRoute from "./routes/todos/create.js";
+router.register("/todos/create", todosCreateRoute);
+
+import todosUpdateRoute from "./routes/todos/update.js";
+router.register("/todos/update", todosUpdateRoute);
+
+import todosDeleteRoute from "./routes/todos/delete.js";
+router.register("/todos/delete", todosDeleteRoute);
+
+// ── Export Cloud Function ────────────────────────────────────────
+export const api = functions.https.onRequest((req, res) => {
+  router.handleRequest(req as any, res as any);
+});

package/templates/starter/functions/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "functions",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch"
+  },
+  "main": "dist/index.js",
+  "engines": {
+    "node": "20"
+  },
+  "dependencies": {
+    "clawfire": "latest",
+    "firebase-admin": "^13.0.0",
+    "firebase-functions": "^6.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0",
+    "@types/node": "^20.0.0"
+  }
+}

package/templates/starter/functions/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "sourceMap": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/starter/package.json

@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "npx tsx dev.ts",
-    "build": "tsc --noEmit",
-    "deploy": "npx clawfire deploy"
+    "build": "cd functions && npm run build",
+    "build:check": "tsc --noEmit",
+    "deploy": "cd functions && npm run build && cd .. && firebase deploy",
+    "postinstall": "cd functions && npm install"
   },
   "dependencies": {
     "clawfire": "latest"

package/templates/starter/tsconfig.json

@@ -13,5 +13,5 @@
     "isolatedModules": true
   },
   "include": ["app/**/*", "dev.ts", "clawfire.config.ts"],
-  "exclude": ["node_modules", "dist", "generated"]
+  "exclude": ["node_modules", "dist", "generated", "functions"]
 }