@atomico/hooks - npm Package Compare versions

Comparing version 3.22.0 to 3.23.0

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "type": "module",
@@ -6,0 +6,0 @@ "workspaces": [

src/use-click-coordinates/use-click-coordinates.js

@@ -26,3 +26,3 @@ import { useEffect } from "atomico";
     );
-  }, [ref]);
+  }, [ref, ref?.current]);
 }
@@ -29,0 +29,0 @@

src/use-form-submitter/use-form-submitter.js

 import { useState, useEffect } from "atomico";
+import { Status } from "../use-promise/use-promise";
 import { useCurrentValue } from "../use-current-value/use-current-value";
@@ -27,3 +28,3 @@ import { addListener } from "../use-listener/use-listener";
    */
-  const [state, setState] = useState([null, ""]);
+  const [state, setState] = useState([null, Status.quiet]);
 
@@ -35,2 +36,4 @@ async function submit(event) {
     const { current } = ref;
+
+    const target = event?.target || current;
     /**
@@ -42,3 +45,3 @@ * @type {Options}
       ...{
-        action: current.getAttribute("action"),
+        action: target.getAttribute("action"),
       },
@@ -51,8 +54,8 @@ ...currentOptions.current,
 
-    setState([null, "pending"]);
-    const data = await formData(current);
+    setState([null, Status.pending]);
+    const data = await formData(target);
     try {
-      setState([await submit(data, { action, request }), "fulfilled"]);
+      setState([await submit(data, { action, request }), Status.fulfilled]);
     } catch (error) {
-      setState([error, "rejected"]);
+      setState([error, Status.rejected]);
     }
@@ -72,6 +75,6 @@ currentOptions.prevent = false;
  * @typedef {Object} Options
- * @property {string} action
- * @property {RequestInit} request
+ * @property {string} [action]
+ * @property {RequestInit} [request]
  * @property {(target: HTMLFormElement)=>any} [formData]
- * @property {(data: any, options: {action: string, request: RequestInit})=>any} submit
+ * @property {(data: any, options: {action: string, request: RequestInit})=>any} [submit]
  */

src/use-keyboard/use-keyboard.js

@@ -39,3 +39,3 @@ import { useEffect } from "atomico";
     };
-  }, keys);
+  }, [ref, ref?.current, ...keys]);
 }

src/use-listener/use-listener.js

@@ -15,3 +15,3 @@ import { useLayoutEffect } from "atomico";
     return addListener(current, name, (event) => value.current(event), options);
-  }, [name, !!handler]);
+  }, [ref, ref?.current, name, !!handler]);
 }
@@ -18,0 +18,0 @@

src/use-mutation-observer/use-mutation-observer.js

@@ -24,3 +24,3 @@ import { useEffect, useState } from "atomico";
     return () => observer.disconnect();
-  }, [ref]);
+  }, [ref, ref?.current]);
 }
@@ -27,0 +27,0 @@

src/use-promise/use-promise.js

 import { useEffect, useState } from "atomico";
 
 /**
+ * @type {Status}
+ */
+export const Status = {
+  quiet: "",
+  pending: "pending",
+  fulfilled: "fulfilled",
+  rejected: "rejected",
+};
+/**
  * @return {State}
@@ -23,6 +32,6 @@ */
     if (run) {
-      setState(([result]) => [result, "pending"]);
+      setState(([result]) => [result, Status.pending]);
       promise().then(
-        (result) => run && setState(() => [result, "fulfilled"]),
-        (result) => run && setState(() => [result, "rejected"])
+        (result) => run && setState(() => [result, Status.fulfilled]),
+        (result) => run && setState(() => [result, Status.rejected])
       );
@@ -34,3 +43,3 @@ }
         // clear the state since the promise has been canceled
-        return status == "pending" ? [result, ""] : state;
+        return status == Status.pending ? [result, Status.quiet] : state;
       });
@@ -44,4 +53,12 @@ run = null;
 
