feat: more update react wrapper

Author: GowthamTG

react/lib/constants.ts

@@ -0,0 +1,31 @@
+import { GridStackOptions } from 'gridstack';
+
+export const BREAKPOINTS = [
+  { c: 1, w: 700 },
+  { c: 3, w: 850 },
+  { c: 6, w: 950 },
+  { c: 8, w: 1100 },
+];
+
+export const SUB_GRID_OPTIONS: GridStackOptions = {
+  acceptWidgets: true,
+  column: 12,
+  columnOpts: {
+    breakpoints: BREAKPOINTS,
+    layout: 'moveScale',
+  },
+  margin: 8,
+  minRow: 2,
+} as const;
+
+export const GRID_OPTIONS: GridStackOptions = {
+  acceptWidgets: true,
+  columnOpts: {
+    breakpointForWindow: true,
+    breakpoints: BREAKPOINTS,
+    layout: 'moveScale',
+  },
+  float: false,
+  margin: 8,
+  subGridOpts: SUB_GRID_OPTIONS,
+} as const;

react/lib/gridstack-context.tsx

@@ -1,61 +1,86 @@
-// gridstack-context.tsx
-"use client";
-
-import * as React from "react";
-import type { GridStack } from "gridstack";
-import "gridstack/dist/gridstack-extra.css";
-import "gridstack/dist/gridstack.css";
-import type { ItemRefType } from "./gridstack-item";
+import { GridStack, GridStackWidget,GridStackOptions } from 'gridstack';
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import isEqual from 'react-fast-compare';
 
 type GridStackContextType = {
-  grid: GridStack | null | undefined;
-  setGrid: React.Dispatch<React.SetStateAction<GridStack | null>>;
-  addItemRefToList: (id: string, ref: ItemRefType) => void;
-  removeItemRefFromList: (id: string) => void;
-  itemRefList: ItemRefListType;
-  getItemRefFromListById: (id: string) => ItemRefType | null;
+  getWidgetContent: (widgetId: string) => HTMLElement | null;
 };
 
-type ItemRefListType = {
-  id: string;
-  ref: ItemRefType;
-}[];
+interface GridstackProviderProps extends PropsWithChildren {
+  options: GridStackOptions;
+}
+
+export const GridstackContext = createContext<GridStackContextType | null>(null);
 
