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

package/docs/getting-started/react-web/index.md

@@ -1,626 +0,0 @@
-# Getting started with LiveStore + React
-
-export const CODE = {
-  viteConfig: viteConfigCode,
-}
-
-{/* We're adjusting the package to use the dev version on the dev branch */}
-export const manualInstallDepsStr = [
-  '@livestore/livestore' + versionNpmSuffix,
-  '@livestore/wa-sqlite' + versionNpmSuffix,
-  '@livestore/adapter-web' + versionNpmSuffix,
-  '@livestore/react' + versionNpmSuffix,
-  '@livestore/peer-deps' + versionNpmSuffix,
-  '@livestore/sync-cf' + versionNpmSuffix,
-  '@livestore/devtools-vite' + versionNpmSuffix,
-].join(' ')
-
-## Prerequisites
-
-- Recommended: Bun 1.2 or higher
-- Node.js {MIN_NODE_VERSION} or higher
-
-### Option A: Quick start
-
-For a quick start, we recommend using our template app following the steps below.
-
-For existing projects, see [Existing project setup](#existing-project-setup).
-
-<Steps>
-
-1. **Set up project from template**
-
-   <Tabs syncKey="package-manager">
-     <TabItem label="bun">
-       <Code code={makeCreate('web-todomvc-sync-cf', 'bunx')} lang="sh" />
-     </TabItem>
-     <TabItem label="pnpm">
-       <Code code={makeCreate('web-todomvc-sync-cf', 'pnpm dlx')} lang="sh" />
-     </TabItem>
-     <TabItem label="npm">
-       <Code code={makeCreate('web-todomvc-sync-cf', 'npx')} lang="sh" />
-     </TabItem>
-   </Tabs>
-
-   Replace `livestore-app` with your desired app name.
-
-2. **Install dependencies**
-
-   It's strongly recommended to use `bun` or `pnpm` for the simplest and most reliable dependency setup (see [note on package management](/misc/package-management) for more details).
-
-   <Tabs syncKey="package-manager">
-     <TabItem label="bun">
-       <Code code="bun install" lang="sh" />
-     </TabItem>
-     <TabItem label="pnpm">
-       <Code code="pnpm install" lang="sh" />
-     </TabItem>
-     <TabItem label="npm">
-       <Code code="npm install" lang="sh" />
-     </TabItem>
-   </Tabs>
-
-   Pro tip: You can use [direnv](https://direnv.net/) to manage environment variables.
-
-3. **Run dev environment**
-
-   <Tabs syncKey="package-manager">
-     <TabItem label="bun">
-       <Code code="bun dev" lang="sh" />
-     </TabItem>
-     <TabItem label="pnpm">
-       <Code code="pnpm dev" lang="sh" />
-     </TabItem>
-     <TabItem label="npm">
-       <Code code="npm run dev" lang="sh" />
-     </TabItem>
-   </Tabs>
-
-4. **Open browser**
-
-   Open `http://localhost:60000` in your browser.
-
-   You can also open the devtools by going to `http://localhost:60000/_livestore`.
-
-</Steps>
-
-### Option B: Existing project setup \{#existing-project-setup\}
-
-<Steps>
-
-1. **Install dependencies**
-
-   <Tabs syncKey="package-manager">
-     <TabItem label="bun">
-       <Code code={'bun install ' + manualInstallDepsStr} lang="sh" />
-     </TabItem>
-     <TabItem label="pnpm">
-       <Code code={'pnpm add ' + manualInstallDepsStr} lang="sh" />
-     </TabItem>
-     <TabItem label="npm">
-       <Code code={'npm install ' + manualInstallDepsStr} lang="sh" />
-     </TabItem>
-   </Tabs>
-
-2. **Update Vite config**
-
-   Add the following code to your `vite.config.js` file:
-
-   <Code code={viteConfigCode} lang="js" title="vite.config.js" />
-</Steps>
-
-## Define your schema
-
-Create a file named `schema.ts` inside the `src/livestore` folder. This file defines your LiveStore schema consisting of your app's event definitions (describing how data changes), derived state (i.e. SQLite tables), and materializers (how state is derived from events).
-
-Here's an example schema:
-
-## `getting-started/react-web/livestore/schema.ts`
-
-```ts filename="getting-started/react-web/livestore/schema.ts"
-
-// You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
-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 }),
-    },
-  }),
-  // Client documents can be used for local-only state (e.g. form inputs)
-  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' } },
-  }),
-}
-
-// Events describe data changes (https://docs.livestore.dev/reference/events)
-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,
-}
-
-// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
-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 })
-```
-
-## Create the LiveStore worker
-
-Create a file named `livestore.worker.ts` inside the `src` folder. This file will contain the LiveStore web worker. When importing this file, make sure to add the `?worker` extension to the import path to ensure that Vite treats it as a worker file.
-
-## `getting-started/react-web/livestore.worker.ts`
-
-```ts filename="getting-started/react-web/livestore.worker.ts"
-
-makeWorker({ schema })
-```
-
-### `getting-started/react-web/livestore/schema.ts`
-
-```ts filename="getting-started/react-web/livestore/schema.ts"
-
-// You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
-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 }),
-    },
-  }),
-  // Client documents can be used for local-only state (e.g. form inputs)
-  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' } },
-  }),
-}
-
-// Events describe data changes (https://docs.livestore.dev/reference/events)
-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,
-}
-
-// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
-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 })
-```
-
-## Configure the store
-
-Create a `store.ts` file in the `src` folder. This file configures the store adapter and exports a custom hook that components will use to access the store.
-
-The `useStore()` hook accepts store configuration options (schema, adapter, store ID) and returns a store instance. It suspends while the store is loading, so make sure to use a `Suspense` boundary to handle the loading state.
-
-## `getting-started/react-web/store.ts`
-
-```ts filename="getting-started/react-web/store.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-export const useAppStore = () =>
-  useStore({
-    storeId: 'app-root',
-    schema,
-    adapter,
-    batchUpdates,
-  })
-```
-
-### `getting-started/react-web/livestore/schema.ts`
-
-```ts filename="getting-started/react-web/livestore/schema.ts"
-
-// You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
-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 }),
-    },
-  }),
-  // Client documents can be used for local-only state (e.g. form inputs)
-  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' } },
-  }),
-}
-
-// Events describe data changes (https://docs.livestore.dev/reference/events)
-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,
-}
-
-// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
-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 })
-```
-
-## Set up the store registry
-
-To enable store management throughout your app, create a `StoreRegistry` and provide it with a `<StoreRegistryProvider>`. The registry manages store instance lifecycles (loading, caching, disposal).
-
-Wrap the provider in a `Suspense` boundary to handle the loading state for when the store is loading.
-
-## `getting-started/react-web/Root.tsx`
-
-```tsx filename="getting-started/react-web/Root.tsx"
-
-export const App: React.FC = () => {
-  const [storeRegistry] = useState(() => new StoreRegistry())
-
-  return (
-    <Suspense fallback={<div>Loading app...</div>}>
-      <StoreRegistryProvider storeRegistry={storeRegistry}>
-        <div className="todoapp">{/* Your app components go here */}</div>
-      </StoreRegistryProvider>
-    </Suspense>
-  )
-}
-```
-
-## Commit events
-
-After setting up the registry, use the `useAppStore()` hook from any component to access the store and commit events.
-
-## `getting-started/react-web/Header.tsx`
-
-```tsx filename="getting-started/react-web/Header.tsx"
-
-const uiState$ = queryDb(tables.uiState.get(), { label: 'uiState' })
-
-export const Header: React.FC = () => {
-  const store = useAppStore()
-  const { newTodoText } = store.useQuery(uiState$)
-
-  const updateNewTodoText = (text: string) => store.commit(events.uiStateSet({ newTodoText: text }))
-
-  const createTodo = () =>
-    store.commit(
-      events.todoCreated({ id: crypto.randomUUID(), text: newTodoText }),
-      events.uiStateSet({ newTodoText: '' }),
-    )
-
-  return (
-    <header className="header">
-      <h1>TodoMVC</h1>
-      <input
-        className="new-todo"
-        placeholder="What needs to be done?"
-        value={newTodoText}
-        onChange={(e) => updateNewTodoText(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            createTodo()
-          }
-        }}
-      />
-    </header>
-  )
-}
-```
-
-### `getting-started/react-web/livestore/schema.ts`
-
-```ts filename="getting-started/react-web/livestore/schema.ts"
-
-// You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
-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 }),
-    },
-  }),
-  // Client documents can be used for local-only state (e.g. form inputs)
-  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' } },
-  }),
-}
-
-// Events describe data changes (https://docs.livestore.dev/reference/events)
-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,
-}
-
-// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
-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 })
-```
-
-### `getting-started/react-web/store.ts`
-
-```ts filename="getting-started/react-web/store.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-export const useAppStore = () =>
-  useStore({
-    storeId: 'app-root',
-    schema,
-    adapter,
-    batchUpdates,
-  })
-```
-
-## Queries
-
-To retrieve data from the database, define a query using `queryDb` from `@livestore/livestore`, then execute it with `store.useQuery()`.
-
-Consider abstracting queries into a separate file to keep your code organized, though you can also define them directly within components if preferred.
-
-## `getting-started/react-web/MainSection.tsx`
-
-```tsx filename="getting-started/react-web/MainSection.tsx"
-
-const uiState$ = queryDb(tables.uiState.get(), { label: 'uiState' })
-
-const visibleTodos$ = queryDb(
-  (get) => {
-    const { filter } = get(uiState$)
-    return tables.todos.where({
-      deletedAt: null,
-      completed: filter === 'all' ? undefined : filter === 'completed',
-    })
-  },
-  { label: 'visibleTodos' },
-)
-
-export const MainSection: React.FC = () => {
-  const store = useAppStore()
-
-  const toggleTodo = React.useCallback(
-    ({ id, completed }: typeof tables.todos.Type) =>
-      store.commit(completed ? events.todoUncompleted({ id }) : events.todoCompleted({ id })),
-    [store],
-  )
-
-  const visibleTodos = store.useQuery(visibleTodos$)
-
-  return (
-    <section className="main">
-      <ul className="todo-list">
-        {visibleTodos.map((todo) => (
-          <li key={todo.id}>
-            <div className="view">
-              <input
-                type="checkbox"
-                className="toggle"
-                id={`todo-${todo.id}`}
-                checked={todo.completed}
-                onChange={() => toggleTodo(todo)}
-              />
-              <label htmlFor={`todo-${todo.id}`}>{todo.text}</label>
-              <button
-                type="button"
-                className="destroy"
-                onClick={() => store.commit(events.todoDeleted({ id: todo.id, deletedAt: new Date() }))}
-              />
-            </div>
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
-}
-```
-
-### `getting-started/react-web/livestore/schema.ts`
-
-```ts filename="getting-started/react-web/livestore/schema.ts"
-
-// You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
-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 }),
-    },
-  }),
-  // Client documents can be used for local-only state (e.g. form inputs)
-  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' } },
-  }),
-}
-
-// Events describe data changes (https://docs.livestore.dev/reference/events)
-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,
-}
-
-// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
-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 })
-```
-
-### `getting-started/react-web/store.ts`
-
-```ts filename="getting-started/react-web/store.ts"
-
-const adapter = makePersistedAdapter({
-  storage: { type: 'opfs' },
-  worker: LiveStoreWorker,
-  sharedWorker: LiveStoreSharedWorker,
-})
-
-export const useAppStore = () =>
-  useStore({
-    storeId: 'app-root',
-    schema,
-    adapter,
-    batchUpdates,
-  })
-```

package/docs/getting-started/solid/index.md

@@ -1,3 +0,0 @@
-# Solid
-
-TODO