@alisowski/react-resizable-panels - npm Package Compare versions

Comparing version 0.1.19 to 0.1.20

dist/alisowski-react-resizable-panels.browser.cjs.js

@@ -1163,4 +1163,6 @@ 'use strict';
 
-    // After that rely on a resize observer to update the group size
+    // We need to know total group size to calculate panel sizes.
+    // First we watch for group size changes.
     const observer = new ResizeObserver(([group]) => {
+      // When the size changes we also measure the size of the panels in the group
       const subObserver = new ResizeObserver(handles => {
@@ -1176,3 +1178,22 @@ if (direction === "horizontal") {
         }
+
+        // We only need to really watch the parent for size updates
+        // So we can disconnect the subObserver
         subObserver.disconnect();
+
+        // Now that we know the actual size of the group we can calculate the sizes of the panels
+        const {
+          panels,
+          sizes: prevSizes
+        } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupSizePixels: groupSizeRef.current,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units
+        });
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
       });
@@ -1185,2 +1206,4 @@ resizeHandles.forEach(handle => {
     });
+
+    // This runs while the component is mounted
     observer.observe(panelGroupElement, {
@@ -1330,28 +1353,2 @@ box: "border-box"
   }, [autoSaveId, panels, sizes, storage]);
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const {
-          panels,
-          sizes: prevSizes
-        } = committedValuesRef.current;
-        const nextSizes = validatePanelGroupLayout({
-          groupSizePixels: groupSizeRef.current,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
-      resizeObserver.observe(getPanelGroup(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
   const getPanelSize = useCallback((id, unitsFromParams) => {
@@ -1358,0 +1355,0 @@ const {

dist/alisowski-react-resizable-panels.browser.esm.js

@@ -1139,4 +1139,6 @@ import * as React from 'react';
 
-    // After that rely on a resize observer to update the group size
+    // We need to know total group size to calculate panel sizes.
+    // First we watch for group size changes.
     const observer = new ResizeObserver(([group]) => {
+      // When the size changes we also measure the size of the panels in the group
       const subObserver = new ResizeObserver(handles => {
@@ -1152,3 +1154,22 @@ if (direction === "horizontal") {
         }
+
+        // We only need to really watch the parent for size updates
+        // So we can disconnect the subObserver
         subObserver.disconnect();
+
+        // Now that we know the actual size of the group we can calculate the sizes of the panels
+        const {
+          panels,
+          sizes: prevSizes
+        } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupSizePixels: groupSizeRef.current,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units
+        });
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
       });
@@ -1161,2 +1182,4 @@ resizeHandles.forEach(handle => {
     });
+
+    // This runs while the component is mounted
     observer.observe(panelGroupElement, {
@@ -1306,28 +1329,2 @@ box: "border-box"
   }, [autoSaveId, panels, sizes, storage]);
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const {
-          panels,
-          sizes: prevSizes
-        } = committedValuesRef.current;
-        const nextSizes = validatePanelGroupLayout({
-          groupSizePixels: groupSizeRef.current,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
-      resizeObserver.observe(getPanelGroup(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
   const getPanelSize = useCallback((id, unitsFromParams) => {
@@ -1334,0 +1331,0 @@ const {

dist/alisowski-react-resizable-panels.cjs.js

@@ -1165,4 +1165,6 @@ 'use strict';
 
-    // After that rely on a resize observer to update the group size
+    // We need to know total group size to calculate panel sizes.
+    // First we watch for group size changes.
     const observer = new ResizeObserver(([group]) => {
+      // When the size changes we also measure the size of the panels in the group
       const subObserver = new ResizeObserver(handles => {
@@ -1178,3 +1180,22 @@ if (direction === "horizontal") {
         }
+
+        // We only need to really watch the parent for size updates
+        // So we can disconnect the subObserver
         subObserver.disconnect();
+
+        // Now that we know the actual size of the group we can calculate the sizes of the panels
+        const {
+          panels,
+          sizes: prevSizes
+        } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupSizePixels: groupSizeRef.current,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units
+        });
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
       });
@@ -1187,2 +1208,4 @@ resizeHandles.forEach(handle => {
     });
+
+    // This runs while the component is mounted
     observer.observe(panelGroupElement, {
@@ -1332,28 +1355,2 @@ box: "border-box"
   }, [autoSaveId, panels, sizes, storage]);
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const {
-          panels,
-          sizes: prevSizes
-        } = committedValuesRef.current;
-        const nextSizes = validatePanelGroupLayout({
-          groupSizePixels: groupSizeRef.current,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
-      resizeObserver.observe(getPanelGroup(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
   const getPanelSize = useCallback((id, unitsFromParams) => {
@@ -1360,0 +1357,0 @@ const {

dist/alisowski-react-resizable-panels.esm.js

@@ -1141,4 +1141,6 @@ import * as React from 'react';
 
-    // After that rely on a resize observer to update the group size
+    // We need to know total group size to calculate panel sizes.
+    // First we watch for group size changes.
     const observer = new ResizeObserver(([group]) => {
+      // When the size changes we also measure the size of the panels in the group
       const subObserver = new ResizeObserver(handles => {
@@ -1154,3 +1156,22 @@ if (direction === "horizontal") {
         }
+
+        // We only need to really watch the parent for size updates
+        // So we can disconnect the subObserver
         subObserver.disconnect();
+
+        // Now that we know the actual size of the group we can calculate the sizes of the panels
+        const {
+          panels,
+          sizes: prevSizes
+        } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupSizePixels: groupSizeRef.current,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units
+        });
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
       });
@@ -1163,2 +1184,4 @@ resizeHandles.forEach(handle => {
     });
+
+    // This runs while the component is mounted
     observer.observe(panelGroupElement, {
@@ -1308,28 +1331,2 @@ box: "border-box"
   }, [autoSaveId, panels, sizes, storage]);
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const {
-          panels,
-          sizes: prevSizes
-        } = committedValuesRef.current;
-        const nextSizes = validatePanelGroupLayout({
-          groupSizePixels: groupSizeRef.current,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
-      resizeObserver.observe(getPanelGroup(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
   const getPanelSize = useCallback((id, unitsFromParams) => {
@@ -1336,0 +1333,0 @@ const {

package.json

 {
   "name": "@alisowski/react-resizable-panels",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

src/PanelGroup.ts

@@ -236,4 +236,6 @@ import { isBrowser } from "#is-browser";
 
-    // After that rely on a resize observer to update the group size
+    // We need to know total group size to calculate panel sizes.
+    // First we watch for group size changes.
     const observer = new ResizeObserver(([group]) => {
+      // When the size changes we also measure the size of the panels in the group
       const subObserver = new ResizeObserver((handles) => {
@@ -254,3 +256,19 @@ if (direction === "horizontal") {
 
+        // We only need to really watch the parent for size updates
+        // So we can disconnect the subObserver
         subObserver.disconnect();
+
+        // Now that we know the actual size of the group we can calculate the sizes of the panels
+        const { panels, sizes: prevSizes } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupSizePixels: groupSizeRef.current,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units,
+        });
+
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
       });
@@ -264,2 +282,4 @@
     });
+
+    // This runs while the component is mounted
     observer.observe(panelGroupElement, {
@@ -456,29 +476,2 @@ box: "border-box",
 
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const { panels, sizes: prevSizes } = committedValuesRef.current;
-
-        const nextSizes = validatePanelGroupLayout({
-          groupSizePixels: groupSizeRef.current,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units,
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
-
-      resizeObserver.observe(getPanelGroup(groupId)!);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
-
   const getPanelSize = useCallback(
@@ -485,0 +478,0 @@ (id: string, unitsFromParams?: Units) => {

No alert changes

Worsened metrics

Total package byte prevSize

841842

decreased by-21.98%

Number of package files

57

decreased by-3.39%

Lines of code

22978

decreased by-0.23%

No dependency changes