@korajs/cli 0.5.0 → 0.6.0

package/templates/vue-tailwind-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/vue-tailwind-sync/src/App.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { useAuth } from '@korajs/auth/vue'
+import { useSyncStatus } from '@korajs/vue'
+import {
+	AlertCircle,
+	CheckCircle2,
+	Circle,
+	ClipboardList,
+	Loader2,
+	Plus,
+	Trash2,
+	Wifi,
+	WifiOff,
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import { useTodos } from './modules/todos/useTodos'
+
+type Filter = 'all' | 'active' | 'completed'
+
+const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = useTodos()
+const syncStatus = useSyncStatus()
+const { user, isAuthenticated, signInWithOAuth, signOut, error } = useAuth()
+
+const filter = ref<Filter>('all')
+const input = ref('')
+
+const filteredTodos = computed(() => {
+	if (filter.value === 'active') return activeTodos.value
+	if (filter.value === 'completed') return completedTodos.value
+	return allTodos.value
+})
+
+const syncBadge = computed(() => {
+	const status = syncStatus.value
+	const s = status.status
+	const pending = status.pendingOperations ?? 0
+	const map: 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' },
+	}
+	return { ...(map[s] ?? map.offline), pending }
+})
+
+function handleSubmit(): void {
+	const title = input.value.trim()
+	if (!title) return
+	addTodo.mutate({ title })
+	input.value = ''
+}
+
+function clearCompleted(): void {
+	for (const todo of completedTodos.value) {
+		deleteTodo.mutate(todo.id)
+	}
+}
+
+function emptyMessage(f: Filter): string {
+	if (f === 'all') return 'No tasks yet. Add one above!'
+	if (f === 'active') return 'All caught up! No active tasks.'
+	return 'No completed tasks yet.'
+}
+
+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>
+
+<template>
+	<div class="min-h-screen bg-gray-950 text-gray-100">
+		<div class="mx-auto max-w-2xl px-4 py-12">
+			<div class="mb-8 flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<ClipboardList class="h-8 w-8 text-indigo-400" />
+					<h1 class="text-2xl font-bold">My Tasks</h1>
+				</div>
+				<div class="flex items-center gap-2">
+					<div class="flex items-center gap-2 rounded-full bg-gray-800 px-3 py-1.5 text-sm">
+						<component :is="syncBadge.icon" :class="['h-4 w-4', syncBadge.color]" />
+						<span :class="syncBadge.color">{{ syncBadge.label }}</span>
+						<span
+							v-if="syncBadge.pending > 0"
+							class="rounded-full bg-gray-700 px-2 py-0.5 text-xs text-gray-400"
+						>
+							{{ syncBadge.pending }} pending
+						</span>
+					</div>
+					<button
+						v-if="isAuthenticated"
+						type="button"
+						class="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"
+						@click="signOut()"
+					>
+						{{ user?.email || 'Sign out' }}
+					</button>
+					<button
+						v-else
+						type="button"
+						class="rounded-full border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-gray-300 transition hover:border-gray-600"
+						@click="signInWithOAuth('google')"
+					>
+						Sign in
+					</button>
+				</div>
+			</div>
+
+			<div v-if="error" class="mb-4 rounded-lg border border-red-400/30 px-3 py-2 text-sm text-red-300">
+				{{ error }}
+			</div>
+
+			<div class="mb-8 grid grid-cols-3 gap-4">
+				<div class="rounded-lg border border-gray-800 bg-gray-900 p-4">
+					<p class="text-sm text-gray-500">Total</p>
+					<p class="text-2xl font-bold text-gray-300">{{ allTodos.length }}</p>
+				</div>
+				<div class="rounded-lg border border-gray-800 bg-gray-900 p-4">
+					<p class="text-sm text-gray-500">Remaining</p>
+					<p class="text-2xl font-bold text-amber-400">{{ activeTodos.length }}</p>
+				</div>
+				<div class="rounded-lg border border-gray-800 bg-gray-900 p-4">
+					<p class="text-sm text-gray-500">Done</p>
+					<p class="text-2xl font-bold text-emerald-400">{{ completedTodos.length }}</p>
+				</div>
+			</div>
+
+			<form class="mb-8 flex gap-3" @submit.prevent="handleSubmit">
+				<input
+					v-model="input"
+					type="text"
+					placeholder="What needs to be done?"
+					class="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="addTodo.isLoading.value || !input.trim()"
+					class="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-3 font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<Loader2 v-if="addTodo.isLoading.value" class="h-4 w-4 animate-spin" />
+					<Plus v-else class="h-4 w-4" />
+					Add
+				</button>
+			</form>
+
+			<div class="mb-6 flex gap-2">
+				<button
+					v-for="f in (['all', 'active', 'completed'] as const)"
+					:key="f"
+					type="button"
+					:class="[
+						'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',
+					]"
+					@click="filter = f"
+				>
+					{{ f.charAt(0).toUpperCase() + f.slice(1) }}
+					<span
+						:class="[
+							'rounded-full px-2 py-0.5 text-xs',
+							filter === f ? 'bg-indigo-500 text-white' : 'bg-gray-700 text-gray-400',
+						]"
+					>
+						{{
+							f === 'all'
+								? allTodos.length
+								: f === 'active'
+									? activeTodos.length
+									: completedTodos.length
+						}}
+					</span>
+				</button>
+			</div>
+
+			<div class="space-y-2">
+				<div
+					v-if="filteredTodos.length === 0"
+					class="rounded-lg border border-dashed border-gray-800 py-12 text-center text-gray-600"
+				>
+					{{ emptyMessage(filter) }}
+				</div>
+				<template v-else>
+					<div
+						v-for="todo in filteredTodos"
+						:key="todo.id"
+						class="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
+						type="button"
+						class="shrink-0 text-gray-500 transition hover:text-indigo-400"
+						@click="toggleTodo.mutate(todo.id, { completed: !todo.completed })"
+					>
+						<CheckCircle2 v-if="todo.completed" class="h-5 w-5 text-emerald-400" />
+						<Circle v-else class="h-5 w-5" />
+					</button>
+					<span
+						:class="[
+							'flex-1',
+							todo.completed ? 'text-gray-500 line-through' : 'text-gray-100',
+						]"
+					>
+						{{ String(todo.title) }}
+					</span>
+					<span v-if="todo.createdAt" class="text-xs text-gray-600">
+						{{ formatTime(Number(todo.createdAt)) }}
+					</span>
+					<button
+						type="button"
+						class="shrink-0 text-gray-600 opacity-0 transition hover:text-red-400 group-hover:opacity-100"
+						@click="deleteTodo.mutate(todo.id)"
+					>
+						<Trash2 class="h-4 w-4" />
+					</button>
+					</div>
+				</template>
+			</div>
+
+			<div
+				v-if="allTodos.length > 0"
+				class="mt-6 flex items-center justify-between text-sm text-gray-500"
+			>
+				<span>{{ activeTodos.length }} item{{ activeTodos.length !== 1 ? 's' : '' }} left</span>
+				<button
+					v-if="completedTodos.length > 0"
+					type="button"
+					class="text-gray-500 transition hover:text-gray-300"
+					@click="clearCompleted"
+				>
+					Clear completed
+				</button>
+			</div>
+
+			<p class="mt-12 text-center text-xs text-gray-700">
+				Powered by Kora — offline-first, real-time sync
+			</p>
+		</div>
+	</div>
+</template>

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

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

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

