### Setup and Render Example with getResultTable

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getresulttable/article.html

This example demonstrates the setup required for getResultTable, including creating a TinyBase store, defining a query, and mounting a Svelte component that uses the function. It logs the rendered output to the console.

```javascript
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
    felix: {species: 'cat', color: 'black', sold: true}},
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const queries = createQueries(store).setQueryDefinition(
  'petColors',
  'pets',
  ({select}) => select('color'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
console.log(app.textContent);
// -> '{"fido":{"color":"brown"},"felix":{"color":"black"}}'
```

--------------------------------

### Setup and Mount RelationshipInHtmlTable Example

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte-dom/functions/other-components/relationshipinhtmltable/index.html

This example demonstrates the setup required to run the RelationshipInHtmlTable component. It includes creating a TinyBase store, defining relationships, and mounting the Svelte component. The output shows the generated HTML table structure.

```javascript
import {flushSync, mount} from 'svelte';
import {createRelationships, createStore} from 'tinybase';
import App from './App.svelte';

const relationships = createRelationships(
  createStore()
    .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
    .setTable('species', {wolf: {price: 10}, dog: {price: 5}}),
).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {relationships}}));
console.log(app.innerHTML);

```

--------------------------------

### Full Example with TinyBase Setup

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-solid/functions/queries-primitives/usequeries/article.html

This example demonstrates setting up TinyBase objects (store, metrics, indexes, relationships, queries) and then using useQueries within a reactive root. It shows how to define and access query results.

```typescript
import { createRoot } from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import { useQueries } from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({ select, where, param }) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    { species: 'dog' },
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useQueries();
  dispose();
});

```

--------------------------------

### Basic Persister Setup and Rendering

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-react/functions/persister-hooks/usepersister/index.html

Demonstrates the basic setup of a session persister and rendering it within a React application. This example initializes a store, creates a persister, and renders a root component, logging the resulting HTML.

```javascript
const persister = createSessionPersister(createStore(), 'pets');
const app = document.createElement('div');
const root = createRoot(app);
root.render(<App persister={persister} />);
console.log(app.innerHTML);
// -> '<span>0</span>'
```

--------------------------------

### Integration Test Setup

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/callback/creategobackwardcallback/index.html

This example demonstrates how to set up TinyBase, create checkpoints, and mount a Svelte component that uses createGoBackwardCallback for testing purposes. It includes store setup and component rendering.

```javascript
import {flushSync, mount} from 'svelte';
import {createCheckpoints, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
    felix: {species: 'cat', color: 'black', sold: true}},
  })
  .setValues({open: true, employees: 3});
const checkpoints = createCheckpoints(store);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {checkpoints}}));
console.log(app.textContent);
// -> 'done'

```

--------------------------------

### useSliceIds Example with TinyBase Setup

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

Demonstrates setting up TinyBase objects (store, metrics, indexes, relationships, queries, checkpoints) and then calling the useSliceIds primitive within a SolidJS reactive root. This example covers the full setup required to use the primitive.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useSliceIds} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useSliceIds('bySpecies', indexes);
  dispose();
});

```

--------------------------------

### Setup and Test getSliceIds

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getsliceids/article.html

This example demonstrates the setup required to test the getSliceIds function, including creating a TinyBase store, indexes, and mounting a Svelte component. It logs the output to verify the function's behavior.

```javascript
import {flushSync, mount} from 'svelte';
import {createIndexes, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
    felix: {species: 'cat', color: 'black', sold: true}},
  })
  .setValues({open: true, employees: 3});
const indexes = createIndexes(store).setIndexDefinition(
  'bySpecies',
  'pets',
  'species',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {indexes}}));
console.log(app.textContent);
// -> '["dog","cat"]'
```

--------------------------------

### useHasTables Example with TinyBase Setup

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

This example demonstrates setting up TinyBase objects and using the useHasTables primitive within a SolidJS reactive root. It shows how to create a store, define metrics, indexes, relationships, and queries, and then use useHasTables to check for the existence of tables.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useHasTables} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'}},
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useHasTables(store);
  dispose();
});

```

