tinybase 9.1.0-beta.0 → 9.1.0-beta.1

package/omni/index.js

@@ -2206,13 +2206,36 @@ const createStore = () => {
     listener,
     mutator,
   ) => {
-    let sortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+    const [descending, offset, limit, sorter] = otherArgs;
+    let sortedRowIds = getSortedRowIds(
+      tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      sorter,
+    );
     return addListener(
       () => {
-        const newSortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+        const newSortedRowIds = getSortedRowIds(
+          tableId,
+          cellId,
+          descending,
+          offset,
+          limit,
+          sorter,
+        );
         if (!arrayIsEqual(newSortedRowIds, sortedRowIds)) {
           sortedRowIds = newSortedRowIds;
-          listener(store, tableId, cellId, ...otherArgs, sortedRowIds);
+          listener(
+            store,
+            tableId,
+            cellId,
+            descending,
+            offset,
+            limit,
+            sortedRowIds,
+          );
         }
       },
       sortedRowIdsListeners[mutator ? 1 : 0],
@@ -2266,6 +2289,7 @@ const createStore = () => {
     descending,
     offset = 0,
     limit,
+    sorter = defaultSorter,
   ) =>
     isObject(tableIdOrArgs)
       ? getSortedRowIds(
@@ -2274,16 +2298,19 @@ const createStore = () => {
           tableIdOrArgs.descending,
           tableIdOrArgs.offset,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
         )
       : arrayMap(
           slice(
             arraySort(
               mapMap(mapGet(tablesMap, id(tableIdOrArgs)), (row, rowId) => [
-                isUndefined(cellId) ? rowId : mapGet(row, id(cellId)),
+                isUndefined(cellId)
+                  ? rowId
+                  : decodeIfJson(mapGet(row, id(cellId))),
                 rowId,
               ]),
               ([cell1], [cell2]) =>
-                defaultSorter(cell1, cell2) * (descending ? -1 : 1),
+                sorter(cell1, cell2) * (descending ? -1 : 1),
             ),
             offset,
             isUndefined(limit) ? limit : offset + limit,
@@ -2761,6 +2788,7 @@ const createStore = () => {
             tableIdOrArgs.descending ?? false,
             tableIdOrArgs.offset ?? 0,
             tableIdOrArgs.limit,
+            tableIdOrArgs.sorter,
           ],
           cellIdOrListener,
           descendingOrMutator,
@@ -2768,7 +2796,7 @@ const createStore = () => {
       : addSortedRowIdsListenerImpl(
           tableIdOrArgs,
           cellIdOrListener,
-          [descendingOrMutator, offset, limit],
+          [descendingOrMutator, offset, limit, void 0],
           listener,
           mutator,
         );

package/omni/with-schemas/index.js

@@ -2206,13 +2206,36 @@ const createStore = () => {
     listener,
     mutator,
   ) => {
-    let sortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+    const [descending, offset, limit, sorter] = otherArgs;
+    let sortedRowIds = getSortedRowIds(
+      tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      sorter,
+    );
     return addListener(
       () => {
-        const newSortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+        const newSortedRowIds = getSortedRowIds(
+          tableId,
+          cellId,
+          descending,
+          offset,
+          limit,
+          sorter,
+        );
         if (!arrayIsEqual(newSortedRowIds, sortedRowIds)) {
           sortedRowIds = newSortedRowIds;
-          listener(store, tableId, cellId, ...otherArgs, sortedRowIds);
+          listener(
+            store,
+            tableId,
+            cellId,
+            descending,
+            offset,
+            limit,
+            sortedRowIds,
+          );
         }
       },
       sortedRowIdsListeners[mutator ? 1 : 0],
@@ -2266,6 +2289,7 @@ const createStore = () => {
     descending,
     offset = 0,
     limit,
+    sorter = defaultSorter,
   ) =>
     isObject(tableIdOrArgs)
       ? getSortedRowIds(
@@ -2274,16 +2298,19 @@ const createStore = () => {
           tableIdOrArgs.descending,
           tableIdOrArgs.offset,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
         )
       : arrayMap(
           slice(
             arraySort(
               mapMap(mapGet(tablesMap, id(tableIdOrArgs)), (row, rowId) => [
-                isUndefined(cellId) ? rowId : mapGet(row, id(cellId)),
+                isUndefined(cellId)
+                  ? rowId
+                  : decodeIfJson(mapGet(row, id(cellId))),
                 rowId,
               ]),
               ([cell1], [cell2]) =>
-                defaultSorter(cell1, cell2) * (descending ? -1 : 1),
+                sorter(cell1, cell2) * (descending ? -1 : 1),
             ),
             offset,
             isUndefined(limit) ? limit : offset + limit,
@@ -2761,6 +2788,7 @@ const createStore = () => {
             tableIdOrArgs.descending ?? false,
             tableIdOrArgs.offset ?? 0,
             tableIdOrArgs.limit,
+            tableIdOrArgs.sorter,
           ],
           cellIdOrListener,
           descendingOrMutator,
@@ -2768,7 +2796,7 @@ const createStore = () => {
       : addSortedRowIdsListenerImpl(
           tableIdOrArgs,
           cellIdOrListener,
-          [descendingOrMutator, offset, limit],
+          [descendingOrMutator, offset, limit, void 0],
           listener,
           mutator,
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinybase",
-  "version": "9.1.0-beta.0",
+  "version": "9.1.0-beta.1",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinybase",
   "license": "MIT",
@@ -24,7 +24,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@automerge/automerge-repo": "^2.5.6",
-    "@cloudflare/workers-types": "^5.20260703.1",
+    "@cloudflare/workers-types": "^5.20260704.1",
     "@electric-sql/pglite": "^0.5.4",
     "@libsql/client": "^0.17.4",
     "@powersync/common": "^1.57.0",
@@ -35,7 +35,7 @@
     "bun": "^1.3.14",
     "effect": "^3.21.4",
     "electric-sql": "^0.12.1",
-    "expo": "^57.0.1",
+    "expo": "^57.0.2",
     "expo-sqlite": "^57.0.0",
     "partykit": "^0.0.115",
     "partysocket": "^1.3.0",

package/releases.md

@@ -13,7 +13,7 @@ console.log(valuesSubsetDatabasePersisterConfig.values.load);
 // -> ['selectedPet', 'open']
 ```
 
-<p>When a subset is configured, unlisted <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in the <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> are not saved, and unlisted columns in the <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> database table are left untouched.</p><h2 id="websocket-synchronization-fixes">WebSocket <a href="https://tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>WebSocket Synchronizers can now fragment large synchronization payloads and reassemble them on receipt. This helps deployments behind infrastructure with WebSocket message size limits, such as Cloudflare Workers and Durable Objects (<a href="https://github.com/tinyplex/tinybase/issues/261">#261</a>).</p><p>The createWsSynchronizer and <a href="https://tinybase.org/api/synchronizer-ws-server/functions/creation/createwsserver/"><code>createWsServer</code></a> functions now accept an optional fragment size argument. Incomplete fragment buffers expire using the existing request timeout, which can also now be set on createWsServer. Durable Object servers can override the getFragmentSize and <a href="https://tinybase.org/api/synchronizer-ws-server-durable-object/classes/creation/wsserverdurableobject/methods/getter/getrequesttimeoutseconds/"><code>getRequestTimeoutSeconds</code></a> methods to set the same behavior for messages they send.</p><p>The WebSocket <a href="https://tinybase.org/api/the-essentials/synchronizing-stores/synchronizer/"><code>Synchronizer</code></a> documentation now also clarifies that <a href="https://tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> paths come from WebSocket URL paths, not <a href="https://tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a>, so clients that need separate synchronization groups should connect to different URL paths (<a href="https://github.com/tinyplex/tinybase/issues/206">#206</a>).</p><p>When a persisted <a href="https://tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> path starts after having no connected clients, it now loads its persisted <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> before starting synchronization. This means the first client to reconnect is sent only the data it is missing, instead of receiving the whole persisted <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> as a fresh change (<a href="https://github.com/tinyplex/tinybase/issues/205">#205</a>).</p><h2 id="schema-default-synchronization-fixes">Schema Default <a href="https://tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>Schema defaults inserted automatically into MergeableStores now use neutral timestamps, so defaulted <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> and Cells no longer overwrite newer synced data from another peer. Explicit writes of default values still receive normal timestamps (<a href="https://github.com/tinyplex/tinybase/issues/167">#167</a>).</p><h2 id="powersync-persistence-fixes">PowerSync <a href="https://tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The PowerSync <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> now updates existing tabular rows before inserting missing ones, instead of replacing whole rows during upserts. This avoids flooding PowerSync upload queues with replacement writes when schema validation causes loaded data to be written back unchanged on startup (<a href="https://github.com/tinyplex/tinybase/issues/262">#262</a>).</p><h2 id="custom-persister-loading-fixes">Custom <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> Loading Fixes</h2><p>Custom Persisters can now return <code>undefined</code> from <code>getPersisted</code> to indicate that there is no persisted content. Loading then uses <code>initialContent</code> if it was provided, or otherwise leaves the <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> unchanged without invoking the ignored error handler (<a href="https://github.com/tinyplex/tinybase/issues/161">#161</a>).</p><h2 id="durable-object-persistence-fixes">Durable Object <a href="https://tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The Durable Object SQL Storage <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode now stores table row data as one SQL row per TinyBase <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a>, instead of one SQL row per <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. This reduces the number of SQLite writes for wide Rows while preserving the fragmented mode&#x27;s protection from Cloudflare&#x27;s 2MB row limit. Existing cell-level fragmented data is still loaded and is cleaned up when the <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> is next saved (<a href="https://github.com/tinyplex/tinybase/issues/268">#268</a>).</p><h2 id="query-transaction-fixes">Query Transaction Fixes</h2><p>Grouped queries, including those with having clauses, now correctly return their current result when a query definition is added during an active <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> transaction (<a href="https://github.com/tinyplex/tinybase/issues/259">#259</a>).</p><h2 id="query-documentation-clarifications">Query <a href="https://tinybase.org/guides/how-tinybase-is-built/documentation/">Documentation</a> Clarifications</h2><p>The <a href="https://tinybase.org/guides/using-queries/tinyql/">TinyQL</a> documentation now explicitly describes that a <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> only appears in a query result when at least one selected <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or calculated value is defined. If all selected values for a <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> resolve to <code>undefined</code>, no <a href="https://tinybase.org/api/queries/type-aliases/result/resultrow/"><code>ResultRow</code></a> is created for that <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> (<a href="https://github.com/tinyplex/tinybase/issues/183">#183</a>).</p><h2 id="type-fixes">Type Fixes</h2><p>The schema-aware <a href="https://tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablecontent/"><code>MergeableContent</code></a>, <a href="https://tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablechanges/"><code>MergeableChanges</code></a>, persisted content, and <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> listener types now validate content being set or loaded in the same way as <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> setters. This catches invalid <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or <a href="https://tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> and values in custom Persisters and <a href="https://tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> setters (<a href="https://github.com/tinyplex/tinybase/issues/178">#178</a>).</p><h2 id="breaking-change">Breaking Change</h2><p>This release is a major version because the Durable Object SQL Storage <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode uses a new storage layout. TinyBase v9.0 can read the old cell-level fragmented data written by earlier releases, but once it saves the new row-level fragmented data, older TinyBase versions are not designed to read that data back. Apps using fragmented Durable Object SQL storage should not roll those Durable Objects back to an earlier TinyBase version after v9.0 has written to them.</p><h2 id="thank-you">Thank You</h2><p>Thanks to everyone whose reports and fixes shaped this release:</p><p><a href="https://github.com/dheerajvs">Dheeraj</a>, <a href="https://github.com/jakubriedl">Jakub Riedl</a>, <a href="https://github.com/patrykwegrzyn">Patryk Wegrzyn</a>, <a href="https://github.com/dsrominiyi">Damilola Romniyi</a>, <a href="https://github.com/a11rew">Andrew Glago</a>, <a href="https://github.com/wattroll">wattroll</a>, <a href="https://github.com/willhoney7">Will Honey</a>, and <a href="https://github.com/danielberndt">Daniel Berndt</a>.</p><p>Couldn&#x27;t do it without you!</p><hr><h1 id="v8-5">v8.5</h1><h2 id="react-chart-components">React Chart Components</h2><p>This release adds the new <a href="https://tinybase.org/api/ui-react-dom-charts/"><code>ui-react-dom-charts</code></a> module, providing reactive SVG chart components for React apps.</p><p>The <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/linechart/"><code>LineChart</code></a> component and <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/barchart/"><code>BarChart</code></a> component can render data directly from a <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> <a href="https://tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a>, or from a <a href="https://tinybase.org/api/queries/interfaces/queries/queries/"><code>Queries</code></a> <a href="https://tinybase.org/api/queries/type-aliases/result/resulttable/"><code>ResultTable</code></a>, using the same Provider context patterns as the rest of the React UI modules. For more complex charts, the <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/cartesianchart/"><code>CartesianChart</code></a> component can compose multiple <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/lineseries/"><code>LineSeries</code></a> component children and <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/barseries/"><code>BarSeries</code></a> component children in one SVG.</p><p><img src="https://tinybase.org/shots/styled-chart-react-demo.png" alt="LineChart component (React)" title="[`LineChart`](/api/ui-react-dom-charts/functions/store-components/linechart/)
+<p>When a subset is configured, unlisted <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in the <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> are not saved, and unlisted columns in the <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> database table are left untouched.</p><h2 id="websocket-synchronization-fixes">WebSocket <a href="https://tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>WebSocket Synchronizers can now fragment large synchronization payloads and reassemble them on receipt. This helps deployments behind infrastructure with WebSocket message size limits, such as Cloudflare Workers and Durable Objects (<a href="https://github.com/tinyplex/tinybase/issues/261">#261</a>).</p><p>The createWsSynchronizer and <a href="https://tinybase.org/api/synchronizer-ws-server/functions/creation/createwsserver/"><code>createWsServer</code></a> functions now accept an optional fragment size argument. Incomplete fragment buffers expire using the existing request timeout, which can also now be set on createWsServer. Durable Object servers can override the getFragmentSize and <a href="https://tinybase.org/api/synchronizer-ws-server-durable-object/classes/creation/wsserverdurableobject/methods/getter/getrequesttimeoutseconds/"><code>getRequestTimeoutSeconds</code></a> methods to set the same behavior for messages they send.</p><p>The WebSocket <a href="https://tinybase.org/api/the-essentials/synchronizing-stores/synchronizer/"><code>Synchronizer</code></a> documentation now also clarifies that <a href="https://tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> paths come from WebSocket URL paths, not <a href="https://tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a>, so clients that need separate synchronization groups should connect to different URL paths (<a href="https://github.com/tinyplex/tinybase/issues/206">#206</a>).</p><p>When a persisted <a href="https://tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> path starts after having no connected clients, it now loads its persisted <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> before starting synchronization. This means the first client to reconnect is sent only the data it is missing, instead of receiving the whole persisted <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> as a fresh change (<a href="https://github.com/tinyplex/tinybase/issues/205">#205</a>).</p><h2 id="schema-default-synchronization-fixes">Schema Default <a href="https://tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>Schema defaults inserted automatically into MergeableStores now use neutral timestamps, so defaulted <a href="https://tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> and Cells no longer overwrite newer synced data from another peer. Explicit writes of default values still receive normal timestamps (<a href="https://github.com/tinyplex/tinybase/issues/167">#167</a>).</p><h2 id="powersync-persistence-fixes">PowerSync <a href="https://tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The PowerSync <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> now updates existing tabular rows before inserting missing ones, instead of replacing whole rows during upserts. This avoids flooding PowerSync upload queues with replacement writes when schema validation causes loaded data to be written back unchanged on startup (<a href="https://github.com/tinyplex/tinybase/issues/262">#262</a>).</p><h2 id="custom-persister-loading-fixes">Custom <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> Loading Fixes</h2><p>Custom Persisters can now return <code>undefined</code> from <code>getPersisted</code> to indicate that there is no persisted content. Loading then uses <code>initialContent</code> if it was provided, or otherwise leaves the <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> unchanged without invoking the ignored error handler (<a href="https://github.com/tinyplex/tinybase/issues/161">#161</a>).</p><h2 id="durable-object-persistence-fixes">Durable Object <a href="https://tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The Durable Object SQL Storage <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode now stores table row data as one SQL row per TinyBase <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a>, instead of one SQL row per <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. This reduces the number of SQLite writes for wide Rows while preserving the fragmented mode&#x27;s protection from Cloudflare&#x27;s 2MB row limit. Existing cell-level fragmented data is still loaded and is cleaned up when the <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> is next saved (<a href="https://github.com/tinyplex/tinybase/issues/268">#268</a>).</p><h2 id="query-transaction-fixes">Query Transaction Fixes</h2><p>Grouped queries, including those with having clauses, now correctly return their current result when a query definition is added during an active <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> transaction (<a href="https://github.com/tinyplex/tinybase/issues/259">#259</a>).</p><h2 id="query-documentation-clarifications">Query <a href="https://tinybase.org/guides/how-tinybase-is-built/documentation/">Documentation</a> Clarifications</h2><p>The <a href="https://tinybase.org/guides/using-queries/tinyql/">TinyQL</a> documentation now explicitly describes that a <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> only appears in a query result when at least one selected <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or calculated value is defined. If all selected values for a <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> resolve to <code>undefined</code>, no <a href="https://tinybase.org/api/queries/type-aliases/result/resultrow/"><code>ResultRow</code></a> is created for that <a href="https://tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> (<a href="https://github.com/tinyplex/tinybase/issues/183">#183</a>).</p><h2 id="type-fixes">Type Fixes</h2><p>The schema-aware <a href="https://tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablecontent/"><code>MergeableContent</code></a>, <a href="https://tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablechanges/"><code>MergeableChanges</code></a>, persisted content, and <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> listener types now validate content being set or loaded in the same way as <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> setters. This catches invalid <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or <a href="https://tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> and values in custom Persisters and <a href="https://tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> setters (<a href="https://github.com/tinyplex/tinybase/issues/178">#178</a>).</p><h2 id="breaking-change">Breaking Change</h2><p>This release is a major version because the Durable Object SQL Storage <a href="https://tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode uses a new storage layout. TinyBase v9.0 can read the old cell-level fragmented data written by earlier releases, but once it saves the new row-level fragmented data, older TinyBase versions are not designed to read that data back. Apps using fragmented Durable Object SQL storage should not roll those Durable Objects back to an earlier TinyBase version after v9.0 has written to them.</p><h2 id="thank-you">Thank You</h2><p>Thanks to everyone whose reports and fixes shaped this release:</p><p><a href="https://github.com/dheerajvs">Dheeraj</a>, <a href="https://github.com/jakubriedl">Jakub Riedl</a>, <a href="https://github.com/patrykwegrzyn">Patryk Wegrzyn</a>, <a href="https://github.com/dsrominiyi">Damilola Romniyi</a>, <a href="https://github.com/a11rew">Andrew Glago</a>, <a href="https://github.com/wattroll">wattroll</a>, <a href="https://github.com/willhoney7">Will Honey</a>, and <a href="https://github.com/danielberndt">Daniel Berndt</a>.</p><p>Could not do it without you!</p><hr><h1 id="v8-5">v8.5</h1><h2 id="react-chart-components">React Chart Components</h2><p>This release adds the new <a href="https://tinybase.org/api/ui-react-dom-charts/"><code>ui-react-dom-charts</code></a> module, providing reactive SVG chart components for React apps.</p><p>The <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/linechart/"><code>LineChart</code></a> component and <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/barchart/"><code>BarChart</code></a> component can render data directly from a <a href="https://tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> <a href="https://tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a>, or from a <a href="https://tinybase.org/api/queries/interfaces/queries/queries/"><code>Queries</code></a> <a href="https://tinybase.org/api/queries/type-aliases/result/resulttable/"><code>ResultTable</code></a>, using the same Provider context patterns as the rest of the React UI modules. For more complex charts, the <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/cartesianchart/"><code>CartesianChart</code></a> component can compose multiple <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/lineseries/"><code>LineSeries</code></a> component children and <a href="https://tinybase.org/api/ui-react-dom-charts/functions/store-components/barseries/"><code>BarSeries</code></a> component children in one SVG.</p><p><img src="https://tinybase.org/shots/styled-chart-react-demo.png" alt="LineChart component (React)" title="[`LineChart`](/api/ui-react-dom-charts/functions/store-components/linechart/)
 component (React)"></p><p>A chart can be bound to a <a href="https://tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> with just the <a href="https://tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a> and the <a href="https://tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> <a href="https://tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> to use for the x and y values:</p>
 
 ```jsx

package/store/index.js

@@ -1314,13 +1314,36 @@ const createStore = () => {
     listener,
     mutator,
   ) => {
-    let sortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+    const [descending, offset, limit, sorter] = otherArgs;
+    let sortedRowIds = getSortedRowIds(
+      tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      sorter,
+    );
     return addListener(
       () => {
-        const newSortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+        const newSortedRowIds = getSortedRowIds(
+          tableId,
+          cellId,
+          descending,
+          offset,
+          limit,
+          sorter,
+        );
         if (!arrayIsEqual(newSortedRowIds, sortedRowIds)) {
           sortedRowIds = newSortedRowIds;
-          listener(store, tableId, cellId, ...otherArgs, sortedRowIds);
+          listener(
+            store,
+            tableId,
+            cellId,
+            descending,
+            offset,
+            limit,
+            sortedRowIds,
+          );
         }
       },
       sortedRowIdsListeners[mutator ? 1 : 0],
@@ -1374,6 +1397,7 @@ const createStore = () => {
     descending,
     offset = 0,
     limit,
+    sorter = defaultSorter,
   ) =>
     isObject(tableIdOrArgs)
       ? getSortedRowIds(
@@ -1382,16 +1406,19 @@ const createStore = () => {
           tableIdOrArgs.descending,
           tableIdOrArgs.offset,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
         )
       : arrayMap(
           slice(
             arraySort(
               mapMap(mapGet(tablesMap, id(tableIdOrArgs)), (row, rowId) => [
-                isUndefined(cellId) ? rowId : mapGet(row, id(cellId)),
+                isUndefined(cellId)
+                  ? rowId
+                  : decodeIfJson(mapGet(row, id(cellId))),
                 rowId,
               ]),
               ([cell1], [cell2]) =>
-                defaultSorter(cell1, cell2) * (descending ? -1 : 1),
+                sorter(cell1, cell2) * (descending ? -1 : 1),
             ),
             offset,
             isUndefined(limit) ? limit : offset + limit,
@@ -1869,6 +1896,7 @@ const createStore = () => {
             tableIdOrArgs.descending ?? false,
             tableIdOrArgs.offset ?? 0,
             tableIdOrArgs.limit,
+            tableIdOrArgs.sorter,
           ],
           cellIdOrListener,
           descendingOrMutator,
@@ -1876,7 +1904,7 @@ const createStore = () => {
       : addSortedRowIdsListenerImpl(
           tableIdOrArgs,
           cellIdOrListener,
-          [descendingOrMutator, offset, limit],
+          [descendingOrMutator, offset, limit, void 0],
           listener,
           mutator,
         );

package/store/with-schemas/index.js

@@ -1314,13 +1314,36 @@ const createStore = () => {
     listener,
     mutator,
   ) => {
-    let sortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+    const [descending, offset, limit, sorter] = otherArgs;
+    let sortedRowIds = getSortedRowIds(
+      tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      sorter,
+    );
     return addListener(
       () => {
-        const newSortedRowIds = getSortedRowIds(tableId, cellId, ...otherArgs);
+        const newSortedRowIds = getSortedRowIds(
+          tableId,
+          cellId,
+          descending,
+          offset,
+          limit,
+          sorter,
+        );
         if (!arrayIsEqual(newSortedRowIds, sortedRowIds)) {
           sortedRowIds = newSortedRowIds;
-          listener(store, tableId, cellId, ...otherArgs, sortedRowIds);
+          listener(
+            store,
+            tableId,
+            cellId,
+            descending,
+            offset,
+            limit,
+            sortedRowIds,
+          );
         }
       },
       sortedRowIdsListeners[mutator ? 1 : 0],
@@ -1374,6 +1397,7 @@ const createStore = () => {
     descending,
     offset = 0,
     limit,
+    sorter = defaultSorter,
   ) =>
     isObject(tableIdOrArgs)
       ? getSortedRowIds(
@@ -1382,16 +1406,19 @@ const createStore = () => {
           tableIdOrArgs.descending,
           tableIdOrArgs.offset,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
         )
       : arrayMap(
           slice(
             arraySort(
               mapMap(mapGet(tablesMap, id(tableIdOrArgs)), (row, rowId) => [
-                isUndefined(cellId) ? rowId : mapGet(row, id(cellId)),
+                isUndefined(cellId)
+                  ? rowId
+                  : decodeIfJson(mapGet(row, id(cellId))),
                 rowId,
               ]),
               ([cell1], [cell2]) =>
-                defaultSorter(cell1, cell2) * (descending ? -1 : 1),
+                sorter(cell1, cell2) * (descending ? -1 : 1),
             ),
             offset,
             isUndefined(limit) ? limit : offset + limit,
@@ -1869,6 +1896,7 @@ const createStore = () => {
             tableIdOrArgs.descending ?? false,
             tableIdOrArgs.offset ?? 0,
             tableIdOrArgs.limit,
+            tableIdOrArgs.sorter,
           ],
           cellIdOrListener,
           descendingOrMutator,
@@ -1876,7 +1904,7 @@ const createStore = () => {
       : addSortedRowIdsListenerImpl(
           tableIdOrArgs,
           cellIdOrListener,
-          [descendingOrMutator, offset, limit],
+          [descendingOrMutator, offset, limit, void 0],
           listener,
           mutator,
         );

package/ui-react/index.js

@@ -536,33 +536,56 @@ const useSortedRowIdsImpl = (
   descending,
   offset,
   limit,
+  sorter,
   storeOrStoreId,
-) =>
-  useListenable(
+) => {
+  const sortedRowIdsArgs = useMemo(
+    () => ({
+      tableId,
+      cellId,
+      descending: descending ?? false,
+      offset: offset ?? 0,
+      limit,
+      sorter,
+    }),
+    [tableId, cellId, descending, offset, limit, sorter],
+  );
+  return useListenable(
     SORTED_ROW_IDS,
     useStoreOrStoreById(storeOrStoreId),
     1 /* Array */,
-    [tableId, cellId, descending, offset, limit],
+    isUndefined(sorter)
+      ? [tableId, cellId, descending, offset, limit]
+      : [sortedRowIdsArgs],
   );
+};
 const useSortedRowIdsListenerImpl = (
   tableId,
   cellId,
   descending,
   offset,
   limit,
+  sorter,
   listener,
   listenerDeps,
   mutator,
   storeOrStoreId,
-) =>
+) => {
+  const sortedRowIdsArgs = useMemo(
+    () => ({tableId, cellId, descending, offset, limit, sorter}),
+    [tableId, cellId, descending, offset, limit, sorter],
+  );
   useListener(
     SORTED_ROW_IDS,
     useStoreOrStoreById(storeOrStoreId),
     listener,
     listenerDeps,
-    [tableId, cellId, descending, offset, limit],
+    isUndefined(sorter)
+      ? [tableId, cellId, descending, offset, limit]
+      : [sortedRowIdsArgs],
     mutator,
   );
+};
 const useCreateStore = (create, createDeps = EMPTY_ARRAY) =>
   useMemo(create, createDeps);
 const useStoreIds = () => useThingIds(OFFSET_STORE);
@@ -632,6 +655,7 @@ const useSortedRowIds = (
   descending,
   offset,
   limit,
+  sorterOrStoreOrStoreId,
   storeOrStoreId,
 ) =>
   useSortedRowIdsImpl(
@@ -642,6 +666,7 @@ const useSortedRowIds = (
           tableIdOrArgs.descending ?? false,
           tableIdOrArgs.offset ?? 0,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
           cellIdOrStoreOrStoreId,
         ]
       : [
@@ -650,7 +675,10 @@ const useSortedRowIds = (
           descending,
           offset,
           limit,
-          storeOrStoreId,
+          isFunction(sorterOrStoreOrStoreId) ? sorterOrStoreOrStoreId : void 0,
+          isFunction(sorterOrStoreOrStoreId)
+            ? storeOrStoreId
+            : sorterOrStoreOrStoreId,
         ]),
   );
 const useHasRow = (tableId, rowId, storeOrStoreId) =>
@@ -1057,6 +1085,7 @@ const useSortedRowIdsListener = (
           tableIdOrArgs.descending ?? false,
           tableIdOrArgs.offset ?? 0,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
           cellIdOrListener,
           descendingOrListenerDeps,
           offsetOrMutator,
@@ -1068,6 +1097,7 @@ const useSortedRowIdsListener = (
           descendingOrListenerDeps,
           offsetOrMutator,
           limitOrStoreOrStoreId,
+          void 0,
           listener,
           listenerDeps,
           mutator,

package/ui-react/with-schemas/index.js

@@ -536,33 +536,56 @@ const useSortedRowIdsImpl = (
   descending,
   offset,
   limit,
+  sorter,
   storeOrStoreId,
-) =>
-  useListenable(
+) => {
+  const sortedRowIdsArgs = useMemo(
+    () => ({
+      tableId,
+      cellId,
+      descending: descending ?? false,
+      offset: offset ?? 0,
+      limit,
+      sorter,
+    }),
+    [tableId, cellId, descending, offset, limit, sorter],
+  );
+  return useListenable(
     SORTED_ROW_IDS,
     useStoreOrStoreById(storeOrStoreId),
     1 /* Array */,
-    [tableId, cellId, descending, offset, limit],
+    isUndefined(sorter)
+      ? [tableId, cellId, descending, offset, limit]
+      : [sortedRowIdsArgs],
   );
+};
 const useSortedRowIdsListenerImpl = (
   tableId,
   cellId,
   descending,
   offset,
   limit,
+  sorter,
   listener,
   listenerDeps,
   mutator,
   storeOrStoreId,
-) =>
+) => {
+  const sortedRowIdsArgs = useMemo(
+    () => ({tableId, cellId, descending, offset, limit, sorter}),
+    [tableId, cellId, descending, offset, limit, sorter],
+  );
   useListener(
     SORTED_ROW_IDS,
     useStoreOrStoreById(storeOrStoreId),
     listener,
     listenerDeps,
-    [tableId, cellId, descending, offset, limit],
+    isUndefined(sorter)
+      ? [tableId, cellId, descending, offset, limit]
+      : [sortedRowIdsArgs],
     mutator,
   );
+};
 const useCreateStore = (create, createDeps = EMPTY_ARRAY) =>
   useMemo(create, createDeps);
 const useStoreIds = () => useThingIds(OFFSET_STORE);
@@ -632,6 +655,7 @@ const useSortedRowIds = (
   descending,
   offset,
   limit,
+  sorterOrStoreOrStoreId,
   storeOrStoreId,
 ) =>
   useSortedRowIdsImpl(
@@ -642,6 +666,7 @@ const useSortedRowIds = (
           tableIdOrArgs.descending ?? false,
           tableIdOrArgs.offset ?? 0,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
           cellIdOrStoreOrStoreId,
         ]
       : [
@@ -650,7 +675,10 @@ const useSortedRowIds = (
           descending,
           offset,
           limit,
-          storeOrStoreId,
+          isFunction(sorterOrStoreOrStoreId) ? sorterOrStoreOrStoreId : void 0,
+          isFunction(sorterOrStoreOrStoreId)
+            ? storeOrStoreId
+            : sorterOrStoreOrStoreId,
         ]),
   );
 const useHasRow = (tableId, rowId, storeOrStoreId) =>
@@ -1057,6 +1085,7 @@ const useSortedRowIdsListener = (
           tableIdOrArgs.descending ?? false,
           tableIdOrArgs.offset ?? 0,
           tableIdOrArgs.limit,
+          tableIdOrArgs.sorter,
           cellIdOrListener,
           descendingOrListenerDeps,
           offsetOrMutator,
@@ -1068,6 +1097,7 @@ const useSortedRowIdsListener = (
           descendingOrListenerDeps,
           offsetOrMutator,
           limitOrStoreOrStoreId,
+          void 0,
           listener,
           listenerDeps,
           mutator,