@rowsncolumns/y-spreadsheet 14.0.32

package/dist/esm/use-yspreadsheet.d.ts

@@ -0,0 +1,39 @@
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { CellData, Collaborator, ConditionalFormatRule, DataValidationRuleRecord, EmbeddedChart, EmbeddedObject, NamedRange, ProtectedRange, Sheet, TableView } from "@rowsncolumns/spreadsheet";
+import type { CalculateNowOptions, CalculationOperation, HistoryType, SheetData, SpreadsheetPatch } from "@rowsncolumns/spreadsheet-state";
+import type { Patch } from "immer";
+import type { WebsocketProvider } from "y-websocket";
+import type * as Y from "yjs";
+export type useYSpreadsheetProps<T extends CellData, S extends Sheet, C extends EmbeddedChart, O extends EmbeddedObject> = {
+    userId: string | number;
+    title: string;
+    sheetId: number;
+    activeCell?: CellInterface;
+    provider?: HocuspocusProvider | WebsocketProvider | any;
+    doc: Y.Doc;
+    calculateNow(options?: CalculateNowOptions): void;
+    onChangeSheetData: React.Dispatch<React.SetStateAction<SheetData<T>>>;
+    onChangeTables: React.Dispatch<React.SetStateAction<TableView[]>>;
+    onChangeSheets: React.Dispatch<React.SetStateAction<S[]>>;
+    onChangeCharts?: React.Dispatch<React.SetStateAction<C[]>>;
+    onChangeEmbeds?: React.Dispatch<React.SetStateAction<O[]>>;
+    onChangeNamedRanges?: React.Dispatch<React.SetStateAction<NamedRange[]>>;
+    onChangeProtectedRanges?: React.Dispatch<React.SetStateAction<ProtectedRange[]>>;
+    onChangeConditionalFormats?: React.Dispatch<React.SetStateAction<ConditionalFormatRule[]>>;
+    onChangeDataValidations?: React.Dispatch<React.SetStateAction<DataValidationRuleRecord[]>>;
+    enqueueCalculation: (operation: CalculationOperation) => void;
+    onError?(err: unknown): void;
+    onInitialDataLoaded?(): void;
+};
+/**
+ * Connects to a Y server and picks up the most recent change
+ * Does not load initial data
+ * @returns
+ */
+export declare const useYSpreadsheet: <T extends CellData, S extends Sheet, C extends EmbeddedChart, O extends EmbeddedObject>({ onChangeSheetData, onChangeSheets, onChangeTables, onChangeCharts, onChangeEmbeds, onChangeConditionalFormats, onChangeDataValidations, onChangeNamedRanges, onChangeProtectedRanges, onError, enqueueCalculation, calculateNow, userId, title, sheetId, activeCell, doc, provider, }: useYSpreadsheetProps<T, S, C, O>) => {
+    onBroadcastPatch: (patches: [patch: SpreadsheetPatch<Patch>, type?: HistoryType | undefined][]) => void;
+    users: Collaborator[];
+    synced: boolean;
+};
+//# sourceMappingURL=use-yspreadsheet.d.ts.map

package/dist/esm/use-yspreadsheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-yspreadsheet.d.ts","sourceRoot":"","sources":["../../use-yspreadsheet.ts"],"names":[],"mappings":"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"}

package/dist/esm/use-yspreadsheet.js

