@korajs/cli 0.1.8 → 0.1.11

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

@@ -1,50 +1,150 @@
+import { useState } from 'react'
 import { useQuery, useMutation, useSyncStatus, useCollection } from '@korajs/react'
 
+type Filter = 'all' | 'active' | 'completed'
+
 export function App() {
   const todos = useCollection('todos')
-  const activeTodos = useQuery(todos.where({ completed: false }))
+  const allTodos = useQuery(todos.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 status = useSyncStatus()
 
+  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 handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const title = input.trim()
+    if (title) {
+      addTodo({ title })
+      setInput('')
+    }
+  }
+
+  const clearCompleted = () => {
+    for (const todo of completedTodos) {
+      deleteTodo(todo.id)
+    }
+  }
+
   return (
-    <div style={{ maxWidth: 600, margin: '0 auto', padding: 20 }}>
-      <h1>Kora Todo App</h1>
-      <p>Status: {status.status}</p>
-
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault()
-          const form = e.currentTarget
-          const input = form.elements.namedItem('title') as HTMLInputElement
-          if (input.value.trim()) {
-            addTodo({ title: input.value.trim() })
-            input.value = ''
-          }
-        }}
-      >
-        <input name="title" placeholder="What needs to be done?" />
-        <button type="submit">Add</button>
+    <div className="app">
+      <div className="header">
+        <h1>My Tasks</h1>
+        <div className="sync-badge">
+          <span className={`sync-dot ${status.status}`} />
+          <span>{status.status}</span>
+        </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>
 
-      <ul>
-        {activeTodos.map((todo) => (
-          <li key={todo.id}>
-            <label>
-              <input
-                type="checkbox"
-                checked={!!todo.completed}
-                onChange={() => toggleTodo(todo.id, { completed: !todo.completed })}
-              />
-              {String(todo.title)}
-            </label>
-          </li>
-        ))}
-      </ul>
+      <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>
+
+      {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>
   )
 }
+
+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' })
+}

package/templates/react-sync/src/index.css

@@ -0,0 +1,292 @@
+*,
+*::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;
+}
+
+.sync-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: var(--color-surface);
+  font-size: 0.8rem;
+}
+
+.sync-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.sync-dot.connected,
+.sync-dot.synced { background: var(--color-success); }
+.sync-dot.syncing { background: var(--color-warning); }
+.sync-dot.offline { background: var(--color-text-muted); }
+.sync-dot.error { background: var(--color-danger); }
+
+.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/react-sync/src/main.tsx

@@ -4,6 +4,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import schema from './schema'
 import { App } from './App'
+import './index.css'
 
 const app = createApp({
   schema,
@@ -13,6 +14,7 @@ const app = createApp({
   store: {
     workerUrl: new URL('./kora-worker.ts', import.meta.url),
   },
+  devtools: true,
 })
 
 // Connect to sync server once the app is ready

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

@@ -1,9 +1,39 @@
 import react from '@vitejs/plugin-react'
+import type { Plugin } from 'vite'
 import { defineConfig } from 'vite'
 
+/**
+ * Adds Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers
+ * required for SharedArrayBuffer. Without these headers, OPFS SAH Pool VFS
+ * 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()
+      })
+    },
+  }
+}
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), crossOriginIsolation()],
   optimizeDeps: {
     exclude: ['@sqlite.org/sqlite-wasm', '@korajs/store'],
+    include: ['yjs'],
+  },
+  resolve: {
+    dedupe: ['yjs'],
   },
 })

package/templates/react-tailwind/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="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-tailwind/kora.config.ts

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

package/templates/react-tailwind/package.json.hbs

@@ -0,0 +1,31 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "kora dev",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "korajs": "{{koraVersion}}",
+    "@korajs/react": "{{koraVersion}}",
+    "@korajs/store": "{{koraVersion}}",
+    "@sqlite.org/sqlite-wasm": ">=3.51.0-build1",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@korajs/cli": "{{koraVersion}}",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}