TinyBase

https://tinybase.org
Admin
TinyBase is a reactive, in-memory data store and synchronization engine designed for local-first...
Tokens:1,718,784
Snippets:12,710
Trust Score:8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example: Registering a start transaction listener

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

This example creates a store, registers a listener that logs 'Transaction started', runs a transaction, and then calls and removes the listener.

```javascript
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);
```

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

### Example setup for getCheckpoint

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

JavaScript setup code that creates a store and checkpoints, mounts the Svelte component, and logs the output.

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

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

### JavaScript setup for ResultSortedTableView example

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

JavaScript code that creates the store and queries, mounts the App component, and logs the rendered text. This is the setup code for the example.

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

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

### Test setup for getValues example

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

A test setup that creates a store with tables and values, mounts the App component, and logs the 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);
// -> '{"open":true,"employees":3}'
```

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

### Test setup for getResultRow example

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

A test setup that creates a store and queries, mounts the App component, and logs the output. It demonstrates the expected result of the example.

```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":"brown"}'
```

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

### Example setup with createCheckpoints and mount

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

This example creates a store and checkpoints, mounts the App component, and logs the rendered text. It demonstrates how to set up the checkpoints and render the component.

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

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

### Test setup for getResultTable example

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

A JavaScript test setup that creates a store and queries, mounts the App component, and logs the result. It demonstrates the expected output of the example.

```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"}}'
```

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

### Example: Start autoSave with sessionStorage

Source: https://tinybase.org/api/persister-partykit-client/interfaces/persister/partykitpersister/methods/save/startautosave

Example creating a Store with dataсуществ and a session persister, then starting autoSave to persist initial data and subsequent changes. Demonstrates the async behavior and storage output format.

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

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

await persister.startAutoSave();
console.log(sessionStorage.getItem('pets'));
// -> '[{"pets":{"fido":{"species":"dog"}}},{}]'

store.setTables({pets: {toto: {species: 'dog'}}});
// ...
console.log(sessionStorage.getItem('pets'));
// -> '[{"pets":{"toto":{"species":"dog"}}},{}]'

sessionStorage.clear();
Copy
```

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

### Example usage of startAutoPersisting

Source: https://tinybase.org/api/persister-better-sqlite3/interfaces/persister/bettersqlite3persister/methods/lifecycle/startautopersisting

Example showing how to create a session persister and start auto persisting, then check the auto-saving and auto-loading status.

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

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

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

persister.destroy();
```

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

### Test setup for getRowCount example

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

A test setup that creates a store with tables and values, mounts the App component, and logs the text content, which should be '2'.

```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'
```

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

### startAutoPersisting example

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

Starts the automatic persistence of the store to an Automerge document. The example shows the method being called and then checking the persister status.

```typescript
const persister = createAutomergePersister(store, getAutomergeDoc());
persister.startAutoPersisting();
persister.getStatus(); // -> 'running'
```

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

### Test setup for getIndexIds example

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

A test setup that creates a store and indexes, mounts the App component, and logs the result. It demonstrates the expected output: `['bySpecies']`.

```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);
// -> '["bySpecies"]'
```

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

### Test setup for onRowCount example

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

A test setup that creates a store, mounts the App component, and triggers a row change to verify the listener. It logs 'changed' to the console.

```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.setRow('pets', 'cujo', {species: 'dog'});
});
flushSync();
console.log(app.textContent);
// -> 'changed'
```

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

### Get synchronizer stats example

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

Example of getting send and receive statistics from two active Synchronizer instances. It creates two mergeable stores with local synchronizers, starts synchronization, makes changes, and logs the stats. The output shows the counts of receives and sends for each synchronizer.

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

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

### Example setup and output

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

Sets up a store and indexes, mounts the App component, and logs the output. The expected output is 'fido'.

```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'
```

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

### Example: getting load and save statistics

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

This example creates a session persister, starts auto-load and auto-save, modifies the store, and logs the statistics. It shows that the initial auto-load and auto-save are counted in the stats.

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

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

### Example: Test setup with createStore and createIndexes

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

A test setup that creates a store with sample data, defines an index, mounts the App component, and logs the resulting 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);
// -> '["dog","cat"]'
```

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

### Test setup for getTables example

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

A test script that creates a store with sample data, mounts the App component, and logs the output. The expected output is shown as a comment.

```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);
// ->
`
{
  "pets":{
    "fido":{
      "species":"dog",
      "color":"brown",
      "sold":false,
      "next":"felix"
    },
    "felix":{
      "species":"cat",
      "color":"black",
      "sold":true
    }
  },
  "species":{
    "dog":{
      "price":5
    },
    "cat":{
      "price":4
    }
  }
}
`;
```

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

