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

package/lib/types/with-schemas/synchronizers.d.ts

@@ -116,6 +116,9 @@ export interface Synchronizer<Schemas extends OptionalSchemas>
  * 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/with-schemas/tools.d.ts

@@ -117,6 +117,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * @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'},
@@ -128,13 +131,15 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    *     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'},
@@ -184,6 +189,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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'},
@@ -201,6 +209,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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'},
@@ -242,6 +253,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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'},
@@ -255,6 +269,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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();
    *
@@ -331,12 +348,15 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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');
@@ -351,11 +371,14 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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');
@@ -406,13 +429,15 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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');
@@ -427,12 +452,14 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * 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');
@@ -465,6 +492,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    * ```
    *
    * ```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);
@@ -496,6 +526,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
  * 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'},
@@ -507,8 +540,7 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
  *     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
@@ -516,6 +548,9 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
  * 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/with-schemas/ui-react-dom.d.ts

@@ -548,6 +548,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -560,7 +566,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   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);
  * // ->
  * `
@@ -592,6 +598,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -615,7 +627,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -624,7 +636,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   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);
  * // ->
  * `
@@ -702,6 +714,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -722,7 +740,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -754,6 +772,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -779,7 +803,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -790,7 +814,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -854,6 +878,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -863,7 +893,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * 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,15 +924,22 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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}
  *   />
@@ -917,7 +954,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * 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);
  * // ->
  * `
@@ -976,6 +1013,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -994,11 +1037,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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>
@@ -1026,6 +1069,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1050,7 +1099,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   species: {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -1063,7 +1112,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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);
  * // ->
  * `
@@ -1135,6 +1184,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1154,12 +1209,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ).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>
@@ -1193,6 +1248,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1221,7 +1282,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   'species.price': {
  *     component: FormattedCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'dog'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'dog'}),
  *   },
  * };
  *
@@ -1232,7 +1293,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * ).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);
  * // ->
@@ -1295,6 +1356,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1311,7 +1378,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   }),
  * ).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);
  * // ->
  * `
@@ -1343,6 +1410,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1366,7 +1439,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   color: {
  *     component: FormattedResultCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -1377,7 +1450,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   }),
  * ).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);
  * // ->
  * `
@@ -1457,6 +1530,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1477,7 +1556,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   }),
  * ).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);
  * // ->
  * `
@@ -1509,6 +1588,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1534,7 +1619,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const customCells = {
  *   color: {
  *     component: FormattedResultCellView,
- *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *     getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
  *   },
  * };
  *
@@ -1545,7 +1630,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   }),
  * ).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);
  * // ->
  * `
@@ -1609,6 +1694,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1620,7 +1711,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * 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);
  * // ->
  * `
@@ -1684,6 +1775,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1693,7 +1790,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * 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);
  * // ->
  * `
@@ -1733,6 +1830,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1757,7 +1860,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // ->
  * `
@@ -1813,6 +1916,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * 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 />
@@ -1822,7 +1931,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * 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">'