react-resizable-panels 0.0.53 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -18,10 +18,30 @@
         "default": "./dist/react-resizable-panels.cjs.js"
       },
       "development": {
+        "browser": {
+          "module": "./dist/react-resizable-panels.browser.development.esm.js",
+          "import": "./dist/react-resizable-panels.browser.development.cjs.mjs",
+          "default": "./dist/react-resizable-panels.browser.development.cjs.js"
+        },
+        "node": {
+          "module": "./dist/react-resizable-panels.development.node.esm.js",
+          "import": "./dist/react-resizable-panels.development.node.cjs.mjs",
+          "default": "./dist/react-resizable-panels.development.node.cjs.js"
+        },
         "module": "./dist/react-resizable-panels.development.esm.js",
         "import": "./dist/react-resizable-panels.development.cjs.mjs",
         "default": "./dist/react-resizable-panels.development.cjs.js"
       },
+      "browser": {
+        "module": "./dist/react-resizable-panels.browser.esm.js",
+        "import": "./dist/react-resizable-panels.browser.cjs.mjs",
+        "default": "./dist/react-resizable-panels.browser.cjs.js"
+      },
+      "node": {
+        "module": "./dist/react-resizable-panels.node.esm.js",
+        "import": "./dist/react-resizable-panels.node.cjs.mjs",
+        "default": "./dist/react-resizable-panels.node.cjs.js"
+      },
       "module": "./dist/react-resizable-panels.esm.js",
       "import": "./dist/react-resizable-panels.cjs.mjs",
       "default": "./dist/react-resizable-panels.cjs.js"
@@ -32,6 +52,11 @@
     "#is-development": {
       "development": "./src/env-conditions/development.ts",
       "default": "./src/env-conditions/production.ts"
+    },
+    "#is-browser": {
+      "browser": "./src/env-conditions/browser.ts",
+      "node": "./src/env-conditions/node.ts",
+      "default": "./src/env-conditions/unknown.ts"
     }
   },
   "types": "dist/react-resizable-panels.cjs.d.ts",

package/src/Panel.ts