### MetricView example - setup and mount

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

This JavaScript code creates a store and metrics, mounts the App component, and logs the rendered text content, which should be '2'.

```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'
```

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

### Test setup for getResultCellIds example

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

JavaScript test setup that creates a store and queries, mounts the Svelte component, and logs the output. It demonstrates the expected result of the example.

```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 test for getMetric example

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

JavaScript code that creates a store and metrics, mounts the App component, and logs the output to verify the metric value.

```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'
```

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

### Main entry point: create Store and mount Svelte component

Source: https://tinybase.org/demos/ui-components-svelte/valuesinhtmltable-svelte

Creates a Store with sample values and mounts the App component, passing the store as a prop.

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

const store = createStore()
  .setValue('username', 'John Appleseed')
  .setValue('email address', 'john.appleseed@example.com')
  .setValue('dark mode', true)
  .setValue('font size', 14);

mount(App, {target: document.body, props: {store}});
```

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

### Example: Getting the storage name

Source: https://tinybase.org/api/persister-react-native-mmkv/interfaces/persister/reactnativemmkvpersister/methods/getter/getstoragename

This example creates a `Persister` object against a newly-created `Store` and then gets the unique key of the storage location back out again. It uses `createMMKV` from 'react-native-mmkv', `createStore` from 'tinybase', and `createReactNativeMmkvPersister` from 'tinybase/persisters/persister-react-native-mmkv'. The example logs `true` if the storage name matches 'my_tinybase'.

```javascript
import {createMMKV} from 'react-native-mmkv';
import {createStore} from 'tinybase';
import {createReactNativeMmkvPersister} from 'tinybase/persisters/persister-react-native-mmkv';

const storage = createMMKV();
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = createReactNativeMmkvPersister(
  store,
  storage,
  'my_tinybase',
);
console.log(persister.getStorageName() == 'my_tinybase');
// -> true

await persister.destroy();
```

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

### Example: create persister and get database connection

Source: https://tinybase.org/api/persister-capacitor-sqlite/interfaces/persister/capacitorsqlitepersister/methods/getter/getdb

Creates a `Persister` object against a newly-created `Store` and then gets the database connection back out again. The example logs `true` when the returned connection equals the original `db`.

```typescript
import {
  CapacitorSQLite,
  SQLiteConnection,
} from '@capacitor-community/sqlite';
import {createStore} from 'tinybase';
import {createCapacitorSqlitePersister} from 'tinybase/persisters/persister-capacitor-sqlite';

const sqlite = new SQLiteConnection(CapacitorSQLite);
const db = await sqlite.createConnection(
  'my.db',
  false,
  'no-encryption',
  1,
  false,
);
await db.open();

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = createCapacitorSqlitePersister(store, db, 'my_tinybase');

console.log(persister.getDb() == db);
// -> true

await persister.destroy();
```

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

### Example: getValueHash usage

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

Example of using `getValueHash` to get the hash of a `Value` and its HLC. The output is `312420374`.

```javascript
import {getValueHash} from 'tinybase';

const value = 42;
const valueHlc = '03E3B------mmxrx';

console.log(getValueHash(value, valueHlc));
// -> 312420374
```

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

### useRowState example with createRoot

Source: https://tinybase.org/api/ui-solid/functions/state-primitives/userowstate

This example creates a `Store`, binds it to the primitive, and reads the resulting Solid Accessor. It logs the row after setting it.

```javascript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useRowState} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore();
  const [row, setRow] = useRowState('pets', 'fido', store);
  setRow({species: 'dog'});
  console.log(JSON.stringify(row()));
  // -> '{"species":"dog"}'
  dispose();
});
```

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

### startAutoSave usage example

Source: https://tinybase.org/api/persister-sqlite-node/interfaces/persister/sqlitenodepersister/methods/save/startautosave

Starts an automatic save process for the persister. The example shows the method being called on a persister instance.

```typescript
const persister = new SqliteNodePersister(store, sqlite3.Database(':memory:'));
persister.startAutoSave();
```

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

### Test setup for getTable example

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

A test script that creates a store with tables and values, mounts the App component, and logs the output. The expected output is shown as a JSON string.

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

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

### Example: using useCreateStore in a Solid root

Source: https://tinybase.org/api/the-essentials/using-solid/usecreatestore

Example showing how to create a Store with useCreateStore inside a Solid root, add a cell, read it, and dispose. The output is logged as 'dog'.

