tinybase 5.0.0-beta.17 → 5.0.0-beta.18

package/lib/types/synchronizers.d.ts

@@ -102,6 +102,9 @@ export interface Synchronizer extends Persister<2> {
  * MergeableStore to another.
  *
  * ```js
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {createMergeableStore} from 'tinybase';
+ *
  * const store1 = createMergeableStore('store1').setTables({
  *   pets: {fido: {species: 'dog'}},
  * });

package/lib/types/tools.d.ts

@@ -118,6 +118,9 @@ export interface Tools {
    * @example
    * This example creates a Tools object and gets basic statistics about it.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore()
    *   .setTable('pets', {
    *     fido: {species: 'dog', color: 'brown'},
@@ -129,13 +132,15 @@ export interface Tools {
    *     cat: {price: 4},
    *   })
    *   .setValues({open: true, employees: 3});
-   * const tools = createTools(store);
-   * console.log(tools.getStoreStats());
+   * console.log(createTools(store).getStoreStats());
    * // -> {totalTables: 2, totalRows: 5, totalCells: 8, totalValues: 2, jsonLength: 212}
    * ```
    * @example
    * This example creates a Tools object and gets detailed statistics about it.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore()
    *   .setTable('pets', {
    *     fido: {species: 'dog', color: 'brown'},
@@ -185,6 +190,9 @@ export interface Tools {
    * This example creates a Tools object and gets the schema of a Store that
    * already has a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setTablesSchema({
    *   pets: {
    *     species: {type: 'string'},
@@ -202,6 +210,9 @@ export interface Tools {
    * This example creates a Tools object and infers the schema of a Store that
    * doesn't already have a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore()
    *   .setTable('pets', {
    *     fido: {species: 'dog', color: 'brown'},
@@ -243,6 +254,9 @@ export interface Tools {
    * This example creates a Tools object and gets the schema of a Store that
    * already has a ValuesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setValuesSchema({
    *   open: {type: 'boolean', default: true},
    *   employees: {type: 'number'},
@@ -256,6 +270,9 @@ export interface Tools {
    * This example creates a Tools object and infers the schema of a Store that
    * doesn't already have a ValuesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setValues({open: true, employees: 3});
    * const schema = createTools(store).getStoreValuesSchema();
    *
@@ -332,12 +349,15 @@ export interface Tools {
    * This example creates a Tools object and generates code for a Store that
    * already has a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setTablesSchema({
    *   pets: {
    *     price: {type: 'number'},
    *   },
    * });
-   * const [dTs, ts, uiReactDTs, uiReactTsx] =
+   * const [dTs, ts, _uiReactDTs, _uiReactTsx] =
    *   createTools(store).getStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -352,11 +372,14 @@ export interface Tools {
    * This example creates a Tools object and generates code for a Store that
    * doesn't already have a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setTable('pets', {
    *   fido: {price: 5},
    *   felix: {price: 4},
    * });
-   * const [dTs, ts, uiReactDTs, uiReactTsx] =
+   * const [dTs, ts, _uiReactDTs, _uiReactTsx] =
    *   createTools(store).getStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -407,13 +430,15 @@ export interface Tools {
    * This example creates a Tools object and generates code for a Store that
    * already has a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setTablesSchema({
    *   pets: {
    *     price: {type: 'number'},
    *   },
    * });
-   * const tools = createTools(store);
-   * const [dTs, ts, uiReactDTs, uiReactTsx] =
+   * const [dTs, ts, _uiReactDTs, _uiReactTsx] =
    *   await createTools(store).getPrettyStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -428,12 +453,14 @@ export interface Tools {
    * This example creates a Tools object and generates code for a Store that
    * doesn't already have a TablesSchema.
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const store = createStore().setTable('pets', {
    *   fido: {price: 5},
    *   felix: {price: 4},
    * });
-   * const tools = createTools(store);
-   * const [dTs, ts, uiReactDTs, uiReactTsx] =
+   * const [dTs, ts, _uiReactDTs, _uiReactTsx] =
    *   await createTools(store).getPrettyStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -460,6 +487,9 @@ export interface Tools {
    * then gets its reference in order to update its data.
    *
    * ```js
+   * import {createStore} from 'tinybase';
+   * import {createTools} from 'tinybase/tools';
+   *
    * const tools = createTools(createStore());
    * tools.getStore().setCell('species', 'dog', 'price', 5);
    * console.log(tools.getStoreStats().totalCells);
@@ -486,6 +516,9 @@ export interface Tools {
  * This example creates a Tools object.
  *
  * ```js
+ * import {createStore} from 'tinybase';
+ * import {createTools} from 'tinybase/tools';
+ *
  * const store = createStore()
  *   .setTable('pets', {
  *     fido: {species: 'dog', color: 'brown'},
@@ -497,8 +530,7 @@ export interface Tools {
  *     cat: {price: 4},
  *   })
  *   .setValues({open: true, employees: 3});
- * const tools = createTools(store);
- * console.log(tools.getStoreStats());
+ * console.log(createTools(store).getStoreStats());
  * // -> {totalTables: 2, totalRows: 5, totalCells: 8, totalValues: 2, jsonLength: 212}
  * ```
  * @example
@@ -506,6 +538,9 @@ export interface Tools {
  * for the same Store to return the same object.
  *
  * ```js
+ * import {createStore} from 'tinybase';
+ * import {createTools} from 'tinybase/tools';
+ *
  * const store = createStore();
  * const tools1 = createTools(store);
  * const tools2 = createTools(store);

package/lib/types/ui-react-dom.d.ts

@@ -490,6 +490,12 @@ export type StoreInspectorProps = {
  * a <table> element with a CSS class.
  *
  * ```jsx
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {TableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -502,7 +508,7 @@ export type StoreInspectorProps = {
  *   felix: {species: 'cat'},
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -534,6 +540,12 @@ export type StoreInspectorProps = {
  * row is removed.
  *
  * ```jsx
+ * import {CellView, Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {TableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -557,7 +569,7 @@ export type StoreInspectorProps = {
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -566,7 +578,7 @@ export type StoreInspectorProps = {
  *   felix: {species: 'cat'},
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -636,6 +648,12 @@ export function TableInHtmlTable(
  * Table in a <table> element with a CSS class.
  *
  * ```jsx
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {SortedTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -656,7 +674,7 @@ export function TableInHtmlTable(
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -688,6 +706,12 @@ export function TableInHtmlTable(
  * of each row is removed.
  *
  * ```jsx
+ * import {CellView, Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {SortedTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -713,7 +737,7 @@ export function TableInHtmlTable(
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -724,7 +748,7 @@ export function TableInHtmlTable(
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -780,6 +804,12 @@ export function SortedTableInHtmlTable(
  * in a <table> element with a CSS class.
  *
  * ```jsx
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {ValuesInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -789,7 +819,7 @@ export function SortedTableInHtmlTable(
  *
  * const store = createStore().setValues({open: true, employees: 3});
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -820,15 +850,22 @@ export function SortedTableInHtmlTable(
  * the top of the table and the Id column at the start of each row is removed.
  *
  * ```jsx
+ * import {Provider, ValueView} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {ValuesInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
  *   </Provider>
  * );
+ * const getBoldProp = (valueId) => ({bold: valueId == 'open'});
  * const Pane = () => (
  *   <ValuesInHtmlTable
  *     valueComponent={FormattedValueView}
- *     getValueComponentProps={(valueId) => ({bold: valueId == 'open'})}
+ *     getValueComponentProps={getBoldProp}
  *     headerRow={false}
  *     idColumn={false}
  *   />
@@ -843,7 +880,7 @@ export function SortedTableInHtmlTable(
  *
  * const store = createStore().setValues({open: true, employees: 3});
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -894,6 +931,12 @@ export function ValuesInHtmlTable(
  * in a <table> element with a CSS class.
  *
  * ```jsx
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {SliceInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -912,11 +955,11 @@ export function ValuesInHtmlTable(
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
+ * createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
- * <table class=\"slice\">
+ * <table class="slice">
  *   <thead>
  *     <tr>
  *       <th>Id</th>
@@ -944,6 +987,12 @@ export function ValuesInHtmlTable(
  * row is removed.
  *
  * ```jsx
+ * import {CellView, Provider} from 'tinybase/ui-react';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import React from 'react';
+ * import {SliceInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -968,7 +1017,7 @@ export function ValuesInHtmlTable(
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -981,7 +1030,7 @@ export function ValuesInHtmlTable(
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
+ * createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1045,6 +1094,12 @@ export function SliceInHtmlTable(
  * CSS class. Note the dotted pairs that are used as column headings.
  *
  * ```jsx
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {RelationshipInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -1064,12 +1119,12 @@ export function SliceInHtmlTable(
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * const root = ReactDOMClient.createRoot(app);
+ * const root = createRoot(app);
  * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
- * <table class=\"relationship\">
+ * <table class="relationship">
  *   <thead>
  *     <tr>
  *       <th>pets.Id</th>
@@ -1103,6 +1158,12 @@ export function SliceInHtmlTable(
  * the table and the Id column at the start of each row is removed.
  *
  * ```jsx
+ * import {CellView, Provider} from 'tinybase/ui-react';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import React from 'react';
+ * import {RelationshipInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -1131,7 +1192,7 @@ export function SliceInHtmlTable(
  * const customCells = {
  *   'species.price': {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'dog'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'dog'}),
  *   },
  * };
  *
@@ -1142,7 +1203,7 @@ export function SliceInHtmlTable(
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * const root = ReactDOMClient.createRoot(app);
+ * const root = createRoot(app);
  * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // ->
@@ -1197,6 +1258,12 @@ export function RelationshipInHtmlTable(
  * ResultTable in a <table> element with a CSS class.
  *
  * ```jsx
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {ResultTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
  *     <Pane />
@@ -1213,7 +1280,7 @@ export function RelationshipInHtmlTable(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1245,6 +1312,12 @@ export function RelationshipInHtmlTable(
  * the start of each row is removed.
  *
  * ```jsx
+ * import {Provider, ResultCellView} from 'tinybase/ui-react';
+ * import {createQueries, createStore} from 'tinybase';
+ * import React from 'react';
+ * import {ResultTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
  *     <Pane />
@@ -1268,7 +1341,7 @@ export function RelationshipInHtmlTable(
  * const customCells = {
  *   color: {
  *     component: FormattedResultCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -1279,7 +1352,7 @@ export function RelationshipInHtmlTable(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1351,6 +1424,12 @@ export function ResultTableInHtmlTable(
  * renders the ResultTable in a <table> element with a CSS class.
  *
  * ```jsx
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {ResultSortedTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
  *     <Pane />
@@ -1371,7 +1450,7 @@ export function ResultTableInHtmlTable(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1403,6 +1482,12 @@ export function ResultTableInHtmlTable(
  * column at the start of each row is removed.
  *
  * ```jsx
+ * import {Provider, ResultCellView} from 'tinybase/ui-react';
+ * import {createQueries, createStore} from 'tinybase';
+ * import React from 'react';
+ * import {ResultSortedTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
  *     <Pane />
@@ -1428,7 +1513,7 @@ export function ResultTableInHtmlTable(
  * const customCells = {
  *   color: {
  *     component: FormattedResultCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -1439,7 +1524,7 @@ export function ResultTableInHtmlTable(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1495,6 +1580,12 @@ export function ResultSortedTableInHtmlTable(
  * Cell.
  *
  * ```jsx
+ * import {EditableCellView} from 'tinybase/ui-react-dom';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1506,7 +1597,7 @@ export function ResultSortedTableInHtmlTable(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1556,6 +1647,12 @@ export function EditableCellView(
  * Value.
  *
  * ```jsx
+ * import {EditableValueView} from 'tinybase/ui-react-dom';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1565,7 +1662,7 @@ export function EditableCellView(
  *
  * const store = createStore().setValue('employees', 3);
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1605,6 +1702,12 @@ export function EditableValueView(
  * Table in a <table> element with a SortedTablePaginator (the default).
  *
  * ```jsx
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {SortedTableInHtmlTable} from 'tinybase/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1629,7 +1732,7 @@ export function EditableValueView(
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1685,6 +1788,12 @@ export function SortedTablePaginator(
  * tool.
  *
  * ```jsx
+ * import {Provider} from 'tinybase/debug/ui-react';
+ * import React from 'react';
+ * import {StoreInspector} from 'tinybase/debug/ui-react-dom';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1694,7 +1803,7 @@ export function SortedTablePaginator(
  *
  * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * // ... // !act
  * console.log(app.innerHTML.substring(0, 35));
  * // -> '<aside id="tinybaseStoreInspector">'