@korajs/cli 0.5.0 → 0.6.0

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

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { createAuthStore } from '@korajs/auth/svelte'
+	import { createSyncStatusStore } from '@korajs/svelte'
+	import {
+		AlertCircle,
+		CheckCircle2,
+		Circle,
+		ClipboardList,
+		Loader2,
+		Plus,
+		Trash2,
+		Wifi,
+		WifiOff,
+	} from '@lucide/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,
+	)
+
+	const syncBadge = $derived.by(() => {
+		const s = $syncStatus.status
+		const pending = $syncStatus.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(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 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.'
+	}
+</script>
+
+<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">
+					<svelte:component this={syncBadge.icon} class="h-4 w-4 {syncBadge.color}" />
+					<span class={syncBadge.color}>{syncBadge.label}</span>
+					{#if syncBadge.pending > 0}
+						<span class="rounded-full bg-gray-700 px-2 py-0.5 text-xs text-gray-400">
+							{syncBadge.pending} pending
+						</span>
+					{/if}
+				</div>
+				{#if $auth.isAuthenticated}
+					<button
+						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"
+						onclick={() => $auth.signOut()}
+					>
+						{$auth.user?.email || 'Sign out'}
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="rounded-full border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-gray-300"
+						onclick={() => $auth.signInWithOAuth('google')}
+					>
+						Sign in
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		{#if $auth.error}
+			<div class="mb-4 rounded-lg border border-red-400/30 px-3 py-2 text-sm text-red-300">
+				{$auth.error}
+			</div>
+		{/if}
+
+		<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" onsubmit={handleSubmit}>
+			<input
+				bind:value={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"
+			/>
+			<button
+				type="submit"
+				disabled={!input.trim()}
+				class="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-3 font-medium text-white disabled:opacity-50"
+			>
+				<Plus class="h-4 w-4" />
+				Add
+			</button>
+		</form>
+
+		<div class="mb-6 flex gap-2">
+			{#each ['all', 'active', 'completed'] as const as f}
+				<button
+					type="button"
+					class="rounded-lg px-4 py-2 text-sm font-medium {filter === f
+						? 'bg-indigo-600 text-white'
+						: 'bg-gray-800 text-gray-400'}"
+					onclick={() => (filter = f)}
+				>
+					{f.charAt(0).toUpperCase() + f.slice(1)}
+				</button>
+			{/each}
+		</div>
+
+		<div class="space-y-2">
+			{#if filteredTodos.length === 0}
+				<div class="rounded-lg border border-dashed border-gray-800 py-12 text-center text-gray-600">
+					{emptyMessage(filter)}
+				</div>
+			{:else}
+				{#each filteredTodos as todo (todo.id)}
+					<div
+						class="group flex items-center gap-3 rounded-lg border border-gray-800 bg-gray-900 px-4 py-3"
+					>
+						<button
+							type="button"
+							class="text-gray-500 hover:text-indigo-400"
+							onclick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+						>
+							{#if todo.completed}
+								<CheckCircle2 class="h-5 w-5 text-emerald-400" />
+							{:else}
+								<Circle class="h-5 w-5" />
+							{/if}
+						</button>
+						<span class="flex-1 {todo.completed ? 'line-through text-gray-500' : ''}">
+							{String(todo.title)}
+						</span>
+						<button
+							type="button"
+							class="text-gray-600 opacity-0 group-hover:opacity-100 hover:text-red-400"
+							onclick={() => deleteTodo.mutate(todo.id)}
+						>
+							<Trash2 class="h-4 w-4" />
+						</button>
+					</div>
+				{/each}
+			{/if}
+		</div>
+
+		<p class="mt-12 text-center text-xs text-gray-700">Powered by Kora — offline-first, real-time sync</p>
+	</div>
+</div>

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

@@ -0,0 +1,26 @@
+<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 class="flex h-screen items-center justify-center bg-gray-950 text-gray-400">
+			Restoring session...
+		</div>
+	{/snippet}
+
+	<KoraProvider app={kora}>
+		{#snippet fallback()}
+			<div class="flex h-screen items-center justify-center bg-gray-950 text-gray-400">
+				Loading...
+			</div>
+		{/snippet}
+		<App />
+	</KoraProvider>
+</AuthProvider>

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

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

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

@@ -0,0 +1,25 @@
+import { getCollection, createMutation, createQueryStore } from '@korajs/svelte'
+import { derived } from 'svelte/store'
+import {
+	type CreateTodoInput,
+	type UpdateTodoStatusInput,
+	createTodo,
+	deleteTodo,
+	updateTodoStatus,
+} from './todo.mutations'
+import { orderedTodos } from './todo.queries'
+
+export function createTodosStores() {
+	const todos = getCollection('todos')
+	const allTodos = createQueryStore(orderedTodos(todos))
+	const addTodo = createMutation((data: CreateTodoInput) => createTodo(todos, data))
+	const toggleTodo = createMutation((id: string, data: UpdateTodoStatusInput) =>
+		updateTodoStatus(todos, id, data),
+	)
+	const removeTodo = createMutation((id: string) => deleteTodo(todos, id))
+
+	const activeTodos = derived(allTodos, ($all) => $all.filter((todo) => !todo.completed))
+	const completedTodos = derived(allTodos, ($all) => $all.filter((todo) => !!todo.completed))
+
+	return { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo: removeTodo }
+}

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

@@ -0,0 +1,21 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+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/svelte-tailwind-sync/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+	preprocess: vitePreprocess(),
+}

package/templates/svelte-tailwind-sync/tsconfig.json.hbs

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"],
+  "exclude": ["node_modules"]
+}

package/templates/svelte-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 { svelte } from '@sveltejs/vite-plugin-svelte'
+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: [svelte(), 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,
+			},
+		},
+	},
+})

package/templates/vue-basic/README.md.hbs

@@ -0,0 +1,62 @@
+# {{projectName}}
+
+An offline-first application built with [Kora.js](https://ehoneahobed.github.io/kora/).
+
+## Getting Started
+
+```bash
+npm run dev
+```
+
+- **App**: http://localhost:5173
+
+## Project Structure
+
+```
+src/
+  schema.ts        # Schema entry point
+  main.tsx         # App initialization and Kora setup
+  App.tsx          # Main application component
+  modules/
+    todos/
+      todo.schema.ts     # Todo collection definition
+      todo.queries.ts    # Reusable todo query builders
+      todo.mutations.ts  # Todo mutation helpers
+      useTodos.ts        # React hook connecting todos to the UI
+  kora-worker.ts   # SQLite WASM web worker
+  index.css        # Styles
+kora.config.ts     # Kora configuration
+```
+
+In a feature module, `schema` defines data shape, `queries` contain reads only, `mutations` contain
+writes, and `useTodos.ts` is the React binding that exposes todo data and actions to components.
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start dev server |
+| `npm run build` | Build for production |
+| `npm run preview` | Preview production build |
+
+## Adding Sync
+
+To enable real-time sync across devices, update `src/main.tsx`:
+
+```typescript
+const app = createApp({
+  schema,
+  sync: {
+    url: import.meta.env.VITE_SYNC_URL || 'ws://localhost:3001',
+  },
+  // ...
+})
+```
+
+Then create a `server.ts` and install `@korajs/server`. See the [Sync Configuration guide](https://ehoneahobed.github.io/kora/guide/sync-configuration).
+
+## Learn More
+
+- [Documentation](https://ehoneahobed.github.io/kora/)
+- [Storage Configuration](https://ehoneahobed.github.io/kora/guide/storage-configuration)
+- [Schema Design](https://ehoneahobed.github.io/kora/guide/schema-design)

package/templates/vue-basic/index.html.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue-basic/kora.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'korajs/config'
+
+export default defineConfig({
+	schema: './src/schema.ts',
+	dev: {
+		port: 5173,
+		watch: {
+			enabled: true,
+			debounceMs: 300,
+		},
+	},
+})

package/templates/vue-basic/package.json.hbs

@@ -0,0 +1,26 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "kora dev",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "korajs": "{{koraVersion}}",
+    "@korajs/vue": "{{koraVersion}}",
+    "@korajs/store": "{{koraVersion}}",
+    "@sqlite.org/sqlite-wasm": ">=3.51.0-build1",
+    "vue": "^3.5.0",
+    "yjs": "^13.6.30"
+  },
+  "devDependencies": {
+    "@korajs/cli": "{{koraVersion}}",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vue-tsc": "^2.2.0"
+  }
+}