@livestore/livestore 0.4.0-dev.22 → 0.4.0-dev.23

package/docs/framework-integrations/solid-integration/index.md

@@ -1,293 +0,0 @@
-# Solid integration
-
-## Example
-
-See [examples](/examples) for a complete example.
-
-## `reference/solid-integration/livestore/store.ts`
-
-```ts filename="reference/solid-integration/livestore/store.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-export const store = await getStore({
-  adapter,
-  schema,
-  storeId: 'default',
-})
-```
-
-### `reference/solid-integration/livestore/schema.ts`
-
-```ts filename="reference/solid-integration/livestore/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text({ default: '' }),
-      completed: State.SQLite.boolean({ default: false }),
-      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'uiState',
-    schema: Schema.Struct({ newTodoText: Schema.String, filter: Schema.Literal('all', 'active', 'completed') }),
-    default: { id: SessionIdSymbol, value: { newTodoText: '', filter: 'all' } },
-  }),
-}
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-  todoCompleted: Events.synced({
-    name: 'v1.TodoCompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoUncompleted: Events.synced({
-    name: 'v1.TodoUncompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoDeleted: Events.synced({
-    name: 'v1.TodoDeleted',
-    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
-  }),
-  todoClearedCompleted: Events.synced({
-    name: 'v1.TodoClearedCompleted',
-    schema: Schema.Struct({ deletedAt: Schema.Date }),
-  }),
-  uiStateSet: tables.uiState.set,
-}
-
-const materializers = State.SQLite.materializers(events, {
-  'v1.TodoCreated': ({ id, text }) => tables.todos.insert({ id, text, completed: false }),
-  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
-  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
-  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
-  'v1.TodoClearedCompleted': ({ deletedAt }) => tables.todos.update({ deletedAt }).where({ completed: true }),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-## `reference/solid-integration/MainSection.tsx`
-
-```tsx filename="reference/solid-integration/MainSection.tsx"
-/** biome-ignore-all lint/a11y/noLabelWithoutControl: TODO 🫠 */
-/** @jsxImportSource solid-js */
-
-export const MainSection: Component = () => {
-  const todos = query(visibleTodos$, [] as (typeof tables.todos.Type)[])
-  const todoItems = () => todos() ?? ([] as (typeof tables.todos.Type)[])
-
-  const toggleTodo = ({ id, completed }: typeof tables.todos.Type) =>
-    store()?.commit(completed ? events.todoUncompleted({ id }) : events.todoCompleted({ id }))
-
-  const deleteTodo = (id: string) => store()?.commit(events.todoDeleted({ id, deletedAt: new Date() }))
-
-  return (
-    <section class="main">
-      <ul class="todo-list">
-        <For each={todoItems()}>
-          {(todo: typeof tables.todos.Type) => (
-            <li>
-              <div class="view">
-                <input type="checkbox" class="toggle" checked={todo.completed} onChange={() => toggleTodo(todo)} />
-                <label>{todo.text}</label>
-                <button type="button" class="destroy" onClick={() => deleteTodo(todo.id)} />
-              </div>
-            </li>
-          )}
-        </For>
-      </ul>
-    </section>
-  )
-}
-```
-
-### `reference/solid-integration/livestore/queries.ts`
-
-```ts filename="reference/solid-integration/livestore/queries.ts"
-
-export const uiState$ = queryDb(tables.uiState.get(), { label: 'uiState' })
-
-export const visibleTodos$ = queryDb(
-  (get) => {
-    const { filter } = get(uiState$)
-
-    return tables.todos.where({
-      deletedAt: null,
-      completed: filter === 'all' ? undefined : filter === 'completed',
-    })
-  },
-  { label: 'visibleTodos' },
-)
-```
-
-### `reference/solid-integration/livestore/schema.ts`
-
-```ts filename="reference/solid-integration/livestore/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text({ default: '' }),
-      completed: State.SQLite.boolean({ default: false }),
-      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'uiState',
-    schema: Schema.Struct({ newTodoText: Schema.String, filter: Schema.Literal('all', 'active', 'completed') }),
-    default: { id: SessionIdSymbol, value: { newTodoText: '', filter: 'all' } },
-  }),
-}
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-  todoCompleted: Events.synced({
-    name: 'v1.TodoCompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoUncompleted: Events.synced({
-    name: 'v1.TodoUncompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoDeleted: Events.synced({
-    name: 'v1.TodoDeleted',
-    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
-  }),
-  todoClearedCompleted: Events.synced({
-    name: 'v1.TodoClearedCompleted',
-    schema: Schema.Struct({ deletedAt: Schema.Date }),
-  }),
-  uiStateSet: tables.uiState.set,
-}
-
-const materializers = State.SQLite.materializers(events, {
-  'v1.TodoCreated': ({ id, text }) => tables.todos.insert({ id, text, completed: false }),
-  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
-  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
-  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
-  'v1.TodoClearedCompleted': ({ deletedAt }) => tables.todos.update({ deletedAt }).where({ completed: true }),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-### `reference/solid-integration/livestore/store.ts`
-
-```ts filename="reference/solid-integration/livestore/store.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-export const store = await getStore({
-  adapter,
-  schema,
-  storeId: 'default',
-})
-```
-
-### Logging
-
-You can control logging for Solid's runtime helpers via optional options passed to `getStore`:
-
-## `reference/solid-integration/store-logging.ts`
-
-```ts filename="reference/solid-integration/store-logging.ts"
-
-// ---cut---
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-const _store = await getStore({
-  schema,
-  adapter,
-  storeId: 'default',
-  // Optional: swap logger and minimum log level
-  logger: Logger.prettyWithThread('window'),
-  logLevel: LogLevel.Info, // use LogLevel.None to disable logs
-})
-```
-
-### `reference/solid-integration/livestore/schema.ts`
-
-```ts filename="reference/solid-integration/livestore/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text({ default: '' }),
-      completed: State.SQLite.boolean({ default: false }),
-      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'uiState',
-    schema: Schema.Struct({ newTodoText: Schema.String, filter: Schema.Literal('all', 'active', 'completed') }),
-    default: { id: SessionIdSymbol, value: { newTodoText: '', filter: 'all' } },
-  }),
-}
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-  todoCompleted: Events.synced({
-    name: 'v1.TodoCompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoUncompleted: Events.synced({
-    name: 'v1.TodoUncompleted',
-    schema: Schema.Struct({ id: Schema.String }),
-  }),
-  todoDeleted: Events.synced({
-    name: 'v1.TodoDeleted',
-    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
-  }),
-  todoClearedCompleted: Events.synced({
-    name: 'v1.TodoClearedCompleted',
-    schema: Schema.Struct({ deletedAt: Schema.Date }),
-  }),
-  uiStateSet: tables.uiState.set,
-}
-
-const materializers = State.SQLite.materializers(events, {
-  'v1.TodoCreated': ({ id, text }) => tables.todos.insert({ id, text, completed: false }),
-  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
-  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
-  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
-  'v1.TodoClearedCompleted': ({ deletedAt }) => tables.todos.update({ deletedAt }).where({ completed: true }),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```

package/docs/framework-integrations/svelte-integration/index.md

@@ -1,42 +0,0 @@
-# Svelte integration
-
-LiveStore's Svelte bindings expose a single helper, `createStore`, which binds `store.query` into Svelte's reactivity. When you call `store.query` inside markup or `$effect`, query results automatically re-run when LiveStore emits updates, and requests are cancelled on teardown via Svelte's abort signal.
-
-## Example
-
-## `reference/framework-integrations/svelte/create-store.svelte`
-
-```svelte filename="reference/framework-integrations/svelte/create-store.svelte"
-<script lang="ts">
-
-  const adapter = makePersistedAdapter({
-    storage: { type: 'opfs' },
-    worker: LiveStoreWorker,
-    sharedWorker: LiveStoreSharedWorker,
-  })
-
-  const store = await createStore<typeof schema>({
-    adapter,
-    schema,
-    storeId: 'default',
-  })
-
-  const todos$ = queryDb(tables.todos.where({ completed: false }), {
-    label: 'todos',
-  })
-</script>
-
-<ul>
-  {#each store.query(todos$) as todo (todo.id)}
-    <li>{todo.text}</li>
-  {/each}
-</ul>
-```
-
-## Usage notes
-
-- `createStore` is async; instantiate it where you have access to the adapter (e.g. route load, `onMount`, or a top-level module when running in the browser).
-- `store.query` opts into Svelte reactivity when called inside `$effect` or markup. Outside reactive contexts, you can still use `store.subscribe` directly.
-- Works with the Web adapter out of the box. For SSR routes, construct the store on the client since `@livestore/adapter-web` is browser-only.
-
-See the <a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples/web-todomvc-svelte`}>Svelte TodoMVC example</a> for a complete app.

package/docs/framework-integrations/vue-integration/index.md

@@ -1,294 +0,0 @@
-# Vue integration for LiveStore
-
-The [vue-livestore](https://github.com/slashv/vue-livestore) package provides integration with Vue. It's currently in beta but aims to match feature parity with the React integration.
-
-## API
-
-### `<LiveStoreProvider>`
-
-In order to use LiveStore with Vue, you need to wrap your application in a `<LiveStoreProvider>`.
-
-## `reference/framework-integrations/vue/provider.vue`
-
-```vue filename="reference/framework-integrations/vue/provider.vue"
-<script setup lang="ts">
-
-const adapter = makeInMemoryAdapter()
-const storeId = 'demo-store'
-const _options = { schema, adapter, storeId }
-</script>
-
-<template>
-  <LiveStoreProvider :options="options">
-    <template #loading>
-      <div>Loading LiveStore...</div>
-    </template>
-    <slot />
-  </LiveStoreProvider>
-</template>
-```
-
-### `reference/framework-integrations/react/schema.ts`
-
-```ts filename="reference/framework-integrations/react/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text(),
-      completed: State.SQLite.boolean({ default: false }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'UiState',
-    schema: Schema.Struct({ text: Schema.String }),
-    default: { value: { text: '' } },
-  }),
-} as const
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-} as const
-
-const materializers = State.SQLite.materializers(events, {
-  [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
-    tables.todos.insert({ id, text, completed: false }),
-  ),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-### `reference/framework-integrations/vue/schema.ts`
-
-```ts filename="reference/framework-integrations/vue/schema.ts"
-export { events, schema, tables } from '../react/schema.ts'
-```
-
-### useStore
-
-## `reference/framework-integrations/vue/use-store.ts`
-
-```ts filename="reference/framework-integrations/vue/use-store.ts"
-
-export const createTodo = () => {
-  const { store } = useStore()
-
-  store.commit(events.todoCreated({ id: crypto.randomUUID(), text: 'Eat broccoli' }))
-}
-```
-
-### `reference/framework-integrations/react/schema.ts`
-
-```ts filename="reference/framework-integrations/react/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text(),
-      completed: State.SQLite.boolean({ default: false }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'UiState',
-    schema: Schema.Struct({ text: Schema.String }),
-    default: { value: { text: '' } },
-  }),
-} as const
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-} as const
-
-const materializers = State.SQLite.materializers(events, {
-  [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
-    tables.todos.insert({ id, text, completed: false }),
-  ),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-### `reference/framework-integrations/vue/schema.ts`
-
-```ts filename="reference/framework-integrations/vue/schema.ts"
-export { events, schema, tables } from '../react/schema.ts'
-```
-
-### useQuery
-
-## `reference/framework-integrations/vue/use-query.vue`
-
-```vue filename="reference/framework-integrations/vue/use-query.vue"
-<script setup lang="ts">
-
-const visibleTodos$ = queryDb(() => tables.todos.where({ completed: false }), { label: 'visibleTodos' })
-
-// biome-ignore lint/correctness/useHookAtTopLevel: Vue composables run at script setup level
-const todos = useQuery(visibleTodos$)
-
-void todos
-</script>
-
-<template>
-  <div>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id">
-        {{ todo.text }}
-      </li>
-    </ul>
-  </div>
-</template>
-```
-
-### `reference/framework-integrations/react/schema.ts`
-
-```ts filename="reference/framework-integrations/react/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text(),
-      completed: State.SQLite.boolean({ default: false }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'UiState',
-    schema: Schema.Struct({ text: Schema.String }),
-    default: { value: { text: '' } },
-  }),
-} as const
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-} as const
-
-const materializers = State.SQLite.materializers(events, {
-  [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
-    tables.todos.insert({ id, text, completed: false }),
-  ),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-### `reference/framework-integrations/vue/schema.ts`
-
-```ts filename="reference/framework-integrations/vue/schema.ts"
-export { events, schema, tables } from '../react/schema.ts'
-```
-
-### useClientDocument
-
-**[!] The interface for useClientDocument is experimental and might change**
-
-Since it's more common in Vue to work with a single writable ref (as compared to state, setState in React) the useClientDocument composable for Vue tries to make that easier by directly returning a collection of refs.
-
-The current implementation destructures all client state variables into the return object which allows directly binding to v-model or editing the .value reactivly.
-
-## `reference/framework-integrations/vue/use-client-document.vue`
-
-```vue filename="reference/framework-integrations/vue/use-client-document.vue"
-<script setup lang="ts">
-
-// biome-ignore lint/correctness/useHookAtTopLevel: Vue composables run at script setup level
-const { text: newTodoText, filters } = useClientDocument(tables.uiState)
-
-void newTodoText
-void filters
-
-void newTodoText
-void filters
-</script>
-
-<template>
-  <div>
-    <input type="text" v-model="newTodoText" />
-
-    <select v-model="filters">
-      <option value="all">All</option>
-      <option value="active">Active</option>
-      <option value="completed">Completed</option>
-    </select>
-  </div>
-</template>
-```
-
-### `reference/framework-integrations/react/schema.ts`
-
-```ts filename="reference/framework-integrations/react/schema.ts"
-
-export const tables = {
-  todos: State.SQLite.table({
-    name: 'todos',
-    columns: {
-      id: State.SQLite.text({ primaryKey: true }),
-      text: State.SQLite.text(),
-      completed: State.SQLite.boolean({ default: false }),
-    },
-  }),
-  uiState: State.SQLite.clientDocument({
-    name: 'UiState',
-    schema: Schema.Struct({ text: Schema.String }),
-    default: { value: { text: '' } },
-  }),
-} as const
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'v1.TodoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
-  }),
-} as const
-
-const materializers = State.SQLite.materializers(events, {
-  [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
-    tables.todos.insert({ id, text, completed: false }),
-  ),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```
-
-### `reference/framework-integrations/vue/schema.ts`
-
-```ts filename="reference/framework-integrations/vue/schema.ts"
-export { events, schema, tables } from '../react/schema.ts'
-```
-
-## Usage with ...
-
-### Vite
-
-LiveStore and vue-livestore works with Vite out of the box.
-
-### Nuxt.js
-
-Works out of the box with Nuxt if SSR is disabled by just wrapping the main content in a LiveStoreProvider. Example repo upcoming.
-
-## Technical notes
-
-- Vue-livestore uses the provider component pattern similar to the React integration. In Vue the plugin pattern is more common but it isn't clear that that's the most suitable structure for LiveStore in Vue. We might switch to the plugin pattern if we later find that more suitable especially with regards to Nuxt support and supporting multiple stores.