@korajs/cli 0.0.0-canary-20261008174129

package/templates/react-basic/src/App.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { useTodos } from './modules/todos/useTodos'
+
+type Filter = 'all' | 'active' | 'completed'
+
+export function App() {
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = useTodos()
+
+	const [filter, setFilter] = useState<Filter>('all')
+	const [input, setInput] = useState('')
+
+	const filteredTodos =
+		filter === 'active' ? activeTodos : filter === 'completed' ? completedTodos : allTodos
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault()
+		const title = input.trim()
+		if (title) {
+			addTodo.mutate({ title })
+			setInput('')
+		}
+	}
+
+	const clearCompleted = () => {
+		for (const todo of completedTodos) {
+			deleteTodo.mutate(todo.id)
+		}
+	}
+
+	return (
+		<div className="app">
+			<div className="header">
+				<h1>My Tasks</h1>
+				<span className="local-badge">Local-first</span>
+			</div>
+
+			<div className="stats">
+				<div className="stat-card">
+					<div className="label">Total</div>
+					<div className="value muted">{allTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Remaining</div>
+					<div className="value warning">{activeTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Done</div>
+					<div className="value success">{completedTodos.length}</div>
+				</div>
+			</div>
+
+			<form className="add-form" onSubmit={handleSubmit}>
+				<input
+					type="text"
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder="What needs to be done?"
+				/>
+				<button type="submit" disabled={!input.trim()}>
+					Add
+				</button>
+			</form>
+
+			<div className="filters">
+				{(['all', 'active', 'completed'] as const).map((f) => {
+					const count =
+						f === 'all'
+							? allTodos.length
+							: f === 'active'
+								? activeTodos.length
+								: completedTodos.length
+					return (
+						<button
+							key={f}
+							className={`filter-btn ${filter === f ? 'active' : ''}`}
+							onClick={() => setFilter(f)}
+						>
+							{f.charAt(0).toUpperCase() + f.slice(1)}
+							<span className="badge">{count}</span>
+						</button>
+					)
+				})}
+			</div>
+
+			<div className="todo-list">
+				{filteredTodos.length === 0 ? (
+					<div className="empty-state">
+						{filter === 'all' && 'No tasks yet. Add one above!'}
+						{filter === 'active' && 'All caught up! No active tasks.'}
+						{filter === 'completed' && 'No completed tasks yet.'}
+					</div>
+				) : (
+					filteredTodos.map((todo) => (
+						<div key={todo.id} className="todo-item">
+							<button
+								className={`toggle ${todo.completed ? 'checked' : ''}`}
+								onClick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+							>
+								{todo.completed ? '\u2713' : ''}
+							</button>
+							<span className={`title ${todo.completed ? 'done' : ''}`}>{String(todo.title)}</span>
+							{todo.createdAt && <span className="time">{formatTime(Number(todo.createdAt))}</span>}
+							<button className="delete-btn" onClick={() => deleteTodo.mutate(todo.id)}>
+								\u00d7
+							</button>
+						</div>
+					))
+				)}
+			</div>
+
+			{allTodos.length > 0 && (
+				<div className="footer">
+					<span>
+						{activeTodos.length} item{activeTodos.length !== 1 ? 's' : ''} left
+					</span>
+					{completedTodos.length > 0 && <button onClick={clearCompleted}>Clear completed</button>}
+				</div>
+			)}
+
+			<p className="branding">Powered by Kora &mdash; offline-first, real-time sync</p>
+		</div>
+	)
+}
+
+function formatTime(timestamp: number): string {
+	const date = new Date(timestamp)
+	const now = new Date()
+	if (date.toDateString() === now.toDateString()) {
+		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+	}
+	return date.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}

package/templates/react-basic/src/index.css

@@ -0,0 +1,287 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+:root {
+	--color-bg: #0a0a0f;
+	--color-surface: #111118;
+	--color-border: #1e1e2a;
+	--color-border-hover: #2a2a3a;
+	--color-text: #e4e4e7;
+	--color-text-muted: #71717a;
+	--color-text-dim: #3f3f46;
+	--color-primary: #6366f1;
+	--color-primary-hover: #818cf8;
+	--color-success: #34d399;
+	--color-warning: #fbbf24;
+	--color-danger: #f87171;
+	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	--radius: 8px;
+}
+
+body {
+	font-family: var(--font-sans);
+	background: var(--color-bg);
+	color: var(--color-text);
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+}
+
+.app {
+	max-width: 640px;
+	margin: 0 auto;
+	padding: 48px 16px;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 32px;
+}
+
+.header h1 {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.local-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: var(--color-surface);
+	font-size: 0.8rem;
+	color: var(--color-text-muted);
+}
+
+.stats {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 12px;
+	margin-bottom: 32px;
+}
+
+.stat-card {
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	padding: 16px;
+}
+
+.stat-card .label {
+	font-size: 0.8rem;
+	color: var(--color-text-muted);
+}
+
+.stat-card .value {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.stat-card .value.muted {
+	color: var(--color-text-muted);
+}
+.stat-card .value.warning {
+	color: var(--color-warning);
+}
+.stat-card .value.success {
+	color: var(--color-success);
+}
+
+.add-form {
+	display: flex;
+	gap: 12px;
+	margin-bottom: 32px;
+}
+
+.add-form input {
+	flex: 1;
+	padding: 10px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	background: var(--color-surface);
+	color: var(--color-text);
+	font-size: 0.95rem;
+	outline: none;
+}
+
+.add-form input:focus {
+	border-color: var(--color-primary);
+}
+
+.add-form input::placeholder {
+	color: var(--color-text-muted);
+}
+
+.add-form button {
+	padding: 10px 20px;
+	border: none;
+	border-radius: var(--radius);
+	background: var(--color-primary);
+	color: white;
+	font-size: 0.95rem;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.add-form button:hover {
+	background: var(--color-primary-hover);
+}
+
+.add-form button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.filters {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 24px;
+}
+
+.filter-btn {
+	padding: 6px 16px;
+	border: none;
+	border-radius: var(--radius);
+	background: var(--color-surface);
+	color: var(--color-text-muted);
+	font-size: 0.85rem;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.filter-btn:hover {
+	background: var(--color-border-hover);
+	color: var(--color-text);
+}
+
+.filter-btn.active {
+	background: var(--color-primary);
+	color: white;
+}
+
+.filter-btn .badge {
+	display: inline-block;
+	margin-left: 6px;
+	padding: 1px 6px;
+	border-radius: 999px;
+	font-size: 0.75rem;
+	background: rgba(255, 255, 255, 0.15);
+}
+
+.filter-btn:not(.active) .badge {
+	background: var(--color-border);
+}
+
+.todo-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.todo-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	background: var(--color-surface);
+}
+
+.todo-item:hover {
+	border-color: var(--color-border-hover);
+}
+
+.todo-item .toggle {
+	background: none;
+	border: 2px solid var(--color-text-muted);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: transparent;
+	font-size: 0.7rem;
+	flex-shrink: 0;
+}
+
+.todo-item .toggle.checked {
+	border-color: var(--color-success);
+	background: var(--color-success);
+	color: white;
+}
+
+.todo-item .title {
+	flex: 1;
+}
+
+.todo-item .title.done {
+	text-decoration: line-through;
+	color: var(--color-text-muted);
+}
+
+.todo-item .time {
+	font-size: 0.75rem;
+	color: var(--color-text-dim);
+}
+
+.todo-item .delete-btn {
+	background: none;
+	border: none;
+	color: var(--color-text-dim);
+	cursor: pointer;
+	padding: 4px;
+	opacity: 0;
+	transition: opacity 0.15s;
+}
+
+.todo-item:hover .delete-btn {
+	opacity: 1;
+}
+
+.todo-item .delete-btn:hover {
+	color: var(--color-danger);
+}
+
+.empty-state {
+	padding: 48px 0;
+	text-align: center;
+	color: var(--color-text-dim);
+	border: 1px dashed var(--color-border);
+	border-radius: var(--radius);
+}
+
+.footer {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 24px;
+	font-size: 0.85rem;
+	color: var(--color-text-muted);
+}
+
+.footer button {
+	background: none;
+	border: none;
+	color: var(--color-text-muted);
+	cursor: pointer;
+}
+
+.footer button:hover {
+	color: var(--color-text);
+}
+
+.branding {
+	margin-top: 48px;
+	text-align: center;
+	font-size: 0.75rem;
+	color: var(--color-text-dim);
+}

package/templates/react-basic/src/kora-worker.ts

@@ -0,0 +1,9 @@
+// Web Worker entry point for SQLite WASM.
+// Loaded automatically by the Kora store to run SQLite in a background thread.
+
+// Import the WASM binary URL so Vite resolves it with the correct content hash.
+// Without this, production builds fail because sqlite3 looks for the unhashed filename.
+import sqliteWasmUrl from '@sqlite.org/sqlite-wasm/sqlite3.wasm?url'
+;(globalThis as Record<string, unknown>).__KORA_SQLITE_WASM_URL = sqliteWasmUrl
+
+import '@korajs/store/sqlite-wasm/worker'

package/templates/react-basic/src/main.tsx

@@ -0,0 +1,24 @@
+import { KoraProvider } from '@korajs/react'
+import { createApp } from 'korajs'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import schema from './schema'
+import './index.css'
+import koraWorkerUrl from './kora-worker.ts?worker&url'
+
+const app = createApp({
+	schema,
+	store: {
+		workerUrl: koraWorkerUrl,
+	},
+	devtools: import.meta.env.DEV,
+})
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<KoraProvider app={app} fallback={<div>Loading...</div>}>
+			<App />
+		</KoraProvider>
+	</StrictMode>,
+)

package/templates/react-basic/src/modules/todos/todo.mutations.ts

@@ -0,0 +1,25 @@
+import type { CollectionAccessor } from 'korajs'
+
+export interface CreateTodoInput {
+	title: string
+}
+
+export interface UpdateTodoStatusInput {
+	completed: boolean
+}
+
+export function createTodo(todos: CollectionAccessor, data: CreateTodoInput) {
+	return todos.insert({ title: data.title })
+}
+
+export function updateTodoStatus(
+	todos: CollectionAccessor,
+	id: string,
+	data: UpdateTodoStatusInput,
+) {
+	return todos.update(id, { completed: data.completed })
+}
+
+export function deleteTodo(todos: CollectionAccessor, id: string) {
+	return todos.delete(id)
+}

package/templates/react-basic/src/modules/todos/todo.queries.ts

@@ -0,0 +1,5 @@
+import type { CollectionAccessor } from 'korajs'
+
+export function orderedTodos(todos: CollectionAccessor) {
+	return todos.where({}).orderBy('createdAt', 'desc')
+}

package/templates/react-basic/src/modules/todos/todo.schema.ts

@@ -0,0 +1,10 @@
+import { t } from 'korajs'
+
+export const todos = {
+	fields: {
+		title: t.string(),
+		completed: t.boolean().default(false),
+		createdAt: t.timestamp().auto(),
+	},
+	indexes: ['completed', 'createdAt'],
+}

package/templates/react-basic/src/modules/todos/useTodos.ts

@@ -0,0 +1,31 @@
+import { useCollection, useMutation, useQuery } from '@korajs/react'
+import {
+	type CreateTodoInput,
+	type UpdateTodoStatusInput,
+	createTodo,
+	deleteTodo,
+	updateTodoStatus,
+} from './todo.mutations'
+import { orderedTodos } from './todo.queries'
+
+export function useTodos() {
+	const todos = useCollection('todos')
+	const allTodos = useQuery(orderedTodos(todos))
+	const addTodo = useMutation((data: CreateTodoInput) => createTodo(todos, data))
+	const toggleTodo = useMutation((id: string, data: UpdateTodoStatusInput) =>
+		updateTodoStatus(todos, id, data),
+	)
+	const removeTodo = useMutation((id: string) => deleteTodo(todos, id))
+
+	const activeTodos = allTodos.filter((todo) => !todo.completed)
+	const completedTodos = allTodos.filter((todo) => !!todo.completed)
+
+	return {
+		allTodos,
+		activeTodos,
+		completedTodos,
+		addTodo,
+		toggleTodo,
+		deleteTodo: removeTodo,
+	}
+}

package/templates/react-basic/src/schema.ts

@@ -0,0 +1,9 @@
+import { defineSchema } from 'korajs'
+import { todos } from './modules/todos/todo.schema'
+
+export default defineSchema({
+	version: 1,
+	collections: {
+		todos,
+	},
+})

package/templates/react-basic/src/vite-env.d.ts

@@ -0,0 +1,18 @@
+interface ImportMetaEnv {
+	readonly DEV: boolean
+	readonly VITE_SYNC_URL?: string
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv
+}
+
+declare module '*?worker&url' {
+	const url: string
+	export default url
+}
+
+declare module '*?url' {
+	const url: string
+	export default url
+}

package/templates/react-basic/tsconfig.json.hbs

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/templates/react-basic/vite.config.ts

@@ -0,0 +1,88 @@
+import { copyFileSync, existsSync, readdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { koraServiceWorker } from '@korajs/cli/vite'
+import react from '@vitejs/plugin-react'
+import type { Plugin } from 'vite'
+import { defineConfig } from 'vite'
+
+/**
+ * Adds Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers
+ * enabling SharedArrayBuffer where browsers support it while keeping common
+ * third-party embeds such as YouTube and Vimeo usable. Kora falls back to
+ * durable IndexedDB storage when SharedArrayBuffer is unavailable.
+ */
+function crossOriginIsolation(): Plugin {
+	const embedderPolicy = process.env.KORA_COEP_POLICY || 'credentialless'
+
+	return {
+		name: 'cross-origin-isolation',
+		configureServer(server) {
+			server.middlewares.use((_req, res, next) => {
+				res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+				res.setHeader('Cross-Origin-Embedder-Policy', embedderPolicy)
+				next()
+			})
+		},
+		configurePreviewServer(server) {
+			server.middlewares.use((_req, res, next) => {
+				res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+				res.setHeader('Cross-Origin-Embedder-Policy', embedderPolicy)
+				next()
+			})
+		},
+	}
+}
+
+/**
+ * Fixes sqlite3 WASM assets in production builds:
+ * 1. Copies the hashed sqlite3.wasm to an unhashed name so Emscripten's locateFile works
+ * 2. Copies sqlite3-opfs-async-proxy.js from node_modules (not bundled by Vite since
+ *    sqlite3 loads it dynamically) so the full OPFS VFS can initialize without errors
+ */
+function sqliteWasmHotfix(): Plugin {
+	return {
+		name: 'sqlite-wasm-hotfix',
+		apply: 'build',
+		closeBundle() {
+			const assetsDir = resolve('dist', 'assets')
+			if (!existsSync(assetsDir)) return
+
+			// Copy hashed sqlite3.wasm to unhashed name
+			for (const file of readdirSync(assetsDir)) {
+				if (/^sqlite3-.+\.wasm$/.test(file)) {
+					copyFileSync(join(assetsDir, file), join(assetsDir, 'sqlite3.wasm'))
+					break
+				}
+			}
+
+			// Copy OPFS async proxy worker (dynamically loaded by sqlite3, not detected by Vite)
+			const proxyFile = resolve(
+				'node_modules',
+				'@sqlite.org',
+				'sqlite-wasm',
+				'sqlite-wasm',
+				'jswasm',
+				'sqlite3-opfs-async-proxy.js',
+			)
+			if (existsSync(proxyFile)) {
+				copyFileSync(proxyFile, join(assetsDir, 'sqlite3-opfs-async-proxy.js'))
+			}
+		},
+	}
+}
+
+// koraServiceWorker() (build only, keep it last): precaches the built app shell so the
+// app opens offline, with a "new version available" reload prompt. See @korajs/cli/vite.
+export default defineConfig({
+	plugins: [react(), crossOriginIsolation(), sqliteWasmHotfix(), koraServiceWorker()],
+	worker: {
+		format: 'es',
+	},
+	optimizeDeps: {
+		exclude: ['@sqlite.org/sqlite-wasm', '@korajs/store'],
+		include: ['yjs'],
+	},
+	resolve: {
+		dedupe: ['yjs'],
+	},
+})

package/templates/react-sync/.env.example

@@ -0,0 +1,25 @@
+# Kora Sync Server
+# WebSocket URL for the sync server (used by the client)
+VITE_SYNC_URL=ws://localhost:3001
+
+# Sync server port
+PORT=3001
+
+# Server database
+# Leave DATABASE_URL empty to use SQLite at KORA_SERVER_DB.
+KORA_SERVER_DB=./.kora/kora-server.db
+DATABASE_URL=
+
+# Operational endpoints (/__kora, /__kora/status, /__kora/events, /__kora/metrics, backups)
+# Set these in production. Use Authorization: Bearer <token> when calling protected endpoints.
+KORA_ADMIN_TOKEN=
+KORA_METRICS_TOKEN=
+KORA_BACKUP_TOKEN=
+
+# Optional sync path
+KORA_SYNC_PATH=/kora-sync
+
+# Auth
+# Set this to enable built-in /auth/* routes and authenticated sync.
+# Generate with: node -e "console.log(require('node:crypto').randomBytes(32).toString('hex'))"
+KORA_AUTH_SECRET=