@atomico/hooks - npm Package Compare versions

Comparing version 3.32.0 to 3.33.0

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "type": "module",
@@ -47,2 +47,3 @@ "workspaces": [
     "./use-form-submitter": "./src/use-form-submitter/use-form-submitter.js",
+    "./use-history": "./src/use-history/use-history.js",
     "./use-internals": "./src/use-internals/use-internals.js",
@@ -143,2 +144,5 @@ "./use-keyboard": "./src/use-keyboard/use-keyboard.js",
       ],
+      "use-history": [
+        "./types/use-history/use-history.d.ts"
+      ],
       "use-internals": [
@@ -145,0 +149,0 @@ "./types/use-internals/use-internals.d.ts"

src/use-listener/use-listener.js

@@ -20,5 +20,7 @@ import { useLayoutEffect, useState } from "atomico";
  * Associate an event and return a callback to remove said event
- * @param {ChildNode} current
+ * @template {ChildNode | typeof window} C
+ * @template {Event} E
+ * @param {C} current
  * @param {string} name
- * @param {EventListener} handler
+ * @param {(event:import("atomico").DOMEvent<C, E>)=>any} handler
  * @param {boolean|AddEventListenerOptions} [options]
@@ -25,0 +27,0 @@ * @returns {()=>void}

src/use-router/src/history.js

@@ -0,6 +1,9 @@
+import { addListener } from "../../use-listener/use-listener.js";
 /**
  * @param {string} url
+ * @param {string} [title]
  */
-export function redirect(url) {
-  history.pushState({}, "history", url);
+export function redirect(path, title = path) {
+  if (history.state?.path === path) return;
+  history.pushState({ path }, title, path);
   window.dispatchEvent(new PopStateEvent("popstate"));
@@ -12,8 +15,5 @@ }
  */
-export function listener(handler) {
-  window.addEventListener("popstate", handler);
-  return () => window.removeEventListener("popstate", handler);
-}
+export const listener = (handler) => addListener(window, "popstate", handler);
 
 export const getPath = () =>
   location.pathname + location.hash + location.search;

src/use-router/use-router.js

@@ -79,10 +79,16 @@ import { useState, useEffect } from "atomico";
  * @param {import("atomico").Ref<Element>} ref
- * @param {(path:string)=>string} [proxy] allows to change the redirect url
+ * @param {{proxy:(path:string)=>string, composed:boolean}} [options] allows to change the redirect url
  */
-export function useRedirect(ref, proxy) {
+export function useRedirect(ref, { proxy, composed } = {}) {
   useEffect(() => {
     const { current } = ref;
+    /**
+     * @param {Event} ev
+     */
     const handler = (ev) => {
       const path = ev.composedPath();
       let target;
+
+      if (!composed && path.find((el) => el instanceof ShadowRoot)) return;
+
       while ((target = path.shift())) {
@@ -89,0 +95,0 @@ if (

types/use-listener/use-listener.d.ts

@@ -10,9 +10,11 @@ /**
  * Associate an event and return a callback to remove said event
- * @param {ChildNode} current
+ * @template {ChildNode | typeof window} C
+ * @template {Event} E
+ * @param {C} current
  * @param {string} name
- * @param {EventListener} handler
+ * @param {(event:import("atomico").DOMEvent<C, E>)=>any} handler
  * @param {boolean|AddEventListenerOptions} [options]
  * @returns {()=>void}
  */
-export function addListener(current: ChildNode, name: string, handler: EventListener, options?: boolean | AddEventListenerOptions | undefined): () => void;
+export function addListener<C extends ChildNode | (Window & typeof globalThis), E extends Event>(current: C, name: string, handler: (event: import("atomico").DOMEvent<C, E>) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
 /**
@@ -19,0 +21,0 @@ * @template T

types/use-router/src/history.d.ts

 /**
  * @param {string} url
+ * @param {string} [title]
  */
-export function redirect(url: string): void;
-/**
- *
- * @param {(ev: PopStateEvent) => void} handler
- */
+export function redirect(path: any, title?: string | undefined): void;
 export function listener(handler: (ev: PopStateEvent) => void): () => void;
 export function getPath(): string;

types/use-router/use-router.d.ts

@@ -44,5 +44,8 @@ /**
  * @param {import("atomico").Ref<Element>} ref
- * @param {(path:string)=>string} [proxy] allows to change the redirect url
+ * @param {{proxy:(path:string)=>string, composed:boolean}} [options] allows to change the redirect url
  */
-export function useRedirect(ref: import("atomico").Ref<Element>, proxy?: ((path: string) => string) | undefined): void;
+export function useRedirect(ref: import("atomico").Ref<Element>, { proxy, composed }?: {
+    proxy: (path: string) => string;
+    composed: boolean;
+} | undefined): void;
 export type InternalState = {
@@ -49,0 +52,0 @@ path?: string | undefined;

No alert changes

Improved metrics

Total package byte prevSize

84840

increased by1.59%

Number of package files

106

increased by1.92%

Lines of code

2499

increased by1.22%

No dependency changes