--------------------------------

### Setting up and Mounting TinyBase with Indexes

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getindexes/article.html

This example shows the setup for a TinyBase application, including creating a store, defining an index, and mounting the Svelte application. It then logs the text content to verify the output.

```javascript
import {flushSync, mount} from 'svelte';
import {createIndexes, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const indexes = createIndexes(store).setIndexDefinition(
  'bySpecies',
  'pets',
  'species',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {indexes}}));
console.log(app.textContent);
// -> 'fido'
```

--------------------------------

### Create Store, Set Tables, Get Row

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/store/interfaces/store/store/article.html

Demonstrates the basic lifecycle of a Tinybase store: creation, setting table data, and retrieving a row. This is a fundamental example for getting started with Tinybase.

```typescript
import {createStore} from 'tinybase';

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
console.log(store.getRow('pets', 'fido'));
// -> {species: 'dog'}
```

--------------------------------

### Get Default Relationships Object

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-solid/functions/relationships-primitives/userelationships/article.html

This example demonstrates how to get a reference to the default Relationships object when useRelationships is called without any parameters. It requires setup with TinyBase objects and is called within a reactive root.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useRelationships} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'}},
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useRelationships();
  dispose();
});

```

--------------------------------

### Setting up Tinybase Store, Queries, and App

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/listener/onresulttablecellids/index.html

This example shows the initialization of a Tinybase store with tables and values, the creation of queries, and the mounting of a Svelte app. It includes updating a query definition and logging the app's text content.

```javascript
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
           felix: {species: 'cat', color: 'black', sold: true}},
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const queries = createQueries(store).setQueryDefinition(
  'petColors',
  'pets',
  ({select}) => select('color'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
flushSync(() => {
  queries.setQueryDefinition('petColors', 'pets', ({select}) => {
    select('color');
    select('species');
  });
});
flushSync();
console.log(app.textContent);
// -> 'changed'
```

--------------------------------

### Setting up TinyBase Store, Queries, and Mounting the App

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/listener/onresultsortedrowids/index.html

This example demonstrates the setup required for the Svelte component. It includes creating a TinyBase store with initial data, defining a query ('petColors'), and mounting the Svelte application. It also shows how to trigger a store update and verify the listener's effect.

```javascript
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
felix: {species: 'cat', color: 'black', sold: true}},
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const queries = createQueries(store).setQueryDefinition(
  'petColors',
  'pets',
  ({select}) => select('color'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
flushSync(() => {
  store.setRow('pets', 'cujo', {color: 'gray'});
});
flushSync();
console.log(app.textContent);
// -> 'changed'

```

--------------------------------

### Get FileSystemFileHandle with OpfsPersister

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/persister-browser/interfaces/persister/opfspersister/methods/getter/gethandle/article.html

This example demonstrates how to create an OpfsPersister and then retrieve the FileSystemFileHandle for the persisted file. It shows the basic setup and usage of the getHandle method.

```typescript
import {createStore} from 'tinybase';
import {createOpfsPersister} from 'tinybase/persisters/persister-browser';

const opfs = await navigator.storage.getDirectory();
const handle = await opfs.getFileHandle('tinybase.json', {create: true});

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = createOpfsPersister(store, handle);

console.log(persister.getHandle().name);
// -> 'tinybase.json'

await persister.destroy();

```

--------------------------------

### Create and Use TinyBase Objects in SolidJS

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

This example demonstrates the setup of various TinyBase objects (store, metrics, indexes, relationships, queries, checkpoints) within a SolidJS reactive root. It shows how to initialize data, define configurations, and interact with these objects, including updating data and triggering checkpoint saves. Finally, it shows how to use the `useCreateQueries` hook.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useCreateQueries} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useCreateQueries(store, (store) => createQueries(store));
  dispose();
});

```

--------------------------------

### Basic useGoForwardCallback Setup in SolidJS

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-solid/functions/checkpoints-primitives/usegoforwardcallback/index.html

This example demonstrates the basic setup for using the useGoForwardCallback primitive within a SolidJS application. It initializes various TinyBase core objects and then uses the primitive to get a callback for redoing state changes.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useGoForwardCallback} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'}},
      species: {dog: {price: 5}}
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    (pets) => pets.map(({color}) => color),
  );
  const checkpoints = createCheckpoints(store);

  const goForward = useGoForwardCallback(checkpoints);

  // Example usage: goForward();

  // dispose(); // Clean up the root when done
});
```

--------------------------------

### Setting up TinyBase and Rendering the Component

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getmetric/index.html

This example shows the setup required for the Svelte component, including creating a TinyBase store, defining metrics, and mounting the Svelte component. It logs the initial rendered text content of the component.

```javascript
import {flushSync, mount} from 'svelte';
import {createMetrics, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
      felix: {species: 'cat', color: 'black', sold: true},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const metrics = createMetrics(store).setMetricDefinition(
  'speciesPrice',
  'species',
  'sum',
  'price',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {metrics}}));
