tinybase 8.2.0-beta.0 → 8.2.0-beta.2

package/@types/synchronizers/synchronizer-ws-server-durable-object/with-schemas/index.d.ts

@@ -84,7 +84,7 @@ export class WsServerDurableObject<
    * This example enables Durable Object persistence by creating a Persister
    * object within the createPersister method of a WsServerDurableObject.
    *
-   * ```js yolo
+   * ```js ignore
    * import {createMergeableStore} from 'tinybase';
    * import {createDurableObjectStoragePersister} from 'tinybase/persisters/persister-durable-object-storage';
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
@@ -122,7 +122,7 @@ export class WsServerDurableObject<
    * This example logs the path being served by the Durable Object every time a
    * synchronization method is handled.
    *
-   * ```js yolo
+   * ```js ignore
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
    *
    * export class MyDurableObject extends WsServerDurableObject {
@@ -148,7 +148,7 @@ export class WsServerDurableObject<
    * This example logs the list of clients being served by the Durable Object
    * every time a synchronization method is handled.
    *
-   * ```js yolo
+   * ```js ignore
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
    *
    * export class MyDurableObject extends WsServerDurableObject {
@@ -177,7 +177,7 @@ export class WsServerDurableObject<
    * when the first client joins (the path Id is 'added'), and when the last
    * client leaves (the path Id is 'removed').
    *
-   * ```js yolo
+   * ```js ignore
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
    *
    * export class MyDurableObject extends WsServerDurableObject {
@@ -212,7 +212,7 @@ export class WsServerDurableObject<
    * leaves (the client Id is 'removed') on the path being served by the Durable
    * Object.
    *
-   * ```js yolo
+   * ```js ignore
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
    *
    * export class MyDurableObject extends WsServerDurableObject {
@@ -248,7 +248,7 @@ export class WsServerDurableObject<
    * This example logs every message routed by the Durable Object between
    * clients.
    *
-   * ```js yolo
+   * ```js ignore
    * import {WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
    *
    * export class MyDurableObject extends WsServerDurableObject {
@@ -322,7 +322,7 @@ export class WsServerDurableObject<
  * Durable Object in the `MyDurableObjects` namespace. This would require the
  * `wrangler.toml` configuration shown above.
  *
- * ```js yolo
+ * ```js ignore
  * import {
  *   WsServerDurableObject,
  *   getWsServerDurableObjectFetch,

package/@types/ui-react/index.d.ts

@@ -11844,7 +11844,7 @@ export function useParamValueListener(
  * // ->
  * `
  * <div>
- *   <input id="input">
+ *   <input id="input" value="cat">
  *   {"felix":{"species":"cat"}}
  * </div>
  * `;
@@ -11995,8 +11995,8 @@ export function useSetParamValueCallback<Parameter>(
  * `
  * <div>
  *   <form>
- *     <input id="species">
- *     <input id="color">
+ *     <input id="species" value="cat">
+ *     <input id="color" value="black">
  *     <button type="submit">Filter</button>
  *   </form>
  *   {"felix":{"species":"cat","color":"black"}}

package/@types/ui-react/with-schemas/index.d.ts

@@ -13034,7 +13034,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * // ->
  * `
  * <div>
- *   <input id="input">
+ *   <input id="input" value="cat">
  *   {"felix":{"species":"cat"}}
  * </div>
  * `;
@@ -13201,8 +13201,8 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * `
  * <div>
  *   <form>
- *     <input id="species">
- *     <input id="color">
+ *     <input id="species" value="cat">
+ *     <input id="color" value="black">
  *     <button type="submit">Filter</button>
  *   </form>
  *   {"felix":{"species":"cat","color":"black"}}

package/@types/ui-react-dom/index.d.ts

@@ -5,7 +5,7 @@
  * The components in this module use the react-dom module and so are not
  * appropriate for environments like React Native (although those in the
  * lower-level ui-react module are).
- * @see UI Components demos
+ * @see UI Components (React) demos
  * @packageDocumentation
  * @module ui-react-dom
  * @since v4.1.0
@@ -690,7 +690,10 @@ export type SortedTablePaginatorProps = {
  * Store as an HTML <table> element, and registers a listener so that any
  * changes to that result will cause a re-render.
  *
- * See the <TableInHtmlTable /> demo for this component in action.
+ * See the <TableInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![TableInHtmlTable example](/shots/tableinhtmltable-react-demo.png
+ * "TableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
  * Store (which is either the default context Store, a named context Store, or
@@ -832,7 +835,12 @@ export function TableInHtmlTable(
  * Table in a Store, as an HTML <table> element, and registers a listener so
  * that any changes to that result will cause a re-render.
  *
- * See the <SortedTableInHtmlTable /> demo for this component in action.
+ * See the <SortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![SortedTableInHtmlTable example](
+ * /shots/sortedtableinhtmltable-react-demo.png
+ * "SortedTableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
  * Store (which is either the default context Store, a named context Store, or
@@ -1002,7 +1010,10 @@ export function SortedTableInHtmlTable(
  * as an HTML <table> element, and registers a listener so that any changes to
  * that result will cause a re-render.
  *
- * See the <ValuesInHtmlTable /> demo for this component in action.
+ * See the <ValuesInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![ValuesInHtmlTable example](/shots/valuesinhtmltable-react-demo.png
+ * "ValuesInHtmlTable example")
  *
  * The component's props identify which Row to render based on Table Id, Row Id,
  * and Store (which is either the default context Store, a named context Store,
@@ -1130,7 +1141,10 @@ export function ValuesInHtmlTable(
  * <table> element, and registers a listener so that any changes to that result
  * will cause a re-render.
  *
- * See the <SliceInHtmlTable /> demo for this component in action.
+ * See the <SliceInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![SliceInHtmlTable example](/shots/sliceinhtmltable-react-demo.png
+ * "SliceInHtmlTable example")
  *
  * The component's props identify which Slice to render based on Index Id, Slice
  * Id, and Indexes object (which is either the default context Indexes object, a
@@ -1272,7 +1286,7 @@ export function ValuesInHtmlTable(
  * </table>
  * `;
  * ```
- * @category Indexes components
+ * @category Other components
  * @since v4.1.0
  */
 export function SliceInHtmlTable(
@@ -1284,7 +1298,12 @@ export function SliceInHtmlTable(
  * linked by a Relationship as an HTML <table> element, and registers a listener
  * so that any changes to that result will cause a re-render.
  *
- * See the <RelationshipInHtmlTable /> demo for this component in action.
+ * See the <RelationshipInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![RelationshipInHtmlTable example](
+ * /shots/relationshipinhtmltable-react-demo.png
+ * "RelationshipInHtmlTable example")
  *
  * The component's props identify which Relationship to render based on
  * Relationship Id and Relationships object (which is either the default context
@@ -1446,7 +1465,7 @@ export function SliceInHtmlTable(
  * </table>
  * `;
  * ```
- * @category Relationships components
+ * @category Other components
  * @since v4.1.0
  */
 export function RelationshipInHtmlTable(
@@ -1458,7 +1477,12 @@ export function RelationshipInHtmlTable(
  * ResultTable in a Queries object as an HTML <table> element, and registers a
  * listener so that any changes to that result will cause a re-render.
  *
- * See the <ResultTableInHtmlTable /> demo for this component in action.
+ * See the <ResultTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![ResultTableInHtmlTable example](
+ * /shots/resulttableinhtmltable-react-demo.png
+ * "ResultTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
  * and Queries object (which is either the default context Queries object, a
@@ -1607,7 +1631,12 @@ export function ResultTableInHtmlTable(
  * registers a listener so that any changes to that result will cause a
  * re-render.
  *
- * See the <ResultSortedTableInHtmlTable /> demo for this component in action.
+ * See the <ResultSortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![ResultSortedTableInHtmlTable example](
+ * /shots/resultsortedtableinhtmltable-react-demo.png
+ * "ResultSortedTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
  * and Queries object (which is either the default context Queries object, a
@@ -1778,7 +1807,10 @@ export function ResultSortedTableInHtmlTable(
  * that can be edited in a web browser, and registers a listener so that any
  * changes to that result will cause a re-render.
  *
- * See the <EditableCellView /> demo for this component in action.
+ * See the <EditableCellView /> (React) demo for this component in action:
+ *
+ * ![EditableCellView example](/shots/editablecellview-react-demo.png
+ * "EditableCellView example")
  *
  * The component's props identify which Cell to render based on Table Id, Row
  * Id, Cell Id, and Store (which is either the default context Store, a named
@@ -1846,7 +1878,10 @@ export function EditableCellView(
  * that can be edited in a web browser, and registers a listener so that any
  * changes to that result will cause a re-render.
  *
- * See the <EditableValueView /> demo for this component in action.
+ * See the <EditableValueView /> (React) demo for this component in action:
+ *
+ * ![EditableValueView example](/shots/editablevalueview-react-demo.png
+ * "EditableValueView example")
  *
  * The component's props identify which Value to render based on Table Id, Row
  * Id, Value Id, and Store (which is either the default context Store, a named
@@ -1913,7 +1948,11 @@ export function EditableValueView(
 /**
  * The SortedTablePaginator component renders a paginator for a sorted table.
  *
- * See the <SortedTableInHtmlTable /> demo for this component in action.
+ * See the <SortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![SortedTablePaginator example](/shots/sortedtablepaginator-react-demo.png
+ * "SortedTablePaginator example")
  *
  * The component displays 'previous' and 'next' buttons for paging through the
  * Table if there are more Row Ids than fit in each page. The component will

package/@types/ui-react-dom/with-schemas/index.d.ts

@@ -5,7 +5,7 @@
  * The components in this module use the react-dom module and so are not
  * appropriate for environments like React Native (although those in the
  * lower-level ui-react module are).
- * @see UI Components demos
+ * @see UI Components (React) demos
  * @packageDocumentation
  * @module ui-react-dom
  * @since v4.1.0
@@ -672,7 +672,10 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <TableInHtmlTable /> demo for this component in action.
+ * See the <TableInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![TableInHtmlTable example](/shots/tableinhtmltable-react-demo.png
+ * "TableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
  * Store (which is either the default context Store, a named context Store, or
@@ -822,7 +825,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <SortedTableInHtmlTable /> demo for this component in action.
+ * See the <SortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![SortedTableInHtmlTable example](
+ * /shots/sortedtableinhtmltable-react-demo.png
+ * "SortedTableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
  * Store (which is either the default context Store, a named context Store, or
@@ -1000,7 +1008,10 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <ValuesInHtmlTable /> demo for this component in action.
+ * See the <ValuesInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![ValuesInHtmlTable example](/shots/valuesinhtmltable-react-demo.png
+ * "ValuesInHtmlTable example")
  *
  * The component's props identify which Row to render based on Table Id, Row Id,
  * and Store (which is either the default context Store, a named context Store,
@@ -1136,7 +1147,10 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <SliceInHtmlTable /> demo for this component in action.
+ * See the <SliceInHtmlTable /> (React) demo for this component in action:
+ *
+ * ![SliceInHtmlTable example](/shots/sliceinhtmltable-react-demo.png
+ * "SliceInHtmlTable example")
  *
  * The component's props identify which Slice to render based on Index Id, Slice
  * Id, and Indexes object (which is either the default context Indexes object, a
@@ -1278,7 +1292,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * </table>
  * `;
  * ```
- * @category Indexes components
+ * @category Other components
  * @since v4.1.0
  */
   SliceInHtmlTable: (
@@ -1298,7 +1312,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <RelationshipInHtmlTable /> demo for this component in action.
+ * See the <RelationshipInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![RelationshipInHtmlTable example](
+ * /shots/relationshipinhtmltable-react-demo.png
+ * "RelationshipInHtmlTable example")
  *
  * The component's props identify which Relationship to render based on
  * Relationship Id and Relationships object (which is either the default context
@@ -1460,7 +1479,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * </table>
  * `;
  * ```
- * @category Relationships components
+ * @category Other components
  * @since v4.1.0
  */
   RelationshipInHtmlTable: (
@@ -1480,7 +1499,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <ResultTableInHtmlTable /> demo for this component in action.
+ * See the <ResultTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![ResultTableInHtmlTable example](
+ * /shots/resulttableinhtmltable-react-demo.png
+ * "ResultTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
  * and Queries object (which is either the default context Queries object, a
@@ -1637,7 +1661,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <ResultSortedTableInHtmlTable /> demo for this component in action.
+ * See the <ResultSortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![ResultSortedTableInHtmlTable example](
+ * /shots/resultsortedtableinhtmltable-react-demo.png
+ * "ResultSortedTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
  * and Queries object (which is either the default context Queries object, a
@@ -1816,7 +1845,10 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <EditableCellView /> demo for this component in action.
+ * See the <EditableCellView /> (React) demo for this component in action:
+ *
+ * ![EditableCellView example](/shots/editablecellview-react-demo.png
+ * "EditableCellView example")
  *
  * The component's props identify which Cell to render based on Table Id, Row
  * Id, Cell Id, and Store (which is either the default context Store, a named
@@ -1898,7 +1930,10 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ): ComponentReturnType;
  * ```
  *
- * See the <EditableValueView /> demo for this component in action.
+ * See the <EditableValueView /> (React) demo for this component in action:
+ *
+ * ![EditableValueView example](/shots/editablevalueview-react-demo.png
+ * "EditableValueView example")
  *
  * The component's props identify which Value to render based on Table Id, Row
  * Id, Value Id, and Store (which is either the default context Store, a named
@@ -1965,7 +2000,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
   /**
  * The SortedTablePaginator component renders a paginator for a sorted table.
  *
- * See the <SortedTableInHtmlTable /> demo for this component in action.
+ * See the <SortedTableInHtmlTable /> (React) demo for this component in
+ * action:
+ *
+ * ![SortedTablePaginator example](/shots/sortedtablepaginator-react-demo.png
+ * "SortedTablePaginator example")
  *
  * The component displays 'previous' and 'next' buttons for paging through the
  * Table if there are more Row Ids than fit in each page. The component will

package/@types/ui-react-inspector/index.d.ts

@@ -4,7 +4,7 @@
  *
  * The component in this module uses the react-dom module and so is not
  * appropriate for environments like React Native.
- * @see <Inspector /> demo
+ * @see <Inspector /> (React) demo
  * @packageDocumentation
  * @module ui-react-inspector
  * @since v5.0.0
@@ -44,7 +44,10 @@ export type InspectorProps = {
  * The Inspector component renders a tool which allows you to view and edit the
  * content of a Store in a debug web environment.
  *
- * See the <Inspector /> demo for this component in action.
+ * See the <Inspector /> (React) demo for this component in action:
+ *
+ * ![Inspector example](/shots/inspector-react-demo.png
+ * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then
  * click to interact with all the Store objects in the Provider component
@@ -77,8 +80,8 @@ export type InspectorProps = {
  * const app = document.createElement('div');
  * createRoot(app).render(<App store={store} />); // !act
  * // ... // !act
- * console.log(app.innerHTML.substring(0, 30));
- * // -> '<aside id="tinybaseInspector">'
+ * console.log(app.querySelector('aside')?.id);
+ * // -> 'tinybaseInspector'
  * ```
  * @category Development components
  * @essential Using React

package/@types/ui-react-inspector/with-schemas/index.d.ts

@@ -4,7 +4,7 @@
  *
  * The component in this module uses the react-dom module and so is not
  * appropriate for environments like React Native.
- * @see <Inspector /> demo
+ * @see <Inspector /> (React) demo
  * @packageDocumentation
  * @module ui-react-inspector
  * @since v5.0.0
@@ -44,7 +44,10 @@ export type InspectorProps = {
  * The Inspector component renders a tool which allows you to view and edit the
  * content of a Store in a debug web environment.
  *
- * See the <Inspector /> demo for this component in action.
+ * See the <Inspector /> (React) demo for this component in action:
+ *
+ * ![Inspector example](/shots/inspector-react-demo.png
+ * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then
  * click to interact with all the Store objects in the Provider component
@@ -77,8 +80,8 @@ export type InspectorProps = {
  * const app = document.createElement('div');
  * createRoot(app).render(<App store={store} />); // !act
  * // ... // !act
- * console.log(app.innerHTML.substring(0, 30));
- * // -> '<aside id="tinybaseInspector">'
+ * console.log(app.querySelector('aside')?.id);
+ * // -> 'tinybaseInspector'
  * ```
  * @category Development components
  * @essential Using React