@@ -125,6 +125,7 @@ function PanelWithForwardedRef({
     collapsible: boolean;
     defaultSize: number | null;
     id: string;
+    idWasAutoGenerated: boolean;
     maxSize: number;
     minSize: number;
     order: number | null;
@@ -134,6 +135,7 @@ function PanelWithForwardedRef({
     collapsible,
     defaultSize,
     id: panelId,
+    idWasAutoGenerated: idFromProps == null,
     maxSize,
     minSize,
     order,
@@ -146,6 +148,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
+    panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
     panelDataRef.current.minSize = minSize;
     panelDataRef.current.order = order;
@@ -195,11 +198,8 @@ export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
     createElement(PanelWithForwardedRef, { ...props, forwardedRef: ref })
 );
 
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
-(PanelWithForwardedRef as any).displayName = "Panel";
-(Panel as any).displayName = "forwardRef(Panel)";
+PanelWithForwardedRef.displayName = "Panel";
+Panel.displayName = "forwardRef(Panel)";
 
 // HACK
 function parseSizeFromStyle(style: CSSProperties): number {

package/src/PanelContexts.ts

@@ -17,7 +17,4 @@ export const PanelGroupContext = createContext<{
   unregisterPanel: (id: string) => void;
 } | null>(null);
 
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
-(PanelGroupContext as any).displayName = "PanelGroupContext";
+PanelGroupContext.displayName = "PanelGroupContext";

package/src/PanelGroup.ts

@@ -1,3 +1,4 @@
+import { isBrowser } from "#is-browser";
 import { isDevelopment } from "#is-development";
 import {
   createElement,
@@ -46,7 +47,6 @@ import {
   panelsMapToSortedArray,
 } from "./utils/group";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
-import { isServerRendering } from "./utils/ssr";
 
 const debounceMap: {
   [key: string]: (
@@ -161,6 +161,16 @@ function PanelGroupWithForwardedRef({
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const initialDragStateRef = useRef<InitialDragState | null>(null);
 
+  const devWarningsRef = useRef<{
+    didLogDefaultSizeWarning: boolean;
+    didLogIdAndOrderWarning: boolean;
+    prevPanelIds: string[];
+  }>({
+    didLogDefaultSizeWarning: false,
+    didLogIdAndOrderWarning: false,
+    prevPanelIds: [],
+  });
+
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef<{
     onLayout: PanelGroupOnLayout | undefined;
@@ -334,6 +344,34 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
+
+    if (isDevelopment) {
+      const { didLogIdAndOrderWarning, prevPanelIds } = devWarningsRef.current;
+      if (!didLogIdAndOrderWarning) {
+        const { panels } = committedValuesRef.current;
+
+        const panelIds = Array.from(panels.keys());
+
+        devWarningsRef.current.prevPanelIds = panelIds;
+
+        const panelsHaveChanged =
+          prevPanelIds.length > 0 && !areEqual(prevPanelIds, panelIds);
+        if (panelsHaveChanged) {
+          if (
+            Array.from(panels.values()).find(
+              (panel) =>
+                panel.current.idWasAutoGenerated || panel.current.order == null
+            )
+          ) {
+            devWarningsRef.current.didLogIdAndOrderWarning = true;
+
+            console.warn(
+              `WARNING: Panel id and order props recommended when panels are dynamically rendered`
+            );
+          }
+        }
+      }
+    }
   }, [autoSaveId, panels, sizes, storage]);
 
   const getPanelStyle = useCallback(
@@ -345,10 +383,13 @@ function PanelGroupWithForwardedRef({
       // At this point the best we can do is render everything with the same size.
       if (panels.size === 0) {
         if (isDevelopment) {
-          if (isServerRendering() && defaultSize == null) {
-            console.warn(
-              `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
-            );
+          if (!devWarningsRef.current.didLogDefaultSizeWarning) {
+            if (!isBrowser && defaultSize == null) {
+              devWarningsRef.current.didLogDefaultSizeWarning = true;
+              console.warn(
+                `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
+              );
+            }
           }
         }
 
@@ -770,8 +811,5 @@ export const PanelGroup = forwardRef<
   createElement(PanelGroupWithForwardedRef, { ...props, forwardedRef: ref })
 );
 
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
-(PanelGroupWithForwardedRef as any).displayName = "PanelGroup";
-(PanelGroup as any).displayName = "forwardRef(PanelGroup)";
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";

package/src/PanelResizeHandle.ts

@@ -190,7 +190,4 @@ export function PanelResizeHandle({
   });
 }
 
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
-(PanelResizeHandle as any).displayName = "PanelResizeHandle";
+PanelResizeHandle.displayName = "PanelResizeHandle";

package/src/env-conditions/browser.ts

@@ -0,0 +1 @@
+export const isBrowser = true;

package/src/env-conditions/node.ts

@@ -0,0 +1 @@
+export const isBrowser = false;

package/src/env-conditions/unknown.ts

@@ -0,0 +1 @@
+export const isBrowser = typeof window !== "undefined";

package/src/hooks/useIsomorphicEffect.ts

@@ -1,13 +1,6 @@
+import { isBrowser } from "#is-browser";
 import { useLayoutEffect } from "../vendor/react";
 
-const canUseEffectHooks = !!(
-  typeof window !== "undefined" &&
-  typeof window.document !== "undefined" &&
-  typeof window.document.createElement !== "undefined"
-);
-
-const useIsomorphicLayoutEffect = canUseEffectHooks
-  ? useLayoutEffect
-  : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
 export default useIsomorphicLayoutEffect;

package/src/types.ts

@@ -24,6 +24,7 @@ export type PanelData = {
     collapsible: boolean;
     defaultSize: number | null;
     id: string;
+    idWasAutoGenerated: boolean;
     maxSize: number;
     minSize: number;
     order: number | null;

package/src/utils/ssr.ts

@@ -1,7 +0,0 @@
-export function isServerRendering(): boolean {
-  try {
-    return typeof window === undefined;
-  } catch (error) {}
-
-  return true;
-}