console.log(app.textContent);
// -> '9'

```

--------------------------------

### Setting up TinyBase Store and Mounting Svelte Component

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/gettable/index.html

This example demonstrates the setup required to run the Svelte component. It includes creating a TinyBase store, populating it with initial data (tables and values), and then mounting the Svelte component, passing the store as a prop. Finally, it logs the initial text content of the mounted component.

```javascript
import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {
      fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
      felix: {species: 'cat', color: 'black', sold: true},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.textContent);
// ->
/*
{
  "fido":{
    "species":"dog",
    "color":"brown",
    "sold":false,
    "next":"felix"
  },
  "felix":{
    "species":"cat",
    "color":"black",
    "sold":true
  }
}
*/

```

--------------------------------

### Using useResultSortedRowIds Hook

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-solid/functions/queries-primitives/useresultsortedrowids/article.html

This example demonstrates how to use the `useResultSortedRowIds` hook to get sorted Row IDs for a 'petColors' query. It specifies the query name, the cell to sort by ('color'), whether to sort in descending order (false), the starting index (0), and an optional limit (undefined). It also shows the setup for metrics, indexes, relationships, and queries, along with setting a cell value and a checkpoint.

```typescript
const metrics = createMetrics(store).setMetricDefinition(
  'highestPrice',
  'species',
  'max',
  'price',
);
const indexes = createIndexes(store).setIndexDefinition(
  'bySpecies',
  'pets',
  'species',
);
const relationships = createRelationships(store)
  .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
  .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
const queries = createQueries(store).setQueryDefinition(
  'petColors',
  'pets',
  ({select, where, param}) => {
    select('color');
    where((getCell) => getCell('species') == param('species'));
  },
  {species: 'dog'},
);
const checkpoints = createCheckpoints(store);
store.setCell('pets', 'fido', 'color', 'walnut');
checkpoints.setCheckpoint('updated color');
metrics.getMetric('highestPrice');
indexes.getSliceIds('bySpecies');
relationships.getRemoteRowId('petSpecies', 'fido');
queries.getResultRowIds('petColors');
useResultSortedRowIds(
  'petColors',
  'color',
  false,
  0,
  undefined,
  queries,
);
dispose();
```

--------------------------------

### Basic useValuesListener Setup

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-solid/functions/store-primitives/usevalueslistener/index.html

This example demonstrates the basic setup for useValuesListener within a SolidJS reactive root. It initializes necessary TinyBase objects and registers a listener that logs changes to the 'pets' table's 'fido' entry. Ensure you have TinyBase and SolidJS installed.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useValuesListener} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black', next: 'fido'},
      },
    })
    .setValues({lastUpdated: 1});

  const valuesListener = (values, changedValues) => {
    console.log('Values changed:', values);
    console.log('Changed values:', changedValues);
  };

  useValuesListener(valuesListener);

  // Example of updating a value to trigger the listener
  setTimeout(() => {
    store.setValue('lastUpdated', Date.now());
  }, 1000);

  // To clean up the listener when the component unmounts (in a real Solid component):
  // onCleanup(() => dispose());
});

```

