tinybase 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -22,7 +22,7 @@
  * @module ui-react
  */
 
-import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d';
+import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d.ts';
 import {
   Cell,
   CellIdsListener,
@@ -56,22 +56,22 @@ import {
   ValueOrUndefined,
   Values,
   ValuesListener,
-} from './store.d';
+} from './store.d.ts';
 import {
   CheckpointIds,
   CheckpointIdsListener,
   CheckpointListener,
   Checkpoints,
-} from './checkpoints.d';
+} from './checkpoints.d.ts';
 import {ComponentType, ReactElement} from 'react';
-import {Indexes, SliceIdsListener, SliceRowIdsListener} from './indexes.d';
+import {Indexes, SliceIdsListener, SliceRowIdsListener} from './indexes.d.ts';
 import {
   LinkedRowIdsListener,
   LocalRowIdsListener,
   Relationships,
   RemoteRowIdListener,
-} from './relationships.d';
-import {MetricListener, Metrics} from './metrics.d';
+} from './relationships.d.ts';
+import {MetricListener, Metrics} from './metrics.d.ts';
 import {
   Queries,
   ResultCellIdsListener,
@@ -82,8 +82,10 @@ import {
   ResultSortedRowIdsListener,
   ResultTableCellIdsListener,
   ResultTableListener,
-} from './queries.d';
-import {Persister} from './persisters.d';
+} from './queries.d.ts';
+import {MergeableStore} from './mergeable-store';
+import {Persister} from './persisters.d.ts';
+import {Synchronizer} from './synchronizers';
 
 /**
  * The StoreOrStoreId type is used when you need to refer to a Store in a React
@@ -212,6 +214,7 @@ export type UndoOrRedoInformation = [boolean, Callback, Id | undefined, string];
  * useSetTableCallback hook or useSetRowCallback hook - so that the Id arguments
  * of the object to set can also be dependent on the event or parameter
  * provided (as well as the object itself being set).
+ * @category Identity
  */
 export type GetId<Parameter> = (parameter: Parameter, store: Store) => Id;
 
@@ -221,9 +224,9 @@ export type GetId<Parameter> = (parameter: Parameter, store: Store) => Id;
  *
  * It is possible to create a Store outside of the React app with the regular
  * createStore function and pass it in, but you may prefer to create it within
- * the app, perhaps inside the top-level component. To defend against a new
- * Store being created every time the app renders or re-renders, the
- * useCreateStore hook wraps the creation in a memoization.
+ * the app, perhaps inside the top-level component. To prevent a new Store being
+ * created every time the app renders or re-renders, the useCreateStore hook
+ * wraps the creation in a memoization.
  *
  * The useCreateStore hook is a very thin wrapper around the React `useMemo`
  * hook, defaulting to an empty array for its dependencies, so that by default,
@@ -300,6 +303,14 @@ export function useCreateStore(
   createDeps?: React.DependencyList,
 ): Store;
 
