@korajs/cli 0.4.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 {
@@ -117,6 +117,7 @@ interface ProjectConfig {
     region: string | null;
     environment: 'preview' | 'production';
     confirm: boolean;
+    deployTarget?: 'full-stack' | 'sync-server';
 }
 interface ProvisionResult {
     applicationId: string;
@@ -425,7 +426,7 @@ declare function resetDeployState(projectRoot: string): Promise<void>;
 interface DockerfileOptions {
     nodeVersion?: string;
     port?: number;
-    clientDirectory?: string;
+    clientDirectory?: string | null;
     serverBundleFile?: string;
     /** Native modules that must be installed at runtime (externalized from bundle). */
     nativeDependencies?: Record<string, string>;
@@ -555,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;
@@ -685,8 +686,9 @@ interface SyncProviderPresetOptions {
 /**
  * Applies provider-specific sync scaffolding adjustments after template copy.
  *
- * This is a lightweight bridge until template-layer composition lands.
- * Today we only specialize the sync server template when Postgres is selected.
+ * The sync server template is environment-driven: SQLite is used when
+ * DATABASE_URL is absent, and PostgreSQL is used when DATABASE_URL is present.
+ * Provider presets only add provider-specific guidance.
  */
 declare function applySyncProviderPreset(options: SyncProviderPresetOptions): Promise<void>;
 

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 {
@@ -117,6 +117,7 @@ interface ProjectConfig {
     region: string | null;
     environment: 'preview' | 'production';
     confirm: boolean;
+    deployTarget?: 'full-stack' | 'sync-server';
 }
 interface ProvisionResult {
     applicationId: string;
@@ -425,7 +426,7 @@ declare function resetDeployState(projectRoot: string): Promise<void>;
 interface DockerfileOptions {
     nodeVersion?: string;
     port?: number;
-    clientDirectory?: string;
+    clientDirectory?: string | null;
     serverBundleFile?: string;
     /** Native modules that must be installed at runtime (externalized from bundle). */
     nativeDependencies?: Record<string, string>;
@@ -555,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;
@@ -685,8 +686,9 @@ interface SyncProviderPresetOptions {
 /**
  * Applies provider-specific sync scaffolding adjustments after template copy.
  *
- * This is a lightweight bridge until template-layer composition lands.
- * Today we only specialize the sync server template when Postgres is selected.
+ * The sync server template is environment-driven: SQLite is used when
+ * DATABASE_URL is absent, and PostgreSQL is used when DATABASE_URL is present.
+ * Provider presets only add provider-specific guidance.
  */
 declare function applySyncProviderPreset(options: SyncProviderPresetOptions): Promise<void>;
 

package/dist/index.js

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

package/package.json

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

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

@@ -14,14 +14,23 @@ npm run dev
 
 ```
 src/
-  schema.ts        # Data schema definition
+  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 |

package/templates/react-basic/src/App.tsx

@@ -1,146 +1,132 @@
 import { useState } from 'react'
-import { useQuery, useMutation, useCollection } from '@korajs/react'
+import { useTodos } from './modules/todos/useTodos'
 
 type Filter = 'all' | 'active' | 'completed'
 
 export function App() {
-  const todos = useCollection('todos')
-  const allTodos = useQuery(todos.where({}).orderBy('createdAt', 'desc'))
-  const { mutate: addTodo } = useMutation(
-    (data: { title: string }) => todos.insert(data)
-  )
-  const { mutate: toggleTodo } = useMutation(
-    (id: string, data: { completed: boolean }) => todos.update(id, data)
-  )
-  const { mutate: deleteTodo } = useMutation(
-    (id: string) => todos.delete(id)
-  )
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = useTodos()
 
-  const [filter, setFilter] = useState<Filter>('all')
-  const [input, setInput] = useState('')
+	const [filter, setFilter] = useState<Filter>('all')
+	const [input, setInput] = useState('')
 
-  const activeTodos = allTodos.filter((t) => !t.completed)
-  const completedTodos = allTodos.filter((t) => !!t.completed)
-  const filteredTodos =
-    filter === 'active' ? activeTodos : filter === 'completed' ? completedTodos : allTodos
+	const filteredTodos =
+		filter === 'active' ? activeTodos : filter === 'completed' ? completedTodos : allTodos
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    const title = input.trim()
-    if (title) {
-      addTodo({ title })
-      setInput('')
-    }
-  }
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault()
+		const title = input.trim()
+		if (title) {
+			addTodo.mutate({ title })
+			setInput('')
+		}
+	}
 
-  const clearCompleted = () => {
-    for (const todo of completedTodos) {
-      deleteTodo(todo.id)
-    }
-  }
+	const clearCompleted = () => {
+		for (const todo of completedTodos) {
+			deleteTodo.mutate(todo.id)
+		}
+	}
 
-  return (
-    <div className="app">
-      <div className="header">
-        <h1>My Tasks</h1>
-        <span className="local-badge">Local-first</span>
-      </div>
+	return (
+		<div className="app">
+			<div className="header">
+				<h1>My Tasks</h1>
+				<span className="local-badge">Local-first</span>
+			</div>
 
-      <div className="stats">
-        <div className="stat-card">
-          <div className="label">Total</div>
-          <div className="value muted">{allTodos.length}</div>
-        </div>
-        <div className="stat-card">
-          <div className="label">Remaining</div>
-          <div className="value warning">{activeTodos.length}</div>
-        </div>
-        <div className="stat-card">
-          <div className="label">Done</div>
-          <div className="value success">{completedTodos.length}</div>
-        </div>
-      </div>
+			<div className="stats">
+				<div className="stat-card">
+					<div className="label">Total</div>
+					<div className="value muted">{allTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Remaining</div>
+					<div className="value warning">{activeTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Done</div>
+					<div className="value success">{completedTodos.length}</div>
+				</div>
+			</div>
 
-      <form className="add-form" onSubmit={handleSubmit}>
-        <input
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="What needs to be done?"
-        />
-        <button type="submit" disabled={!input.trim()}>
-          Add
-        </button>
-      </form>
+			<form className="add-form" onSubmit={handleSubmit}>
+				<input
+					type="text"
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder="What needs to be done?"
+				/>
+				<button type="submit" disabled={!input.trim()}>
+					Add
+				</button>
+			</form>
 
-      <div className="filters">
-        {(['all', 'active', 'completed'] as const).map((f) => {
-          const count = f === 'all' ? allTodos.length : f === 'active' ? activeTodos.length : completedTodos.length
-          return (
-            <button
-              key={f}
-              className={`filter-btn ${filter === f ? 'active' : ''}`}
-              onClick={() => setFilter(f)}
-            >
-              {f.charAt(0).toUpperCase() + f.slice(1)}
-              <span className="badge">{count}</span>
-            </button>
-          )
-        })}
-      </div>
+			<div className="filters">
+				{(['all', 'active', 'completed'] as const).map((f) => {
+					const count =
+						f === 'all'
+							? allTodos.length
+							: f === 'active'
+								? activeTodos.length
+								: completedTodos.length
+					return (
+						<button
+							key={f}
+							className={`filter-btn ${filter === f ? 'active' : ''}`}
+							onClick={() => setFilter(f)}
+						>
+							{f.charAt(0).toUpperCase() + f.slice(1)}
+							<span className="badge">{count}</span>
+						</button>
+					)
+				})}
+			</div>
 
-      <div className="todo-list">
-        {filteredTodos.length === 0 ? (
-          <div className="empty-state">
-            {filter === 'all' && 'No tasks yet. Add one above!'}
-            {filter === 'active' && 'All caught up! No active tasks.'}
-            {filter === 'completed' && 'No completed tasks yet.'}
-          </div>
-        ) : (
-          filteredTodos.map((todo) => (
-            <div key={todo.id} className="todo-item">
-              <button
-                className={`toggle ${todo.completed ? 'checked' : ''}`}
-                onClick={() => toggleTodo(todo.id, { completed: !todo.completed })}
-              >
-                {todo.completed ? '\u2713' : ''}
-              </button>
-              <span className={`title ${todo.completed ? 'done' : ''}`}>
-                {String(todo.title)}
-              </span>
-              {todo.createdAt && (
-                <span className="time">{formatTime(Number(todo.createdAt))}</span>
-              )}
-              <button
-                className="delete-btn"
-                onClick={() => deleteTodo(todo.id)}
-              >
-                \u00d7
-              </button>
-            </div>
-          ))
-        )}
-      </div>
+			<div className="todo-list">
+				{filteredTodos.length === 0 ? (
+					<div className="empty-state">
+						{filter === 'all' && 'No tasks yet. Add one above!'}
+						{filter === 'active' && 'All caught up! No active tasks.'}
+						{filter === 'completed' && 'No completed tasks yet.'}
+					</div>
+				) : (
+					filteredTodos.map((todo) => (
+						<div key={todo.id} className="todo-item">
+							<button
+								className={`toggle ${todo.completed ? 'checked' : ''}`}
+								onClick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+							>
+								{todo.completed ? '\u2713' : ''}
+							</button>
+							<span className={`title ${todo.completed ? 'done' : ''}`}>{String(todo.title)}</span>
+							{todo.createdAt && <span className="time">{formatTime(Number(todo.createdAt))}</span>}
+							<button className="delete-btn" onClick={() => deleteTodo.mutate(todo.id)}>
+								\u00d7
+							</button>
+						</div>
+					))
+				)}
+			</div>
 
-      {allTodos.length > 0 && (
-        <div className="footer">
-          <span>{activeTodos.length} item{activeTodos.length !== 1 ? 's' : ''} left</span>
-          {completedTodos.length > 0 && (
-            <button onClick={clearCompleted}>Clear completed</button>
-          )}
-        </div>
-      )}
+			{allTodos.length > 0 && (
+				<div className="footer">
+					<span>
+						{activeTodos.length} item{activeTodos.length !== 1 ? 's' : ''} left
+					</span>
+					{completedTodos.length > 0 && <button onClick={clearCompleted}>Clear completed</button>}
+				</div>
+			)}
 
-      <p className="branding">Powered by Kora &mdash; offline-first, real-time sync</p>
-    </div>
-  )
+			<p className="branding">Powered by Kora &mdash; offline-first, real-time sync</p>
+		</div>
+	)
 }
 
 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' })
+	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' })
 }