--------------------------------

### Serve Documentation Site

Source: https://github.com/tinyplex/tinybase/blob/main/docs/guides/how-tinybase-is-built/developing-tinybase/article.html

Compile the documentation and start a local web server to view the TinyBase website.

```bash
npm run compileDocs
npm run serveDocs
```

--------------------------------

### Get Synchronizer Statistics

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/synchronizer-broadcast-channel/interfaces/synchronizer/broadcastchannelsynchronizer/methods/synchronization/getsynchronizerstats/article.html

This example demonstrates how to retrieve send and receive statistics from two active TinyBase Synchronizer instances. Ensure synchronizers are started and have processed some data changes before calling this method.

```typescript
import {createMergeableStore} from 'tinybase';
import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';

const store1 = createMergeableStore();
const store2 = createMergeableStore();

const synchronizer1 = createLocalSynchronizer(store1);
const synchronizer2 = createLocalSynchronizer(store2);

await synchronizer1.startSync();
await synchronizer2.startSync();

store1.setTables({pets: {fido: {species: 'dog'}}});
// ...
store2.setRow('pets', 'felix', {species: 'cat'});
// ...

console.log(synchronizer1.getSynchronizerStats());
// -> {receives: 4, sends: 5}
console.log(synchronizer2.getSynchronizerStats());
// -> {receives: 5, sends: 4}

await synchronizer1.destroy();
await synchronizer2.destroy();

```

--------------------------------

### Start Automatic Data Loading with Initial Content

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

This example demonstrates how to initialize a Tinybase store with data from browser session storage. It handles cases where storage is initially empty by providing default content. Subsequent changes to session storage are automatically reflected in the store.

```typescript
import {createStore} from 'tinybase';
import {createSessionPersister} from 'tinybase/persisters/persister-browser';

const store = createStore();
const persister = createSessionPersister(store, 'pets');

await persister.startAutoLoad([{pets: {fido: {species: 'dog'}}}, {}]);
console.log(store.getTables());
// -> {pets: {fido: {species: 'dog'}}}
```

```typescript
// In another browser tab:
sessionStorage.setItem('pets', '[{"pets":{"toto":{"species":"dog"}}}, {}]');
// -> StorageEvent('storage', {storageArea: sessionStorage, key: 'pets'})

// ...
console.log(store.getTables());
// -> {pets: {toto: {species: 'dog'}}}
```

```typescript
await persister.destroy();
sessionStorage.clear();
```

--------------------------------

### Initializing TinyBase Store, Queries, and Mounting App

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getqueries/article.html

This example demonstrates the complete setup for a TinyBase application, including creating a store, defining queries, and mounting the Svelte application. It also logs the final text content of the mounted app.

```javascript
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const queries = createQueries(store).setQueryDefinition(
  'petSpecies',
  'pets',
  ({select}) => select('species'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
console.log(app.textContent);
// -> 'dog'
```

--------------------------------

### Define Store Values

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/store/type-aliases/store/values/article.html

Example of defining a Values object, which is a standard JavaScript object used for setting or getting multiple keyed values in a TinyBase Store. Ensure 'tinybase' is installed and imported.

```typescript
import type {Values} from 'tinybase';

export const values: Values = {open: true, employees: 4};

```

--------------------------------

### Full React Tinybase Integration Example

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

A comprehensive example demonstrating nested Provider contexts for multiple stores and metrics in a React application. It includes custom hooks and UI components for displaying data.

