@korajs/cli 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import * as citty from 'citty';
 declare const PACKAGE_MANAGERS: readonly ["pnpm", "npm", "yarn", "bun"];
 type PackageManager = (typeof PACKAGE_MANAGERS)[number];
 /** Available project templates */
-declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic", "tauri-react"];
+declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic", "vue-sync", "vue-basic", "vue-tailwind-sync", "vue-tailwind", "svelte-sync", "svelte-basic", "svelte-tailwind-sync", "svelte-tailwind", "tauri-react"];
 type TemplateName = (typeof TEMPLATES)[number];
 /** Metadata for a project template */
 interface TemplateInfo {
@@ -556,13 +556,13 @@ type DatabaseOption = 'none' | 'sqlite' | 'postgres';
 type DatabaseProviderOption = 'none' | 'local' | 'supabase' | 'neon' | 'railway' | 'vercel-postgres' | 'custom';
 interface TemplateSelectionInput {
     platform: PlatformOption;
+    framework: FrameworkOption;
     tailwind: boolean;
     sync: boolean;
     db: DatabaseOption;
 }
 /**
- * Converts high-level scaffold selections into the currently supported
- * concrete template names.
+ * Converts high-level scaffold selections into a concrete template name.
  */
 declare function determineTemplateFromSelections(input: TemplateSelectionInput): TemplateName;
 declare function isFrameworkValue(value: string): value is FrameworkOption;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as citty from 'citty';
 declare const PACKAGE_MANAGERS: readonly ["pnpm", "npm", "yarn", "bun"];
 type PackageManager = (typeof PACKAGE_MANAGERS)[number];
 /** Available project templates */
-declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic", "tauri-react"];
+declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic", "vue-sync", "vue-basic", "vue-tailwind-sync", "vue-tailwind", "svelte-sync", "svelte-basic", "svelte-tailwind-sync", "svelte-tailwind", "tauri-react"];
 type TemplateName = (typeof TEMPLATES)[number];
 /** Metadata for a project template */
 interface TemplateInfo {
@@ -556,13 +556,13 @@ type DatabaseOption = 'none' | 'sqlite' | 'postgres';
 type DatabaseProviderOption = 'none' | 'local' | 'supabase' | 'neon' | 'railway' | 'vercel-postgres' | 'custom';
 interface TemplateSelectionInput {
     platform: PlatformOption;
+    framework: FrameworkOption;
     tailwind: boolean;
     sync: boolean;
     db: DatabaseOption;
 }
 /**
- * Converts high-level scaffold selections into the currently supported
- * concrete template names.
+ * Converts high-level scaffold selections into a concrete template name.
  */
 declare function determineTemplateFromSelections(input: TemplateSelectionInput): TemplateName;
 declare function isFrameworkValue(value: string): value is FrameworkOption;

package/dist/index.js

@@ -27,7 +27,7 @@ import {
   writeDockerfileArtifact,
   writeFlyTomlArtifact,
   writeRailwayJsonArtifact
-} from "./chunk-SOTZIWIF.js";
+} from "./chunk-Q2FBCOQD.js";
 import {
   ClackPromptClient,
   CliError,
@@ -54,7 +54,7 @@ import {
   saveResolvedPreferences,
   shouldSavePreferences,
   validateProjectName
-} from "./chunk-3WNFM3QB.js";
+} from "./chunk-VLTPEATY.js";
 export {
   ClackPromptClient,
   CliError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korajs/cli",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Kora.js CLI tooling and project scaffolding",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -36,7 +36,7 @@
     "conf": "^15.1.0",
     "esbuild": "^0.28.0",
     "validate-npm-package-name": "^7.0.2",
-    "@korajs/core": "0.5.0"
+    "@korajs/core": "0.6.0"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.13",
@@ -46,10 +46,10 @@
     "tsup": "^8.3.6",
     "typescript": "^5.7.3",
     "vitest": "^3.0.4",
-    "@korajs/store": "0.5.0",
-    "@korajs/sync": "0.5.0",
-    "@korajs/merge": "0.5.0",
-    "korajs": "0.5.0"
+    "@korajs/merge": "0.6.0",
+    "@korajs/store": "0.6.0",
+    "@korajs/sync": "0.6.0",
+    "korajs": "0.6.0"
   },
   "license": "MIT",
   "scripts": {

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>

package/templates/svelte-basic/src/index.css

@@ -0,0 +1,287 @@
+*,
+*::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;
+}
+
+.local-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: var(--color-surface);
+	font-size: 0.8rem;
+	color: var(--color-text-muted);
+}
+
+.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-basic/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-basic/src/main.ts

@@ -0,0 +1,16 @@
+import { createApp as createKoraApp } from 'korajs'
+import { mount } from 'svelte'
+import Root from './Root.svelte'
+import schema from './schema'
+import './index.css'
+import koraWorkerUrl from './kora-worker.ts?worker&url'
+
+const kora = createKoraApp({
+	schema,
+	store: {
+		workerUrl: koraWorkerUrl,
+	},
+	devtools: true,
+})
+
+mount(Root, { target: document.getElementById('app')!, props: { kora } })