use-resize-observer - npm Package Compare versions

Comparing version 6.1.0-alpha.2 to 6.1.0-alpha.3

.size-limit.json

 [
   {
     "path": "dist/bundle.esm.js",
-    "limit": "353 B",
+    "limit": "357 B",
     "gzip": true
@@ -9,3 +9,3 @@ },
     "path": "dist/bundle.esm.js",
-    "limit": "266 B",
+    "limit": "281 B",
     "brotli": true
@@ -15,3 +15,3 @@ },
     "path": "dist/bundle.cjs.js",
-    "limit": "341 B",
+    "limit": "346 B",
     "gzip": true
@@ -21,3 +21,3 @@ },
     "path": "dist/bundle.cjs.js",
-    "limit": "258 B",
+    "limit": "261 B",
     "brotli": true
@@ -27,3 +27,3 @@ },
     "path": "polyfilled.js",
-    "limit": "2673 B",
+    "limit": "2678 B",
     "gzip": true
@@ -30,0 +30,0 @@ },

CHANGELOG.md

 # CHANGELOG
 
+## 6.1.0-alpha3
+
+- Fixed SSR rendering, and added a test to cover it.
+
 ## 6.1.0-alpha2
@@ -4,0 +8,0 @@

dist/bundle.cjs.js

@@ -22,4 +22,21 @@ 'use strict';
   var resizeObserverRef = react.useRef();
+  var ref = opts.ref || defaultRef;
 
-  if (!resizeObserverRef.current) {
+  var _useState = react.useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = react.useRef({
+    width: undefined,
+    height: undefined
+  });
+  react.useEffect(function () {
+    if (resizeObserverRef.current) {
+      return;
+    }
+
     resizeObserverRef.current = new ResizeObserver(function (entries) {
@@ -56,18 +73,3 @@ if (!Array.isArray(entries)) {
     });
-  }
-
-  var ref = opts.ref || defaultRef;
-
-  var _useState = react.useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
-
-
-  var previous = react.useRef({
-    width: undefined,
-    height: undefined
-  });
+  }, []);
   react.useEffect(function () {
@@ -74,0 +76,0 @@ if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {

dist/bundle.esm.js

@@ -20,4 +20,21 @@ import { useRef, useState, useEffect, useMemo } from 'react';
   var resizeObserverRef = useRef();
+  var ref = opts.ref || defaultRef;
 
-  if (!resizeObserverRef.current) {
+  var _useState = useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = useRef({
+    width: undefined,
+    height: undefined
+  });
+  useEffect(function () {
+    if (resizeObserverRef.current) {
+      return;
+    }
+
     resizeObserverRef.current = new ResizeObserver(function (entries) {
@@ -54,18 +71,3 @@ if (!Array.isArray(entries)) {
     });
-  }
-
-  var ref = opts.ref || defaultRef;
-
-  var _useState = useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
-
-
-  var previous = useRef({
-    width: undefined,
-    height: undefined
-  });
+  }, []);
   useEffect(function () {
@@ -72,0 +74,0 @@ if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {

package.json

 {
   "name": "use-resize-observer",
-  "version": "6.1.0-alpha.2",
+  "version": "6.1.0-alpha.3",
   "main": "dist/bundle.cjs.js",
@@ -17,4 +17,5 @@ "module": "dist/bundle.esm.js",
     "check:size": "size-limit",
-    "check:tests": "tsc -p tests",
-    "test": "run-s 'build' 'check:size' 'check:tests' 'test:headless:*'",
+    "check:types": "tsc -p tests",
+    "test": "run-s 'build' 'check:size' 'check:types' 'test:create:ssr' 'test:headless:*'",
+    "test:create:ssr": "node ./tests/ssr/create-ssr-test.js",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
@@ -21,0 +22,0 @@ "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",

polyfilled.js

@@ -25,4 +25,21 @@ 'use strict';
   var resizeObserverRef = react.useRef();
+  var ref = opts.ref || defaultRef;
 
-  if (!resizeObserverRef.current) {
+  var _useState = react.useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = react.useRef({
+    width: undefined,
+    height: undefined
+  });
+  react.useEffect(function () {
+    if (resizeObserverRef.current) {
+      return;
+    }
+
     resizeObserverRef.current = new ResizeObserver(function (entries) {
@@ -59,18 +76,3 @@ if (!Array.isArray(entries)) {
     });
-  }
-
-  var ref = opts.ref || defaultRef;
-
-  var _useState = react.useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
-
-
-  var previous = react.useRef({
-    width: undefined,
-    height: undefined
-  });
+  }, []);
   react.useEffect(function () {
@@ -77,0 +79,0 @@ if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {

No alert changes

Improved metrics

Total package byte prevSize

21142

increased by1.53%

Lines of code

297

increased by3.13%

No dependency changes