### Full TinyBase Setup and useQueries Example

Source: https://tinybase.org/api/ui-solid/functions/queries-primitives/usequeries

This example demonstrates a complete setup of TinyBase objects including store, metrics, indexes, relationships, and queries. It then shows how to use the `useQueries` primitive within a SolidJS reactive root.

```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();
});

```

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

### Full Example: Creating and Mounting App with Indexes

Source: https://tinybase.org/api/ui-svelte/functions/provider/provideindexes

This comprehensive example shows the complete setup, including creating a TinyBase store and indexes, then mounting the Svelte application to test the `provideIndexes` functionality.

```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}}));
flushSync();
console.log(app.textContent);
// -> ' ["registered"]'


```

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

### Tinybase Setup and Component Mount Example

Source: https://tinybase.org/api/ui-svelte/functions/getter/getslicerowids

This example sets up a Tinybase store and indexes, then mounts a Svelte component that uses getSliceRowIds. It logs the component's output to the console.

```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},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .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);
// -> '["fido"]'

```

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

### Initialize and Mount TinyBase App with Metrics

Source: https://tinybase.org/api/ui-svelte/functions/getter/getmetrics

This example demonstrates the complete setup for a TinyBase application using Svelte. It includes creating the store, metrics, mounting the app, and verifying the output. Use this for integration testing or initial setup.

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

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const metrics = createMetrics(store).setMetricDefinition(
  'petCount',
  'pets',
  'count',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {metrics}}));
console.log(app.textContent);
// -> '1'
```

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

### Setting up TinyBase and `getIndexStoreTableId` Example

Source: https://tinybase.org/api/ui-svelte/functions/getter/getindexstoretableid

This snippet shows the complete setup for the `getIndexStoreTableId` example, including creating a TinyBase store, defining an index, and mounting a Svelte component. It logs the resulting table ID to the console.

```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},
    },
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .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'

```

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

### Full Example with TinyBase Setup and useIndexes

Source: https://tinybase.org/api/ui-solid/functions/indexes-primitives/useindexes

This example demonstrates setting up various TinyBase objects (store, metrics, indexes, relationships, queries, checkpoints) and then using the useIndexes primitive within a SolidJS reactive root. It shows how to initialize and interact with TinyBase data structures.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useIndexes} 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');
  useIndexes();
  dispose();
});

```

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

### SolidJS Example with RowView and TinyBase Setup

Source: https://tinybase.org/api/ui-solid/functions/store-components/rowview

This example demonstrates setting up a TinyBase store with tables, values, metrics, indexes, relationships, and queries. It then uses the RowView component within a SolidJS createRoot context to render a specific row.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {RowView} 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');
  RowView({tableId: 'pets', rowId: 'fido', store});
  dispose();
});

```

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

### Setting up TinyBase and `getResultRowCount` Example

Source: https://tinybase.org/api/ui-svelte/functions/getter/getresultrowcount

This snippet shows the complete setup for the `getResultRowCount` example, including creating a TinyBase store, defining queries, mounting a Svelte component, and logging the output. It verifies that the row count is correctly displayed.

```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);
// -> '2'

```

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

### SliceView Example with TinyBase Setup

Source: https://tinybase.org/api/ui-solid/functions/indexes-components/sliceview

This example demonstrates setting up TinyBase objects and using the SliceView component within a SolidJS reactive root. It includes creating a store, metrics, indexes, relationships, queries, and checkpoints, then updating a cell and rendering a SliceView.

```typescript
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();
});

```

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

### useCheckpoint Example with TinyBase Setup

Source: https://tinybase.org/api/ui-solid/functions/checkpoints-primitives/usecheckpoint

This example demonstrates setting up various TinyBase objects (store, metrics, indexes, relationships, queries, checkpoints) and then using the `useCheckpoint` primitive within a SolidJS reactive root. It shows how to create and interact with these objects and register a checkpoint.

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

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {fido: {species: 'dog', color: 'brown', next: 'felix'}},
      felix: {species: 'cat', color: 'black'},
    })
    .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');
  useCheckpoint('0', checkpoints);
  dispose();
});

```

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

### TinyBase in a Browser with CDN

Source: https://tinybase.org/guides/the-basics/getting-started

Include TinyBase from a CDN in an HTML file to quickly get started. This example demonstrates creating a store, setting a value and a cell, and then displaying them.

```html
<html>
  <head>
    <title>My First TinyBase App</title>
    <script type="importmap">
      {"imports": {"tinybase": "https://esm.sh/tinybase@8.5.0"}}
    </script>
    <script type="module">
      import {createStore} from 'tinybase';

      addEventListener('load', () => {
        const store = createStore();
        store.setValue('v1', 'Hello');
        store.setCell('t1', 'r1', 'c1', 'World');

        document.body.innerHTML =
          store.getValue('v1') + ' ' + store.getCell('t1', 'r1', 'c1');
      });
    </script>
  </head>
  <body />
</html>

```

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