@@ -0,0 +1,56 @@
+import { createKoraAuthSync } from '@korajs/auth'
+import { AuthProvider } from '@korajs/auth/vue'
+import { KoraProvider } from '@korajs/vue'
+import { createApp as createKoraApp } from 'korajs'
+import { createApp, h } from 'vue'
+import App from './App.vue'
+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)
+})
+
+const loadingFallback = h(
+	'div',
+	{ class: 'flex h-screen items-center justify-center bg-gray-950 text-gray-400' },
+	'Loading...',
+)
+
+createApp({
+	render: () =>
+		h(
+			AuthProvider,
+			{
+				client: authClient,
+				fallback: h(
+					'div',
+					{ class: 'flex h-screen items-center justify-center bg-gray-950 text-gray-400' },
+					'Restoring session...',
+				),
+			},
+			{
+				default: () =>
+					h(KoraProvider, { app: kora, fallback: loadingFallback }, { default: () => h(App) }),
+			},
+		),
+}).mount('#app')

package/templates/vue-tailwind-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/vue-tailwind-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')
+}

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

@@ -0,0 +1,32 @@
+import { computed } from 'vue'
+import { useCollection, useMutation, useQuery } from '@korajs/vue'
+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 = computed(() => allTodos.value.filter((todo) => !todo.completed))
+	const completedTodos = computed(() => allTodos.value.filter((todo) => !!todo.completed))
+
+	return {
+		allTodos,
+		activeTodos,
+		completedTodos,
+		addTodo,
+		toggleTodo,
+		deleteTodo: removeTodo,
+	}
+}

package/templates/vue-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/vue-tailwind-sync/src/vite-env.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue'
+	const component: DefineComponent<object, object, unknown>
+	export default component
+}
+
+interface ImportMetaEnv {
+	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/vue-tailwind-sync/tsconfig.json.hbs

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "lib": ["ES2022", "DOM"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/templates/vue-tailwind-sync/vite.config.ts

@@ -0,0 +1,80 @@
+import { copyFileSync, existsSync, readdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import type { Plugin } from 'vite'
+import { defineConfig } from 'vite'
+
+function crossOriginIsolation(): Plugin {
+	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', 'require-corp')
+				next()
+			})
+		},
+		configurePreviewServer(server) {
+			server.middlewares.use((_req, res, next) => {
+				res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+				res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
+				next()
+			})
+		},
+	}
+}
+
+function sqliteWasmHotfix(): Plugin {
+	return {
+		name: 'sqlite-wasm-hotfix',
+		apply: 'build',
+		closeBundle() {
+			const assetsDir = resolve('dist', 'assets')
+			if (!existsSync(assetsDir)) return
+
+			for (const file of readdirSync(assetsDir)) {
+				if (/^sqlite3-.+\.wasm$/.test(file)) {
+					copyFileSync(join(assetsDir, file), join(assetsDir, 'sqlite3.wasm'))
+					break
+				}
+			}
+
+			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'))
+			}
+		},
+	}
+}
+
+export default defineConfig({
+	plugins: [vue(), tailwindcss(), crossOriginIsolation(), sqliteWasmHotfix()],
+	worker: {
+		format: 'es',
+	},
+	optimizeDeps: {
+		exclude: ['@sqlite.org/sqlite-wasm', '@korajs/store'],
+		include: ['yjs'],
+	},
+	resolve: {
+		dedupe: ['yjs'],
+	},
+	server: {
+		allowedHosts: true,
+		proxy: {
+			'/kora-sync': {
+				target: 'ws://localhost:3001',
+				ws: true,
+				rewriteWsOrigin: true,
+			},
+		},
+	},
+})