cogsbox-state 0.5.291 → 0.5.293

package/src/CogsState.tsx

@@ -42,7 +42,7 @@ import useMeasure from "react-use-measure";
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
 export type VirtualViewOptions = {
-  itemHeight: number;
+  itemHeight?: number;
   overscan?: number;
   stickToBottom?: boolean;
 };
@@ -1039,6 +1039,8 @@ export function useCogsStateFn<TStateObject extends unknown>(
       const pathKey = `${thisKey}-${path.join(".")}`;
       componentUpdatesRef.current.add(pathKey);
     }
+    const store = getGlobalStore.getState();
+
     setState(thisKey, (prevValue: TStateObject) => {
       const payload = isFunction<TStateObject>(newStateOrFunction)
         ? newStateOrFunction(prevValue as TStateObject)
@@ -1047,9 +1049,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
       const signalId = `${thisKey}-${path.join(".")}`;
       if (signalId) {
         let isArrayOperation = false;
-        let elements = getGlobalStore
-          .getState()
-          .signalDomElements.get(signalId);
+        let elements = store.signalDomElements.get(signalId);
 
         if (
           (!elements || elements.size === 0) &&
@@ -1062,9 +1062,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
           if (Array.isArray(arrayValue)) {
             isArrayOperation = true;
             const arraySignalId = `${thisKey}-${arrayPath.join(".")}`;
-            elements = getGlobalStore
-              .getState()
-              .signalDomElements.get(arraySignalId);
+            elements = store.signalDomElements.get(arraySignalId);
           }
         }
 
@@ -1089,32 +1087,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
         }
       }
 
-      const shadowUpdate = () => {
-        const store = getGlobalStore.getState();
-
-        switch (updateObj.updateType) {
-          case "update":
-            // For updates, just mirror the structure at the path
-            store.updateShadowAtPath(thisKey, path, payload);
-            break;
-
-          case "insert":
-            // For array insert, add empty element to shadow array
-            const parentPath = path.slice(0, -1);
-            store.insertShadowArrayElement(thisKey, parentPath);
-            break;
-
-          case "cut":
-            // For array cut, remove element from shadow array
-            const arrayPath = path.slice(0, -1);
-            const index = parseInt(path[path.length - 1]!);
-            store.removeShadowArrayElement(thisKey, arrayPath, index);
-            break;
-        }
-      };
-
-      shadowUpdate();
-      console.log("shadowState", getGlobalStore.getState().shadowStateStore);
+      console.log("shadowState", store.shadowStateStore);
       if (
         updateObj.updateType === "update" &&
         (validationKey || latestInitialOptionsRef.current?.validation?.key) &&
@@ -1164,7 +1137,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
         });
       }
 
