@korajs/svelte 0.5.0 → 0.6.1

package/README.md

@@ -1,19 +1,107 @@
 # @korajs/svelte
 
-Experimental Svelte bindings stub for [Kora.js](https://github.com/korajs/kora). Use `@korajs/react` for full reactive query hooks today.
+Svelte bindings for [Kora.js](https://github.com/ehoneahobed/kora) offline-first applications (Svelte 4 stores + Svelte 5 components).
 
-## Usage
+## Install
+
+```bash
+pnpm add korajs @korajs/svelte
+```
+
+## Setup
+
+Create the Kora app at module scope, connect sync after `ready`, then mount a root layout with provider components (matches the CLI `svelte-sync` template):
+
+```typescript
+// main.ts
+import { createKoraAuthSync } from '@korajs/auth'
+import { createApp as createKoraApp } from 'korajs'
+import { mount } from 'svelte'
+import Root from './Root.svelte'
+import { authClient } from './auth'
+import schema from './schema'
+import koraWorkerUrl from './kora-worker.ts?worker&url'
+
+const kora = createKoraApp({
+  schema,
+  sync: { url: 'ws://localhost:3000/kora-sync', authClient: createKoraAuthSync({ authClient, schema }) },
+  store: { workerUrl: koraWorkerUrl },
+})
+
+kora.ready.then(() => kora.sync?.connect())
+
+mount(Root, { target: document.getElementById('app')!, props: { kora, authClient } })
+```
 
 ```svelte
+<!-- Root.svelte -->
 <script lang="ts">
-  import { createApp } from 'korajs'
-  import { setKoraAppContext, getKoraApp } from '@korajs/svelte'
-  import schema from './schema'
+  import AuthProvider from '@korajs/auth/svelte/AuthProvider.svelte'
+  import KoraProvider from '@korajs/svelte/KoraProvider.svelte'
+  import App from './App.svelte'
 
-  const kora = createApp({ schema, store: { workerUrl: '/sqlite-wasm-worker.js' } })
-  setKoraAppContext(kora)
-  await kora.ready
+  let { kora, authClient } = $props()
 </script>
+
+<AuthProvider client={authClient}>
+  <KoraProvider app={kora}>
+    <App />
+  </KoraProvider>
+</AuthProvider>
 ```
 
-Child components call `getKoraApp()` and use collection accessors or subscribe to `app.events`.
+Precompiled component JS is also published under `dist/components/` for non-Vite bundlers; the `svelte` export condition still resolves to source for Vite/SvelteKit.
+
+## Queries
+
+### Static filters — readable store
+
+```svelte
+<script lang="ts">
+  import { getApp, createQueryStore } from '@korajs/svelte'
+
+  const app = getApp()
+  const todos = createQueryStore(app.todos.where({ completed: false }))
+</script>
+
+{#each $todos as todo}
+  <p>{todo.title}</p>
+{/each}
+```
+
+### Reactive filters — `KoraQuery` component
+
+```svelte
+<script lang="ts">
+  import KoraQuery from '@korajs/svelte/KoraQuery.svelte'
+  import { getApp } from '@korajs/svelte'
+
+  const app = getApp()
+  let showDone = $state(false)
+</script>
+
+<KoraQuery query={app.todos.where({ completed: showDone })} let:data>
+  {#each data as todo}
+    <p>{todo.title}</p>
+  {/each}
+</KoraQuery>
+```
+
+## API
+
+| Export | Purpose |
+|--------|---------|
+| `KoraProvider.svelte` | Root provider (waits for `app.ready`, sets context) |
+| `KoraStoreProvider.svelte` | Store-only provider (advanced / tests) |
+| `createQueryStore(query)` | Svelte readable store of results |
+| `createMutation(fn)` | Mutation controller |
+| `createSyncStatusStore()` | Sync status readable store |
+| `getApp()` / `getCollection()` | Context accessors |
+| `createRichTextBinding()` / `useRichText()` | Yjs richtext editor binding |
+| `applyPresence(user)` | Set local presence — use in `$effect(() => applyPresence(user))` |
+| `createCollaboratorsStore()` | Remote collaborator awareness states |
+| `KoraQuery.svelte` | Descriptor-reactive query snippet |
+
+## Organization auth
+
+Use `OrgProvider` from `@korajs/auth/svelte/OrgProvider.svelte` and org stores from `@korajs/auth/svelte`.

package/dist/components/KoraProvider.js

@@ -0,0 +1,105 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import KoraContextBridge from './KoraContextBridge.svelte';
+import KoraStoreBridge from './KoraStoreBridge.svelte';
+
+var root = $.from_html(`<div role="alert" style="color: red; padding: 1rem; font-family: monospace;"><strong>Kora initialization error:</strong> </div>`);
+var root_1 = $.from_html(`<div>Loading...</div>`);
+
+export default function KoraProvider($$anchor, $$props) {
+	$.push($$props, true);
+
+	let ready = $.state(false);
+	let initError = $.state(null);
+
+	$.user_effect(() => {
+		let cancelled = false;
+
+		$.set(ready, false);
+		$.set(initError, null);
+
+		void (async () => {
+			try {
+				await $$props.app.ready;
+
+				if (cancelled) return;
+
+				$.set(ready, true);
+			} catch(error) {
+				if (cancelled) return;
+
+				$.set(initError, error instanceof Error ? error : new Error(String(error)), true);
+				console.error('[Kora] Initialization failed:', $.get(initError));
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			var div = root();
+			var text = $.sibling($.child(div), 1, true);
+
+			$.reset(div);
+			$.template_effect(() => $.set_text(text, $.get(initError).message));
+			$.append($$anchor, div);
+		};
+
+		var consequent_2 = ($$anchor) => {
+			var fragment_1 = $.comment();
+			var node_1 = $.first_child(fragment_1);
+
+			{
+				var consequent_1 = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+
+					$.snippet(node_2, () => $$props.fallback);
+					$.append($$anchor, fragment_2);
+				};
+
+				var alternate = ($$anchor) => {
+					var div_1 = root_1();
+
+					$.append($$anchor, div_1);
+				};
+
+				$.if(node_1, ($$render) => {
+					if ($$props.fallback) $$render(consequent_1); else $$render(alternate, -1);
+				});
+			}
+
+			$.append($$anchor, fragment_1);
+		};
+
+		var consequent_3 = ($$anchor) => {
+			KoraContextBridge($$anchor, {
+				get app() {
+					return $$props.app;
+				},
+
+				children: ($$anchor, $$slotProps) => {
+					var fragment_4 = $.comment();
+					var node_3 = $.first_child(fragment_4);
+
+					$.snippet(node_3, () => $$props.children);
+					$.append($$anchor, fragment_4);
+				},
+				$$slots: { default: true }
+			});
+		};
+
+		$.if(node, ($$render) => {
+			if ($.get(initError)) $$render(consequent); else if (!$.get(ready)) $$render(consequent_2, 1); else if ($$props.children) $$render(consequent_3, 2);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}

package/dist/components/KoraQuery.js

@@ -0,0 +1,59 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import { assertQueryReady } from '@korajs/store';
+import { getKoraContext } from '../context';
+
+export default function KoraQuery($$anchor, $$props) {
+	$.push($$props, true);
+
+	let enabled = $.prop($$props, 'enabled', 3, true);
+
+	getKoraContext();
+
+	let data = $.state($.proxy([]));
+
+	$.user_effect(() => {
+		if (!enabled()) {
+			$.set(data, [], true);
+
+			return;
+		}
+
+		const { queryStoreCache } = getKoraContext();
+
+		assertQueryReady($$props.query);
+
+		const queryStore = queryStoreCache.getOrCreate($$props.query);
+
+		const unsubscribe = queryStore.subscribe(() => {
+			$.set(data, queryStore.getSnapshot(), true);
+		});
+
+		$.set(data, queryStore.getSnapshot(), true);
+
+		return () => {
+			unsubscribe();
+			queryStoreCache.release($$props.query);
+		};
+	});
+
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			var fragment_1 = $.comment();
+			var node_1 = $.first_child(fragment_1);
+
+			$.snippet(node_1, () => $$props.children, () => $.get(data));
+			$.append($$anchor, fragment_1);
+		};
+
+		$.if(node, ($$render) => {
+			if ($$props.children) $$render(consequent);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}

package/dist/components/KoraRichText.js

@@ -0,0 +1,76 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import { asRichTextSyncEngine, createRichTextController } from '@korajs/store';
+import { getKoraContext } from '../context';
+
+export default function KoraRichText($$anchor, $$props) {
+	$.push($$props, true);
+
+	const { store, syncEngine } = getKoraContext();
+	let result = $.state(null);
+
+	$.user_effect(() => {
+		const controller = createRichTextController({
+			collection: store.collection($$props.collectionName),
+			collectionName: $$props.collectionName,
+			recordId: $$props.recordId,
+			fieldName: $$props.fieldName,
+			store,
+			syncEngine: asRichTextSyncEngine(syncEngine),
+			useDocChannel: $$props.useDocChannel,
+			user: $$props.user
+		});
+
+		const sync = () => {
+			const snapshot = controller.getSnapshot();
+
+			$.set(
+				result,
+				{
+					doc: controller.doc,
+					text: controller.text,
+					undo: () => controller.undo(),
+					redo: () => controller.redo(),
+					ready: snapshot.ready,
+					error: snapshot.error,
+					canUndo: snapshot.canUndo,
+					canRedo: snapshot.canRedo,
+					cursors: [...snapshot.cursors],
+					setCursor: (anchor, head) => controller.setCursor(anchor, head),
+					clearCursor: () => controller.clearCursor()
+				},
+				true
+			);
+		};
+
+		sync();
+
+		const unsubscribe = controller.subscribe(sync);
+
+		return () => {
+			unsubscribe();
+			controller.destroy();
+			$.set(result, null);
+		};
+	});
+
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			var fragment_1 = $.comment();
+			var node_1 = $.first_child(fragment_1);
+
+			$.snippet(node_1, () => $$props.children, () => $.get(result));
+			$.append($$anchor, fragment_1);
+		};
+
+		$.if(node, ($$render) => {
+			if ($.get(result) && $$props.children) $$render(consequent);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}

package/dist/components/KoraStoreProvider.js

@@ -0,0 +1,39 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import KoraStoreBridge from './KoraStoreBridge.svelte';
+
+export default function KoraStoreProvider($$anchor, $$props) {
+	let syncEngine = $.prop($$props, 'syncEngine', 3, null);
+
+	KoraStoreBridge($$anchor, {
+		get store() {
+			return $$props.store;
+		},
+
+		get syncEngine() {
+			return syncEngine();
+		},
+
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = $.comment();
+			var node = $.first_child(fragment_1);
+
+			{
+				var consequent = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_1 = $.first_child(fragment_2);
+
+					$.snippet(node_1, () => $$props.children);
+					$.append($$anchor, fragment_2);
+				};
+
+				$.if(node, ($$render) => {
+					if ($$props.children) $$render(consequent);
+				});
+			}
+
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	});
+}