tinybase 2.0.0-beta.0 → 2.0.0-beta.3

package/lib/debug/ui-react.js

@@ -3,6 +3,17 @@ import React, {useContext as useContext$1} from 'react';
 const getTypeOf = (thing) => typeof thing;
 const EMPTY_STRING = '';
 const STRING = getTypeOf(EMPTY_STRING);
+const LISTENER = 'Listener';
+const GET = 'get';
+const ADD = 'add';
+const TABLES = 'Tables';
+const TABLE_IDS = 'TableIds';
+const TABLE = 'Table';
+const ROW_IDS = 'RowIds';
+const SORTED_ROW_IDS = 'SortedRowIds';
+const ROW = 'Row';
+const CELL_IDS = 'CellIds';
+const CELL = 'Cell';
 
 const arrayMap = (array, cb) => array.map(cb);
 const arrayLength = (array) => array.length;
@@ -35,7 +46,8 @@ const useStore = (id) => useThing(id, 0);
 const useMetrics = (id) => useThing(id, 2);
 const useIndexes = (id) => useThing(id, 4);
 const useRelationships = (id) => useThing(id, 6);
-const useCheckpoints = (id) => useThing(id, 8);
+const useQueries = (id) => useThing(id, 8);
+const useCheckpoints = (id) => useThing(id, 10);
 const useStoreOrStoreId = (storeOrStoreId) =>
   useThingOrThingId(storeOrStoreId, 0);
 const useMetricsOrMetricsId = (metricsOrMetricsId) =>
@@ -44,10 +56,12 @@ const useIndexesOrIndexesId = (indexesOrIndexesId) =>
   useThingOrThingId(indexesOrIndexesId, 4);
 const useRelationshipsOrRelationshipsId = (relationshipsOrRelationshipsId) =>
   useThingOrThingId(relationshipsOrRelationshipsId, 6);
+const useQueriesOrQueriesId = (queriesOrQueriesId) =>
+  useThingOrThingId(queriesOrQueriesId, 8);
 const useCheckpointsOrCheckpointsId = (checkpointsOrCheckpointsId) =>
-  useThingOrThingId(checkpointsOrCheckpointsId, 8);
+  useThingOrThingId(checkpointsOrCheckpointsId, 10);
 