```javascript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useCreateStore} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = useCreateStore(() =>
    createStore().setCell('pets', 'fido', 'species', 'dog'),
  );
  console.log(store().getCell('pets', 'fido', 'species'));
  // -> 'dog'
  dispose();
});
```

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

### useRow example with createStore and createRoot

Source: https://tinybase.org/api/the-essentials/using-solid/userow

This example creates a Store, binds it to the primitive, and reads the resulting Solid Accessor. It uses createRoot from solid-js and createStore from tinybase. The output is logged as '{"species":"dog"}'.

```javascript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useRow} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setRow('pets', 'fido', {species: 'dog'});
  const row = useRow('pets', 'fido', store);
  console.log(JSON.stringify(row()));
  // -> '{"species":"dog"}'
  dispose();
});
```

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

### Set up store and relationships

Source: https://tinybase.org/demos/ui-components-svelte/relationshipinhtmltable-svelte

Initializes the store, loads the 'genres' table, adds metadata, and defines a relationship 'genresMetadata' linking 'genres' to 'metadata'.

```javascript
 const init = async () => {
   const store = createStore();
   await loadTable(store, 'genres');
+  store.setTable('metadata', {
+    g01_meta: {text: 'Dramatic movies to make you think', popularity: 6},
+    g02_meta: {text: 'These ones make you laugh', popularity: 7},
+    g03_meta: {text: 'Fun for all the family', popularity: 8},
+    g04_meta: {text: 'For the romantics at heart', popularity: 5},
+    g05_meta: {text: 'From cartoons to CGI', popularity: 5},
+    g06_meta: {text: 'Escape to another world', popularity: 4},
+    g07_meta: {text: 'Tales of the American West', popularity: 3},
+    g08_meta: {text: 'Stay on the edge of your seat', popularity: 6},
+    g09_meta: {text: 'For your inner explorer', popularity: 7},
+    g10_meta: {text: 'Fast-paced action from start to finish', popularity: 8},
+    g11_meta: {text: 'Jump scares to give you nightmares', popularity: 6},
+    g12_meta: {text: 'Murders and mysteries', popularity: 5},
+    g14_meta: {text: 'Take a step back in time', popularity: 3},
+    g15_meta: {text: 'A glimpse of the future', popularity: 8},
+    g16_meta: {text: 'Who did it?', popularity: 5},
+  });
+  const relationships = createRelationships(store).setRelationshipDefinition(
+    'genresMetadata',
+    'genres',
+    'metadata',
+    (_, rowId) => rowId + '_meta',
+  );
-  mount(App, {target: document.body, props: {store}});
+  mount(App, {target: document.body, props: {store, relationships}});
 };
```

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

### Example of stopping automatic persisting

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

Example showing how to stop automatic persisting after starting it, with console logs demonstrating the state changes.

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

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

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

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

persister.destroy();
```

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

### Example: Using useTableState with a store

Source: https://tinybase.org/api/ui-solid/functions/state-primitives/usetablestate

This example creates a `Store`, binds it to the primitive, and reads the resulting Solid Accessor. It imports `createRoot` from 'solid-js', `createStore` from 'tinybase', and `useTableState` from 'tinybase/ui-solid'. The example sets a table and logs the result.

```javascript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useTableState} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore();
  const [table, setTable] = useTableState('pets', store);
  setTable({fido: {species: 'dog'}});
  console.log(JSON.stringify(table()));
  // -> '{"fido":{"species":"dog"}}'
  dispose();
});
```

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

### Main entry point: create stores, indexes, and mount App

Source: https://tinybase.org/demos/countries/countries-svelte

Initializes three stores (country, star, view) with schemas, sets up persisters for remote, local, and session storage, creates two indexes, and mounts the Svelte App component on window load.

```javascript
import {createIndexes, createStore, defaultSorter} from 'tinybase';
import {
  createLocalPersister,
  createSessionPersister,
} from 'tinybase/persisters/persister-browser';
import {createRemotePersister} from 'tinybase/persisters/persister-remote';
import {mount} from 'svelte';
import App from './App.svelte';

