@korajs/cli 0.4.0 → 0.6.0

package/templates/svelte-sync/server.ts

@@ -0,0 +1,90 @@
+import {
+	type CreateKoraAuthServerOptions,
+	createKoraAuthServer,
+	createPostgresOAuthStores,
+	createSqliteOAuthStores,
+	googleProvider,
+} from '@korajs/auth/server'
+import {
+	createPostgresServerStore,
+	createProductionServer,
+	createSqliteServerStore,
+} from '@korajs/server'
+import schema from './src/schema'
+
+async function createStore() {
+	if (process.env.DATABASE_URL) {
+		return createPostgresServerStore({
+			connectionString: process.env.DATABASE_URL,
+		})
+	}
+
+	return createSqliteServerStore({
+		filename: process.env.KORA_SERVER_DB || './kora-server.db',
+	})
+}
+
+async function start() {
+	const store = await createStore()
+	await store.setSchema(schema)
+
+	const syncPath = process.env.KORA_SYNC_PATH || '/kora-sync'
+	const auth = await createAuth()
+	const server = createProductionServer({
+		store,
+		port: Number(process.env.PORT) || 3001,
+		staticDir: './dist',
+		syncPath,
+		httpRoutes: auth ? [{ path: '/auth', handle: auth.handleRequest }] : undefined,
+		syncOptions: auth ? { auth: auth.auth } : undefined,
+		operationalAuth: {
+			adminToken: process.env.KORA_ADMIN_TOKEN,
+			metricsToken: process.env.KORA_METRICS_TOKEN,
+			backupToken: process.env.KORA_BACKUP_TOKEN,
+		},
+	})
+
+	const url = await server.start()
+	console.log(`Kora app running at ${url}`)
+	console.log(`  Sync endpoint: ${url.replace('http', 'ws')}${syncPath}`)
+	if (auth) console.log(`  Auth endpoint: ${url}/auth`)
+}
+
+void start()
+
+async function createAuth() {
+	if (!process.env.KORA_AUTH_SECRET) {
+		return null
+	}
+
+	const oauth = await createOAuthConfig()
+	return createKoraAuthServer({
+		jwtSecret: process.env.KORA_AUTH_SECRET,
+		...(oauth ? { oauth } : {}),
+	})
+}
+
+async function createOAuthConfig(): Promise<CreateKoraAuthServerOptions['oauth'] | undefined> {
+	if (!process.env.KORA_GOOGLE_CLIENT_ID || !process.env.KORA_GOOGLE_REDIRECT_URI) {
+		return undefined
+	}
+
+	const oauthStores = process.env.DATABASE_URL
+		? await createPostgresOAuthStores({ connectionString: process.env.DATABASE_URL })
+		: await createSqliteOAuthStores({
+				filename: process.env.KORA_AUTH_DB || './kora-auth.db',
+			})
+
+	return {
+		providers: [
+			googleProvider({
+				clientId: process.env.KORA_GOOGLE_CLIENT_ID,
+				clientSecret: process.env.KORA_GOOGLE_CLIENT_SECRET,
+				redirectUri: process.env.KORA_GOOGLE_REDIRECT_URI,
+				pkce: process.env.KORA_OAUTH_PKCE === 'true' || !process.env.KORA_GOOGLE_CLIENT_SECRET,
+			}),
+		],
+		stateStore: oauthStores.stateStore,
+		linkedIdentityStore: oauthStores.linkedIdentityStore,
+	}
+}

