v8.3.0

Solid Support

This release adds the new ui-solid module, bringing TinyBase's reactive Store bindings to Solid apps. It provides Solid primitives that return Accessor functions, listener primitives that clean up with Solid's lifecycle, Provider context helpers, and view components for rendering Store data directly in a Solid component tree.

The primitives follow Solid's fine-grained reactivity model. They read TinyBase data immediately, then update the Accessor when the underlying Store data changes:

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

const solidStore = createStore().setCell('pets', 'fido', 'color', 'brown');

createRoot((dispose) => {
  const color = useCell('pets', 'fido', 'color', solidStore);

  console.log(color());
  // -> 'brown'

  dispose();
});

The module also includes Solid view components and a Provider component, so you can assemble UI directly from TinyBase data while still taking advantage of Solid's selective updates:

import {render} from 'solid-js/web';
import {CellView} from 'tinybase/ui-solid';

const solidApp = document.createElement('div');
document.body.appendChild(solidApp);

const disposeSolid = render(
  () => (
    <CellView tableId="pets" rowId="fido" cellId="color" store={solidStore} />
  ),
  solidApp,
);

console.log(solidApp.textContent);
// -> 'brown'

disposeSolid();

Read more in the Building UIs With Solid guides and the ui-solid module documentation.

A huge thanks to Daniel Grant, @djgrant, for designing and implementing this new Solid support! Please let us know how it works for you and if you have any feedback or suggestions.

Queries From Queries

Also in this release, TinyQL queries can now use the result of another query as their source. This lets you build complex results in small, readable steps - for example, first finding all dogs, and then querying that result to find just the brown ones:

import {createQueries} from 'tinybase';

const queryStore = createStore().setTable('pets', {
  fido: {species: 'dog', color: 'brown'},
  felix: {species: 'cat', color: 'black'},
  cujo: {species: 'dog', color: 'black'},
});

const queryQueries = createQueries(queryStore)
  .setQueryDefinition('dogs', 'pets', ({select, where}) => {
    select('color');
    where('species', 'dog');
  })
  .setQueryDefinition('brownDogs', true, 'dogs', ({select, where}) => {
    select('color');
    where('color', 'brown');
  });

console.log(queryQueries.getResultTable('brownDogs'));
// -> {fido: {color: 'brown'}}

The true argument tells setQueryDefinition that dogs is another query result, not a Table in the underlying Store. This works in query clauses too, so you can select or join from query results as your TinyQL definitions become more modular.

Schematizer Enums

This release addresses enum types in the schematizers. For example, Zod enums are now schematized as string types, rather than being rejected as invalid. This is also now documented accordingly.

There are no intended breaking changes in this release. If you try the new Solid bindings in particular, please let us know how they fit your expectations of building Solid apps - and good luck!