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

package/docs/examples/node-adapter/index.md

@@ -1,44 +0,0 @@
-# Node adapter examples
-
-# Node Adapter Examples
-
-Examples using `@livestore/adapter-node` for Node.js server-side applications.
-
-<CardGrid>
-{nodeExamples.map((example) => {
-  const { url, label } = getExampleDemoLinks(example);
-
-  return (
-    <Card title={example.title} key={example.title}>
-    {example.image ? (
-      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
-    ) : (
-      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
-        Screenshot coming soon
-      </div>
-    )}
-    <p>{example.description}</p>
-    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
-    {example.syncProvider && (
-      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
-    )}
-    <div style="margin-top: auto; padding-top: 1rem;">
-      {url && (
-        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
-      )}
-      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
-    </div>
-    </Card>
-  );
-})}
-</CardGrid>
-
-## Node Adapter
-
-- Uses native Node.js SQLite with file system storage
-- Stores SQLite files directly on disk (default: current directory)
-- Supports single-threaded or worker thread modes
-- WebSocket connections for sync and devtools integration
-
----
-<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/examples/web-adapter/index.md

@@ -1,52 +0,0 @@
-# Web adapter examples
-
-# Web Adapter Examples
-
-Examples using `@livestore/adapter-web` for browser environments.
-
-<CardGrid>
-{webExamples.map((example) => {
-  const { url, label } = getExampleDemoLinks(example);
-
-  return (
-    <Card title={example.title} key={example.title}>
-    {example.image ? (
-      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
-    ) : (
-      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
-        Screenshot coming soon
-      </div>
-    )}
-    <p>{example.description}</p>
-    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
-    {example.syncProvider && (
-      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
-    )}
-    <div style="margin-top: auto; padding-top: 1rem;">
-      {url && (
-        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
-      )}
-      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
-    </div>
-    </Card>
-  );
-})}
-</CardGrid>
-
-## Web Adapter
-
-- Uses SQLite WASM with OPFS (Origin Private File System) for browser storage
-- Runs in Web Workers and SharedWorkers for multi-tab coordination
-- Persists data via OPFS Access Handle Pool VFS
-- Supports WebSocket connections for sync and devtools
-
-## Frameworks
-
-- React (`@livestore/react`)
-- SolidJS (`@livestore/solid`) 
-- Svelte (`@livestore/svelte`)
-- Web Components
-- Vanilla JavaScript
-
----
-<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/framework-integrations/custom-elements/index.md

@@ -1,142 +0,0 @@
-# Custom elements
-
-LiveStore can be used with custom elements/web components.
-
-## Example
-
-See [examples](/examples) for a complete example.
-
-## `reference/custom-elements/main.ts`
-
-```ts filename="reference/custom-elements/main.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-const store = await createStorePromise({ schema, adapter, storeId: 'custom-elements-demo' })
-
-const visibleTodos$ = queryDb(tables.todos.where({ deletedAt: null }))
-
-class TodoListElement extends HTMLElement {
-  private list: HTMLUListElement
-  private input: HTMLInputElement
-
-  constructor() {
-    super()
-    const shadow = this.attachShadow({ mode: 'open' })
-
-    this.input = document.createElement('input')
-    this.input.placeholder = 'What needs to be done?'
-
-    this.list = document.createElement('ul')
-    this.list.style.listStyle = 'none'
-    this.list.style.padding = '0'
-    this.list.style.margin = '16px 0 0'
-
-    this.input.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter' && this.input.value.trim()) {
-        store.commit(events.todoCreated({ id: crypto.randomUUID(), text: this.input.value.trim() }))
-        this.input.value = ''
-      }
-    })
-
-    shadow.append(this.input, this.list)
-  }
-
-  connectedCallback(): void {
-    this.renderTodos(Array.from(store.query(tables.todos.where({ deletedAt: null }))))
-
-    store.subscribe(visibleTodos$, (todos) => this.renderTodos(todos))
-  }
-
-  private renderTodos(todos: ReadonlyArray<typeof tables.todos.Type>): void {
-    const nodes = Array.from(todos, (todo) => {
-      const item = document.createElement('li')
-      item.textContent = todo.text
-      item.style.cursor = 'pointer'
-      item.addEventListener('click', () => {
-        store.commit(todo.completed ? events.todoUncompleted({ id: todo.id }) : events.todoCompleted({ id: todo.id }))
-      })
-
-      const deleteButton = document.createElement('button')
-      deleteButton.type = 'button'
-      deleteButton.textContent = '✕'
-      deleteButton.style.marginLeft = '8px'
-      deleteButton.addEventListener('click', (event) => {
-        event.stopPropagation()
-        store.commit(events.todoDeleted({ id: todo.id, deletedAt: new Date() }))
-      })
-
-      const row = document.createElement('div')
-      row.style.display = 'flex'
-      row.style.alignItems = 'center'
-      row.appendChild(item)
-      row.appendChild(deleteButton)
-
-      const wrapper = document.createElement('li')
-      wrapper.appendChild(row)
-      return wrapper
-    })
-
-    this.list.replaceChildren(...nodes)
-  }
-}
-
-customElements.define('todo-list', TodoListElement)
-```
-
-### `reference/custom-elements/livestore/schema.ts`
-
-```ts filename="reference/custom-elements/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 }),
-    default: { id: SessionIdSymbol, value: { newTodoText: '' } },
-  }),
-}
-
-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 }),
-  }),
-  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 }),
-})
-
-const state = State.SQLite.makeState({ tables, materializers })
-
-export const schema = makeSchema({ events, state })
-```