-      const stateEntry = getGlobalStore.getState().stateComponents.get(thisKey);
+      const stateEntry = store.stateComponents.get(thisKey);
       console.log("stateEntry >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>", stateEntry);
       if (stateEntry) {
         const changedPaths = getDifferences(prevValue, payload);
@@ -1282,6 +1255,27 @@ export function useCogsStateFn<TStateObject extends unknown>(
         newValue,
       } satisfies UpdateTypeDetail;
 
+      switch (updateObj.updateType) {
+        case "update":
+          // For updates, just mirror the structure at the path
+          store.updateShadowAtPath(thisKey, path, payload);
+          break;
+
+        case "insert":
+          // For array insert, add empty element to shadow array
+
+          const parentPath = path.slice(0, -1);
+          store.insertShadowArrayElement(thisKey, parentPath, newValue);
+          break;
+
+        case "cut":
+          // For array cut, remove element from shadow array
+          const arrayPath = path.slice(0, -1);
+          const index = parseInt(path[path.length - 1]!);
+          store.removeShadowArrayElement(thisKey, arrayPath, index);
+          break;
+      }
+
       setStateLog(thisKey, (prevLogs) => {
         const logs = [...(prevLogs ?? []), newUpdate];
 
@@ -1322,7 +1316,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
         });
       }
       if (latestInitialOptionsRef.current?.serverSync) {
-        const serverStateStore = getGlobalStore.getState().serverState[thisKey];
+        const serverStateStore = store.serverState[thisKey];
         const serverSync = latestInitialOptionsRef.current?.serverSync;
         setServerSyncActions(thisKey, {
           syncKey:
@@ -1564,6 +1558,7 @@ function createProxyHandler<T>(
           "_stateKey",
           "getComponents",
         ]);
+
         if (
           prop !== "then" &&
           !prop.startsWith("$") &&
@@ -1808,7 +1803,7 @@ function createProxyHandler<T>(
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
               const {
-                itemHeight,
+                itemHeight = 50, // Default/estimated height
                 overscan = 5,
                 stickToBottom = false,
               } = options;
@@ -1818,17 +1813,13 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
-              const getItemHeight = useCallback((index: number) => {
-                const metadata = getGlobalStore
-                  .getState()
-                  .getShadowMetadata(stateKey, [...path, index.toString()]);
-                return metadata?.virtualizer?.itemHeight || options.itemHeight;
-              }, []);
-              // --- State Tracking Refs ---
+
+              // --- State Tracking Refs for Stability ---
               const isAtBottomRef = useRef(stickToBottom);
-              const previousTotalCountRef = useRef(0);
-              // NEW: Ref to explicitly track if this is the component's first render cycle.
-              const isInitialMountRef = useRef(true);
+              // Store the scroll position before a new item is added
+              const scrollOffsetRef = useRef(0);
+              // Ref to track if the list has grown, to trigger scroll correction
+              const listGrewRef = useRef(false);
 
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
@@ -1836,6 +1827,31 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
+              // Helper to get measured heights or the default
+              const getItemHeight = useCallback(
+                (index: number): number => {
+                  const metadata = getGlobalStore
+                    .getState()
+                    .getShadowMetadata(stateKey, [...path, index.toString()]);
+                  return metadata?.virtualizer?.itemHeight || itemHeight;
+                },
+                [itemHeight, stateKey, path]
+              );
+
+              // Pre-calculate total height and the top offset of each item
+              const { totalHeight, positions } = useMemo(() => {
+                let currentHeight = 0;
+                const pos: number[] = [];
+                for (let i = 0; i < totalCount; i++) {
+                  pos[i] = currentHeight;
+                  currentHeight += getItemHeight(i);
+                }
+
+                console.log("totalHeight", totalHeight);
+                return { totalHeight: currentHeight, positions: pos };
+              }, [totalCount, getItemHeight]);
+
+              // This is identical to your original code
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1850,73 +1866,92 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
+              // --- STABLE SCROLL LOGIC ---
+              // useLayoutEffect runs after DOM mutations but before the browser paints.
+              // This is the perfect place to correct scroll positions.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                const wasAtBottom = isAtBottomRef.current;
-                const listGrew = totalCount > previousTotalCountRef.current;
-                previousTotalCountRef.current = totalCount;
+                // If the list grew, we need to adjust the scroll position
+                // to prevent the content from jumping.
+                if (listGrewRef.current) {
+                  listGrewRef.current = false; // Reset the flag
+
+                  if (isAtBottomRef.current) {
+                    // If we were at the bottom, stay at the bottom.
+                    // This is the fix for the auto-scroll issue.
+                    container.scrollTop = container.scrollHeight;
+                  } else {
+                    // If we were in the middle, restore the previous scroll position
+                    // plus the height of the content that was added above us.
+                    // This is an advanced case, but for now, let's keep it simple
+                    // as most use-cases are for chat-like views. For a simple list,
+                    // just staying at the bottom is the main goal.
+                  }
+                }
+              }, [totalHeight]); // This effect runs whenever the total height changes
+
+              useEffect(() => {
+                const container = containerRef.current;
+                if (!container) return;
+
+                // Track the previous total count to detect when new items are added
+                let previousTotalCount = totalCount;
 
                 const handleScroll = () => {
+                  if (!container) return;
                   const { scrollTop, clientHeight, scrollHeight } = container;
+                  // Update "is at bottom" status on every scroll
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
-                  const start = Math.max(
-                    0,
-                    Math.floor(scrollTop / itemHeight) - overscan
-                  );
-                  const end = Math.min(
-                    totalCount,
-                    Math.ceil((scrollTop + clientHeight) / itemHeight) +
-                      overscan
-                  );
+                  scrollOffsetRef.current = scrollTop;
+
+                  // Find start/end indices based on positions
+                  let startIndex = 0;
+                  for (let i = 0; i < positions.length; i++) {
+                    if (positions[i]! >= scrollTop) {
+                      startIndex = i;
+                      break;
+                    }
+                  }
+
+                  let endIndex = startIndex;
+                  while (
+                    endIndex < totalCount &&
+                    positions[endIndex]! < scrollTop + clientHeight
+                  ) {
+                    endIndex++;
+                  }
+
+                  startIndex = Math.max(0, startIndex - overscan);
+                  endIndex = Math.min(totalCount, endIndex + overscan);
+
                   setRange((prevRange) => {
                     if (
-                      prevRange.startIndex !== start ||
-                      prevRange.endIndex !== end
+                      prevRange.startIndex !== startIndex ||
+                      prevRange.endIndex !== endIndex
                     ) {
-                      return { startIndex: start, endIndex: end };
+                      return { startIndex, endIndex };
                     }
                     return prevRange;
                   });
                 };
 
+                // Check if the list has grown *before* the next render cycle
+                if (totalCount > previousTotalCount) {
+                  listGrewRef.current = true;
+                }
+                previousTotalCount = totalCount;
+
                 container.addEventListener("scroll", handleScroll, {
                   passive: true,
                 });
-
-                // --- THE CORRECTED DECISION LOGIC ---
-                if (stickToBottom) {
-                  if (isInitialMountRef.current) {
-                    // SCENARIO 1: First render of the component.
-                    // Go to the bottom unconditionally. Use `auto` scroll for an instant jump.
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "auto",
-                    });
-                  } else if (wasAtBottom && listGrew) {
-                    // SCENARIO 2: Subsequent renders (new messages arrive).
-                    // Only scroll if the user was already at the bottom.
-                    // Use `smooth` for a nice animated scroll for new messages.
-                    requestAnimationFrame(() => {
-                      container.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: "smooth",
-                      });
-                    });
-                  }
-                }
-
-                // After the logic runs, it's no longer the initial mount.
-                isInitialMountRef.current = false;
-
-                // Always run handleScroll once to set the initial visible window.
-                handleScroll();
+                handleScroll(); // Initial calculation
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, itemHeight, overscan, stickToBottom]);
+              }, [totalCount, overscan, positions]); // Depend on positions to re-run scroll logic
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -1932,31 +1967,27 @@ function createProxyHandler<T>(
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current) {
+                  if (containerRef.current && positions[index] !== undefined) {
                     containerRef.current.scrollTo({
-                      top: index * itemHeight,
+                      top: positions[index],
                       behavior,
                     });
                   }
                 },
