@shopify/react-hooks - npm Package Compare versions

Comparing version 0.0.0-snapshot-20240308174203 to 0.0.0-snapshot-20240620045713

build/cjs/hooks/debounced.js

@@ -19,3 +19,2 @@ 'use strict';
     }
-
     const timeout = setTimeout(() => {
@@ -22,0 +21,0 @@ stateRef.current = value;

build/cjs/hooks/delayed-callback.js

@@ -16,3 +16,2 @@ 'use strict';
   }, []);
-
   function callbackWithDelay() {
@@ -25,3 +24,2 @@ const timeoutId = setTimeout(() => {
   }
-
   return callbackWithDelay;
@@ -28,0 +26,0 @@ }

build/cjs/hooks/interval.js

@@ -14,4 +14,5 @@ 'use strict';
 function useInterval(callback, delay) {
-  const savedCallback = React.useRef(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+  const savedCallback = React.useRef(callback);
 
+  // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
   isomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
@@ -24,3 +25,2 @@ savedCallback.current = callback;
     }
-
     if (delay !== null) {
@@ -30,3 +30,2 @@ const id = setInterval(tick, delay);
     }
-
     return undefined;
@@ -33,0 +32,0 @@ }, [delay]);

build/cjs/hooks/isomorphic-layout-effect.js

@@ -7,9 +7,10 @@ 'use strict';
 
+// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
 const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
 /**
  * A hook that resolves to useEffect on the server and useLayoutEffect on the client
  */
-
 const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

build/cjs/hooks/media.js

@@ -7,2 +7,3 @@ 'use strict';
 
+const hookCallbacks = {};
 function createUseMediaFactory(useEffectHook) {
@@ -16,10 +17,45 @@ return query => {
 
-      const matchMedia = window.matchMedia(query);
+      // First time we've seen this media query
+      if (!hookCallbacks[query]) {
+        hookCallbacks[query] = {
+          // Each of these callbacks will be executed in order when the event
+          // fires
+          callbacks: new Set(),
+          // Will use .matches for subsequent hook calls referencing the same
+          // query so their initial (client) state is updated correctly.
+          matchMedia: window.matchMedia(query),
+          // Setup the event listener for this query
+          eventListener: event => {
+            for (const hookCallback of hookCallbacks[query].callbacks) {
+              // Don't allow earlier handlers to block later handlers if they
+              // throw an error
+              try {
+                hookCallback(event.matches);
+              } catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(error);
+              }
+            }
+          }
+        };
 
-      const updateMatch = event => setMatch(event.matches);
+        // Connect event listener to window events
+        hookCallbacks[query].matchMedia.addListener(hookCallbacks[query].eventListener);
+      }
 
-      setMatch(matchMedia.matches);
-      matchMedia.addListener(updateMatch);
+      // Update state when the media query changes
+      hookCallbacks[query].callbacks.add(setMatch);
+
+      // Set the state once when useEffect is called
+      setMatch(hookCallbacks[query].matchMedia.matches);
       return () => {
-        matchMedia.removeListener(updateMatch);
+        // Don't listen to this query anymore
+        hookCallbacks[query].callbacks.delete(setMatch);
+
+        // Clean up: If there's no one interested in this query anymore, remove
+        // the event listener from the window.
+        if (hookCallbacks[query].callbacks.size === 0) {
+          hookCallbacks[query].matchMedia.removeListener(hookCallbacks[query].eventListener);
+          delete hookCallbacks[query];
+        }
       };
@@ -30,3 +66,2 @@ }, [query]);
 }
-
 const useMedia = createUseMediaFactory(React.useEffect);
@@ -33,0 +68,0 @@ const useMediaLayout = createUseMediaFactory(React.useLayoutEffect);

build/cjs/hooks/on-value-change.js

@@ -15,3 +15,2 @@ 'use strict';
     const oldValue = tracked.current;
-
     if (value !== tracked.current) {
@@ -18,0 +17,0 @@ tracked.current = value;

build/cjs/hooks/timeout.js

@@ -9,4 +9,5 @@ 'use strict';
 function useTimeout(callback, delay) {
-  const savedCallback = React.useRef(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+  const savedCallback = React.useRef(callback);
 
+  // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
   isomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
@@ -19,3 +20,2 @@ savedCallback.current = callback;
     }
-
     if (delay !== null) {
@@ -25,3 +25,2 @@ const id = setTimeout(tick, delay);
     }
-
     return undefined;
@@ -28,0 +27,0 @@ }, [delay]);

build/cjs/hooks/toggle.js

@@ -11,3 +11,2 @@ 'use strict';
  */
-
 function useToggle(initialState) {
@@ -14,0 +13,0 @@ const [value, setState] = React.useState(initialState);

build/ts/hooks/media.d.ts

@@ -1,3 +0,5 @@
-export declare const useMedia: (query: string) => boolean;
-export declare const useMediaLayout: (query: string) => boolean;
+type Query = string;
+export declare const useMedia: (query: Query) => boolean;
+export declare const useMediaLayout: (query: Query) => boolean;
+export {};
 //# sourceMappingURL=media.d.ts.map

package.json

 {
   "name": "@shopify/react-hooks",
-  "version": "0.0.0-snapshot-20240308174203",
+  "version": "0.0.0-snapshot-20240620045713",
   "license": "MIT",
@@ -23,7 +23,7 @@ "description": "A collection of primitive React hooks",
   "peerDependencies": {
-    "react": ">=16.8.0 <19.0.0"
+    "react": ">=18.0.0 <19.0.0"
   },
   "homepage": "https://github.com/Shopify/quilt/blob/main/packages/react-hooks/README.md",
   "engines": {
-    "node": "^14.17.0 || >=16.0.0"
+    "node": ">=18.12.0"
   },
@@ -49,5 +49,5 @@ "files": [
   "devDependencies": {
-    "@shopify/jest-dom-mocks": "^5.0.0",
-    "@shopify/react-testing": "^5.1.4"
+    "@shopify/jest-dom-mocks": "0.0.0-snapshot-20240620045713",
+    "@shopify/react-testing": "0.0.0-snapshot-20240620045713"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

42232

increased by13.32%

Lines of code

551

increased by16%

No dependency changes