-const {useCallback, useEffect, useMemo: useMemo$1, useState} = React;
+const {useCallback, useEffect, useMemo: useMemo$1, useRef, useState} = React;
 const useCreate = (store, create, createDeps = []) => {
   const thing = useMemo$1(() => create(store), [store, ...createDeps]);
   useEffect(() => () => thing.destroy(), [thing]);
@@ -57,21 +71,30 @@ const useListenable = (
   listenable,
   thing,
   defaulted,
-  preArgs = [],
-  ...postArgs
+  args = [],
+  getFromListenerArg,
 ) => {
-  const getListenable = thing?.['get' + listenable] ?? (() => defaulted);
-  const immediateListenable = getListenable(...preArgs);
-  const [, setListenable] = useState(immediateListenable);
-  useEffect(() => {
-    const listenerId = thing?.[`add${listenable}Listener`]?.(
-      ...preArgs,
-      () => setListenable(getListenable(...preArgs)),
-      ...postArgs,
-    );
-    return () => thing?.delListener(listenerId);
-  }, [thing, listenable, setListenable, getListenable, ...preArgs]);
-  return immediateListenable;
+  const [, rerender] = useState();
+  const getResult = useCallback(
+    () => thing?.[GET + listenable]?.(...args) ?? defaulted,
+    [thing, ...args],
+  );
+  const [initialResult] = useState(getResult);
+  const result = useRef(initialResult);
+  useMemo$1(() => (result.current = getResult()), [getResult]);
+  useListener(
+    listenable,
+    thing,
+    (...listenerArgs) => {
+      result.current = isUndefined(getFromListenerArg)
+        ? getResult()
+        : listenerArgs[getFromListenerArg];
+      rerender([]);
+    },
+    [],
+    args,
+  );
+  return result.current;
 };
 const useListener = (
   listenable,
@@ -80,16 +103,15 @@ const useListener = (
   listenerDeps = [],
   preArgs = [],
   ...postArgs
-) => {
+) =>
   useEffect(() => {
-    const listenerId = thing?.[`add${listenable}Listener`]?.(
+    const listenerId = thing?.[ADD + listenable + LISTENER]?.(
       ...preArgs,
       listener,
       ...postArgs,
     );
     return () => thing?.delListener(listenerId);
-  }, [thing, listenable, ...listenerDeps, ...preArgs, ...postArgs]);
-};
+  }, [thing, ...preArgs, ...listenerDeps, ...postArgs]);
 const useSetCallback = (
   storeOrStoreId,
   settable,
@@ -133,41 +155,45 @@ const useCheckpointAction = (checkpointsOrCheckpointsId, action, arg) => {
 const useCreateStore = (create, createDeps = []) =>
   useMemo$1(create, createDeps);
 const useTables = (storeOrStoreId) =>
-  useListenable('Tables', useStoreOrStoreId(storeOrStoreId), {});
-const useTableIds = (storeOrStoreId, trackReorder) =>
-  useListenable(
-    'TableIds',
-    useStoreOrStoreId(storeOrStoreId),
-    [],
-    [],
-    trackReorder,
-  );
+  useListenable(TABLES, useStoreOrStoreId(storeOrStoreId), {});
+const useTableIds = (storeOrStoreId) =>
+  useListenable(TABLE_IDS, useStoreOrStoreId(storeOrStoreId), [], []);
 const useTable = (tableId, storeOrStoreId) =>
-  useListenable('Table', useStoreOrStoreId(storeOrStoreId), {}, [tableId]);
-const useRowIds = (tableId, storeOrStoreId, trackReorder) =>
+  useListenable(TABLE, useStoreOrStoreId(storeOrStoreId), {}, [tableId]);
+const useRowIds = (tableId, storeOrStoreId) =>
+  useListenable(ROW_IDS, useStoreOrStoreId(storeOrStoreId), [], [tableId]);
+const useSortedRowIds = (
+  tableId,
+  cellId,
+  descending,
+  offset = 0,
+  limit,
+  storeOrStoreId,
+) =>
   useListenable(
-    'RowIds',
+    SORTED_ROW_IDS,
     useStoreOrStoreId(storeOrStoreId),
     [],
-    [tableId],
-    trackReorder,
+    [tableId, cellId, descending, offset, limit],
+    6,
   );
 const useRow = (tableId, rowId, storeOrStoreId) =>
-  useListenable('Row', useStoreOrStoreId(storeOrStoreId), {}, [tableId, rowId]);
-const useCellIds = (tableId, rowId, storeOrStoreId, trackReorder) =>
+  useListenable(ROW, useStoreOrStoreId(storeOrStoreId), {}, [tableId, rowId]);
+const useCellIds = (tableId, rowId, storeOrStoreId) =>
   useListenable(
-    'CellIds',
+    CELL_IDS,
     useStoreOrStoreId(storeOrStoreId),
     [],
     [tableId, rowId],
-    trackReorder,
   );
 const useCell = (tableId, rowId, cellId, storeOrStoreId) =>
-  useListenable('Cell', useStoreOrStoreId(storeOrStoreId), void 0, [
-    tableId,
-    rowId,
-    cellId,
-  ]);
+  useListenable(
+    CELL,
+    useStoreOrStoreId(storeOrStoreId),
+    void 0,
+    [tableId, rowId, cellId],
+    4,
+  );
 const useSetTablesCallback = (
   getTables,
   getTablesDeps,
@@ -177,7 +203,7 @@ const useSetTablesCallback = (
 ) =>
   useSetCallback(
     storeOrStoreId,
-    'Tables',
+    TABLES,
     getTables,
     getTablesDeps,
     then,
@@ -193,7 +219,7 @@ const useSetTableCallback = (
 ) =>
   useSetCallback(
     storeOrStoreId,
-    'Table',
+    TABLE,
     getTable,
     getTableDeps,
     then,
@@ -211,7 +237,7 @@ const useSetRowCallback = (
 ) =>
   useSetCallback(
     storeOrStoreId,
-    'Row',
+    ROW,
     getRow,
     getRowDeps,
     then,
@@ -269,7 +295,7 @@ const useSetCellCallback = (
 ) =>
   useSetCallback(
     storeOrStoreId,
-    'Cell',
+    CELL,
     getCell,
     getCellDeps,
     then,
@@ -279,11 +305,11 @@ const useSetCellCallback = (
     cellId,
   );
 const useDelTablesCallback = (storeOrStoreId, then, thenDeps) =>
-  useDel(storeOrStoreId, 'Tables', then, thenDeps);
+  useDel(storeOrStoreId, TABLES, then, thenDeps);
 const useDelTableCallback = (tableId, storeOrStoreId, then, thenDeps) =>
-  useDel(storeOrStoreId, 'Table', then, thenDeps, tableId);
+  useDel(storeOrStoreId, TABLE, then, thenDeps, tableId);
 const useDelRowCallback = (tableId, rowId, storeOrStoreId, then, thenDeps) =>
-  useDel(storeOrStoreId, 'Row', then, thenDeps, tableId, rowId);
+  useDel(storeOrStoreId, ROW, then, thenDeps, tableId, rowId);
 const useDelCellCallback = (
   tableId,
   rowId,
@@ -295,7 +321,7 @@ const useDelCellCallback = (
 ) =>
   useDel(
     storeOrStoreId,
-    'Cell',
+    CELL,
     then,
     thenDeps,
     tableId,
@@ -305,30 +331,38 @@ const useDelCellCallback = (
   );
 const useTablesListener = (listener, listenerDeps, mutator, storeOrStoreId) =>
   useListener(
-    'Tables',
+    TABLES,
+    useStoreOrStoreId(storeOrStoreId),
+    listener,
+    listenerDeps,
+    [],
+    mutator,
+  );
+const useTableIdsListener = (listener, listenerDeps, mutator, storeOrStoreId) =>
+  useListener(
+    TABLE_IDS,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
     [],
     mutator,
   );
-const useTableIdsListener = (
+const useTableListener = (
+  tableId,
   listener,
   listenerDeps,
-  trackReorder,
   mutator,
   storeOrStoreId,
 ) =>
   useListener(
-    'TableIds',
+    TABLE,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
-    [],
-    trackReorder,
+    [tableId],
     mutator,
   );
-const useTableListener = (
+const useRowIdsListener = (
   tableId,
   listener,
   listenerDeps,
@@ -336,28 +370,30 @@ const useTableListener = (
   storeOrStoreId,
 ) =>
   useListener(
-    'Table',
+    ROW_IDS,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
     [tableId],
     mutator,
   );
-const useRowIdsListener = (
+const useSortedRowIdsListener = (
   tableId,
+  cellId,
+  descending,
+  offset,
+  limit,
   listener,
   listenerDeps,
-  trackReorder,
   mutator,
   storeOrStoreId,
 ) =>
   useListener(
-    'RowIds',
+    SORTED_ROW_IDS,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
-    [tableId],
-    trackReorder,
+    [tableId, cellId, descending, offset, limit],
     mutator,
   );
 const useRowListener = (
@@ -369,7 +405,7 @@ const useRowListener = (
   storeOrStoreId,
 ) =>
   useListener(
-    'Row',
+    ROW,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
@@ -381,17 +417,15 @@ const useCellIdsListener = (
   rowId,
   listener,
   listenerDeps,
-  trackReorder,
   mutator,
   storeOrStoreId,
 ) =>
   useListener(
-    'CellIds',
+    CELL_IDS,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
     [tableId, rowId],
-    trackReorder,
     mutator,
   );
 const useCellListener = (
@@ -404,7 +438,7 @@ const useCellListener = (
   storeOrStoreId,
 ) =>
   useListener(
-    'Cell',
+    CELL,
     useStoreOrStoreId(storeOrStoreId),
     listener,
     listenerDeps,
@@ -550,6 +584,139 @@ const useLinkedRowIdsListener = (
     listenerDeps,
     [relationshipId, firstRowId],
   );
+const useCreateQueries = (store, create, createDeps) =>
+  useCreate(store, create, createDeps);
+const useResultTable = (queryId, queriesOrQueriesId) =>
+  useListenable('ResultTable', useQueriesOrQueriesId(queriesOrQueriesId), {}, [
+    queryId,
+  ]);
+const useResultRowIds = (queryId, queriesOrQueriesId) =>
+  useListenable(
+    'ResultRowIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    [],
+    [queryId],
+  );
+const useResultSortedRowIds = (
+  queryId,
+  cellId,
+  descending,
+  offset = 0,
+  limit,
+  queriesOrQueriesId,
+) =>
+  useListenable(
+    'ResultSortedRowIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    [],
+    [queryId, cellId, descending, offset, limit],
+    6,
+  );
+const useResultRow = (queryId, rowId, queriesOrQueriesId) =>
+  useListenable('ResultRow', useQueriesOrQueriesId(queriesOrQueriesId), {}, [
+    queryId,
+    rowId,
+  ]);
+const useResultCellIds = (queryId, rowId, queriesOrQueriesId) =>
+  useListenable(
+    'ResultCellIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    [],
+    [queryId, rowId],
+  );
+const useResultCell = (queryId, rowId, cellId, queriesOrQueriesId) =>
+  useListenable(
+    'ResultCell',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    void 0,
+    [queryId, rowId, cellId],
+  );
+const useResultTableListener = (
+  queryId,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultTable',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId],
+  );
+const useResultRowIdsListener = (
+  queryId,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultRowIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId],
+  );
+const useResultSortedRowIdsListener = (
+  queryId,
+  cellId,
+  descending,
+  offset,
+  limit,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultSortedRowIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId, cellId, descending, offset, limit],
+  );
+const useResultRowListener = (
+  queryId,
+  rowId,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultRow',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId, rowId],
+  );
+const useResultCellIdsListener = (
+  queryId,
+  rowId,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultCellIds',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId, rowId],
+  );
+const useResultCellListener = (
+  queryId,
+  rowId,
+  cellId,
+  listener,
+  listenerDeps,
+  queriesOrQueriesId,
+) =>
+  useListener(
+    'ResultCell',
+    useQueriesOrQueriesId(queriesOrQueriesId),
+    listener,
+    listenerDeps,
+    [queryId, rowId, cellId],
+  );
 const useCreateCheckpoints = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
 const useCheckpointIds = (checkpointsOrCheckpointsId) =>
@@ -673,6 +840,58 @@ const useCreatePersister = (
 };
 
 const {createElement, useMemo} = React;
+const tableView = (
+  {
+    tableId,
+    store,
+    rowComponent: Row = RowView,
+    getRowComponentProps,
+    separator,
+    debugIds,
+  },
+  rowIds,
+) =>
+  wrap(
+    arrayMap(rowIds, (rowId) =>
+      /* @__PURE__ */ createElement(Row, {
+        ...getProps(getRowComponentProps, rowId),
+        key: rowId,
+        tableId,
+        rowId,
+        store,
+        debugIds,
+      }),
+    ),
+    separator,
+    debugIds,
+    tableId,
+  );
+const resultTableView = (
+  {
+    queryId,
+    queries,
+    resultRowComponent: ResultRow = ResultRowView,
+    getResultRowComponentProps,
+    separator,
+    debugIds,
+  },
+  rowIds,
+) =>
+  wrap(
+    arrayMap(rowIds, (rowId) =>
+      /* @__PURE__ */ createElement(ResultRow, {
+        ...getProps(getResultRowComponentProps, rowId),
+        key: rowId,
+        queryId,
+        rowId,
+        queries,
+        debugIds,
+      }),
+    ),
+    separator,
+    debugIds,
+    queryId,
+  );
 const useRelationshipsStoreTableId = (relationships) => {
   const resolvedRelationships =
     useRelationshipsOrRelationshipsId(relationships);
@@ -746,6 +965,8 @@ const Provider = ({
   indexesById,
   relationships,
   relationshipsById,
+  queries,
+  queriesById,
   checkpoints,
   checkpointsById,
   children,
@@ -764,8 +985,10 @@ const Provider = ({
           {...thingsOrThingsId[5], ...indexesById},
           relationships ?? thingsOrThingsId[6],
           {...thingsOrThingsId[7], ...relationshipsById},
-          checkpoints ?? thingsOrThingsId[8],
-          {...thingsOrThingsId[9], ...checkpointsById},
+          queries ?? thingsOrThingsId[8],
+          {...thingsOrThingsId[9], ...queriesById},
+          checkpoints ?? thingsOrThingsId[10],
+          {...thingsOrThingsId[11], ...checkpointsById},
         ],
         [
           store,
@@ -776,6 +999,8 @@ const Provider = ({
           indexesById,
           relationships,
           relationshipsById,
+          queries,
+          queriesById,
           checkpoints,
           checkpointsById,
           thingsOrThingsId,
@@ -803,14 +1028,13 @@ const RowView = ({
   tableId,
   rowId,
   store,
-  trackReorder,
   cellComponent: Cell = CellView,
   getCellComponentProps,
   separator,
   debugIds,
 }) =>
   wrap(
-    arrayMap(useCellIds(tableId, rowId, store, trackReorder), (cellId) =>
+    arrayMap(useCellIds(tableId, rowId, store), (cellId) =>
       /* @__PURE__ */ createElement(Cell, {
         ...getProps(getCellComponentProps, cellId),
         key: cellId,
@@ -825,40 +1049,29 @@ const RowView = ({
     debugIds,
     rowId,
   );
-const TableView = ({
-  tableId,
-  store,
-  trackReorder,
-  rowComponent: Row = RowView,
-  getRowComponentProps,
-  separator,
-  debugIds,
-}) =>
-  wrap(
-    arrayMap(useRowIds(tableId, store, trackReorder), (rowId) =>
-      /* @__PURE__ */ createElement(Row, {
-        ...getProps(getRowComponentProps, rowId),
-        key: rowId,
-        tableId,
-        rowId,
-        store,
-        debugIds,
-      }),
+const TableView = (props) =>
+  tableView(props, useRowIds(props.tableId, props.store));
+const SortedTableView = ({cellId, descending, offset, limit, ...props}) =>
+  tableView(
+    props,
+    useSortedRowIds(
+      props.tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      props.store,
     ),
-    separator,
-    debugIds,
-    tableId,
   );
 const TablesView = ({
   store,
-  trackReorder,
   tableComponent: Table = TableView,
   getTableComponentProps,
   separator,
   debugIds,
 }) =>
   wrap(
-    arrayMap(useTableIds(store, trackReorder), (tableId) =>
+    arrayMap(useTableIds(store), (tableId) =>
       /* @__PURE__ */ createElement(Table, {
         ...getProps(getTableComponentProps, tableId),
         key: tableId,
@@ -964,6 +1177,53 @@ const LocalRowsView = (props) =>
   useComponentPerRow(props, useLocalRowIds, props.remoteRowId);
 const LinkedRowsView = (props) =>
   useComponentPerRow(props, useLinkedRowIds, props.firstRowId);
+const ResultCellView = ({queryId, rowId, cellId, queries, debugIds}) =>
+  wrap(
+    EMPTY_STRING +
+      (useResultCell(queryId, rowId, cellId, queries) ?? EMPTY_STRING),
+    void 0,
+    debugIds,
+    cellId,
+  );
+const ResultRowView = ({
+  queryId,
+  rowId,
+  queries,
+  resultCellComponent: ResultCell = ResultCellView,
+  getResultCellComponentProps,
+  separator,
+  debugIds,
+}) =>
+  wrap(
+    arrayMap(useResultCellIds(queryId, rowId, queries), (cellId) =>
+      /* @__PURE__ */ createElement(ResultCell, {
+        ...getProps(getResultCellComponentProps, cellId),
+        key: cellId,
+        queryId,
+        rowId,
+        cellId,
+        queries,
+        debugIds,
+      }),
+    ),
+    separator,
+    debugIds,
+    rowId,
+  );
+const ResultTableView = (props) =>
+  resultTableView(props, useResultRowIds(props.queryId, props.queries));
+const ResultSortedTableView = ({cellId, descending, offset, limit, ...props}) =>
+  resultTableView(
+    props,
+    useResultSortedRowIds(
+      props.queryId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      props.queries,
+    ),
+  );
 const CheckpointView = ({checkpoints, checkpointId, debugIds}) =>
   wrap(
     useCheckpoint(checkpointId, checkpoints) ?? EMPTY_STRING,
@@ -993,10 +1253,16 @@ export {
   MetricView,
   Provider,
   RemoteRowView,
+  ResultCellView,
+  ResultRowView,
+  ResultSortedTableView,
+  ResultTableView,
   RowView,
   SliceView,
+  SortedTableView,
   TableView,
   TablesView,
+  tableView,
   useAddRowCallback,
   useCell,
   useCellIds,
@@ -1011,6 +1277,7 @@ export {
   useCreateIndexes,
   useCreateMetrics,
   useCreatePersister,
+  useCreateQueries,
   useCreateRelationships,
   useCreateStore,
   useDelCellCallback,
@@ -1028,10 +1295,23 @@ export {
   useMetric,
   useMetricListener,
   useMetrics,
+  useQueries,
   useRedoInformation,
   useRelationships,
   useRemoteRowId,
   useRemoteRowIdListener,
+  useResultCell,
+  useResultCellIds,
+  useResultCellIdsListener,
+  useResultCellListener,
+  useResultRow,
+  useResultRowIds,
+  useResultRowIdsListener,
+  useResultRowListener,
+  useResultSortedRowIds,
+  useResultSortedRowIdsListener,
+  useResultTable,
+  useResultTableListener,
   useRow,
   useRowIds,
   useRowIdsListener,
@@ -1046,6 +1326,8 @@ export {
   useSliceIdsListener,
   useSliceRowIds,
   useSliceRowIdsListener,
+  useSortedRowIds,
+  useSortedRowIdsListener,
   useStore,
   useTable,
   useTableIds,