const init = async () => {
  const countryStore = createStore().setTablesSchema({
    countries: {emoji: {type: 'string'}, name: {type: 'string'}},
  });
  createRemotePersister(
    countryStore,
    'https://tinybase.org/assets/countries.json',
  ).load();

  const starStore = createStore().setTablesSchema({
    countries: {star: {type: 'boolean'}},
  });
  const starPersister = createLocalPersister(starStore, 'countries/starStore');
  await starPersister.startAutoLoad([
    {
      countries: {
        GB: {star: true},
        NZ: {star: true},
        AU: {star: true},
        SE: {star: true},
        IE: {star: true},
        IN: {star: true},
        BZ: {star: true},
        US: {star: true},
      },
    },
  ]);
  await starPersister.startAutoSave();

  const viewStore = createStore().setValuesSchema({
    indexes: {type: 'string', default: 'countryIndexes'},
    indexId: {type: 'string', default: 'firstLetter'},
    sliceId: {type: 'string', default: 'A'},
  });
  await createSessionPersister(
    viewStore,
    'countries/viewStore',
  ).startAutoPersisting();

  const countryIndexes = createIndexes(countryStore).setIndexDefinition(
    'firstLetter',
    'countries',
    (getCell) => getCell('name')[0],
    'name',
    defaultSorter,
  );
  const starIndexes = createIndexes(starStore).setIndexDefinition(
    'star',
    'countries',
    'star',
  );

  mount(App, {
    target: document.body,
    props: {
      countryStore,
      starStore,
      viewStore,
      countryIndexes,
      starIndexes,
    },
  });
};

window.addEventListener('load', init);
```

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

### Example: using getTransactionMergeableChanges

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

This example creates a MergeableStore, starts a transaction, makes changes, and then logs the mergeable changes after finishing the transaction.

```javascript
import {createMergeableStore} from 'tinybase';

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

store
  .startTransaction()
  .setCell('pets', 'fido', 'color', 'black')
  .setValue('open', false)
  .finishTransaction(() => {
    console.log(store.getTransactionMergeableChanges());
  });
// ->
[
  [{pets: [{fido: [{color: ['black', 'Nn1JUF----2FnHIC']}]}]}],
  [{open: [false, 'Nn1JUF----3FnHIC']}],
  1,
];
```

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

### Test setup for getCheckpoints example

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

A test script that creates a store and checkpoints, mounts the App component, and logs the resulting text content.

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

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

### Test setup for getSliceRowIds example

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

A test setup that creates a store and indexes, mounts the App component, and logs the output, which is `['fido']`.

```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"]'
```

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

### Example: Setting up store and queries for ResultRowView

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

JavaScript code that creates a store and queries, mounts the App component, and logs the rendered text content, which outputs 'color'.

```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'
```

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

### useCell example

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

Example usage of useCell. It creates a store with a cell, uses useCell to get the cell value, logs it, and disposes. The output is 'dog'.

```javascript
import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useCell} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setCell('pets', 'fido', 'species', 'dog');
  const species = useCell('pets', 'fido', 'species', store);
  console.log(species());
  // -> 'dog'
  dispose();
});
```

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

### Setting up store and relationships for the example

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

This JavaScript code creates a store with tables and values, defines relationships, mounts the Svelte component, and logs the output. It demonstrates the expected output 'pets:species'.

```javascript
import {flushSync, mount} from 'svelte';
import {createRelationships, 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 relationships = createRelationships(store)
  .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
  .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {relationships}}));
console.log(app.textContent);
// -> 'pets:species'
```

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

### useQueriesIds hook usage example

Source: https://tinybase.org/api/ui-react/functions/queries-hooks/usequeriesids

Use this hook to get the IDs of all queries in the store. The example shows a component that calls useQueriesIds and renders the result.

```jsx
const store = createStore().setTables({pets: {fido: {species: 'dog'}, felix: {species: 'cat'}, cujo: {species: 'dog'}}});
const queries = createQueries(store).setQueryDefinition('dog', 'pets', {select: {species: 'dog'}});
const ids = useQueriesIds('dog');

```

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

### createOpfsPersister usage example

Source: https://tinybase.org/api/persister-browser/functions/creation/createopfspersister

Creates an OPFS persister for a TinyBase store. The example shows the function being called with a store and a file name, and then the persister being started.

```javascript
const persister = createOpfsPersister(store, 'file');
await persister.start();
```

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

### Example: create PostgresPersister and getSql

Source: https://tinybase.org/api/persister-postgres/interfaces/persister/postgrespersister/methods/getter/getsql

Creates a `Store` and a `PostgresPersister`, then calls `getSql()` to retrieve the database connection and compares it to the original `sql` object. The example also shows cleanup with `persister.destroy()` and `sql.end()`.

```javascript
import postgres from 'postgres';
import {createStore} from 'tinybase';
import {createPostgresPersister} from 'tinybase/persisters/persister-postgres';

const sql = postgres('postgres://localhost:5432/tinybase');
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = await createPostgresPersister(store, sql, 'my_tinybase');

console.log(persister.getSql() == sql);
// -> true

await persister.destroy();
await sql.end();
```
Tokens:
Raw