@xnetjs/react 2.0.0 → 2.1.0

package/dist/index.d.ts

@@ -581,8 +581,15 @@ interface UseGridDatabaseOptions {
     viewId?: string;
     /** Quick-find text (full-text search via SQLite FTS) */
     search?: string;
-    /** Row window size (default 500) */
+    /** Rows fetched per window grow (default 500) */
     pageSize?: number;
+    /**
+     * Ceiling on the live row window (default 2000). The window grows by
+     * `pageSize` via `fetchMoreRows` until this bound; beyond it further
+     * fetches are no-ops so the overfetch buffer and live snapshot stay
+     * bounded (exploration 0340).
+     */
+    maxLoaded?: number;
 }
 interface UseGridDatabaseResult {
     /** Database node (flattened) */
@@ -601,6 +608,14 @@ interface UseGridDatabaseResult {
     /** Rows: view filters + sorts applied to the fetched window */
     rows: GridRowModel[];
     loading: boolean;
+    /** Exact matching row count for the whole database (null while unknown). */
+    totalRowCount: number | null;
+    /** Whether the row window can grow further (more rows exist past it). */
+    hasMoreRows: boolean;
+    /** Whether a window grow is awaiting the larger read. */
+    isFetchingMoreRows: boolean;
+    /** Grow the row window by `pageSize` (bounded by `maxLoaded`). */
+    fetchMoreRows: () => Promise<void>;
     updateCell: (rowId: string, fieldId: string, value: CellValue) => Promise<void>;
     clearCells: (cells: Array<{
         rowId: string;

package/dist/index.js

@@ -4377,7 +4377,7 @@ function dropSortKey(ordered, movedId, targetIndex) {
 }
 var formulaService = new FormulaService();
 function useGridDatabase(databaseId, options = {}) {
-  const { viewId, search, pageSize = 500 } = options;
+  const { viewId, search, pageSize = 500, maxLoaded = 2e3 } = options;
   const mutate = useMutate();
   const { did } = useIdentity();
   const { data: database, status: dbStatus } = useQuery(DatabaseSchema, databaseId);
@@ -4393,10 +4393,22 @@ function useGridDatabase(databaseId, options = {}) {
     where: { database: databaseId },
     orderBy: { sortKey: "asc" }
   });
-  const { data: rowNodes, status: rowStatus } = useQuery(DatabaseRowSchema, {
+  const {
+    data: rowNodes,
+    // Masked while a window grow is in flight (previous rows stay visible):
+    // consumers must not fall back to a skeleton mid-grow or scroll position
+    // is lost — `isFetchingMoreRows` reports the in-flight grow instead.
+    loading: rowsLoading,
+    totalCount: totalRowCount,
+    hasMore: hasMoreRows,
+    isFetchingNextPage: isFetchingMoreRows,
+    fetchNextPage: fetchMoreRows
+  } = useInfiniteQuery(DatabaseRowSchema, {
     where: { database: databaseId },
     orderBy: { sortKey: "asc" },
-    limit: pageSize,
+    pageSize,
+    maxLoaded,
+    page: { count: "exact" },
     materializedView: `db:${databaseId}${viewId ? `:view:${viewId}` : ""}`,
     ...search ? { search } : {}
   });
@@ -4484,11 +4496,22 @@ function useGridDatabase(databaseId, options = {}) {
       cancelled = true;
     };
   }, [rowNodes, fields, store]);
+  const rowModelCacheRef = useRef4(
+    { deps: [], map: /* @__PURE__ */ new WeakMap() }
+  );
   const rows = useMemo5(() => {
+    const cacheDeps = [fields, rollupValues, databaseId];
+    if (cacheDeps.length !== rowModelCacheRef.current.deps.length || cacheDeps.some((d, i) => d !== rowModelCacheRef.current.deps[i])) {
+      rowModelCacheRef.current = { deps: cacheDeps, map: /* @__PURE__ */ new WeakMap() };
+    }
+    const cache = rowModelCacheRef.current.map;
     const autoFields = fields.filter(
       (f) => ["created", "createdBy", "updated", "updatedBy"].includes(f.type)
     );
-    const base = (rowNodes ?? []).map((node) => {
+    const formulaFields = fields.filter((f) => f.type === "formula");
+    const rollupFields = fields.filter((f) => f.type === "rollup");
+    const columnDefs = formulaFields.length > 0 || activeView ? fieldsToColumnDefinitions(fields) : [];
+    const buildRow = (node) => {
       const cells = fromCellProperties(node);
       for (const field of autoFields) {
         switch (field.type) {
@@ -4506,47 +4529,43 @@ function useGridDatabase(databaseId, options = {}) {
             break;
         }
       }
-      return {
+      const row = {
         id: node.id,
         sortKey: node.sortKey ?? "",
         cells
       };
-    });
-    const formulaFields = fields.filter((f) => f.type === "formula");
-    if (formulaFields.length > 0) {
-      const columnDefs = fieldsToColumnDefinitions(fields);
-      for (const row of base) {
-        for (const field of formulaFields) {
-          const columnDef = columnDefs.find((c) => c.id === field.id);
-          if (!columnDef) continue;
-          try {
-            row.cells[field.id] = formulaService.compute(
-              { id: row.id, databaseId, cells: row.cells },
-              columnDef,
-              columnDefs
-            );
-          } catch {
-            row.cells[field.id] = null;
-          }
+      for (const field of formulaFields) {
+        const columnDef = columnDefs.find((c) => c.id === field.id);
+        if (!columnDef) continue;
+        try {
+          row.cells[field.id] = formulaService.compute(
+            { id: row.id, databaseId, cells: row.cells },
+            columnDef,
+            columnDefs
+          );
+        } catch {
+          row.cells[field.id] = null;
         }
       }
-    }
-    if (rollupValues.size > 0) {
-      for (const row of base) {
-        for (const field of fields) {
-          if (field.type !== "rollup") continue;
-          const computed = rollupValues.get(`${row.id}:${field.id}`);
-          if (computed !== void 0) row.cells[field.id] = computed;
-        }
+      for (const field of rollupFields) {
+        const computed = rollupValues.get(`${row.id}:${field.id}`);
+        if (computed !== void 0) row.cells[field.id] = computed;
       }
-    }
+      return row;
+    };
+    const base = (rowNodes ?? []).map((node) => {
+      const hit = cache.get(node);
+      if (hit) return hit;
+      const row = buildRow(node);
+      cache.set(node, row);
+      return row;
+    });
     base.sort((a, b) => compareSortKeys(a.sortKey, b.sortKey));
     if (!activeView) return base;
-    const columns = fieldsToColumnDefinitions(fields);
-    const filtered = filterRows(base, columns, activeView.filters);
-    return sortRows(filtered, columns, activeView.sorts);
+    const filtered = filterRows(base, columnDefs, activeView.filters);
+    return sortRows(filtered, columnDefs, activeView.sorts);
   }, [rowNodes, activeView, fields, databaseId, rollupValues]);
-  const loading = dbStatus === "loading" || fieldStatus === "loading" || viewStatus === "loading" || rowStatus === "loading";
+  const loading = dbStatus === "loading" || fieldStatus === "loading" || viewStatus === "loading" || rowsLoading;
   const rowTailRef = useRef4(void 0);
   const fieldTailRef = useRef4(void 0);
   const viewTailRef = useRef4(void 0);
@@ -4899,6 +4918,10 @@ function useGridDatabase(databaseId, options = {}) {
     activeView,
     rows,
     loading,
+    totalRowCount,
+    hasMoreRows,
+    isFetchingMoreRows,
+    fetchMoreRows,
     updateCell,
     clearCells,
     addRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xnetjs/react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -46,15 +46,15 @@
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.24",
     "@xnetjs/billing": "0.0.2",
-    "@xnetjs/core": "2.0.0",
-    "@xnetjs/crypto": "2.0.0",
-    "@xnetjs/data": "2.0.0",
-    "@xnetjs/data-bridge": "2.0.0",
-    "@xnetjs/history": "2.0.0",
-    "@xnetjs/identity": "2.0.0",
-    "@xnetjs/plugins": "2.0.0",
-    "@xnetjs/runtime": "0.5.0",
-    "@xnetjs/sync": "2.0.0"
+    "@xnetjs/core": "2.1.0",
+    "@xnetjs/crypto": "2.1.0",
+    "@xnetjs/data": "2.1.0",
+    "@xnetjs/data-bridge": "2.1.0",
+    "@xnetjs/history": "2.1.0",
+    "@xnetjs/identity": "2.1.0",
+    "@xnetjs/plugins": "2.1.0",
+    "@xnetjs/runtime": "0.5.1",
+    "@xnetjs/sync": "2.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"