@korajs/cli 0.4.0 → 0.6.0

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

@@ -1,15 +1,9 @@
-import { defineSchema, t } from 'korajs'
+import { defineSchema } from 'korajs'
+import { todos } from './modules/todos/todo.schema'
 
 export default defineSchema({
-  version: 1,
-  collections: {
-    todos: {
-      fields: {
-        title: t.string(),
-        completed: t.boolean().default(false),
-        createdAt: t.timestamp().auto(),
-      },
-      indexes: ['completed'],
-    },
-  },
+	version: 1,
+	collections: {
+		todos,
+	},
 })

package/templates/react-tailwind-sync/src/vite-env.d.ts

@@ -0,0 +1,17 @@
+interface ImportMetaEnv {
+	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-tailwind-sync/{tsconfig.json → tsconfig.json.hbs}

@@ -8,8 +8,7 @@
     "noUncheckedIndexedAccess": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "dist",
-    "types": ["vite/client"]
+    "outDir": "dist"
   },
   "include": ["src"]
 }

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

@@ -1,5 +1,5 @@
-import { existsSync, readdirSync, copyFileSync } from 'node:fs'
-import { resolve, join } from 'node:path'
+import { copyFileSync, existsSync, readdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import type { Plugin } from 'vite'
@@ -11,23 +11,23 @@ import { defineConfig } from 'vite'
  * cannot be used and SQLite WASM falls back to in-memory storage (no persistence).
  */
 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()
-      })
-    },
-  }
+	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()
+			})
+		},
+	}
 }
 
 /**
@@ -37,50 +37,57 @@ function crossOriginIsolation(): Plugin {
  *    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
+	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 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'))
-      }
-    },
-  }
+			// 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'))
+			}
+		},
+	}
 }
 
 export default defineConfig({
-  plugins: [react(), 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,
-      },
-    },
-  },
+	plugins: [react(), 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/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

package/templates/svelte-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/svelte-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/svelte-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/svelte-basic/package.json.hbs

@@ -0,0 +1,27 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "kora dev",
+    "build": "vite build",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "korajs": "{{koraVersion}}",
+    "@korajs/svelte": "{{koraVersion}}",
+    "@korajs/store": "{{koraVersion}}",
+    "@sqlite.org/sqlite-wasm": ">=3.51.0-build1",
+    "svelte": "^5.0.0",
+    "yjs": "^13.6.30"
+  },
+  "devDependencies": {
+    "@korajs/cli": "{{koraVersion}}",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte-check": "^4.1.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { createTodosStores } from './modules/todos/useTodos'
+
+	type Filter = 'all' | 'active' | 'completed'
+
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } =
+		createTodosStores()
+
+	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>
+
+	<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</p>
+</div>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { KoraAppLike } from '@korajs/svelte'
+	import KoraProvider from '@korajs/svelte/KoraProvider.svelte'
+	import App from './App.svelte'
+
+	let { kora }: { kora: KoraAppLike } = $props()
+</script>
+
+<KoraProvider app={kora}>
+	{#snippet fallback()}
+		<div>Loading...</div>
+	{/snippet}
+	<App />
+</KoraProvider>