@korajs/cli 0.0.0-canary-20261008174129

package/templates/react-tailwind-sync/src/App.tsx

@@ -0,0 +1,293 @@
+import { useAuth } from '@korajs/auth/react'
+import {
+	AlertCircle,
+	CheckCircle2,
+	Circle,
+	ClipboardList,
+	Loader2,
+	Plus,
+	Trash2,
+	Wifi,
+	WifiOff,
+} from 'lucide-react'
+import { useState } from 'react'
+import { useSyncStatus } from './kora'
+import { useTodos } from './modules/todos/useTodos'
+
+type Filter = 'all' | 'active' | 'completed'
+
+export function App() {
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = useTodos()
+	const isAdding = addTodo.isLoading
+	const status = useSyncStatus()
+	const { user, isAuthenticated, signInWithOAuth, signOut, error } = useAuth()
+
+	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="min-h-screen bg-gray-950 text-gray-100">
+			<div className="mx-auto max-w-2xl px-4 py-12">
+				{/* Header */}
+				<div className="flex items-center justify-between mb-8">
+					<div className="flex items-center gap-3">
+						<ClipboardList className="h-8 w-8 text-indigo-400" />
+						<h1 className="text-2xl font-bold">My Tasks</h1>
+					</div>
+					<div className="flex items-center gap-2">
+						<SyncBadge status={status} />
+						{isAuthenticated ? (
+							<button
+								type="button"
+								onClick={() => signOut()}
+								className="max-w-44 truncate rounded-full border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-gray-300 transition hover:border-gray-600"
+							>
+								{user?.email || 'Sign out'}
+							</button>
+						) : (
+							<button
+								type="button"
+								onClick={() => signInWithOAuth('google')}
+								className="rounded-full border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-gray-300 transition hover:border-gray-600"
+							>
+								Sign in
+							</button>
+						)}
+					</div>
+				</div>
+
+				{error && (
+					<div className="mb-4 rounded-lg border border-red-400/30 px-3 py-2 text-sm text-red-300">
+						{error}
+					</div>
+				)}
+
+				<ClockErrorBanner status={status} />
+
+				{/* Stats */}
+				<div className="grid grid-cols-3 gap-4 mb-8">
+					<StatCard label="Total" value={allTodos.length} color="text-gray-300" />
+					<StatCard label="Remaining" value={activeTodos.length} color="text-amber-400" />
+					<StatCard label="Done" value={completedTodos.length} color="text-emerald-400" />
+				</div>
+
+				{/* Add form */}
+				<form onSubmit={handleSubmit} className="flex gap-3 mb-8">
+					<input
+						type="text"
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						placeholder="What needs to be done?"
+						className="flex-1 rounded-lg border border-gray-700 bg-gray-900 px-4 py-3 text-gray-100 placeholder-gray-500 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+					/>
+					<button
+						type="submit"
+						disabled={isAdding || !input.trim()}
+						className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-3 font-medium text-white transition hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{isAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+						Add
+					</button>
+				</form>
+
+				{/* Filter tabs */}
+				<div className="flex gap-2 mb-6">
+					{(['all', 'active', 'completed'] as const).map((f) => {
+						const count =
+							f === 'all'
+								? allTodos.length
+								: f === 'active'
+									? activeTodos.length
+									: completedTodos.length
+						return (
+							<button
+								key={f}
+								onClick={() => setFilter(f)}
+								className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition ${
+									filter === f
+										? 'bg-indigo-600 text-white'
+										: 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'
+								}`}
+							>
+								{f.charAt(0).toUpperCase() + f.slice(1)}
+								<span
+									className={`rounded-full px-2 py-0.5 text-xs ${
+										filter === f ? 'bg-indigo-500 text-white' : 'bg-gray-700 text-gray-400'
+									}`}
+								>
+									{count}
+								</span>
+							</button>
+						)
+					})}
+				</div>
+
+				{/* Todo list */}
+				<div className="space-y-2">
+					{filteredTodos.length === 0 ? (
+						<EmptyState filter={filter} />
+					) : (
+						filteredTodos.map((todo) => (
+							<div
+								key={todo.id}
+								className="group flex items-center gap-3 rounded-lg border border-gray-800 bg-gray-900 px-4 py-3 transition hover:border-gray-700"
+							>
+								<button
+									onClick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+									className="shrink-0 text-gray-500 hover:text-indigo-400 transition"
+								>
+									{todo.completed ? (
+										<CheckCircle2 className="h-5 w-5 text-emerald-400" />
+									) : (
+										<Circle className="h-5 w-5" />
+									)}
+								</button>
+								<span
+									className={`flex-1 ${
+										todo.completed ? 'text-gray-500 line-through' : 'text-gray-100'
+									}`}
+								>
+									{String(todo.title)}
+								</span>
+								{todo.createdAt && (
+									<span className="text-xs text-gray-600">
+										{formatTime(Number(todo.createdAt))}
+									</span>
+								)}
+								<button
+									onClick={() => deleteTodo.mutate(todo.id)}
+									className="shrink-0 text-gray-600 opacity-0 transition hover:text-red-400 group-hover:opacity-100"
+								>
+									<Trash2 className="h-4 w-4" />
+								</button>
+							</div>
+						))
+					)}
+				</div>
+
+				{/* Footer */}
+				{allTodos.length > 0 && (
+					<div className="mt-6 flex items-center justify-between text-sm text-gray-500">
+						<span>
+							{activeTodos.length} item{activeTodos.length !== 1 ? 's' : ''} left
+						</span>
+						{completedTodos.length > 0 && (
+							<button
+								onClick={clearCompleted}
+								className="text-gray-500 transition hover:text-gray-300"
+							>
+								Clear completed
+							</button>
+						)}
+					</div>
+				)}
+
+				<p className="mt-12 text-center text-xs text-gray-700">
+					Powered by Kora &mdash; offline-first, real-time sync
+				</p>
+			</div>
+		</div>
+	)
+}
+
+function SyncBadge({ status }: { status: { status: string; pendingOperations?: number } }) {
+	const s = status.status
+	const pending = status.pendingOperations ?? 0
+
+	const config: Record<string, { icon: typeof Wifi; color: string; label: string }> = {
+		connected: { icon: Wifi, color: 'text-emerald-400', label: 'Connected' },
+		syncing: { icon: Wifi, color: 'text-amber-400', label: 'Syncing' },
+		synced: { icon: Wifi, color: 'text-emerald-400', label: 'Synced' },
+		offline: { icon: WifiOff, color: 'text-gray-500', label: 'Offline' },
+		error: { icon: AlertCircle, color: 'text-red-400', label: 'Error' },
+		'clock-error': { icon: AlertCircle, color: 'text-red-400', label: 'Clock error' },
+	}
+
+	const { icon: Icon, color, label } = config[s] ?? config.offline!
+
+	return (
+		<div className="flex items-center gap-2 rounded-full bg-gray-800 px-3 py-1.5 text-sm">
+			<Icon className={`h-4 w-4 ${color}`} />
+			<span className={color}>{label}</span>
+			{pending > 0 && (
+				<span className="rounded-full bg-gray-700 px-2 py-0.5 text-xs text-gray-400">
+					{pending} pending
+				</span>
+			)}
+		</div>
+	)
+}
+
+/**
+ * Shown when sync is paused because this device's clock is set too far ahead.
+ * Local changes keep saving; they sync automatically once the clock is fixed.
+ */
+function ClockErrorBanner({
+	status,
+}: {
+	status: { status: string; clockSkewMs?: number | null }
+}) {
+	if (status.status !== 'clock-error') return null
+	const skew = status.clockSkewMs
+	const minutes =
+		typeof skew === 'number' && Number.isFinite(skew) ? Math.round(Math.abs(skew) / 60000) : null
+	return (
+		<div className="mb-4 rounded-lg border border-amber-400/40 bg-amber-400/10 px-4 py-3 text-sm text-amber-200">
+			<strong>
+				This device's clock looks wrong{minutes !== null ? ` (about ${minutes} min ahead)` : ''}.
+			</strong>{' '}
+			Your changes are safe on this device, but they can't be shared with your other devices until
+			the clock is corrected. Open your device's Settings, find Date & Time, and turn on "Set
+			automatically", then return here.
+		</div>
+	)
+}
+
+function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
+	return (
+		<div className="rounded-lg border border-gray-800 bg-gray-900 p-4">
+			<p className="text-sm text-gray-500">{label}</p>
+			<p className={`text-2xl font-bold ${color}`}>{value}</p>
+		</div>
+	)
+}
+
+function EmptyState({ filter }: { filter: Filter }) {
+	const messages: Record<Filter, string> = {
+		all: 'No tasks yet. Add one above!',
+		active: 'All caught up! No active tasks.',
+		completed: 'No completed tasks yet.',
+	}
+	return (
+		<div className="rounded-lg border border-dashed border-gray-800 py-12 text-center text-gray-600">
+			{messages[filter]}
+		</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-tailwind-sync/src/auth.ts

@@ -0,0 +1,25 @@
+import { createKoraAuth } from '@korajs/auth'
+
+export const authServerUrl =
+	import.meta.env.VITE_AUTH_URL || `${window.location.protocol}//${window.location.host}`
+
+export const authClient = createKoraAuth({
+	serverUrl: authServerUrl,
+})
+
+export async function completeOAuthCallbackFromLocation(): Promise<void> {
+	const url = new URL(window.location.href)
+	const code = url.searchParams.get('code')
+	const state = url.searchParams.get('state')
+	const provider = url.searchParams.get('provider') || 'google'
+
+	if (!code || !state) {
+		return
+	}
+
+	await authClient.completeOAuthSignIn(provider, { code, state })
+	url.searchParams.delete('code')
+	url.searchParams.delete('state')
+	url.searchParams.delete('provider')
+	window.history.replaceState({}, document.title, `${url.pathname}${url.search}${url.hash}`)
+}

package/templates/react-tailwind-sync/src/index.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@layer base {
+	body {
+		@apply bg-gray-950 text-gray-100 antialiased;
+	}
+}

package/templates/react-tailwind-sync/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-tailwind-sync/src/kora.ts

@@ -0,0 +1,32 @@
+import { createKoraAuthSync } from '@korajs/auth'
+import { createApp } from 'korajs'
+import { createKoraHooks } from 'korajs/react'
+import { authClient } from './auth'
+import koraWorkerUrl from './kora-worker.ts?worker&url'
+import schema from './schema'
+
+// Build sync URL: use env var if set, otherwise derive from current page host.
+// This allows the Vite proxy (/kora-sync → ws://localhost:3001) to work in dev,
+// and also works through any tunnel (ngrok, cloudflared) without extra configuration.
+const syncUrl =
+	import.meta.env.VITE_SYNC_URL ||
+	`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/kora-sync`
+
+export const app = createApp({
+	schema,
+	sync: {
+		url: syncUrl,
+		authClient: createKoraAuthSync({ authClient, schema }),
+	},
+	store: {
+		workerUrl: koraWorkerUrl,
+	},
+	devtools: import.meta.env.DEV,
+})
+
+/** The typed `todos` collection: inserts, updates and queries are checked against the schema. */
+export type Todos = typeof app.todos
+
+// Hooks bound to this app's schema: `useCollection('todoz')` is a type error, and the
+// rows `useQuery` returns are typed from the query.
+export const { useCollection, useQuery, useMutation, useSyncStatus } = createKoraHooks<typeof app>()

package/templates/react-tailwind-sync/src/main.tsx

@@ -0,0 +1,44 @@
+import { AuthProvider } from '@korajs/auth/react'
+import { KoraProvider } from '@korajs/react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import { authClient, completeOAuthCallbackFromLocation } from './auth'
+import { app } from './kora'
+import './index.css'
+
+// Connect to sync server once the app is ready
+app.ready.then(() => app.sync?.connect())
+void completeOAuthCallbackFromLocation().catch((error) => {
+	console.error('[Kora Auth] OAuth callback failed:', error)
+})
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) {
+	throw new Error('Root element not found')
+}
+
+createRoot(rootElement).render(
+	<StrictMode>
+		<AuthProvider
+			client={authClient}
+			fallback={
+				<div className="flex h-screen items-center justify-center bg-gray-950 text-gray-400">
+					Restoring session...
+				</div>
+			}
+		>
+			<KoraProvider
+				app={app}
+				fallback={
+					<div className="flex h-screen items-center justify-center bg-gray-950 text-gray-400">
+						Loading...
+					</div>
+				}
+			>
+				<App />
+			</KoraProvider>
+		</AuthProvider>
+	</StrictMode>,
+)

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

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

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

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

package/templates/react-tailwind-sync/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-tailwind-sync/src/modules/todos/useTodos.ts

@@ -0,0 +1,31 @@
+import { useCollection, useMutation, useQuery } from '../../kora'
+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-tailwind-sync/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-tailwind-sync/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+interface ImportMetaEnv {
+	readonly DEV: boolean
+	readonly VITE_SYNC_URL?: string
+	readonly VITE_AUTH_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-tailwind-sync/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-tailwind-sync/vite.config.ts

@@ -0,0 +1,112 @@
+import { copyFileSync, existsSync, readdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { koraServiceWorker } from '@korajs/cli/vite'
+import tailwindcss from '@tailwindcss/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(),
+		tailwindcss(),
+		crossOriginIsolation(),
+		sqliteWasmHotfix(),
+		koraServiceWorker(),
+	],
+	worker: {
+		format: 'es',
+	},
+	optimizeDeps: {
+		exclude: ['@sqlite.org/sqlite-wasm', '@korajs/store'],
+		include: ['yjs'],
+	},
+	resolve: {
+		dedupe: ['yjs'],
+	},
+	server: {
+		allowedHosts: true,
+		watch: {
+			ignored: ['**/.kora/**', '**/kora/generated/**', '**/*.db', '**/*.db-shm', '**/*.db-wal'],
+		},
+		proxy: {
+			'/kora-sync': {
+				target: 'ws://localhost:3001',
+				ws: true,
+				rewriteWsOrigin: true,
+			},
+			'/auth': {
+				target: 'http://localhost:3001',
+				changeOrigin: true,
+			},
+		},
+	},
+})

package/templates/svelte-basic/.env.example

@@ -0,0 +1,3 @@
+# No environment variables required for local-only mode.
+# To enable sync, see the README for instructions.
+# VITE_SYNC_URL=ws://localhost:3001