muya 2.4.3 → 2.4.5

package/src/sqlite/use-sqlite.ts

@@ -1,13 +1,22 @@
-import { useCallback, useDebugValue, useEffect, useId, useLayoutEffect, useMemo, type DependencyList } from 'react'
+/* eslint-disable sonarjs/cognitive-complexity */
+import { useCallback, useLayoutEffect, useReducer, useRef, type DependencyList } from 'react'
 import type { SyncTable } from './create-sqlite'
-import type { DocType } from './table/table.types'
-import { isError, isPromise } from '../utils/is'
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
-import type { SqlSeachOptions } from './select-sql'
+import type { DocType, Key, SqlSeachOptions } from './table/table.types'
+import { DEFAULT_PAGE_SIZE } from './table'
+const MAX_ITERATIONS = 10_000
 
 export interface SqLiteActions {
-  readonly next: () => Promise<boolean>
+  /**
+   * Load the next page of results and return if isDone to show more results.
+   * @returns isDone: boolean
+   */
+  readonly nextPage: () => Promise<boolean>
+  /**
+   * Reset the pagination and load the first page of results.
+   * @returns void
+   */
   readonly reset: () => Promise<void>
+  readonly keysIndex: Map<Key, number>
 }
 
 export interface UseSearchOptions<Document extends DocType, Selected = Document> extends SqlSeachOptions<Document> {
@@ -18,101 +27,160 @@ export interface UseSearchOptions<Document extends DocType, Selected = Document>
 }
 
 /**
- * Generate a cache key based on the search options to uniquely identify the query
- * @param options The search options to generate the key from
- * @returns A string representing the unique cache key for the given search options
- */
-function generateCacheKey(options: UseSearchOptions<DocType, unknown>): string {
-  const { limit, offset, order, sortBy, where, stepSize, select } = options
-  let key = ''
-  if (limit !== undefined) {
-    key += `l${limit}`
-  }
-  if (offset !== undefined) {
-    key += `o${offset}`
-  }
-  if (order !== undefined) {
-    key += `r${order}`
-  }
-  if (sortBy !== undefined) {
-    key += `s${sortBy}`
-  }
-  if (where !== undefined) {
-    key += `w${JSON.stringify(where)}`
-  }
-  if (stepSize !== undefined) {
-    key += `t${stepSize}`
-  }
-  if (select !== undefined) {
-    key += `f${select.toString()}`
-  }
-  return key
-}
-
-/**
- * React hook to subscribe to a SyncTable and get its current snapshot, with optional search options and selector for derived state
- * @param state The SyncTable to subscribe to
- * @param options Optional search options to filter and sort the documents
- * @param deps Dependency list to control when to update the search options
- * @returns A tuple containing the current array of documents (or selected documents) and an object with actions to interact with the SyncTable
- * @throws If the value is a Promise or an Error, it will be thrown to be handled by an error boundary or suspense
+ * A React hook to perform paginated searches on a SyncTable and reactively update the results.
+ * It supports pagination, resetting the search, and selecting specific fields from the documents.
+ * @param state The SyncTable instance to perform searches on.
+ * @param options Options to customize the search behavior, including pagination size and selection function.
+ * @param deps Dependency list to control when to re-run the search and reset the iterator.
+ * @returns A tuple containing the current list of results and an object with actions to manage pagination and resetting.
  */
 export function useSqliteValue<Document extends DocType, Selected = Document>(
   state: SyncTable<Document>,
   options: UseSearchOptions<Document, Selected> = {},
   deps: DependencyList = [],
-): [undefined extends Selected ? Document[] : Selected[], SqLiteActions] {
-  const { select } = options
+): [(undefined extends Selected ? Document[] : Selected[]) | undefined, SqLiteActions] {
+  const { select, pageSize = DEFAULT_PAGE_SIZE } = options
 
-  const searchId = useMemo(() => generateCacheKey({ ...options, select: undefined }), [options])
-  const componentId = useId()
+  const itemsRef = useRef<undefined | (Document | Selected)[]>()
+  const [, rerender] = useReducer((c: number) => c + 1, 0)
+  const keysIndex = useRef(new Map<Key, number>())
+  const iteratorRef = useRef<AsyncIterableIterator<{ doc: Document; meta: { key: Key } }>>()
 
-  useLayoutEffect(() => {
-    state.updateSearchOptions(searchId, { ...options, select: undefined })
+  const updateIterator = useCallback(() => {
+    // eslint-disable-next-line sonarjs/no-unused-vars
+    const { select: _ignore, ...resetOptions } = options
+    iteratorRef.current = state.search({ select: (doc, meta) => ({ doc, meta }), ...resetOptions })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
+  }, [state, ...deps])
 
-  useEffect(() => {
-    return () => {
-      state.clear(searchId)
+  const reset = useCallback(() => {
+    itemsRef.current = []
+    keysIndex.current.clear()
+    updateIterator()
+  }, [updateIterator])
+
+  const fillNextPage = useCallback(async (shouldReset: boolean) => {
+    if (itemsRef.current === undefined) {
+      itemsRef.current = []
+    }
+    if (shouldReset === true) {
+      reset()
+    }
+
+    const { current: iterator } = iteratorRef
+    if (!iterator) {
+      return true
     }
+    let isDone = false
+    for (let index = 0; index < pageSize; index++) {
+      const result = await iterator.next()
+      if (result.done) {
+        iteratorRef.current = undefined
+        isDone = true
+        break
+      }
+      if (keysIndex.current.has(result.value.meta.key)) {
+        // eslint-disable-next-line sonarjs/updated-loop-counter
+        index += -1
+        continue
+      }
+      itemsRef.current.push(select ? select(result.value.doc) : (result.value.doc as unknown as Selected))
+      keysIndex.current.set(result.value.meta.key, itemsRef.current.length - 1)
+    }
+    return isDone
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const selector = useCallback(
-    (documents: Document[]) => {
-      // eslint-disable-next-line unicorn/no-array-callback-reference
-      return select ? documents.map(select) : (documents as unknown as Selected[])
-    },
-    [select],
-  )
-
-  const subscribe = useCallback(
-    (onStorageChange: () => void) => {
-      return state.subscribe(searchId, componentId, onStorageChange)
-    },
-    [state, searchId, componentId],
-  )
-
-  const getSnapshot = useCallback(() => {
-    return state.getSnapshot(searchId)
-  }, [state, searchId])
-
-  const value = useSyncExternalStoreWithSelector<Document[], Selected[]>(subscribe, getSnapshot, getSnapshot, selector)
-
-  useDebugValue(value)
-  if (isPromise(value)) {
-    throw value
-  }
-  if (isError(value)) {
-    throw value
-  }
-
-  const actions = useMemo((): SqLiteActions => {
-    return {
-      next: () => state.next(searchId),
-      reset: () => state.refresh(searchId),
+  const nextPage = useCallback(async () => {
+    const isDone = await fillNextPage(false)
+    rerender()
+    return isDone
+  }, [fillNextPage])
+
+  useLayoutEffect(() => {
+    const unsubscribe = state.subscribe(async (item) => {
+      const { mutations, removedAll } = item
+      if (removedAll) {
+        reset()
+      }
+      if (!mutations) {
+        return
+      }
+
+      const oldLength = itemsRef.current?.length ?? 0
+      let newLength = oldLength
+      let hasUpdate = false
+      for (const mutation of mutations) {
+        const { key, op } = mutation
+        switch (op) {
+          case 'insert': {
+            newLength += 1
+            break
+          }
+          case 'delete': {
+            if (itemsRef.current && keysIndex.current.has(key)) {
+              const index = keysIndex.current.get(key)
+              if (index === undefined) break
+              itemsRef.current.splice(index, 1)
+              keysIndex.current.delete(key)
+              hasUpdate = true
+            }
+            break
+          }
+          case 'update': {
+            if (itemsRef.current && keysIndex.current.has(key)) {
+              const index = keysIndex.current.get(key)
+              if (index === undefined) break
+              itemsRef.current[index] = (await state.get(key, select)) as Selected
+              hasUpdate = true
+            }
+            break
+          }
+        }
+      }
+
+      const isLengthChanged = oldLength !== newLength
+      const isChanged = isLengthChanged || hasUpdate
+      if (!isChanged) return
+      if (isLengthChanged) {
+        await fillNextPage(true)
+
+        // here we ensure that if the length changed, we fill the next page
+
+        let iterations = 0
+        while ((itemsRef.current?.length ?? 0) < newLength && iterations < MAX_ITERATIONS) {
+          await fillNextPage(false)
+          iterations++
+        }
+        if (iterations === MAX_ITERATIONS) {
+          // Optionally log a warning to help with debugging
+          // eslint-disable-next-line no-console
+          console.warn('Reached maximum iterations in fillNextPage loop. Possible duplicate or data issue.')
+        }
+      }
+      rerender()
+    })
+    return () => {
+      unsubscribe()
     }
-  }, [searchId, state])
-  return [value as undefined extends Selected ? Document[] : Selected[], actions]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state])
+
+  useLayoutEffect(() => {
+    updateIterator()
+    itemsRef.current = undefined
+    keysIndex.current.clear()
+    nextPage()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  const resetCb = useCallback(async () => {
+    reset()
+    await nextPage()
+  }, [nextPage, reset])
+
+  return [itemsRef.current, { nextPage, reset: resetCb, keysIndex: keysIndex.current }] as [
+    (undefined extends Selected ? Document[] : Selected[]) | undefined,
+    SqLiteActions,
+  ]
 }

package/types/scheduler.d.ts

@@ -4,7 +4,7 @@ export declare const RESCHEDULE_COUNT = 0;
 type ScheduleId = string | number | symbol;
 export interface SchedulerOptions<T> {
     readonly onResolveItem?: (item: T) => void;
-    readonly onScheduleDone: () => void | Promise<void>;
+    readonly onScheduleDone: (values?: unknown[]) => void | Promise<void>;
 }
 /**
  * A simple scheduler to batch updates and avoid blocking the main thread

package/types/sqlite/create-sqlite.d.ts

@@ -1,16 +1,15 @@
-import { type CreateState } from './select-sql';
 import type { Backend } from './table';
 import type { DbOptions, DocType, Key, MutationResult, SearchOptions } from './table/table.types';
 import type { Where } from './table/where';
-type SearchId = string;
 export interface CreateSqliteOptions<Document extends DocType> extends Omit<DbOptions<Document>, 'backend'> {
     readonly backend: Backend | Promise<Backend>;
 }
+export interface MutationItems {
+    mutations?: MutationResult[];
+    removedAll?: boolean;
+}
 export interface SyncTable<Document extends DocType> {
-    readonly updateSearchOptions: <Selected = Document>(searchId: SearchId, options: SearchOptions<Document, Selected>) => void;
-    readonly subscribe: (searchId: SearchId, componentId: string, listener: () => void) => () => void;
-    readonly getSnapshot: (searchId: SearchId) => Document[];
-    readonly refresh: (searchId: SearchId) => Promise<void>;
+    readonly subscribe: (listener: (mutation: MutationItems) => void) => () => void;
     readonly set: (document: Document) => Promise<MutationResult>;
     readonly batchSet: (documents: Document[]) => Promise<MutationResult[]>;
     readonly get: <Selected = Document>(key: Key, selector?: (document: Document) => Selected) => Promise<Selected | undefined>;
@@ -20,10 +19,7 @@ export interface SyncTable<Document extends DocType> {
         where?: Where<Document>;
     }) => Promise<number>;
     readonly deleteBy: (where: Where<Document>) => Promise<MutationResult[]>;
-    readonly destroy: () => void;
-    readonly next: (searchId: SearchId) => Promise<boolean>;
-    readonly clear: (searchId: SearchId) => void;
-    readonly select: <Params extends unknown[]>(compute: (...args: Params) => SearchOptions<Document>) => CreateState<Document, Params>;
+    readonly clear: () => void;
 }
 /**
  * Create a SyncTable that wraps a Table and provides reactive capabilities
@@ -31,4 +27,3 @@ export interface SyncTable<Document extends DocType> {
  * @returns A SyncTable instance with methods to interact with the underlying Table and manage reactive searches
  */
 export declare function createSqliteState<Document extends DocType>(options: CreateSqliteOptions<Document>): SyncTable<Document>;
-export {};

package/types/sqlite/index.d.ts

@@ -1,4 +1,4 @@
 export * from './create-sqlite';
 export * from './table';
-export * from './select-sql';
+export * from './use-sqlite-count';
 export * from './use-sqlite';

package/types/sqlite/table/table.d.ts

@@ -1,5 +1,5 @@
 import type { Table, DbOptions, DocType } from './table.types';
-export declare const DEFAULT_STEP_SIZE = 100;
+export declare const DEFAULT_PAGE_SIZE = 100;
 /**
  * Convert a dot-separated path to a JSON path
  * @param dot The dot-separated path string

package/types/sqlite/table/table.types.d.ts

@@ -1,4 +1,3 @@
-import type { SqlSeachOptions } from '../select-sql';
 import type { Backend } from './backend';
 import type { FtsTokenizerOptions } from './tokenizer';
 import type { Where } from './where';
@@ -6,6 +5,14 @@ export type DocType = {
     [key: string]: any;
 };
 export type KeyTypeAvailable = 'string' | 'number';
+export interface SqlSeachOptions<Document extends DocType> {
+    readonly sortBy?: DotPath<Document>;
+    readonly order?: 'asc' | 'desc';
+    readonly limit?: number;
+    readonly offset?: number;
+    readonly where?: Where<Document>;
+    readonly pageSize?: number;
+}
 export type DotPrefix<T extends string> = T extends '' ? '' : `.${T}`;
 type Previous = [never, 0, 1, 2, 3, 4, 5];
 export type DotPath<T, D extends number = 5> = [D] extends [never] ? never : T extends object ? {

package/types/sqlite/use-sqlite-count.d.ts

@@ -0,0 +1,17 @@
+import { type DependencyList } from 'react';
+import type { SyncTable } from './create-sqlite';
+import type { DocType } from './table/table.types';
+import type { Where } from './table/where';
+/**
+ * A React hook to count the number of items in a SyncTable reactively.
+ * It updates the count when items are inserted or deleted, but ignores updates.
+ * Supports filtering the count using a `where` clause.
+ * @param state The SyncTable instance to observe.
+ * @param options Optional filtering options.
+ * @param options.where A `where` clause to filter the count.
+ * @param deps Dependency list to control when to re-run the effect.
+ * @returns The current count of items in the table.
+ */
+export declare function useSqliteCount<Document extends DocType>(state: SyncTable<Document>, options?: {
+    where?: Where<Document>;
+}, deps?: DependencyList): number;

package/types/sqlite/use-sqlite.d.ts

@@ -1,10 +1,18 @@
 import { type DependencyList } from 'react';
 import type { SyncTable } from './create-sqlite';
-import type { DocType } from './table/table.types';
-import type { SqlSeachOptions } from './select-sql';
+import type { DocType, Key, SqlSeachOptions } from './table/table.types';
 export interface SqLiteActions {
-    readonly next: () => Promise<boolean>;
+    /**
+     * Load the next page of results and return if isDone to show more results.
+     * @returns isDone: boolean
+     */
+    readonly nextPage: () => Promise<boolean>;
+    /**
+     * Reset the pagination and load the first page of results.
+     * @returns void
+     */
     readonly reset: () => Promise<void>;
+    readonly keysIndex: Map<Key, number>;
 }
 export interface UseSearchOptions<Document extends DocType, Selected = Document> extends SqlSeachOptions<Document> {
     /**
@@ -13,11 +21,11 @@ export interface UseSearchOptions<Document extends DocType, Selected = Document>
     readonly select?: (document: Document) => Selected;
 }
 /**
- * React hook to subscribe to a SyncTable and get its current snapshot, with optional search options and selector for derived state
- * @param state The SyncTable to subscribe to
- * @param options Optional search options to filter and sort the documents
- * @param deps Dependency list to control when to update the search options
- * @returns A tuple containing the current array of documents (or selected documents) and an object with actions to interact with the SyncTable
- * @throws If the value is a Promise or an Error, it will be thrown to be handled by an error boundary or suspense
+ * A React hook to perform paginated searches on a SyncTable and reactively update the results.
+ * It supports pagination, resetting the search, and selecting specific fields from the documents.
+ * @param state The SyncTable instance to perform searches on.
+ * @param options Options to customize the search behavior, including pagination size and selection function.
+ * @param deps Dependency list to control when to re-run the search and reset the iterator.
+ * @returns A tuple containing the current list of results and an object with actions to manage pagination and resetting.
  */
-export declare function useSqliteValue<Document extends DocType, Selected = Document>(state: SyncTable<Document>, options?: UseSearchOptions<Document, Selected>, deps?: DependencyList): [undefined extends Selected ? Document[] : Selected[], SqLiteActions];
+export declare function useSqliteValue<Document extends DocType, Selected = Document>(state: SyncTable<Document>, options?: UseSearchOptions<Document, Selected>, deps?: DependencyList): [(undefined extends Selected ? Document[] : Selected[]) | undefined, SqLiteActions];