+/**
+ * The useCreateMergeableStore hook
+ */
+export function useCreateMergeableStore(
+  create: () => MergeableStore,
+  createDeps?: React.DependencyList,
+): MergeableStore;
+
 /**
  * The useStoreIds hook is used to retrieve the Ids of all the named Store
  * objects present in the current Provider component context.
@@ -2476,8 +2487,8 @@ export function useSetRowCallback<Parameter>(
  * specify `reuseRowIds` to be `false`, then the Id will be a monotonically
  * increasing string representation of an increasing integer, regardless of any
  * you may have previously deleted.
- * @param tableId The Id of the Table in the Store, or a GetId function
- * that will return it.
+ * @param tableId The Id of the Table in the Store, or a GetId function that
+ * will return it.
  * @param getRow A function which returns the Row object that will be used to
  * update the Store, based on the parameter the callback will receive (and which
  * is most likely a DOM event).
@@ -3626,8 +3637,8 @@ export function useTableIdsListener(
  * dependencies) or the component unmounts, the listener on the underlying Store
  * will be deleted.
  * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever the matching
- * Table is added or removed.
+ * @param listener The function that will be called whenever the matching Table
+ * is added or removed.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -4112,8 +4123,8 @@ export function useSortedRowIdsListener(
  * more easily done with the useHasRow hook).
  *
  * You can either listen to a single Row being added or removed (by specifying
- * the Table Id and Row Id, as the method's first two parameters) or changes
- * to any Row (by providing `null` wildcards).
+ * the Table Id and Row Id, as the method's first two parameters) or changes to
+ * any Row (by providing `null` wildcards).
  *
  * Both, either, or neither of the `tableId` and `rowId` parameters can be
  * wildcarded with `null`. You can listen to a specific Row in a specific Table,
@@ -4126,8 +4137,8 @@ export function useSortedRowIdsListener(
  * the component unmounts, the listener on the underlying Store will be deleted.
  * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
  * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever the matching Row
- * is added or removed.
+ * @param listener The function that will be called whenever the matching Row is
+ * added or removed.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -4339,14 +4350,14 @@ export function useCellIdsListener(
  * own specific listener to do more than simply tracking the value (which is
  * more easily done with the useHasCell hook).
  *
- * You can either listen to a single Cell being added or removed (by
- * specifying the Table Id, Row Id, and Cell Id as the method's first three
- * parameters) or changes to any Cell (by providing `null` wildcards).
+ * You can either listen to a single Cell being added or removed (by specifying
+ * the Table Id, Row Id, and Cell Id as the method's first three parameters) or
+ * changes to any Cell (by providing `null` wildcards).
  *
- * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can
- * be wildcarded with `null`. You can listen to a specific Cell in a specific
- * Row in a specific Table, any Cell in any Row in any Table, for example - or
- * every other combination of wildcards.
+ * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Cell in a specific Row
+ * in a specific Table, any Cell in any Row in any Table, for example - or every
+ * other combination of wildcards.
  *
  * Unlike the addHasCellListener method, which returns a listener Id and
  * requires you to remove it manually, the useHasCellListener hook manages this
@@ -4696,8 +4707,8 @@ export function useValueIdsListener(
  * dependencies) or the component unmounts, the listener on the underlying Store
  * will be deleted.
  * @param valueId The Id of the Value to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever the matching
- * Value is added or removed.
+ * @param listener The function that will be called whenever the matching Value
+ * is added or removed.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -4996,13 +5007,11 @@ export function useDidFinishTransactionListener(
  *
  * It is possible to create a Metrics object outside of the React app with the
  * regular createMetrics function and pass it in, but you may prefer to create
- * it within the app, perhaps inside the top-level component. To defend against
- * a new Metrics object being created every time the app renders or re-renders,
- * the useCreateMetrics hook wraps the creation in a memoization.
- *
- * The useCreateMetrics hook is a very thin wrapper around the React `useMemo`
- * hook, defaulting to the provided Store as its dependency, so that by default,
- * the creation only occurs once per Store.
+ * it within the app, perhaps inside the top-level component. To prevent a new
+ * Metrics object being created every time the app renders or re-renders, since
+ * v5.0 the useCreateMetrics hook performs the creation in an effect. As a
+ * result this hook will return `undefined` on the brief first render, which you
+ * should defend against.
  *
  * If your `create` function contains other dependencies, the changing of which
  * should also cause the Metrics object to be recreated, you can provide them in
@@ -5037,7 +5046,7 @@ export function useDidFinishTransactionListener(
  *       'species',
  *     );
  *   });
- *   return <span>{metrics.getMetric('speciesCount')}</span>;
+ *   return <span>{metrics?.getMetric('speciesCount')}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -5075,7 +5084,7 @@ export function useDidFinishTransactionListener(
  *     },
  *     [tableToCount],
  *   );
- *   return <span>{metrics.getMetric('tableCount')}</span>;
+ *   return <span>{metrics?.getMetric('tableCount')}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -5098,7 +5107,7 @@ export function useCreateMetrics(
   store: Store,
   create: (store: Store) => Metrics,
   createDeps?: React.DependencyList,
-): Metrics;
+): Metrics | undefined;
 
 /**
  * The useMetricsIds hook is used to retrieve the Ids of all the named Metrics
@@ -5478,13 +5487,11 @@ export function useMetricListener(
  *
  * It is possible to create an Indexes object outside of the React app with the
  * regular createIndexes function and pass it in, but you may prefer to create
- * it within the app, perhaps inside the top-level component. To defend against
- * a new Indexes object being created every time the app renders or re-renders,
- * the useCreateIndexes hook wraps the creation in a memoization.
- *
- * The useCreateIndexes hook is a very thin wrapper around the React `useMemo`
- * hook, defaulting to the provided Store as its dependency, so that by default,
- * the creation only occurs once per Store.
+ * it within the app, perhaps inside the top-level component. To prevent a new
+ * Indexes object being created every time the app renders or re-renders, since
+ * v5.0 the useCreateIndexes hook performs the creation in an effect. As a
+ * result this hook will return `undefined` on the brief first render, which you
+ * should defend against.
  *
  * If your `create` function contains other dependencies, the changing of which
  * should also cause the Indexes object to be recreated, you can provide them in
@@ -5524,7 +5531,7 @@ export function useMetricListener(
  *       'species',
  *     );
  *   });
- *   return <span>{JSON.stringify(indexes.getSliceIds('bySpecies'))}</span>;
+ *   return <span>{JSON.stringify(indexes?.getSliceIds('bySpecies'))}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -5565,7 +5572,7 @@ export function useMetricListener(
  *     },
  *     [cellToIndex],
  *   );
- *   return <span>{JSON.stringify(indexes.getSliceIds('byCell'))}</span>;
+ *   return <span>{JSON.stringify(indexes?.getSliceIds('byCell'))}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -5588,7 +5595,7 @@ export function useCreateIndexes(
   store: Store,
   create: (store: Store) => Indexes,
   createDeps?: React.DependencyList,
-): Indexes;
+): Indexes | undefined;
 
 /**
  * The useIndexesIds hook is used to retrieve the Ids of all the named Indexes
@@ -6166,13 +6173,10 @@ export function useSliceRowIdsListener(
  * It is possible to create a Relationships object outside of the React app with
  * the regular createRelationships function and pass it in, but you may prefer
  * to create it within the app, perhaps inside the top-level component. To
- * defend against a new Relationships object being created every time the app
- * renders or re-renders, the useCreateRelationships hook wraps the creation in
- * a memoization.
- *
- * The useCreateRelationships hook is a very thin wrapper around the React
- * `useMemo` hook, defaulting to the provided Store as its dependency, so that
- * by default, the creation only occurs once per Store.
+ * prevent a new Relationships object being created every time the app renders
+ * or re-renders, since v5.0 the useCreateRelationships hook performs the
+ * creation in an effect. As a result this hook will return `undefined` on the
+ * brief first render, which you should defend against.
  *
  * If your `create` function contains other dependencies, the changing of which
  * should also cause the Relationships object to be recreated, you can provide
@@ -6214,7 +6218,9 @@ export function useSliceRowIdsListener(
  *       'species',
  *     );
  *   });
- *   return <span>{relationships.getRemoteRowId('petSpecies', 'fido')}</span>;
+ *   return (
+ *     <span>{relationships?.getRemoteRowId('petSpecies', 'fido')}</span>
+ *   );
  * };
  *
  * const app = document.createElement('div');
@@ -6260,7 +6266,9 @@ export function useSliceRowIdsListener(
  *     },
  *     [remoteTableAndCellToLink],
  *   );
- *   return <span>{relationships.getRemoteRowId('cellLinked', 'fido')}</span>;
+ *   return (
+ *     <span>{relationships?.getRemoteRowId('cellLinked', 'fido')}</span>
+ *   );
  * };
  *
  * const app = document.createElement('div');
@@ -6283,7 +6291,7 @@ export function useCreateRelationships(
   store: Store,
   create: (store: Store) => Relationships,
   createDeps?: React.DependencyList,
-): Relationships;
+): Relationships | undefined;
 
 /**
  * The useRelationshipsIds hook is used to retrieve the Ids of all the named
@@ -7129,13 +7137,11 @@ export function useLinkedRowIdsListener(
  *
  * It is possible to create a Queries object outside of the React app with the
  * regular createQueries function and pass it in, but you may prefer to create
- * it within the app, perhaps inside the top-level component. To defend against
- * a new Queries object being created every time the app renders or re-renders,
- * the useCreateQueries hook wraps the creation in a memoization.
- *
- * The useCreateQueries hook is a very thin wrapper around the React `useMemo`
- * hook, defaulting to the provided Store as its dependency, so that by default,
- * the creation only occurs once per Store.
+ * it within the app, perhaps inside the top-level component. To prevent a new
+ * Queries object being created every time the app renders or re-renders, since
+ * v5.0 the useCreateQueries hook performs the creation in an effect. As a
+ * result this hook will return `undefined` on the brief first render, which you
+ * should defend against.
  *
  * If your `create` function contains other dependencies, the changing of which
  * should also cause the Queries object to be recreated, you can provide them in
@@ -7178,7 +7184,7 @@ export function useLinkedRowIdsListener(
  *     );
  *   });
  *   return (
- *     <span>{queries.getResultCell('dogColors', 'fido', 'color')}</span>
+ *     <span>{queries?.getResultCell('dogColors', 'fido', 'color')}</span>
  *   );
  * };
  *
@@ -7220,7 +7226,7 @@ export function useLinkedRowIdsListener(
  *     );
  *   });
  *   return (
- *     <span>{queries.getResultCell('dogColors', 'fido', 'color')}</span>
+ *     <span>{queries?.getResultCell('dogColors', 'fido', 'color')}</span>
  *   );
  * };
  *
@@ -7242,7 +7248,7 @@ export function useCreateQueries(
   store: Store,
   create: (store: Store) => Queries,
   createDeps?: React.DependencyList,
-): Queries;
+): Queries | undefined;
 
 /**
  * The useQueriesIds hook is used to retrieve the Ids of all the named Queries
@@ -9133,14 +9139,11 @@ export function useResultCellListener(
  *
  * It is possible to create a Checkpoints object outside of the React app with
  * the regular createCheckpoints function and pass it in, but you may prefer to
- * create it within the app, perhaps inside the top-level component. To defend
- * against a new Checkpoints object being created every time the app renders or
- * re-renders, the useCreateCheckpoints hook wraps the creation in a
- * memoization.
- *
- * The useCreateCheckpoints hook is a very thin wrapper around the React
- * `useMemo` hook, defaulting to the provided Store as its dependency, so that
- * by default, the creation only occurs once per Store.
+ * create it within the app, perhaps inside the top-level component. To prevent
+ * a new Checkpoints object being created every time the app renders or
+ * re-renders, since v5.0 the useCreateMetrics hook performs the creation in an
+ * effect. As a result this hook will return `undefined` on the brief first
+ * render, which you should defend against.
  *
  * If your `create` function contains other dependencies, the changing of which
  * should also cause the Checkpoints object to be recreated, you can provide
@@ -9170,7 +9173,7 @@ export function useResultCellListener(
  *     console.log('Checkpoints created');
  *     return createCheckpoints(store).setSize(10);
  *   });
- *   return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
+ *   return <span>{JSON.stringify(checkpoints?.getCheckpointIds())}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -9202,7 +9205,7 @@ export function useResultCellListener(
  *     },
  *     [size],
  *   );
- *   return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
+ *   return <span>{JSON.stringify(checkpoints?.getCheckpointIds())}</span>;
  * };
  *
  * const app = document.createElement('div');
@@ -9225,7 +9228,7 @@ export function useCreateCheckpoints(
   store: Store,
   create: (store: Store) => Checkpoints,
   createDeps?: React.DependencyList,
-): Checkpoints;
+): Checkpoints | undefined;
 
 /**
  * The useCheckpointsIds hook is used to retrieve the Ids of all the named
@@ -10064,11 +10067,9 @@ export function useCheckpointListener(
  *
  * It is possible to create a Persister outside of the React app with the
  * regular createPersister function and pass it in, but you may prefer to create
- * it within the app, perhaps inside the top-level component. To defend against
- * a new Persister being created every time the app renders or re-renders, the
- * useCreatePersister hook wraps the creation in a memoization, and provides a
- * second callback so that you can configure the Persister, once, and
- * asynchronously, when it is created.
+ * it within the app, perhaps inside the top-level component. To prevent a new
+ * Persister being created every time the app renders or re-renders, since v5.0
+ * the useCreateMetrics hook performs the creation in an effect.
  *
  * If your `create` function (the second parameter to the hook) contains
  * dependencies, the changing of which should cause the Persister to be
@@ -10076,19 +10077,18 @@ export function useCheckpointListener(
  * you would for any React hook with dependencies. The Store passed in as the
  * first parameter of this hook is used as a dependency by default.
  *
- * A second `then` callback can be provided as the fourth parameter. This is
- * called after the creation, and, importantly, can be asynchronous, so that you
- * can configure the Persister with the startAutoLoad method and startAutoSave
- * method, for example. If this callback contains dependencies, the changing of
- * which should cause the Persister to be reconfigured, you can provide them in
- * an array in the fifth parameter. The Persister itself is used as a dependency
- * by default.
+ * A second callback, called `then`, can be provided as the fourth parameter.
+ * This is called after the creation, and, importantly, can be asynchronous, so
+ * that you can configure the Persister with the startAutoLoad method and
+ * startAutoSave method, for example. If this callback contains dependencies,
+ * the changing of which should cause the Persister to be reconfigured, you can
+ * provide them in an array in the fifth parameter. The Persister itself is used
+ * as a dependency by default.
  *
  * Since v4.3.0, the `create` function can return undefined, meaning that you
  * can enable or disable persistence conditionally within this hook. This is
  * useful for applications which might turn on or off their cloud persistence or
- * collaboration features. As a result, the `then` callback may also get passed
- * undefined, which you should handle accordingly.
+ * collaboration features.
  *
  * Since v4.3.19, a `destroy` function can be provided which will be called
  * after an old Persister is destroyed due to a change in the `createDeps`
@@ -10225,12 +10225,152 @@ export function useCreatePersister<
   store: Store,
   create: (store: Store) => PersisterOrUndefined,
   createDeps?: React.DependencyList,
-  then?: (persister: PersisterOrUndefined) => Promise<void>,
+  then?: (persister: Persister) => Promise<void>,
   thenDeps?: React.DependencyList,
-  destroy?: (persister: PersisterOrUndefined) => void,
+  destroy?: (persister: Persister) => void,
   destroyDeps?: React.DependencyList,
 ): PersisterOrUndefined;
 
+/**
+ * The useCreateSynchronizer hook is used to create a Synchronizer within a
+ * React application along with convenient memoization and callbacks.
+ *
+ * It is possible to create a Synchronizer outside of the React app with the
+ * regular createSynchronizer function and pass it in, but you may prefer to
+ * create it within the app, perhaps inside the top-level component. To prevent
+ * a new Synchronizer being created every time the app renders or re-renders,
+ * the useCreateMetrics hook performs the creation in an effect.
+ *
+ * If your asynchronous `create` function (the second parameter to the hook)
+ * contains dependencies, the changing of which should cause the Synchronizer to
+ * be recreated, you can provide them in an array in the third parameter, just
+ * as you would for any React hook with dependencies. The MergeableStore passed
+ * in as the first parameter of this hook is used as a dependency by default.
+ *
+ * A second callback, called `then`, can be provided as the fourth parameter.
+ * This is called after the creation, and can also be asynchronous, so that you
+ * can configure the Synchronizer with the startSync method, for example. If
+ * this callback contains dependencies, the changing of which should cause the
+ * Synchronizer to be reconfigured, you can provide them in an array in the
+ * fifth parameter. The Synchronizer itself is used as a dependency by default.
+ *
+ * The `create` function can return undefined, meaning that you can enable or
+ * disable synchronization conditionally within this hook. This is useful for
+ * applications which might turn on or off their cloud synchronization or
+ * collaboration features.
+ *
+ * This hook ensures the Synchronizer object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ * @param store A reference to the MergeableStore for which to create a new
+ * Synchronizer object.
+ * @param create An asynchronous function for performing the creation steps of
+ * the Synchronizer object for the Store.
+ * @param createDeps An optional array of dependencies for the `create`
+ * function, which, if any change, result in its rerun. This parameter defaults
+ * to an empty array.
+ * @param then An optional callback for performing asynchronous post-creation
+ * steps on the Synchronizer, such as starting automatic synchronization.
+ * @param thenDeps An optional array of dependencies for the `then` callback,
+ * which, if any change, result in its rerun. This parameter defaults to an
+ * empty array.
+ * @param destroy An optional callback whenever the Synchronizer is destroyed
+ * due to a change in the `createDeps` dependencies.
+ * @param destroyDeps An optional array of dependencies for the `destroy`
+ * callback, which, if any change, result in `destroy` and `then` being rerun.
+ * This parameter defaults to an empty array.
+ * @returns A reference to the Synchronizer.
+ * @example
+ * This example creates a Synchronizer at the top level of a React application.
+ * Even though the App component is rendered twice, the Synchronizer creation
+ * only occurs once by default.
+ *
+ * ```jsx
+ * const App = () => {
+ *   const store = useCreateMergeableStore(() => createMergeableStore('s1'));
+ *   const synchronizer = useCreateSynchronizer(store, async (store) => {
+ *     console.log('Synchronizer created');
+ *     return await createLocalSynchronizer(store, 'pets');
+ *   });
+ *   return <span>{JSON.stringify(useTables(store))}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
+ * // -> 'Synchronizer created'
+ *
+ * // ... // !act
+ * root.render(<App />); // !act
+ * // No second Synchronizer creation
+ *
+ * root.unmount(); // !act
+ * ```
+ * @example
+ * This example creates a Synchronizer at the top level of a React application.
+ * The App component is rendered twice, each with a different top-level prop.
+ * The useCreateSynchronizer hook takes the `url` prop as a dependency, and so
+ * the Synchronizer object is created again on the second render. The first is
+ * destroyed and the `destroy` parameter is called for it.  A `then` parameter
+ * is provided to start both Synchronizers' synchronization.
+ *
+ * ```jsx
+ * const server1 = createWsServer(new ws.WebSocketServer({port: 8044}));
+ * const server2 = createWsServer(new ws.WebSocketServer({port: 8045}));
+ *
+ * const App = ({url}) => {
+ *   const store = useCreateMergeableStore(() => createMergeableStore('s1'));
+ *   const synchronizer = useCreateSynchronizer(
+ *     store,
+ *     async (store) => {
+ *       const webSocket = new WebSocket(url);
+ *       console.log(`Synchronizer created for ${webSocket.url}`);
+ *       return await createWsSynchronizer(store, webSocket);
+ *     },
+ *     [url],
+ *     async (synchronizer) => {
+ *       await synchronizer.startSync();
+ *     },
+ *     [],
+ *     (synchronizer) => {
+ *       const webSocket = synchronizer.getWebSocket();
+ *       console.log(`Synchronizer destroyed for ${webSocket.url}`);
+ *     },
+ *   );
+ *   return <span>{JSON.stringify(useTables(store))}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App url="ws://localhost:8044/" />); // !act
+ * // ... // !act
+ * // -> 'Synchronizer created for ws://localhost:8044/'
+ *
+ * root.render(<App url="ws://localhost:8045/" />); // !act
+ * // ... // !act
+ * // -> 'Synchronizer created for ws://localhost:8045/'
+ * // -> 'Synchronizer destroyed for ws://localhost:8044/'
+ *
+ * root.unmount(); // !act
+ * // -> 'Synchronizer destroyed for ws://localhost:8045/'
+ *
+ * server1.destroy();
+ * server2.destroy();
+ * ```
+ * @category Synchronizer hooks
+ * @since v5.0.0
+ */
+export function useCreateSynchronizer<
+  SynchronizerOrUndefined extends Synchronizer | undefined,
+>(
+  store: MergeableStore,
+  create: (store: MergeableStore) => Promise<SynchronizerOrUndefined>,
+  createDeps?: React.DependencyList,
+  then?: (synchronizer: Synchronizer) => Promise<void>,
+  thenDeps?: React.DependencyList,
+  destroy?: (synchronizer: Synchronizer) => void,
+  destroyDeps?: React.DependencyList,
+): SynchronizerOrUndefined;
+
 /**
  * The ExtraProps type represents a set of arbitrary additional props.
  * @category Props

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

@@ -10,8 +10,8 @@
  * @module checkpoints
  */
 