### Example Usage of useRowCount with TinyBase Setup

Source: https://tinybase.org/api/ui-solid/functions/store-primitives/userowcount

This example demonstrates setting up TinyBase objects and using the useRowCount primitive within a SolidJS reactive root. It includes creating a store, defining metrics, indexes, relationships, and queries, then calling useRowCount to get the row count for the 'pets' table.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useRowCount} 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');
  useRowCount('pets', store);
  dispose();
});

```

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

### Setting up TinyBase Store and Mounting Svelte Component

Source: https://tinybase.org/api/ui-svelte/functions/getter/hasrow

This example shows the setup for the Svelte component, including creating a TinyBase store with initial data, mounting the `App.svelte` component, and logging the initial content to verify the `hasRow` function's output.

```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);
// -> 'true'

```

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

### Example Cleanup in TinyBase Guides

Source: https://tinybase.org/guides/agents-guide

Demonstrates how to clean up between sequential code examples in TinyBase guides to avoid variable redeclaration issues. This is useful when examples build upon each other.

```typescript
store.delTables()

```

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

### Stopping Auto-Loading with AutomergePersister

Source: https://tinybase.org/api/persister-automerge/interfaces/persister/automergepersister/methods/load/stopautoload

This example demonstrates how to stop the automatic loading of data from session storage using the stopAutoLoad method. It shows that after stopping auto-load, changes made to storage are no longer automatically reflected in the store. The example also includes setup for creating a store, a persister, starting auto-load, and cleaning up.

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

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

// 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'}}}

await persister.stopAutoLoad();

// In another browser tab:
sessionStorage.setItem(
  'pets',
  '[{"pets":{"felix":{"species":"cat"}}},{}]',
);
// -> StorageEvent('storage', {storageArea: sessionStorage, key: 'pets'})
// ...
console.log(store.getTables());
// -> {pets: {toto: {species: 'dog'}}}
// Storage change has not been automatically loaded.

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

```

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

### Get AutomergePersister Statistics

Source: https://tinybase.org/api/persister-automerge/interfaces/persister/automergepersister/methods/development/getstats

This example demonstrates how to retrieve load and save statistics from an AutomergePersister. It includes setup for auto-loading and auto-saving, simulates data changes, and logs the statistics. Remember that startAutoLoad and startAutoSave also contribute to these counts.

```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'}}});
await persister.startAutoSave();

store.setTables({pets: {felix: {species: 'cat'}}});
// ...

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

console.log(persister.getStats());
// -> {loads: 2, saves: 2}

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

```

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

### Setting up Provider and Registering Indexes

Source: https://tinybase.org/api/ui-svelte/functions/provider/provideindexes

This example demonstrates how to set up the `Provider` component and use `Registrar` and `Reader` components to register and access indexes dynamically.

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

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

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

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


```

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

### Initialize and Mount TinyBase App with Queries

Source: https://tinybase.org/api/ui-svelte/functions/getter/resolvequeries

This example demonstrates setting up a TinyBase store and queries, then mounting a Svelte application that utilizes these. It shows the complete setup for testing the `resolveQueries` functionality, including console logging the final 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);
// -> 'dog'
```

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

### Get Transaction Changes in TinyBase

Source: https://tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/methods/transaction/gettransactionchanges

This example demonstrates how to use getTransactionChanges within a transaction to log changes made to cells and values. It shows how to start a transaction, make modifications, and then retrieve and log the changes upon finishing the transaction.

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

const store = createStore()
  .setTables({pets: {fido: {species: 'dog', color: 'brown'}}})
  .setValues({open: true});

store
  .startTransaction()
  .setCell('pets', 'fido', 'color', 'black')
  .setValue('open', false)
  .finishTransaction(() => {
    const [changedCells, changedValues] = store.getTransactionChanges();
    console.log(changedCells);
    console.log(changedValues);
  });
// -> {pets: {fido: {color: 'black'}}}
// -> {open: false}
```

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

### Set up TinyBase Provider and Mount App

Source: https://tinybase.org/api/ui-svelte/functions/getter/getmetricsids

This example shows the setup for a TinyBase application using Svelte. It includes creating a store, defining metrics, and mounting the main `App.svelte` component within a `Provider`. The `console.log` demonstrates the expected output of metric IDs.

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

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


```

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

### Sorting Row IDs by a Cell Value

Source: https://tinybase.org/api/ui-solid/functions/store-primitives/usesortedrowids

This example demonstrates how to use the useSortedRowIds hook to get a reactive accessor for row IDs sorted by a specific cell's value. It shows basic setup with a store and sorting parameters.