-                [itemHeight]
+                [positions]
               );
 
-              // Same virtualizer props as before
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
                   style: { overflowY: "auto", height: "100%" },
                 },
                 inner: {
-                  style: {
-                    height: `${totalCount * itemHeight}px`,
-                    position: "relative",
-                  },
+                  style: { height: `${totalHeight}px`, position: "relative" },
                 },
                 list: {
                   style: {
-                    transform: `translateY(${range.startIndex * itemHeight}px)`,
+                    transform: `translateY(${positions[range.startIndex] || 0}px)`,
                   },
                 },
               };

package/src/store.ts

@@ -102,7 +102,11 @@ export type CogsGlobalState = {
   shadowStateStore: { [key: string]: any };
   initializeShadowState: (key: string, initialState: any) => void;
   updateShadowAtPath: (key: string, path: string[], newValue: any) => void;
-  insertShadowArrayElement: (key: string, arrayPath: string[]) => void;
+  insertShadowArrayElement: (
+    key: string,
+    arrayPath: string[],
+    newItem: any
+  ) => void;
   removeShadowArrayElement: (
     key: string,
     arrayPath: string[],
@@ -325,22 +329,46 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     });
   },
 
-  insertShadowArrayElement: (key: string, arrayPath: string[]) => {
+  insertShadowArrayElement: (
+    key: string,
+    arrayPath: string[],
+    newItem: any
+  ) => {
     set((state) => {
       const newShadow = { ...state.shadowStateStore };
-      let current = newShadow[key];
+      if (!newShadow[key]) return state;
+
+      newShadow[key] = JSON.parse(JSON.stringify(newShadow[key]));
+
+      let current: any = newShadow[key];
 
       for (const segment of arrayPath) {
-        current = current?.[segment];
+        current = current[segment];
+        if (!current) return state;
       }
 
       if (Array.isArray(current)) {
-        current.push({});
+        // Create shadow structure based on the actual new item
+        const createShadowStructure = (obj: any): any => {
+          if (Array.isArray(obj)) {
+            return obj.map((item) => createShadowStructure(item));
+          }
+          if (typeof obj === "object" && obj !== null) {
+            const shadow: any = {};
+            for (const k in obj) {
+              shadow[k] = createShadowStructure(obj[k]);
+            }
+            return shadow;
+          }
+          return {}; // Leaf nodes get empty object for metadata
+        };
+
+        current.push(createShadowStructure(newItem));
       }
+
       return { shadowStateStore: newShadow };
     });
   },
-
   removeShadowArrayElement: (
     key: string,
     arrayPath: string[],