improve the useResizeState and useResponsiveState api

Author: MatiasWorker

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "type": "module",
   "workspaces": [
     "src/**/*"

src/use-resize-state/use-resize-state.js

@@ -1,13 +1,17 @@
-import { useState } from "atomico";
+import { useHost, useState } from "atomico";
 import { useResizeObserver } from "../use-resize-observer/use-resize-observer.js";
 import media from "@uppercod/match-media";
 
+/**
+ * @type {{[index:string]:ReturnType<media>}}
+ */
+const CACHE_TEMPLATE = {};
 /**
  *
  * @param {import("atomico").Ref<Element>} ref
  * @return {string}
  */
-export function useResizeState(ref, sizes) {
+export function useRefResizeState(ref, sizes) {
   /**
    * @type {ReturnType<media>}
    */
@@ -25,3 +29,37 @@ export function useResizeState(ref, sizes) {
 
   return state;
 }
+
+/**
+ *
+ * @param {string|TemplateStringsArray} part
+ * @param  {...any} [args]
+ * @returns
+ */
+export function useResizeState(part, ...args) {
+  const ref = useHost();
+  /**
+   * @type {ReturnType<media>}
+   */
+  let template;
+  if (typeof part === "string") {
+    if (!CACHE_TEMPLATE[part]) {
+      CACHE_TEMPLATE[part] = media.call(null, { raw: [part] });
+    }
+    template = CACHE_TEMPLATE[part];
+  } else {
+    template = media.call(null, part, ...args);
+  }
+
+  const [state, setState] = useState();
+
+  function getState() {
+    const { clientWidth } = ref.current;
+
+    return template.match(({ size }) => size <= clientWidth);
+  }
+
+  useResizeObserver(ref, () => setState(getState));
+
+  return state;
+}

src/use-resize-state/use-resize-state.test.js

@@ -1,34 +1,35 @@
 import { expect } from "@esm-bundle/chai";
-import { compareSnapshot, setViewport } from "@web/test-runner-commands";
+import { setViewport } from "@web/test-runner-commands";
 import { createHooks } from "atomico/test-hooks";
-import { useResizeState } from "./use-resize-state.js";
+import { useRefResizeState } from "./use-resize-state.js";
 
-it("useResponsiveState <= 320px", async () => {
-  const current = document.createElement("div");
-  const ref = { current };
-  let step = 0;
-  const results = [];
+describe("useResponsiveState", () => {
+  it("useResponsiveState <= 320px", async () => {
+    const current = document.createElement("div");
+    const ref = { current };
+    const results = [];
 
-  document.body.appendChild(current);
+    document.body.appendChild(current);
 
-  const hooks = createHooks(() => hooks.load(load), current);
+    const hooks = createHooks(() => hooks.load(load), current);
 
-  const load = () => {
-    const value = useResizeState(ref, "no, yes 320px");
-    results.push(value);
-  };
+    const load = () => {
+      const value = useRefResizeState(ref, "no, yes 320px");
+      results.push(value);
+    };
 
-  hooks.load(load);
+    hooks.load(load);
 
-  hooks.cleanEffects()();
+    hooks.cleanEffects()();
 
-  await setViewport({ width: 360, height: 640 });
+    await setViewport({ width: 360, height: 640 });
 
-  await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
-  await setViewport({ width: 200, height: 640 });
+    await setViewport({ width: 200, height: 640 });
 
-  await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
-  expect(results).to.deep.equal([undefined, "yes", "no"]);
+    expect(results).to.deep.equal([undefined, "yes", "no"]);
+  });
 });

src/use-responsive-state/src/string-escape.js

@@ -6,21 +6,32 @@ import media from "@uppercod/match-media";
  */
 const CACHE = {};
 
+/**
+ * @type {{[index:string]:ReturnType<media>}}
+ */
+const CACHE_TEMPLATE = {};
+
 /**
  * @param {import("@uppercod/match-media").Result} result
  */
 const getId = ({ size, unit }) => `(min-width: ${size}${unit})`;
 
+/**
+ *
+ * @param {string|TemplateStringsArray} part
+ * @param  {...any} [args]
+ * @returns
+ */
 export function useResponsiveState(part, ...args) {
   /**@type {ReturnType<typeof media>} */
   let template;
 
   if (typeof part === "string") {
-    if (!CACHE[part]) {
-      CACHE[part] = media.call(null, { raw: [part] });
+    if (!CACHE_TEMPLATE[part]) {
+      CACHE_TEMPLATE[part] = media.call(null, { raw: [part] });
     }
-    template = CACHE[part];
-  } else if (part) {
+    template = CACHE_TEMPLATE[part];
+  } else {
     template = media.call(null, part, ...args);
   }