-/**@typedef {""|"pending"|"fulfilled"|"rejected"} PromiseStatus */
+/**@typedef {Status["quiet"]|Status["pending"]|Status["fulfilled"]|Status["rejected"]} PromiseStatus */
 
 /**@typedef {[any,PromiseStatus]} State */
+
+/**
+ * @typedef {Object} Status
+ * @property {""} quiet
+ * @property {"pending"} pending
+ * @property {"fulfilled"} fulfilled
+ * @property {"rejected"} rejected
+ */

src/use-queue-task/use-queue-task.js

 import { useState, useMemo } from "atomico";
+import { Status } from "../use-promise/use-promise";
 
@@ -21,3 +22,3 @@ /**
      *
-     * @param {import("../use-promise/use-promise").PromiseStatus} status
+     * @param {TaskStatus} status
      * @param {any} result
@@ -40,7 +41,11 @@ * @returns
     const task = map(value)
-      .then((result) => set("fulfilled", result))
-      .catch((result) => set("rejected", result));
+      .then((result) => set(Status.fulfilled, result))
+      .catch((result) => set(Status.rejected, result));
 
     /**@type {Task<any>} */
-    const current = { task, timeStamp: performance.now(), status: "pending" };
+    const current = {
+      task,
+      timeStamp: performance.now(),
+      status: Status.pending,
+    };
     queue.set(currentId, current);
@@ -57,3 +62,3 @@
  * @typedef {Object} Task
- * @property {import("../use-promise/use-promise").PromiseStatus} status
+ * @property {TaskStatus} status
  * @property {R} [result]
@@ -63,1 +68,5 @@ * @property {number} timeStamp
  */
+
+/**
+ * @typedef {Exclude<import("../use-promise/use-promise").PromiseStatus,"">} TaskStatus
+ */

src/use-resize-observer/use-resize-observer.js

@@ -49,3 +49,3 @@ import { useEffect, useState } from "atomico";
     };
-  }, [ref]);
+  }, [ref, ref?.current]);
 }
@@ -52,0 +52,0 @@

src/use-slot/use-slot.js

@@ -14,4 +14,2 @@ import { useState, useEffect, Mark } from "atomico";
     if (!current) return;
-    const type = "slotchange";
-
     // handler subscriber to the event
@@ -18,0 +16,0 @@ const handler = () =>

types/use-form-submitter/use-form-submitter.d.ts

@@ -10,9 +10,9 @@ /**
 export type Options = {
-    action: string;
-    request: RequestInit;
+    action?: string | undefined;
+    request?: RequestInit | undefined;
     formData?: ((target: HTMLFormElement) => any) | undefined;
-    submit: (data: any, options: {
+    submit?: ((data: any, options: {
         action: string;
         request: RequestInit;
-    }) => any;
+    }) => any) | undefined;
 };

types/use-promise/use-promise.d.ts

@@ -13,3 +13,13 @@ /**
 export function usePromise(promise: () => Promise<any>, run: boolean, args?: any[] | undefined): State;
-export type PromiseStatus = "" | "pending" | "fulfilled" | "rejected";
+export type Status = {
+    quiet: "";
+    pending: "pending";
+    fulfilled: "fulfilled";
+    rejected: "rejected";
+};
+/**
+ * @type {Status}
+ */
+export const Status: Status;
+export type PromiseStatus = Status["quiet"] | Status["pending"] | Status["fulfilled"] | Status["rejected"];
 export type State = [any, PromiseStatus];

types/use-queue-task/use-queue-task.d.ts

@@ -12,3 +12,3 @@ /**
 export type Task<R> = {
-    status: import("../use-promise/use-promise").PromiseStatus;
+    status: TaskStatus;
     result?: R | undefined;
@@ -18,1 +18,2 @@ timeStamp: number;
 };
+export type TaskStatus = Exclude<import("../use-promise/use-promise").PromiseStatus, "">;

No alert changes

Improved metrics

Total package byte prevSize

73952

increased by2.27%

Number of package files

90

increased by1.12%

Lines of code

2193

increased by2.72%

No dependency changes