-export const GridstackContext = React.createContext<GridStackContextType | null>(null);
+export const GridstackProvider = ({ children, options }: GridstackProviderProps) => {
+  const widgetContentRef = useRef<Record<string, HTMLElement>>({});
+  const containerRef = useRef<HTMLDivElement>(null);
+  const optionsRef = useRef<GridStackOptions>(options);
 
-export const GridstackProvider = ({ children }: { children: React.ReactNode }) => {
-  const [grid, setGrid] = React.useState<GridStack | null>(null);
-  const [itemRefList, setItemRefList] = React.useState<ItemRefListType>([]);
+  const [parentGrid, setParentGrid] = useState<GridStack | null>(null);
 
-  const addItemRefToList = React.useCallback((id: string, ref: ItemRefType) => {
-    setItemRefList((prev) => [...prev, { id, ref }]);
+  const renderCBFn = useCallback((element: HTMLElement, widget: GridStackWidget) => {
+    if (widget.id) {
+      widgetContentRef.current[widget.id] = element;
+    }
   }, []);
 
-  const removeItemRefFromList = React.useCallback((id: string) => {
-    setItemRefList((prev) => prev.filter((item) => item.id !== id));
+  const getWidgetContent = useCallback((widgetId: string) => {
+    return widgetContentRef.current[widgetId] || null;
   }, []);
 
-  const getItemRefFromListById = React.useCallback((id: string) => {
-    const item = itemRefList.find((item) => item.id === id);
-    return item?.ref ?? null;
-  }, [itemRefList]);
+  const initGrid = useCallback(() => {
+    if (containerRef.current) {
+      GridStack.renderCB = renderCBFn;
+      return GridStack.init(optionsRef.current, containerRef.current);
+    }
+    return null;
+  }, [renderCBFn]);
+
+  useLayoutEffect(() => {
+    if (!isEqual(options, optionsRef.current) && parentGrid) {
+      try {
+        parentGrid.removeAll(false);
+        parentGrid.destroy(false);
+        widgetContentRef.current = {};
+        optionsRef.current = options;
+
+        setParentGrid(initGrid());
+      } catch (e) {
+        console.error("Error reinitializing gridstack", e);
+      }
+    }
+  }, [options, parentGrid, initGrid]);
+
+  useLayoutEffect(() => {
+    if (!parentGrid) {
+      try {
+        setParentGrid(initGrid());
+      } catch (e) {
+        console.error("Error initializing gridstack", e);
+      }
+    }
+  }, [parentGrid, initGrid]);
 
-  // Memoize the context value to prevent unnecessary re-renders
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
-      grid,
-      setGrid,
-      addItemRefToList,
-      removeItemRefFromList,
-      itemRefList,
-      getItemRefFromListById,
+      getWidgetContent,
     }),
-    [grid, itemRefList, addItemRefToList, removeItemRefFromList, getItemRefFromListById]
+    // parentGrid is required to reinitialize the grid when the options change
+    [getWidgetContent, parentGrid],
   );
 
   return (
     <GridstackContext.Provider value={value}>
-      {children}
+      <div ref={containerRef}>{parentGrid ? children : null}</div>
     </GridstackContext.Provider>
   );
 };

react/lib/gridstack-grid.tsx

@@ -1,91 +1,22 @@
-"use client";
-// gridstack-item.tsx
+import { type GridItemHTMLElement } from 'gridstack';
+import React, { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 
-import type {
-  GridItemHTMLElement,
+import { useGridstackContext } from './use-gridstack-context';
 
-  GridStackWidget,
-} from "gridstack";
-import * as React from "react";
-import {useGridstackContext} from "./use-gridstack-context";
-
-
-
-interface GridstackItemComponentProps {
-  initOptions?: GridStackWidget;
+export interface GridstackItemProps extends PropsWithChildren {
   id: string;
-  children: React.ReactNode;
-  className?: string;
 }
 
 export type ItemRefType = React.MutableRefObject<GridItemHTMLElement | null>;
 
-/**
- * Component for rendering a grid item in a Gridstack layout.
- *
- * @component
- * @param {GridstackItemComponentProps} props - The component props.
- * @param {GridStackWidget} props.initOptions - The initial options for the grid item.
- * @param {string} props.id - The unique identifier for the grid item.
- * @param {ReactNode} props.children - The content to be rendered inside the grid item.
- * @param {string} props.className - The CSS class name for the grid item.
- * @returns {JSX.Element} The rendered grid item component.
- */
-export const GridstackItemComponent = ({
-  initOptions,
-  id,
-  children,
-  className,
-}: GridstackItemComponentProps) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const optionsRef = React.useRef<GridStackWidget | undefined>(initOptions);
-  const { grid, addItemRefToList, removeItemRefFromList } = useGridstackContext();
-  const itemRef = React.useRef<GridItemHTMLElement | null>(null);
-  
-  // Update the optionsRef when initOptions changes
-  React.useEffect(() => {
-    optionsRef.current = initOptions;
-  }, [initOptions]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  React.useLayoutEffect(() => {
-    if (!grid || !containerRef.current) return;
-    if (grid && containerRef.current) {
-      // Initialize the widget
-
-      grid.batchUpdate(true);
-      itemRef.current = grid.addWidget(containerRef.current, optionsRef.current);
-      grid.batchUpdate(false);
-
-      addItemRefToList(id, itemRef);
-
-      
-      // Cleanup function to remove the widget
-      return () => {
-        if (grid && itemRef.current) {
-          try {
-            grid.batchUpdate(true);
-            grid.removeWidget(itemRef.current, false);
-            grid.batchUpdate(false);
-
-            removeItemRefFromList(id);
-
-
-          } catch (error) {
-            console.error("Error removing widget", error);
-            //! Doing nothing here is a bad practice, but we don't want to crash the app (Temporary fix)
-            // Do nothing
-          }
-        }
-      };
-    }
+export const GridstackItem = ({ id, children }: GridstackItemProps) => {
+  const { getWidgetContent } = useGridstackContext();
+  const widgetContent = getWidgetContent(id);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [grid]);
+  if (!widgetContent) {
+    return null;
+  }
 
-  return (
-    <div ref={containerRef} id="">
-      <div className={`w-full h-full ${className}`}>{children}</div>
-    </div>
-  );
+  return createPortal(children, widgetContent);
 };

react/lib/gridstack-item.tsx

@@ -1,4 +1,4 @@
-export * from './gridstack-item';
-export * from './gridstack-grid';
-export * from './gridstack-context';
-export * from './use-gridstack-context';
+
+export { GridstackProvider } from './gridstack-context';
+export { GridstackItem } from './gridstack-item';
+export { useGridstackContext } from './use-gridstack-context';

react/lib/index.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+
+import { GridstackContext } from "./gridstack-context";
+
+export const useGridstackContext = () => {
+    const gridstackContext = useContext(GridstackContext);
+    if (!gridstackContext) {
+      throw new Error('useGridstack must be used within a GridstackProvider');
+    }
+    return gridstackContext;
+};

react/lib/use-gridstack-context.ts

@@ -13,7 +13,8 @@
   "dependencies": {
     "gridstack": "^11.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-fast-compare": "^3.2.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",