zubin-grid 0.41.13 → 0.42.13

package/dist/core/grid.js

@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { cell } from "./cell.js";
 import { assertGridId, createGridIdKey, formatGridId } from "./grid-id.js";
 import { createGridPersistController, defaultGridPersistAdapter } from "./persist.js";
@@ -28,10 +27,36 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
         createGridIdKey(boundId),
         cell(initialCells[index]),
     ]));
+    const dirtyBoundIdKeys = new Set();
+    const persistedCellValuesById = new Map(boundIds.map((boundId, index) => [createGridIdKey(boundId), initialCells[index]]));
     let dimensionGridApi;
+    const resetPersistedDimensionCells = () => {
+        persistedCellValuesById.clear();
+        boundIds.forEach((boundId) => {
+            const idKey = createGridIdKey(boundId);
+            persistedCellValuesById.set(idKey, cellsById.get(idKey)?.get());
+        });
+        dirtyBoundIdKeys.clear();
+    };
+    const syncDimensionCellDirty = (boundId) => {
+        const idKey = createGridIdKey(boundId);
+        const currentValue = cellsById.get(idKey)?.get();
+        if (!persistedCellValuesById.has(idKey)) {
+            if (currentValue === undefined)
+                dirtyBoundIdKeys.delete(idKey);
+            else
+                dirtyBoundIdKeys.add(idKey);
+            return;
+        }
+        if (haveSameRuntimeValue(currentValue, persistedCellValuesById.get(idKey))) {
+            dirtyBoundIdKeys.delete(idKey);
+            return;
+        }
+        dirtyBoundIdKeys.add(idKey);
+    };
     const getCellAtIndex = (index) => {
         if (!Number.isInteger(index) || index < 0 || index >= boundIds.length) {
-            throw new Error(`Dimension grid ${dimension} index ${index} is out of bounds.`);
+            throw new Error(`Dimension grid ${dimension} index ${index} is out of range. ${describeIndexRange(boundIds.length, index)}`);
         }
         const boundId = boundIds[index];
         const currentCell = cellsById.get(createGridIdKey(boundId));
@@ -40,6 +65,17 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
         }
         return currentCell;
     };