```typescript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useSortedRowIds} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setTable('pets', {
    fido: {sold: true},
    felix: {sold: false},
  });
  const rowIds = useSortedRowIds(
    'pets',
    'sold',
    false,
    0,
    undefined,
    store,
  );
  console.log(JSON.stringify(rowIds()));
  // -> '["felix","fido"]'
  dispose();
});

```

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

### Setting up TinyBase and Mounting SliceView

Source: https://tinybase.org/api/ui-svelte/functions/component/sliceview

This example demonstrates the setup of TinyBase store and indexes, and then mounts the Svelte App component containing SliceView. It also logs the rendered text content.

```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}},
    species: {dog: {price: 5}, cat: {price: 4}},
  })
  .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);
// -> 'fido'

```

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

### Registering a Start Transaction Listener in TinyBase

Source: https://tinybase.org/api/store/interfaces/store/store/methods/listener/addstarttransactionlistener

This example demonstrates how to register a listener that logs a message when a transaction begins. It shows the basic setup of a store, adding the listener, and then triggering the listener by performing a transaction. The listener can also be manually called or removed.

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

const store = createStore()
  .setTables({
    pets: {fido: {species: 'dog', color: 'brown'}},
  })
  .setValues({open: true, employees: 3});
const listenerId = store.addStartTransactionListener(() => {
  console.log('Transaction started');
});

store.transaction(() =>
  store.setCell('pets', 'fido', 'color', 'brown').setValue('employees', 3),
);
// -> 'Transaction started'

store.callListener(listenerId);
// -> 'Transaction started'

store.delListener(listenerId);
```

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

### Initialize Store and Mount Svelte Component

Source: https://tinybase.org/api/ui-svelte/functions/getter/getrowcount

This example demonstrates setting up a TinyBase store with initial data, mounting the Svelte component, and logging the component's output to verify the row count.

```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);
// -> '2'

```

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

### Get OpfsPersister Stats

Source: https://tinybase.org/api/persister-browser/interfaces/persister/opfspersister/methods/development/getstats

This example demonstrates how to retrieve load and save statistics from an OpfsPersister. It includes setup for auto-loading and auto-saving, simulating store changes and storage events, and then logs the statistics. Remember that startAutoLoad and startAutoSave also count as initial loads and saves.

```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'}}});
await persister.startAutoSave();

store.setTables({pets: {felix: {species: 'cat'}}});
// ...

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

console.log(persister.getStats());
// -> {loads: 2, saves: 2}

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

```

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

### Full Example: Mounting and Testing provideCheckpoints

Source: https://tinybase.org/api/ui-svelte/functions/provider/providecheckpoints

This JavaScript code demonstrates a complete example of setting up a TinyBase store, creating checkpoints, mounting a Svelte app that uses `provideCheckpoints`, and verifying the output. It uses `flushSync` and `mount` from 'svelte' and `createCheckpoints`, `createStore` from 'tinybase'.

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

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

```

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

### Setting up TinyBase and using useStore in SolidJS

Source: https://tinybase.org/api/ui-solid/functions/store-primitives/usestore

This example demonstrates initializing various TinyBase objects (store, metrics, indexes, relationships, queries, checkpoints) and then using the `useStore` primitive within a SolidJS reactive root. It shows how to access the default store.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useStore} 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');
  useStore();
  dispose();
});

```

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

### Example Usage of useLocalRowIds

Source: https://tinybase.org/api/ui-solid/functions/relationships-primitives/uselocalrowids

An example demonstrating the setup of TinyBase objects and the usage of the `useLocalRowIds` hook within a SolidJS reactive root.

```typescript
import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useLocalRowIds} 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');
  useLocalRowIds('petSpecies', 'dog', relationships);
  dispose();
});

```

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

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

Source: https://tinybase.org/api/ui-svelte/functions/getter/getindexesids

This example demonstrates the initialization of a TinyBase store, the creation and definition of an index, and the mounting of the Svelte application. It then logs the text content of the mounted app 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);
// -> '["petIndexes"]'


```

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

### Get Cell Hash

Source: https://tinybase.org/api/common/functions/hash/getcellinrowhash

This example demonstrates how to get the hash of a cell using its ID and pre-calculated hash. It requires importing the getCellInRowHash function from 'tinybase'.

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

const cellId = 'species';
const cellHash = '3002200796'; // hash of 'dog' and '03E3B------mmxrx'

console.log(getCellInRowHash(cellId, cellHash));
// -> 3777304796
```

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

### Start Synchronization With Default Content

Source: https://tinybase.org/api/synchronizer-broadcast-channel/interfaces/synchronizer/broadcastchannelsynchronizer/methods/synchronization/startsync

This example shows how to start synchronization between two LocalSynchronizers, providing default content. The default content from the first synchronizer is used to populate both stores, as the second synchronizer starts after the first has established its default content.

```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([{pets: {fido: {species: 'dog'}}}, {}]);
await synchronizer2.startSync([{pets: {felix: {species: 'cat'}}}, {}]);

