@atomico/hooks - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "type": "module",
@@ -19,3 +19,4 @@ "exports": {
     "./use-mutation-observer": "./src/use-mutation-observer.js",
-    "./use-channel": "./src/use-channel.js"
+    "./use-resize-state": "./src/use-resize-state.js",
+    "./use-debounce-state": "./src/use-debounce-state.js"
   },
@@ -22,0 +23,0 @@ "typings": "*.d.ts",

src/use-render.js

@@ -1,2 +0,2 @@
-import { h, render, useHost, useMemo } from "atomico";
+import { h, render, useHost, useMemo, useEffect } from "atomico";
 
@@ -26,2 +26,4 @@ const host = h("host");
   useMemo(() => render(fillHost(callback()), host.current, host.id), args);
+  // Clean nodes in case of recycling
+  useEffect(() => () => render(fillHost(), host.current, host.id), []);
 }

src/use-responsive-state.js

 import { useEffect, useState } from "atomico";
 
-const regExp = /,\s*([^,]+)\s+(?:(\d+)(?:x(\d+)){0,1}(px|em|rem))/;
+export const matchSize = /,\s*([^,]+)\s+(?:(\d+)(?:x(\d+)){0,1}(px|em|rem))/;
 
@@ -12,5 +12,5 @@ /**
  */
-const matchMedia = {};
+const cacheQuery = {};
 /**
- * Returns a string status according to the serialized matchMedia
+ * Returns a string status according to the serialized cacheQuery
  * @example
@@ -24,4 +24,3 @@ * ```js
 export function useResponsiveState(sizes) {
-  const [sizeDefault, matches] = (cacheSize[sizes] =
-    cacheSize[sizes] || getSizes(sizes));
+  const [sizeDefault, matches] = getSizes(sizes);
 
@@ -31,3 +30,3 @@ const [state, setState] = useState(getState);
   function getState() {
-    const match = matches.find(({ match }) => match.matches);
+    const match = matches.find((match) => getQuery(match).matches);
     return match ? match.value : sizeDefault;
@@ -41,4 +40,5 @@ }
     // Observe the resolution changes
-    matches.forEach(({ match }) => match.addListener(listener));
-    return () => matches.forEach(({ match }) => match.removeListener(listener));
+    matches.forEach((match) => getQuery(match).addListener(listener));
+    return () =>
+      matches.forEach((match) => getQuery(match).removeListener(listener));
   }, [sizes]);
@@ -50,2 +50,13 @@
  *
+ * @param {Match} match
+ * @returns {MediaQueryList}
+ */
+export const getQuery = ({ width, height, type }) => {
+  const query =
+    (width ? `(min-width: ${width}${type})` : "") +
+    (height ? `and (min-height: ${height}${type})` : "");
+  return (cacheQuery[query] = cacheQuery[query] || window.matchMedia(query));
+};
+/**
+ *
  * @param {string} sizes
@@ -55,5 +66,6 @@ * @returns {[string,Match[]]}
 export function getSizes(sizes) {
+  if (cacheSize[sizes]) return cacheSize[sizes];
   const values = [];
   let test;
-  while ((test = sizes.match(regExp))) {
+  while ((test = sizes.match(matchSize))) {
     const [replace, value, width, height, type] = test;
@@ -63,8 +75,2 @@
 
-    const query =
-      (width ? `(min-width: ${width}${type})` : "") +
-      (height ? `and (min-height: ${height}${type})` : "");
-
-    matchMedia[query] = matchMedia[query] || window.matchMedia(query);
-
     values.push({
@@ -75,4 +81,2 @@ value,
       type,
-      query,
-      match: matchMedia[query],
     });
@@ -94,4 +98,2 @@ }
  * @property {string} type
- * @property {string} query
- * @property {MediaQueryList} match
  */

use-responsive-state.d.ts

 /**
- * Returns a string status according to the serialized matchMedia
+ * Returns a string status according to the serialized cacheQuery
  * @example
@@ -17,2 +17,4 @@ * ```js
 export function getSizes(sizes: string): [string, Match[]];
+export const matchSize: RegExp;
+export function getQuery({ width, height, type }: Match): MediaQueryList;
 export type Match = {
@@ -23,4 +25,2 @@ value: string;
     type: string;
-    query: string;
-    match: MediaQueryList;
 };

No alert changes

Improved metrics

Total package byte prevSize

26836

increased by9.4%

Number of package files

37

increased by12.12%

Lines of code

862

increased by8.43%

No dependency changes