-import {Id, IdOrNull, Ids} from './common.d';
-import {OptionalSchemas, Store} from './store.d';
+import {Id, IdOrNull, Ids} from './common.d.ts';
+import {OptionalSchemas, Store} from './store.d.ts';
 
 /**
  * The CheckpointIds type is a representation of the list of checkpoint Ids

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

@@ -17,8 +17,8 @@ import {
   OptionalTablesSchema,
   RowCallback,
   Store,
-} from './store.d';
-import {Id, IdOrNull, Ids, SortKey} from './common.d';
+} from './store.d.ts';
+import {Id, IdOrNull, Ids, SortKey} from './common.d.ts';
 
 /**
  * The Index type represents the concept of a map of Slice objects, keyed by Id.

package/lib/types/with-schemas/internal/queries.d.ts

@@ -8,8 +8,9 @@ export type JoinedCellIdOrId<
   JoinedTableId extends TableIdFromSchema<Schema> | Id =
     | TableIdFromSchema<Schema>
     | Id,
-> = JoinedTableId extends TableIdFromSchema<Schema>
-  ? CellIdFromSchema<Schema, JoinedTableId>
-  : Id;
+> =
+  JoinedTableId extends TableIdFromSchema<Schema>
+    ? CellIdFromSchema<Schema, JoinedTableId>
+    : Id;
 
 export type GetResultCell = (cellId: Id) => ResultCell;

package/lib/types/with-schemas/internal/store.d.ts

@@ -1,7 +1,9 @@
 import {
   Cell,
+  OptionalSchemas,
   OptionalTablesSchema,
   OptionalValuesSchema,
+  Store,
   Value,
 } from '../store';
 import {Id} from '../common';
@@ -34,9 +36,10 @@ export type DefaultCellIdFromSchema<
 export type AllCellIdFromSchema<
   Schema extends OptionalTablesSchema,
   TableId extends TableIdFromSchema<Schema> = TableIdFromSchema<Schema>,
-> = TableId extends TableIdFromSchema<Schema>
-  ? CellIdFromSchema<Schema, TableId>
-  : never;
+> =
+  TableId extends TableIdFromSchema<Schema>
+    ? CellIdFromSchema<Schema, TableId>
+    : never;
 
 export type CellIsDefaultedFromSchema<
   Schema extends OptionalTablesSchema,
@@ -99,3 +102,5 @@ export type Truncate<Params> = Params extends [...infer ShorterParams, any]
   : never;
 
 export type NoInfer<Type> = [Type][Type extends any ? 0 : never];
+
+export type StoreAlias<Schemas extends OptionalSchemas> = Store<Schemas>;