@@ -0,0 +1,304 @@
+import { scheduleNormalPriorityCallback, useIsomorphicLayoutEffect, } from "@rowsncolumns/spreadsheet";
+import { applyPatches } from "immer";
+import uniqBy from "lodash/uniqBy";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { applyUpdate, diffUpdate, Doc, encodeStateAsUpdate, encodeStateVector, } from "yjs";
+const getStateVector = (doc) => encodeStateVector(doc);
+// Function to get updates between two state vectors
+const getUpdatesBetween = (doc, stateVector1, stateVector2) => {
+    const diff = encodeStateAsUpdate(doc, stateVector1);
+    const newDiff = encodeStateAsUpdate(doc, stateVector2);
+    return diffUpdate(diff, newDiff);
+};
+/**
+ * Connects to a Y server and picks up the most recent change
+ * Does not load initial data
+ * @returns
+ */
+export const useYSpreadsheet = ({ onChangeSheetData, onChangeSheets, onChangeTables, onChangeCharts, onChangeEmbeds, onChangeConditionalFormats, onChangeDataValidations, onChangeNamedRanges, onChangeProtectedRanges, onError, enqueueCalculation, calculateNow, userId, title, sheetId, activeCell, doc, provider, }) => {
+    const [users, setUsers] = useState([]);
+    const [synced, setSynced] = useState(false);
+    const previousStateVectorRef = useRef(undefined);
+    const currentStateVectorRef = useRef(undefined);
+    // Recalc cells
+    const yRecalcCells = useMemo(() => doc.getArray("recalcCells"), [doc]);
+    const yDisableRecalc = doc.getMap("disableRecalc");
+    // Counter
+    // Create a counter to keep track of when the last sync was done
+    const docSyncCounterRef = useRef(new Map());
+    // Create a doc map
+    const docMap = useMemo(() => {
+        const docMap = new Map([
+            [
+                "sheets",
+                [doc.getArray("sheets"), onChangeSheets, "sheetId"],
+            ],
+            [
+                "sheetData",
+                [doc.getArray("sheetData"), onChangeSheetData],
+            ],
+            ["tables", [doc.getArray("tables"), onChangeTables, "id"]],
+            ["embeds", [doc.getArray("embeds"), onChangeEmbeds, "id"]],
+            ["charts", [doc.getArray("charts"), onChangeCharts, "id"]],
+            [
+                "conditionalFormats",
+                [
+                    doc.getArray("conditionalFormats"),
+                    onChangeConditionalFormats,
+                    "id",
+                ],
+            ],
+            [
+                "dataValidations",
+                [
+                    doc.getArray("dataValidations"),
+                    onChangeDataValidations,
+                    "id",
+                ],
+            ],
+            [
+                "namedRanges",
+                [doc.getArray("namedRanges"), onChangeNamedRanges, "id"],
+            ],
+            [
+                "protectedRanges",
+                [
+                    doc.getArray("protectedRanges"),
+                    onChangeProtectedRanges,
+                    "id",
+                ],
+            ],
+        ]);
+        return docMap;
+    }, [
+        onChangeSheets,
+        onChangeSheetData,
+        onChangeTables,
+        onChangeCharts,
+        onChangeConditionalFormats,
+        onChangeDataValidations,
+        onChangeNamedRanges,
+        onChangeProtectedRanges,
+        onChangeEmbeds,
+        doc,
+    ]);
+    // Listen to awareness
+    const awareness = provider?.awareness;
+    // Callback when the content is first synced
+    const onSynced = useCallback(() => {
+        let syncedDoc = doc;
+        if (previousStateVectorRef.current) {
+            // Capture the current state vector on subsequent syncs
+            currentStateVectorRef.current = getStateVector(doc);
+            const updates = getUpdatesBetween(doc, previousStateVectorRef.current, currentStateVectorRef.current);
+            const newDoc = new Doc({ gc: true });
+            applyUpdate(newDoc, updates);
+            syncedDoc = newDoc;
+            previousStateVectorRef.current = currentStateVectorRef.current;
+        }
+        const getInitialPatches = (ydoc, counterStart = 0) => {
+            const patches = [];
+            let endCounter = counterStart;
+            for (let i = counterStart; i < ydoc.length; i++) {
+                const { patches: userPatches } = ydoc.get(i);
+                for (const patch of userPatches) {
+                    patches.push(patch);
+                }
+                endCounter++;
+            }
+            return [patches, endCounter];
+        };
+        for (const [mappingKey, [_, setStateFn, idKey]] of docMap) {
+            const startCounter = docSyncCounterRef.current.get(mappingKey) ?? 0;
+            const [patches, endCounter] = getInitialPatches(syncedDoc.getArray(mappingKey), startCounter);
+            if (patches.length) {
+                docSyncCounterRef.current.set(mappingKey, endCounter);
+                setStateFn?.((prev) => {
+                    try {
+                        const nextState = idKey
+                            ? uniqBy(applyPatches(prev, patches), idKey)
+                            : applyPatches(prev, patches);
+                        return nextState;
+                    }
+                    catch (err) {
+                        console.error(err);
+                        onError?.(err);
+                    }
+                    return prev;
+                });
+            }
+        }
+        // Update recalc cells
+        scheduleNormalPriorityCallback(() => {
+            calculateNow({
+                disableEvaluation: true,
+                shouldResetCellDependencyGraph: true,
+            });
+        });
+        // Set synced
+        setSynced(true);
+    }, [calculateNow, docMap, onError, doc]);
+    // Sync state
+    if (provider?.synced && !synced) {
+        onSynced();
+    }
+    // Listen to first sync event
+    useIsomorphicLayoutEffect(() => {
+        provider?.on("synced", onSynced);
+        const onConnectionStatusChange = ({ status }) => {
+            if (status === "disconnected") {
+                previousStateVectorRef.current = getStateVector(doc);
+            }
+        };
+        provider?.on("status", onConnectionStatusChange);
+        return () => {
+            provider?.off("synced", onSynced);
+            provider?.off("status", onConnectionStatusChange);
+        };
+    }, [provider, onSynced, doc]);
+    // Awareness
+    useIsomorphicLayoutEffect(() => {
+        const onChangeAwareness = () => {
+            if (awareness) {
+                const collaborators = [];
+                for (const [_, value] of awareness.getStates().entries()) {
+                    if (value && value.activeCell && value.userId) {
+                        collaborators.push({
+                            activeCell: value.activeCell,
+                            title: value.title,
+                            userId: value.userId,
+                            sheetId: value.sheetId,
+                        });
+                    }
+                }
+                setUsers(collaborators);
+            }
+        };
+        // Listen to awareness
+        awareness?.on("change", onChangeAwareness);
+        return () => {
+            awareness?.off("change", onChangeAwareness);
+        };
+    }, [awareness]);
+    // Set local awareness state
+    useIsomorphicLayoutEffect(() => {
+        awareness?.setLocalState({
+            userId,
+            title,
+            sheetId,
+        });
+    }, [awareness, userId, title, sheetId]);
+    // Sheet data changes
+    useIsomorphicLayoutEffect(() => {
+        const getPatchDeltasFromEvent = (event) => {
+            const patches = [];
+            if (event.transaction.origin !== "locale") {
+                for (const changes of event.changes.delta) {
+                    for (const type in changes) {
+                        if (type === "insert" && changes[type] !== undefined) {
+                            for (const { patches: userPatches } of changes[type]) {
+                                for (const patch of userPatches) {
+                                    patches.push(patch);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return patches;
+        };
+        const syncRecalcCells = (recalcCells) => {
+            for (const [_, position] of recalcCells) {
+                enqueueCalculation({
+                    type: "add",
+                    position,
+                });
+            }
+        };
+        // Trigger cell recalcs
+        const onRecalcCellsChange = (event) => {
+            const patches = getPatchDeltasFromEvent(event);
+            if (event.transaction.origin !== "local") {
+                syncRecalcCells(patches);
+            }
+        };
+        // Listen to changes after sync
+        if (synced) {
+            const subs = [];
+            for (const [_, [doc, setStateFn]] of docMap) {
+                const callback = (event) => {
+                    const patches = getPatchDeltasFromEvent(event);
+                    const disableRecalc = yDisableRecalc.get("disableRecalc");
+                    if (event.transaction.origin !== "local" && disableRecalc !== true) {
+                        if (patches.length) {
+                            setStateFn?.((prev) => {
+                                try {
+                                    return applyPatches(prev, patches);
+                                }
+                                catch (err) {
+                                    console.error(err);
+                                    onError?.(err);
+                                }
+                                return prev;
+                            });
+                        }
+                    }
+                };
+                doc.observe(callback);
+                subs.push([doc, callback]);
+            }
+            // Observe recalc cells separat
+            yRecalcCells.observe(onRecalcCellsChange);
+            return () => {
+                subs.forEach(([doc, callback]) => doc.unobserve(callback));
+                yRecalcCells.unobserve(onRecalcCellsChange);
+            };
+        }
+    }, [userId, provider, synced, doc, yDisableRecalc]);
+    // Broadcast patch
+    const onBroadcastPatch = useCallback((patches) => {
+        doc.transact(() => {
+            for (const [patch, type = "redo"] of patches) {
+                const patchKey = type === "redo" ? "patches" : "inversePatches";
+                for (const [mappingKey, [doc]] of docMap) {
+                    const currentPatch = patch[mappingKey];
+                    const patches = currentPatch?.[patchKey];
+                    if (patches) {
+                        const startCounter = docSyncCounterRef.current.get(mappingKey) ?? 0;
+                        doc.push([
+                            {
+                                userId,
+                                patches,
+                            },
+                        ]);
+                        // Update last counter
+                        docSyncCounterRef.current.set(mappingKey, startCounter + patches.length);
+                    }
+                }
+                if (patch.recalcCells?.[type]) {
+                    yRecalcCells.push([
+                        {
+                            userId,
+                            patches: Array.from(patch.recalcCells[type]),
+                        },
+                    ]);
+                }
+            }
+        }, "local");
+    }, [userId, docMap, doc, yRecalcCells, yDisableRecalc]);
+    // Listen to active cell change
+    useIsomorphicLayoutEffect(() => {
+        if (activeCell) {
+            awareness?.setLocalStateField("activeCell", activeCell);
+        }
+    }, [awareness, activeCell]);
+    // Listen to sheet change
+    useIsomorphicLayoutEffect(() => {
+        awareness?.setLocalStateField("sheetId", sheetId);
+    }, [awareness, sheetId]);
+    return {
+        onBroadcastPatch,
+        users,
+        synced,
+    };
+};

package/dist/esm/vitest.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vitest.config.d.ts.map

package/dist/esm/vitest.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.d.ts","sourceRoot":"","sources":["../../vitest.config.ts"],"names":[],"mappings":";AAEA,wBAsBG"}

package/dist/esm/vitest.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: "jsdom",
+        // ✅ correct location for deps.inline
+        deps: {
+            inline: ["konva", "react-konva"],
+        },
+    },
+    // Ensure Vite bundles these for SSR-style test runs
+    ssr: {
+        noExternal: ["konva", "react-konva"],
+    },
+    // Prefer the ESM build of react-konva (avoid its CJS wrapper that requires konva)
+    resolve: {
+        alias: {
+            "react-konva": "react-konva/es/ReactKonvaCore.js",
+        },
+    },
+});

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@rowsncolumns/y-spreadsheet",
+  "version": "14.0.32",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "author": "Vinay M",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "scripts": {
+    "build": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json",
+    "clean": "rimraf dist",
+    "build:watch": "tsc -p ./tsconfig.esm.json --watch",
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "vitest --run",
+    "types": "tsc -p . --noEmit"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rowsncolumns/spreadsheet.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rowsncolumns/spreadsheet/issues"
+  },
+  "devDependencies": {
+    "@hocuspocus/provider": "^3.1.1",
+    "@rowsncolumns/spreadsheet": ">=10.2.68",
+    "@rowsncolumns/spreadsheet-state": ">=28.0.66",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "y-websocket": "^3.0.0",
+    "@types/lodash": "^4.17.17",
+    "yjs": "^13.6.27"
+  },
+  "peerDependencies": {
+    "@rowsncolumns/spreadsheet": ">=10.2.68",
+    "@rowsncolumns/spreadsheet-state": ">=28.0.66",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "y-websocket": ">=2.0.0",
+    "yjs": ">=13.0.0"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.2",
+    "lodash": "^4.17.21"
+  }
+}