Package exports now used to select between node and browser bundles (#…

…156)

Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles

packages/react-resizable-panels/package.json

@@ -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",

packages/react-resizable-panels/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]: (
@@ -344,12 +344,10 @@ function PanelGroupWithForwardedRef({
       // This includes server rendering.
       // 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 (isDevelopment && !isBrowser && defaultSize == null) {
+          console.warn(
+            `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
+          );
         }
 
         return {

packages/react-resizable-panels/src/env-conditions/browser.ts

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

packages/react-resizable-panels/src/env-conditions/node.ts

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

packages/react-resizable-panels/src/env-conditions/unknown.ts

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

packages/react-resizable-panels/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;