```javascript
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createMetrics, createStore} from 'tinybase';
import {
  CellView,
  Provider,
  useCreateStore,
  useMetric,
} from 'tinybase/ui-react';

const App = ({petStore, metrics}) => (
  <Provider storesById={{pet: petStore}} metrics={metrics}>
    <OuterPane />
  </Provider>
);
const OuterPane = () => {
  const planetStore = useCreateStore(() =>
    createStore().setTables({planets: {mars: {moons: 2}}}),
  );
  return (
    <Provider storesById={{planet: planetStore}}>
      <InnerPane />
    </Provider>
  );
};
const InnerPane = () => (
  <span>
    <CellView tableId="species" rowId="dog" cellId="price" store="pet" />,
    {useMetric('highestPrice')},
    <CellView
      tableId="planets"
      rowId="mars"
      cellId="moons"
      store="planet"
    />
  </span>
);

const petStore = createStore();
petStore.setTable('species', {dog: {price: 5}, cat: {price: 4}});
const metrics = createMetrics(petStore);
metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App petStore={petStore} metrics={metrics} />);
console.log(app.innerHTML);
// -> '<span>5,5,2</span>'
```

--------------------------------

### Provide and Get Store in Svelte

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

This example shows how to use the provideStore function to register a TinyBase Store within a Provider context, and how to retrieve its ID using getStoreIds in a descendant component.

```svelte
<svelte:options runes={true} />

<script>
  import {provideStore} from 'tinybase/ui-svelte';

  let {store} = $props();

  provideStore('registered', store);
</script>

```

```svelte
<svelte:options runes={true} />

<script>
  import {getStoreIds} from 'tinybase/ui-svelte';

  const ids = getStoreIds();
</script>

{JSON.stringify(getStoreIds().current)}

```

```svelte
<svelte:options runes={true} />

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import Reader from './Reader.svelte';
  import Registrar from './Registrar.svelte';

  let {store} = $props();
</script>

<Provider>
  <Registrar {store} />
  <Reader />
</Provider>

```

```javascript
import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
flushSync();
console.log(app.textContent);
// -> ' ["registered"]'

```

--------------------------------

### Initialize Store and Mount Svelte Component

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getrowids/article.html

This example shows the setup for the Svelte component, including creating a TinyBase store, populating it with data, and mounting the Svelte component. It also logs the initial output of the component.

```javascript
import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {
      fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
      felix: {species: 'cat', color: 'black', sold: true},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.textContent);
// -> '["fido","felix"]'
```

--------------------------------

### Setup and Test getIndexStoreTableId

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getindexstoretableid/article.html

This example sets up a TinyBase store and indexes, then mounts a Svelte component that uses getIndexStoreTableId. It logs the resulting table ID to the console. Ensure TinyBase and Svelte are installed.

```javascript
import {flushSync, mount} from 'svelte';
import {createIndexes, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
    felix: {species: 'cat', color: 'black', sold: true}},
  })
  .setValues({open: true, employees: 3});
const indexes = createIndexes(store).setIndexDefinition(
  'bySpecies',
  'pets',
  'species',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {indexes}}));
console.log(app.textContent);
// -> 'pets'

```

--------------------------------

### Basic HTML Boilerplate for TinyBase with React

Source: https://github.com/tinyplex/tinybase/blob/main/docs/guides/building-uis-with-react/getting-started-with-ui-react/article.html

This HTML file demonstrates the minimal setup required to get started with TinyBase and ui-react in a browser. It includes import maps for modules and a script for JSX compilation.

```html
<html>
      <head>
        <title>My First TinyBase App</title>
        <script type="importmap">
          {
            "imports": {
              "tinybase": "https://esm.sh/tinybase@8.4.2",
              "tinybase/ui-react": "https://esm.sh/tinybase@8.4.2/ui-react",
              "react": "https://esm.sh/react@^19.2.6",
              "react/jsx-runtime": "https://esm.sh/react@^19.2.6/jsx-runtime",
              "react-dom/client": "https://esm.sh/react-dom@^19.2.6/client"
            }
          }
        </script>
        <script type="module" src="https://esm.sh/tsx"></script>
        <script type="text/jsx">
          import {createStore} from "tinybase";
          import {CellView} from "tinybase/ui-react";
          import {createRoot} from "react-dom/client";
          import React from "react";
    
          const store = createStore();
          store.setCell('t1', 'r1', 'c1', 'Hello World');
          createRoot(document.body).render(
            <CellView store={store} tableId="t1" rowId="r1" cellId="c1" />,
          );
        </script>
      </head>
      <body />
    </html>
```