+    const readCellAtIndex = (index) => {
+        const currentCell = getCellAtIndex(index);
+        const boundId = boundIds[index];
+        return {
+            value: currentCell.get(),
+            meta: {
+                existsInDb: currentCell.get() !== undefined,
+                isDirty: dirtyBoundIdKeys.has(createGridIdKey(boundId)),
+            },
+        };
+    };
     const getState = () => ({
         dimension,
         cells: boundIds.map((boundId) => {
@@ -78,6 +114,12 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
         finally {
             isApplyingState = false;
         }
+        changedIndices.forEach((index) => {
+            const boundId = boundIds[index];
+            if (boundId !== undefined) {
+                syncDimensionCellDirty(boundId);
+            }
+        });
         return changedIndices;
     };
     const { hydrate, markStateChanged } = createGridPersistController(resolvedPersistOption, {
@@ -86,6 +128,8 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
             applyDimensionCells(normalizeDimensionGridStateInput(nextState, dimension).cells, "replace");
         },
         isApplyingState: () => isApplyingState,
+        onHydratedStateApplied: resetPersistedDimensionCells,
+        onPersistedStateApplied: resetPersistedDimensionCells,
     });
     const emitDimensionGridUpdate = (diff, persistStateChanged = false) => {
         if (persistStateChanged) {
@@ -110,6 +154,20 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
         nextCellsById.forEach((currentCell, boundIdKey) => {
             cellsById.set(boundIdKey, currentCell);
         });
+        const nextIdKeys = new Set(nextBoundIds.map((boundId) => createGridIdKey(boundId)));
+        [...persistedCellValuesById.keys()].forEach((idKey) => {
+            if (nextIdKeys.has(idKey))
+                return;
+            persistedCellValuesById.delete(idKey);
+            dirtyBoundIdKeys.delete(idKey);
+        });
+        nextBoundIds.forEach((boundId) => {
+            const idKey = createGridIdKey(boundId);
+            if (!persistedCellValuesById.has(idKey)) {
+                persistedCellValuesById.set(idKey, undefined);
+            }
+            syncDimensionCellDirty(boundId);
+        });
         emitDimensionGridUpdate({
             type: "dimension",
             action: previousSize === nextBoundIds.length ? "update" : "resize",
@@ -160,37 +218,43 @@ export function createDimensionGrid(parentGrid, initialCells, dimension, options
         },
         getState,
         setGrid,
-        getCell: getCellAtIndex,
-        getValue: (index) => getCellAtIndex(index).get(),
-        hasCell: (index) => Number.isInteger(index) && index >= 0 && index < boundIds.length,
-        clearGrid,
-        subscribeGrid: (callback) => {
-            dimensionSubscribers.add(callback);
-            return () => {
-                dimensionSubscribers.delete(callback);
-            };
-        },
-        __setCellValue: (index, newValue) => {
+        readCell: readCellAtIndex,
+        setCell: (index, nextValue) => {
+            const boundId = boundIds[index];
             const currentCell = getCellAtIndex(index);
-            if (Object.is(currentCell.get(), newValue)) {
+            const resolvedNextValue = resolveUpdater(nextValue, currentCell.get());
+            if (Object.is(currentCell.get(), resolvedNextValue)) {
                 return;
             }
             isApplyingState = true;
             try {
-                currentCell.set(newValue);
+                currentCell.set(resolvedNextValue);
             }
             finally {
                 isApplyingState = false;
             }
+            if (boundId !== undefined) {
+                syncDimensionCellDirty(boundId);
+            }
             emitDimensionGridUpdate({
                 type: "cells",
-                action: "update",
-                source: "cell.set",
+                action: resolvedNextValue === undefined ? "clear" : "update",
+                source: "setCell",
                 dimension,
                 size: boundIds.length,
                 indices: [index],
             }, true);
         },
+        getCell: getCellAtIndex,
+        getValue: (index) => getCellAtIndex(index).get(),
+        hasCell: (index) => Number.isInteger(index) && index >= 0 && index < boundIds.length,
+        clearGrid,
+        subscribeGrid: (callback) => {
+            dimensionSubscribers.add(callback);
+            return () => {
+                dimensionSubscribers.delete(callback);
+            };
+        },
     };
     Object.defineProperty(dimensionGridApi, "__persistOption", {
         value: resolvedPersistOption,
@@ -347,7 +411,12 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
     const columnTailUpdaters = new Map();
     const cellsMap = new Map();
     const cellSubscriptions = new Map();
+    const dirtyCellKeys = new Set();
     const gridSubscribers = new Set();
+    let persistedCellValues = new Map(initialCells.map(({ rowId, columnId, cell: currentCell }) => [
+        createGridKey(rowId, columnId),
+        currentCell.get(),
+    ]));
     let nextRowFallbackOrder = initialRows.length;
     let nextColumnFallbackOrder = initialColumns.length;
     let isApplyingState = false;
@@ -374,6 +443,44 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
     const normalizeCellValue = (rowId, columnId, value) => {
         return stateAdapter.deserializeCell(stateAdapter.serializeCell(rowId, columnId, value)).value;
     };
+    const assertCellAxesExist = (rowId, columnId) => {
+        if (!rowHeadCells.has(createGridIdKey(rowId))) {
+            throw new Error(`Missing row header "${formatGridId(rowId)}".`);
+        }
+        if (!columnHeadCells.has(createGridIdKey(columnId))) {
+            throw new Error(`Missing column header "${formatGridId(columnId)}".`);
+        }
+    };
+    const syncDirtyCellKey = (gridKey) => {
+        const currentCell = cellsMap.get(gridKey);
+        if (!persistedCellValues.has(gridKey)) {
+            if (!currentCell)
+                dirtyCellKeys.delete(gridKey);
+            else
+                dirtyCellKeys.add(gridKey);
+            return;
+        }
+        if (currentCell &&
+            haveSameRuntimeValue(currentCell.get(), persistedCellValues.get(gridKey))) {
+            dirtyCellKeys.delete(gridKey);
+            return;
+        }
+        dirtyCellKeys.add(gridKey);
+    };
+    const refreshDirtyCellKeys = () => {
+        const nextGridKeys = new Set([...persistedCellValues.keys(), ...cellsMap.keys()]);
+        dirtyCellKeys.clear();
+        nextGridKeys.forEach((gridKey) => {
+            syncDirtyCellKey(gridKey);
+        });
+    };
+    const resetPersistedCellState = () => {
+        persistedCellValues = new Map([...cellsMap.entries()].map(([gridKey, currentCell]) => [
+            gridKey,
+            currentCell.get(),
+        ]));
+        dirtyCellKeys.clear();
+    };
     const recomputeRowTailInternal = (rowId) => {
         const onRowUpdate = rowTailUpdaters.get(createGridIdKey(rowId));
         if (!onRowUpdate)
@@ -410,12 +517,7 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         cellsMap.delete(gridKey);
     };
     const attachCell = (rowId, columnId, currentCell) => {
-        if (!rowHeadCells.has(createGridIdKey(rowId))) {
-            throw new Error(`Missing row header "${formatGridId(rowId)}".`);
-        }
-        if (!columnHeadCells.has(createGridIdKey(columnId))) {
-            throw new Error(`Missing column header "${formatGridId(columnId)}".`);
-        }
+        assertCellAxesExist(rowId, columnId);
         const gridKey = createGridKey(rowId, columnId);
         if (cellsMap.has(gridKey)) {
             throw new Error(`Duplicate cell for row "${formatGridId(rowId)}" and column "${formatGridId(columnId)}".`);
@@ -428,6 +530,7 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
                 previousValue = nextValue;
                 return;
             }
+            syncDirtyCellKey(gridKey);
             const rowTailIds = recomputeRowTailInternal(rowId) ? [rowId] : [];
             const columnTailIds = recomputeColumnTailInternal(columnId) ? [columnId] : [];
             emitGridUpdate({
@@ -447,12 +550,25 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         cellSubscriptions.set(gridKey, unsubscribe);
     };
     const getCell = (rowId, columnId) => {
+        assertCellAxesExist(rowId, columnId);
         const currentCell = cellsMap.get(createGridKey(rowId, columnId));
         if (!currentCell) {
             throw new Error(`Missing cell for row "${formatGridId(rowId)}" and column "${formatGridId(columnId)}".`);
         }
         return currentCell;
     };
+    const readCell = (rowId, columnId) => {
+        assertCellAxesExist(rowId, columnId);
+        const gridKey = createGridKey(rowId, columnId);
+        const currentCell = cellsMap.get(gridKey);
+        return {
+            value: currentCell?.get(),
+            meta: {
+                existsInDb: currentCell !== undefined,
+                isDirty: dirtyCellKeys.has(gridKey),
+            },
+        };
+    };
     const createAxisCellSnapshot = (rowId, columnId) => {
         const currentCell = getCell(rowId, columnId);
         return {
@@ -548,6 +664,7 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         const rowTailIds = recomputeAllRowTails();
         const columnTailIds = recomputeAllColumnTails();
         refreshAxisIdsSnapshot();
+        refreshDirtyCellKeys();
         return {
             rowTailIds,
             columnTailIds,
@@ -557,6 +674,8 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         getState,
         replaceState,
         isApplyingState: () => isApplyingState,
+        onHydratedStateApplied: resetPersistedCellState,
+        onPersistedStateApplied: resetPersistedCellState,
     });
     const emitGridUpdate = (diff, persistStateChanged = false) => {
         refreshAxisIdsSnapshot();
@@ -605,6 +724,9 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         finally {
             isApplyingState = false;
         }
+        cellKeys.forEach((gridKey) => {
+            syncDirtyCellKey(gridKey);
+        });
         const rowIds = [...touchedRowIds.values()];
         const columnIds = [...touchedColumnIds.values()];
         return {
@@ -803,6 +925,66 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
     const upsertCell = (nextCell) => {
         emitCellUpsert("upsertCell", [nextCell]);
     };
+    const setCell = (rowId, columnId, nextValue) => {
+        assertCellAxesExist(rowId, columnId);
+        const gridKey = createGridKey(rowId, columnId);
+        const currentCell = cellsMap.get(gridKey);
+        const currentValue = currentCell?.get();
+        const resolvedNextValue = resolveUpdater(nextValue, currentValue);
+        if (resolvedNextValue === undefined) {
+            if (!currentCell) {
+                return;
+            }
+            detachCell(gridKey);
+            syncDirtyCellKey(gridKey);
+            const rowTailIds = recomputeRowTailInternal(rowId) ? [rowId] : [];
+            const columnTailIds = recomputeColumnTailInternal(columnId) ? [columnId] : [];
+            emitGridUpdate({
+                type: "cells",
+                action: "clear",
+                source: "setCell",
+                rowIds: [rowId],
+                columnIds: [columnId],
+                rowTailIds: toOptionalArray(rowTailIds),
+                columnTailIds: toOptionalArray(columnTailIds),
+                cellKeys: [gridKey],
+                previousCells: [
+                    stateAdapter.serializeCell(rowId, columnId, currentValue),
+                ],
+            }, true);
+            return;
+        }
+        const normalizedValue = normalizeCellValue(rowId, columnId, resolvedNextValue);
+        isApplyingState = true;
+        try {
+            if (currentCell) {
+                currentCell.set(normalizedValue);
+            }
+            else {
+                attachCell(rowId, columnId, cell(normalizedValue));
+            }
+        }
+        finally {
+            isApplyingState = false;
+        }
+        syncDirtyCellKey(gridKey);
+        const rowTailIds = recomputeRowTailInternal(rowId) ? [rowId] : [];
+        const columnTailIds = recomputeColumnTailInternal(columnId) ? [columnId] : [];
+        emitGridUpdate({
+            type: "cells",
+            action: currentCell ? "update" : "upsert",
+            source: "setCell",
+            rowIds: [rowId],
+            columnIds: [columnId],
+            rowTailIds: toOptionalArray(rowTailIds),
+            columnTailIds: toOptionalArray(columnTailIds),
+            cellKeys: [gridKey],
+            cells: [stateAdapter.serializeCell(rowId, columnId, normalizedValue)],
+            previousCells: currentCell
+                ? [stateAdapter.serializeCell(rowId, columnId, currentValue)]
+                : undefined,
+        }, true);
+    };
     function getState() {
         const rows = getOrderedRowHeads();
         const columns = getOrderedColumnHeads();
@@ -1012,31 +1194,10 @@ function createGridStore(initialRows, initialColumns, initialCells, stateAdapter
         },
         getState,
         setGrid,
+        readCell,
+        setCell,
         getCell,
         getValue: (rowId, columnId) => getCell(rowId, columnId).get(),
-        __setCellValue: (rowId, columnId, newValue) => {
-            const currentCell = getCell(rowId, columnId);
-            isApplyingState = true;
-            try {
-                currentCell.set(normalizeCellValue(rowId, columnId, newValue));
-            }
-            finally {
-                isApplyingState = false;
-            }
-            const rowTailIds = recomputeRowTailInternal(rowId) ? [rowId] : [];
-            const columnTailIds = recomputeColumnTailInternal(columnId) ? [columnId] : [];
-            emitGridUpdate({
-                type: "cells",
-                action: "update",
-                source: "cell.set",
-                rowIds: [rowId],
-                columnIds: [columnId],
-                rowTailIds: toOptionalArray(rowTailIds),
-                columnTailIds: toOptionalArray(columnTailIds),
-                cellKeys: [createGridKey(rowId, columnId)],
-                cells: [stateAdapter.serializeCell(rowId, columnId, currentCell.get())],
-            }, true);
-        },
         hasCell: (rowId, columnId) => cellsMap.has(createGridKey(rowId, columnId)),
         getRowHead: (rowId) => getHeadCell(rowHeadCells, rowId, "row").get(),
         getColumnHead: (columnId) => getHeadCell(columnHeadCells, columnId, "column").get(),
@@ -1094,40 +1255,44 @@ function resolveUpdater(nextValue, currentValue) {
 export function createGridKey(rowId, columnId) {
     return `row=${createGridIdKey(rowId)}|col=${createGridIdKey(columnId)}`;
 }
-export function useGrid(currentGrid, options) {
-    const snapshotRef = useRef({
-        rows: currentGrid.rowHeaders,
-        cols: currentGrid.colHeaders,
-    });
-    const onGridUpdateRef = useRef(options?.onGridUpdate);
-    useEffect(() => {
-        onGridUpdateRef.current = options?.onGridUpdate;
-    }, [options?.onGridUpdate]);
-    useEffect(() => {
-        return currentGrid.subscribeGrid((updatedGrid, diff) => {
-            onGridUpdateRef.current?.(updatedGrid, diff);
-        });
-    }, [currentGrid]);
-    const subscribe = useCallback((callback) => currentGrid.subscribeGrid(() => callback()), [currentGrid]);
-    const getSnapshot = useCallback(() => {
-        const nextRows = currentGrid.rowHeaders;
-        const nextCols = currentGrid.colHeaders;
-        const currentSnapshot = snapshotRef.current;
-        if (currentSnapshot.rows === nextRows && currentSnapshot.cols === nextCols) {
-            return currentSnapshot;
-        }
-        const nextSnapshot = {
-            rows: nextRows,
-            cols: nextCols,
-        };
-        snapshotRef.current = nextSnapshot;
-        return nextSnapshot;
-    }, [currentGrid]);
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
 function toOptionalArray(values) {
     return values.length === 0 ? undefined : values;
 }
+function describeIndexRange(size, index) {
+    if (size === 0) {
+        return `The grid currently has no items, so index ${index} cannot be selected.`;
+    }
+    return `Expected an index between 0 and ${size - 1} (${size} total items).`;
+}
+function haveSameRuntimeValue(leftValue, rightValue) {
+    if (Object.is(leftValue, rightValue)) {
+        return true;
+    }
+    if (leftValue instanceof Date && rightValue instanceof Date) {
+        return leftValue.getTime() === rightValue.getTime();
+    }
+    if (Array.isArray(leftValue) && Array.isArray(rightValue)) {
+        return (leftValue.length === rightValue.length &&
+            leftValue.every((currentValue, index) => haveSameRuntimeValue(currentValue, rightValue[index])));
+    }
+    if (!isPlainObject(leftValue) || !isPlainObject(rightValue)) {
+        return false;
+    }
+    const leftKeys = Object.keys(leftValue);
+    const rightKeys = Object.keys(rightValue);
+    if (leftKeys.length !== rightKeys.length) {
+        return false;
+    }
+    return leftKeys.every((key) => {
+        if (!(key in rightValue)) {
+            return false;
+        }
+        return haveSameRuntimeValue(leftValue[key], rightValue[key]);
+    });
+}
+function isPlainObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function haveSameItems(left, right) {
     return (left.length === right.length &&
         left.every((currentValue, index) => createGridIdKey(currentValue) === createGridIdKey(right[index])));