package/templates/svelte-sync/src/App.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { createAuthStore } from '@korajs/auth/svelte'
+	import { createSyncStatusStore } from '@korajs/svelte'
+	import { createTodosStores } from './modules/todos/useTodos'
+
+	type Filter = 'all' | 'active' | 'completed'
+
+	const syncStatus = createSyncStatusStore()
+	const auth = createAuthStore()
+	const todos = createTodosStores()
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = todos
+
+	let filter = $state<Filter>('all')
+	let input = $state('')
+
+	const filteredTodos = $derived(
+		filter === 'active'
+			? $activeTodos
+			: filter === 'completed'
+				? $completedTodos
+				: $allTodos,
+	)
+
+	function handleSubmit(event: SubmitEvent): void {
+		event.preventDefault()
+		const title = input.trim()
+		if (!title) return
+		addTodo.mutate({ title })
+		input = ''
+	}
+
+	function clearCompleted(): void {
+		for (const todo of $completedTodos) {
+			deleteTodo.mutate(todo.id)
+		}
+	}
+
+	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' })
+	}
+</script>
+
+<div class="app">
+	<div class="header">
+		<h1>My Tasks</h1>
+		<div class="header-actions">
+			<div class="sync-badge">
+				<span class="sync-dot {$syncStatus.status}"></span>
+				<span>{$syncStatus.status}</span>
+			</div>
+			{#if $auth.isAuthenticated}
+				<button type="button" class="auth-button" onclick={() => $auth.signOut()}>
+					{$auth.user?.email || 'Sign out'}
+				</button>
+			{:else}
+				<button type="button" class="auth-button" onclick={() => $auth.signInWithOAuth('google')}>
+					Sign in
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	{#if $auth.error}
+		<div class="auth-error">{$auth.error}</div>
+	{/if}
+
+	<div class="stats">
+		<div class="stat-card">
+			<div class="label">Total</div>
+			<div class="value muted">{$allTodos.length}</div>
+		</div>
+		<div class="stat-card">
+			<div class="label">Remaining</div>
+			<div class="value warning">{$activeTodos.length}</div>
+		</div>
+		<div class="stat-card">
+			<div class="label">Done</div>
+			<div class="value success">{$completedTodos.length}</div>
+		</div>
+	</div>
+
+	<form class="add-form" onsubmit={handleSubmit}>
+		<input bind:value={input} type="text" placeholder="What needs to be done?" />
+		<button type="submit" disabled={!input.trim()}>Add</button>
+	</form>
+
+	<div class="filters">
+		{#each ['all', 'active', 'completed'] as const as f}
+			<button
+				type="button"
+				class="filter-btn {filter === f ? 'active' : ''}"
+				onclick={() => (filter = f)}
+			>
+				{f.charAt(0).toUpperCase() + f.slice(1)}
+				<span class="badge">
+					{f === 'all'
+						? $allTodos.length
+						: f === 'active'
+							? $activeTodos.length
+							: $completedTodos.length}
+				</span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="todo-list">
+		{#if filteredTodos.length === 0}
+			<div class="empty-state">
+				{#if filter === 'all'}
+					No tasks yet. Add one above!
+				{:else if filter === 'active'}
+					All caught up! No active tasks.
+				{:else}
+					No completed tasks yet.
+				{/if}
+			</div>
+		{:else}
+			{#each filteredTodos as todo (todo.id)}
+				<div class="todo-item">
+					<button
+						type="button"
+						class="toggle {todo.completed ? 'checked' : ''}"
+						onclick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+					>
+						{todo.completed ? '✓' : ''}
+					</button>
+					<span class="title {todo.completed ? 'done' : ''}">{String(todo.title)}</span>
+					{#if todo.createdAt}
+						<span class="time">{formatTime(Number(todo.createdAt))}</span>
+					{/if}
+					<button type="button" class="delete-btn" onclick={() => deleteTodo.mutate(todo.id)}>
+						×
+					</button>
+				</div>
+			{/each}
+		{/if}
+	</div>
+
+	{#if $allTodos.length > 0}
+		<div class="footer">
+			<span>{$activeTodos.length} item{$activeTodos.length !== 1 ? 's' : ''} left</span>
+			{#if $completedTodos.length > 0}
+				<button type="button" onclick={clearCompleted}>Clear completed</button>
+			{/if}
+		</div>
+	{/if}
+
+	<p class="branding">Powered by Kora — offline-first, real-time sync</p>
+</div>

package/templates/svelte-sync/src/Root.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { AuthClient } from '@korajs/auth'
+	import type { KoraAppLike } from '@korajs/svelte'
+	import AuthProvider from '@korajs/auth/svelte/AuthProvider.svelte'
+	import KoraProvider from '@korajs/svelte/KoraProvider.svelte'
+	import App from './App.svelte'
+
+	let { kora, authClient }: { kora: KoraAppLike; authClient: AuthClient } = $props()
+</script>
+
+<AuthProvider client={authClient}>
+	{#snippet fallback()}
+		<div>Restoring session...</div>
+	{/snippet}
+
+	<KoraProvider app={kora}>
+		{#snippet fallback()}
+			<div>Loading...</div>
+		{/snippet}
+		<App />
+	</KoraProvider>
+</AuthProvider>

package/templates/svelte-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/svelte-sync/src/index.css

@@ -0,0 +1,339 @@
+*,
+*::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;
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.sync-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: var(--color-surface);
+	font-size: 0.8rem;
+}
+
+.sync-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+}
+
+.sync-dot.connected,
+.sync-dot.synced {
+	background: var(--color-success);
+}
+.sync-dot.syncing {
+	background: var(--color-warning);
+}
+.sync-dot.offline {
+	background: var(--color-text-muted);
+}
+.sync-dot.error {
+	background: var(--color-danger);
+}
+
+.auth-button {
+	border: 1px solid var(--color-border);
+	border-radius: 999px;
+	background: var(--color-surface);
+	color: var(--color-text);
+	cursor: pointer;
+	font-size: 0.8rem;
+	max-width: 180px;
+	overflow: hidden;
+	padding: 4px 12px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.auth-button:hover {
+	border-color: var(--color-border-hover);
+}
+
+.auth-error {
+	border: 1px solid rgba(248, 113, 113, 0.35);
+	border-radius: var(--radius);
+	color: var(--color-danger);
+	font-size: 0.85rem;
+	margin-bottom: 16px;
+	padding: 10px 12px;
+}
+
+.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/svelte-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/svelte-sync/src/main.ts

@@ -0,0 +1,32 @@
+import { createKoraAuthSync } from '@korajs/auth'
+import { createApp as createKoraApp } from 'korajs'
+import { mount } from 'svelte'
+import Root from './Root.svelte'
+import { authClient, completeOAuthCallbackFromLocation } from './auth'
+import schema from './schema'
+import './index.css'
+import koraWorkerUrl from './kora-worker.ts?worker&url'
+
+const syncUrl =
+	import.meta.env.VITE_SYNC_URL ||
+	`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/kora-sync`
+
+const kora = createKoraApp({
+	schema,
+	sync: {
+		url: syncUrl,
+		authClient: createKoraAuthSync({ authClient, schema }),
+	},
+	store: {
+		workerUrl: koraWorkerUrl,
+	},
+	devtools: true,
+})
+
+kora.ready.then(() => kora.sync?.connect())
+
+void completeOAuthCallbackFromLocation().catch((error) => {
+	console.error('[Kora Auth] OAuth callback failed:', error)
+})
+
+mount(Root, { target: document.getElementById('app')!, props: { kora, authClient } })

package/templates/svelte-sync/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/svelte-sync/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')
+}