--------------------------------

### Initialize TinyBase Store, Queries, and Mount App

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/getter/getqueriesids/article.html

This example demonstrates the complete setup for a TinyBase application, including creating a store, defining queries, and mounting the main Svelte application component. It then logs the text content of the mounted app to verify the output.

```javascript
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const queries = createQueries(store).setQueryDefinition(
  'petSpecies',
  'pets',
  ({select}) => select('species'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
console.log(app.textContent);
// -> '["petQueries"]'
```

--------------------------------

### Get SQLite Database Instance

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/persister-react-native-sqlite/interfaces/persister/reactnativesqlitepersister/methods/getter/getdb/article.html

This example demonstrates how to create a `ReactNativeSqlitePersister` and then retrieve the database instance using the `getDb` method. It verifies that the returned database instance is the same one that was provided during persister creation. Ensure `react-native-sqlite-storage` is installed and promises are enabled.

```typescript
import {enablePromise, openDatabase} from 'react-native-sqlite-storage';
import {createStore} from 'tinybase';
import {createReactNativeSqlitePersister} from 'tinybase/persisters/persister-react-native-sqlite';

enablePromise(true);
const db = await openDatabase({name: 'my.db', location: 'default'});
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = createReactNativeSqlitePersister(
  store,
  db,
  'my_tinybase',
);
console.log(persister.getDb() == db);
// -> true

await persister.destroy();

```

--------------------------------

### SliceView Component Example

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

This example demonstrates how to set up TinyBase objects and use the SliceView component within a SolidJS reactive root. It covers creating a store, defining metrics, indexes, relationships, and queries, and then rendering a SliceView.

```javascript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {SliceView} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'},
            felix: {species: 'cat', color: 'black'}},
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  SliceView({indexId: 'bySpecies', sliceId: 'dog', indexes});
  dispose();
});

```

--------------------------------

### IndexView Component Example

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/all.html

Demonstrates how to set up TinyBase objects and use the IndexView component within a SolidJS reactive root. This example covers creating stores, indexes, metrics, relationships, and queries, then rendering an IndexView.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {IndexView} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  IndexView({indexId: 'bySpecies', indexes});
  dispose();
});

```

--------------------------------

### Get PGlite Database Connection

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/persister-pglite/interfaces/persister/pglitepersister/methods/getter/getpglite/article.html

This example demonstrates how to create a PglitePersister and then retrieve the underlying PGlite database connection using the getPglite method. It verifies that the returned connection is the same one used for persistence. Ensure PGlite and TinyBase are installed and imported.

```typescript
import {PGlite} from '@electric-sql/pglite';
import {createStore} from 'tinybase';
import {createPglitePersister} from 'tinybase/persisters/persister-pglite';

const pglite = await PGlite.create();
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = await createPglitePersister(
  store,
  pglite,
  'my_tinybase',
);

console.log(persister.getPglite() == pglite);
// -> true

await persister.destroy();
await pglite.close();

```

--------------------------------

### Setting up TinyBase Store and Mounting Svelte App

Source: https://github.com/tinyplex/tinybase/blob/main/docs/api/ui-svelte/functions/listener/oncellids/index.html

This example demonstrates how to create a TinyBase store, populate it with initial data, and then mount a Svelte application that uses the store. It includes flushing updates and logging the UI's text content after a cell modification.

```javascript
import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore()
  .setTables({
    pets: {
      fido: {species: 'dog', color: 'brown', sold: false, next: 'felix'},
      felix: {species: 'cat', color: 'black', sold: true},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .setValues({open: true, employees: 3});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
flushSync(() => {
  store.setCell('pets', 'fido', 'age', 4);
});
flushSync();
console.log(app.textContent);
// -> 'changed'

```