// ...

console.log(store1.getTables());
// -> {pets: {fido: {species: 'dog'}}}
console.log(store2.getTables());
// -> {pets: {fido: {species: 'dog'}}}

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

```

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

### Get Store Reference and Update Data

Source: https://tinybase.org/api/indexes/interfaces/indexes/indexes/methods/getter/getstore

This example demonstrates how to get a reference to the underlying Store from an Indexes object and use it to update data. The updated data is then reflected in the indexes.

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

const indexes = createIndexes(createStore());
indexes.setIndexDefinition('bySpecies', 'pets', 'species');
indexes.getStore().setCell('pets', 'fido', 'species', 'dog');
console.log(indexes.getSliceIds('bySpecies'));
// -> ['dog']

```

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

### Initialize Store, Persister, and Mount App

Source: https://tinybase.org/api/ui-svelte/functions/getter/getpersister

This example demonstrates the setup and mounting of the TinyBase Svelte application. It includes creating a `store`, a custom `persister` (though its methods are no-ops for this example), and then mounting the `App.svelte` component into the DOM. The `console.log` verifies the initial state or output from the mounted component.

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

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

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

### Check AutomergePersister Auto-Saving Status

Source: https://tinybase.org/api/persister-automerge/interfaces/persister/automergepersister/methods/save/isautosaving

This example demonstrates how to use the isAutoSaving method to check the auto-save status of a TinyBase persister. It shows the status before starting, after starting, and after stopping auto-save.

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

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

console.log(persister.isAutoSaving());
// -> false

await persister.startAutoSave();
console.log(persister.isAutoSaving());
// -> true

await persister.stopAutoSave();
console.log(persister.isAutoSaving());
// -> false

```

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

### Setting up TinyBase Store and Mounting Svelte App

Source: https://tinybase.org/api/ui-svelte/functions/listener/onrow

This example demonstrates how to create a TinyBase store, populate it with data, mount the Svelte application, and then trigger a change to observe the listener's behavior. The `flushSync` is used to ensure updates are processed.

```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', 'color', 'white');
});
flushSync();
console.log(app.textContent);
// -> 'changed'

```

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

### Setting up TinyBase and Rendering MetricView

Source: https://tinybase.org/api/ui-svelte/functions/component/metricview

This example demonstrates the full setup, including creating a TinyBase store, defining a metric, and mounting the Svelte App component with the MetricView. It logs the rendered text content to the console.

```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(
  'petCount',
  'pets',
  'count',
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {metrics}}));
console.log(app.textContent);
// -> '2'

```

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

### Explicit Transaction Start and Finish

Source: https://tinybase.org/api/store/interfaces/store/store/methods/transaction/finishtransaction

This example shows how to explicitly start and finish a transaction using startTransaction and finishTransaction. It highlights that listeners are only called once after the transaction is complete, even with multiple mutations.

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

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
store.addRowListener('pets', 'fido', () => console.log('Fido changed'));

store
  .setCell('pets', 'fido', 'color', 'brown')
  .setCell('pets', 'fido', 'sold', false);
// -> 'Fido changed'
// -> 'Fido changed'

store
  .startTransaction()
  .setCell('pets', 'fido', 'color', 'walnut')
  .setCell('pets', 'fido', 'sold', true)
  .finishTransaction();
// -> 'Fido changed'

```

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

### Example: Destroying an AutomergePersister

Source: https://tinybase.org/api/persister-automerge/interfaces/persister/automergepersister/methods/lifecycle/destroy

This example demonstrates how to create a Store, associate a Persister with it, start auto-saving, and then destroy the Persister to remove its listeners. It logs the listener statistics before and after destruction to show the effect.

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

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

console.log(store.getListenerStats().transaction);
// -> 1

await persister.destroy();

console.log(store.getListenerStats().transaction);
// -> 0

```

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

### Setting up TinyBase and Rendering ResultRowView

Source: https://tinybase.org/api/ui-svelte/functions/component/resultrowview

This example demonstrates the setup of TinyBase store and queries, followed by mounting the App component which uses ResultRowView. It also logs the rendered 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}}));
console.log(app.textContent);
// -> 'color'

```

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

### Setup and Mount TinyBase App with Relationships

Source: https://tinybase.org/api/ui-svelte/functions/getter/resolverelationships

This example demonstrates how to create a TinyBase store and relationships, then mount a Svelte application that utilizes them. It logs the resulting text content to verify the data retrieval.

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

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


```