tona-hooks 1.0.1 → 1.0.18

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, EffectCallback, useLayoutEffect } from "preact/hooks";
+import { Dispatch, EffectCallback, useEffect } from "preact/hooks";
 import { SetStateAction } from "preact/compat";
 import { RefObject } from "preact";
 
@@ -25,7 +25,7 @@ declare function useEventCallback<Args extends unknown[], R>(fn: (...args: Args)
 declare function useEventCallback<Args extends unknown[], R>(fn: ((...args: Args) => R) | undefined): ((...args: Args) => R) | undefined;
 //#endregion
 //#region src/use-isomorphic-layout-effect.d.ts
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 //#endregion
 //#region src/use-query-dom.d.ts
 interface UseQueryDomOptions<T> {

package/dist/index.js

@@ -1,5 +1,5 @@
-let preact_hooks = require("preact/hooks");
-let preact_compat = require("preact/compat");
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { useCallback as useCallback$1, useRef as useRef$1 } from "preact/compat";
 
 //#region src/use-ajax-complete.ts
 /**
@@ -10,7 +10,7 @@ let preact_compat = require("preact/compat");
 * @param config.onError 错误时的回调函数
 */
 function useAjaxComplete(config) {
-	(0, preact_hooks.useEffect)(() => {
+	useEffect(() => {
 		const { urlPattern, onSuccess, onError } = config;
 		const handleAjaxComplete = (_, jqXHR, option) => {
 			const url = option?.url;
@@ -31,77 +31,49 @@ function useAjaxComplete(config) {
 //#endregion
 //#region src/use-effect-once.ts
 const useEffectOnce = (effect) => {
-	(0, preact_hooks.useEffect)(effect, []);
+	useEffect(effect, []);
 };
 
 //#endregion
 //#region src/use-isomorphic-layout-effect.ts
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? preact_hooks.useLayoutEffect : preact_hooks.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 //#endregion
 //#region src/use-event-callback.ts
 function useEventCallback(fn) {
-	const ref = (0, preact_compat.useRef)(() => {
+	const ref = useRef$1(() => {
 		throw new Error("Cannot call an event handler while rendering.");
 	});
 	useIsomorphicLayoutEffect(() => {
 		ref.current = fn;
 	}, [fn]);
-	return (0, preact_compat.useCallback)((...args) => ref.current?.(...args), [ref]);
+	return useCallback$1((...args) => ref.current?.(...args), [ref]);
 }
 
 //#endregion
 //#region src/use-query-dom.ts
 function useQueryDOM({ selector, observe = false, queryFn, ajaxUrl }) {
-	const [data, setData] = (0, preact_hooks.useState)(null);
-	const [isPending, setIsPending] = (0, preact_hooks.useState)(false);
-	const queryFnRef = (0, preact_hooks.useRef)(queryFn);
-	const observerRef = (0, preact_hooks.useRef)(null);
-	const ajaxStartRef = (0, preact_hooks.useRef)(0);
-	const debug = selector === "#user_icon.navbar-avatar" && (() => {
-		try {
-			return globalThis.localStorage.getItem("tona-debug-avatar") === "1";
-		} catch {
-			return false;
-		}
-	})();
-	(0, preact_hooks.useEffect)(() => {
+	const [data, setData] = useState(null);
+	const [isPending, setIsPending] = useState(false);
+	const queryFnRef = useRef(queryFn);
+	const observerRef = useRef(null);
+	const ajaxStartRef = useRef(0);
+	useEffect(() => {
 		queryFnRef.current = queryFn;
 	}, [queryFn]);
-	const queryElement = (0, preact_hooks.useCallback)(() => {
+	const queryElement = useCallback(() => {
 		const element = document.querySelector(selector);
 		const nextData = queryFnRef.current(element);
 		setData((prev) => {
 			if (Object.is(prev, nextData)) return prev;
 			return nextData;
 		});
-		if (debug) console.log("[useQueryDOM]", {
-			selector,
-			elementFound: Boolean(element),
-			nextData,
-			time: (/* @__PURE__ */ new Date()).toISOString()
-		});
-	}, [debug, selector]);
-	(0, preact_hooks.useEffect)(() => {
+	}, [selector]);
+	useEffect(() => {
 		queryElement();
 		if (!observe) return;
 		const targetNode = document.querySelector(selector)?.parentElement || document.body;
-		const observer = new MutationObserver((records) => {
-			if (debug) {
-				const summary = records.map((r) => ({
-					type: r.type,
-					target: r.target instanceof Element ? r.target.tagName : "unknown",
-					attributeName: r.attributeName || null,
-					addedNodes: r.addedNodes.length,
-					removedNodes: r.removedNodes.length
-				}));
-				console.log("[useQueryDOM:mutation]", {
-					selector,
-					summary
-				});
-			}
-			queryElement();
-		});
+		const observer = new MutationObserver(queryElement);
 		observerRef.current = observer;
 		observer.observe(targetNode, {
 			childList: true,
@@ -114,12 +86,11 @@ function useQueryDOM({ selector, observe = false, queryFn, ajaxUrl }) {
 			observerRef.current = null;
 		};
 	}, [
-		debug,
 		observe,
 		queryElement,
 		selector
 	]);
-	(0, preact_hooks.useEffect)(() => {
+	useEffect(() => {
 		if (!ajaxUrl) return;
 		const urls = Array.isArray(ajaxUrl) ? ajaxUrl : [ajaxUrl];
 		let timeoutId = null;
@@ -183,7 +154,7 @@ function useQueryDOM({ selector, observe = false, queryFn, ajaxUrl }) {
 //#endregion
 //#region src/use-unmount.ts
 const useUnmount = (fn) => {
-	const fnRef = (0, preact_hooks.useRef)(fn);
+	const fnRef = useRef(fn);
 	fnRef.current = fn;
 	useEffectOnce(() => () => fnRef.current());
 };
@@ -191,9 +162,9 @@ const useUnmount = (fn) => {
 //#endregion
 //#region src/use-raf-state.ts
 const useRafState = (initialState) => {
-	const frame = (0, preact_hooks.useRef)(0);
-	const [state, setState] = (0, preact_hooks.useState)(initialState);
-	const setRafState = (0, preact_hooks.useCallback)((value) => {
+	const frame = useRef(0);
+	const [state, setState] = useState(initialState);
+	const setRafState = useCallback((value) => {
 		cancelAnimationFrame(frame.current);
 		frame.current = requestAnimationFrame(() => {
 			setState(value);
@@ -218,14 +189,12 @@ const isBrowser = typeof window !== "undefined";
 //#endregion
 //#region src/use-scroll.ts
 const useScroll = (ref) => {
-	if (process.env.NODE_ENV === "development") {
-		if (typeof ref !== "object" || typeof ref.current === "undefined") console.error("`useScroll` expects a single ref argument.");
-	}
+	if (typeof ref !== "object" || typeof ref.current === "undefined") console.error("`useScroll` expects a single ref argument.");
 	const [state, setState] = useRafState({
 		x: 0,
 		y: 0
 	});
-	(0, preact_hooks.useEffect)(() => {
+	useEffect(() => {
 		const handler = () => {
 			if (ref.current) setState({
 				x: ref.current.scrollLeft,
@@ -250,7 +219,7 @@ const useWindowScroll = () => {
 		x: isBrowser ? window.pageXOffset : 0,
 		y: isBrowser ? window.pageYOffset : 0
 	}));
-	(0, preact_hooks.useEffect)(() => {
+	useEffect(() => {
 		const handler = () => {
 			setState((state$1) => {
 				const { pageXOffset, pageYOffset } = window;
@@ -273,12 +242,4 @@ const useWindowScroll = () => {
 };
 
 //#endregion
-exports.useAjaxComplete = useAjaxComplete;
-exports.useEffectOnce = useEffectOnce;
-exports.useEventCallback = useEventCallback;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
-exports.useQueryDOM = useQueryDOM;
-exports.useRafState = useRafState;
-exports.useScroll = useScroll;
-exports.useUnmount = useUnmount;
-exports.useWindowScroll = useWindowScroll;
+export { useAjaxComplete, useEffectOnce, useEventCallback, useIsomorphicLayoutEffect, useQueryDOM, useRafState, useScroll, useUnmount, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tona-hooks",
-  "version": "1.0.1",
+  "version": "1.0.18",
   "description": "",
   "author": {
     "name": "guangzan",
@@ -8,25 +8,26 @@
     "email": "guangzan1999@outlook.com"
   },
   "license": "MIT",
-  "homepage": "https://github.com/acnblogs/hooks#readme",
+  "homepage": "https://github.com/guangzan/tona/tree/main/packages/hooks#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/acnblogs/hooks.git"
+    "url": "git+https://github.com/guangzan/tona.git",
+    "directory": "packages/hooks"
   },
   "bugs": {
-    "url": "https://github.com/acnblogs/hooks/issues"
+    "url": "https://github.com/guangzan/tona/issues"
   },
   "keywords": [
     "博客园"
   ],
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js"
     }
   },
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [

package/dist/index.d.mts

@@ -1,71 +0,0 @@
-import { Dispatch, EffectCallback, useLayoutEffect } from "preact/hooks";
-import { SetStateAction } from "preact/compat";
-import { RefObject } from "preact";
-
-//#region src/use-ajax-complete.d.ts
-
-/**
- * 通用的 Ajax 完成监听 Hook
- * @param config 配置对象
- * @param config.urlPattern 要监听的 URL 模式（支持字符串包含匹配）
- * @param config.onSuccess 成功时的回调函数
- * @param config.onError 错误时的回调函数
- */
-declare function useAjaxComplete(config: {
-  urlPattern: string | string[];
-  onSuccess?: (response: any, jqXHR: JQuery.jqXHR, option: JQuery.AjaxSettings) => void;
-  onError?: (response: any, jqXHR: JQuery.jqXHR, option: JQuery.AjaxSettings) => void;
-}): void;
-//#endregion
-//#region src/use-effect-once.d.ts
-declare const useEffectOnce: (effect: EffectCallback) => void;
-//#endregion
-//#region src/use-event-callback.d.ts
-declare function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R): (...args: Args) => R;
-declare function useEventCallback<Args extends unknown[], R>(fn: ((...args: Args) => R) | undefined): ((...args: Args) => R) | undefined;
-//#endregion
-//#region src/use-isomorphic-layout-effect.d.ts
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
-//#endregion
-//#region src/use-query-dom.d.ts
-interface UseQueryDomOptions<T> {
-  selector: string;
-  observe?: boolean;
-  queryFn: (el: Element | null) => T | null;
-  /**
-   * 监听的 selector 的 DOM 相关的 AJAX 请求 URL
-   */
-  ajaxUrl?: string | string[];
-}
-interface UseQueryDomResult<T> {
-  data: T | null;
-  isPending: boolean;
-}
-declare function useQueryDOM<T>({
-  selector,
-  observe,
-  queryFn,
-  ajaxUrl
-}: UseQueryDomOptions<T>): UseQueryDomResult<T>;
-//#endregion
-//#region src/use-raf-state.d.ts
-declare const useRafState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>];
-//#endregion
-//#region src/use-scroll.d.ts
-interface State$1 {
-  x: number;
-  y: number;
-}
-declare const useScroll: (ref: RefObject<HTMLElement>) => State$1;
-//#endregion
-//#region src/use-unmount.d.ts
-declare const useUnmount: (fn: () => any) => void;
-//#endregion
-//#region src/use-window-scroll.d.ts
-interface State {
-  x: number;
-  y: number;
-}
-declare const useWindowScroll: () => State;
-//#endregion
-export { useAjaxComplete, useEffectOnce, useEventCallback, useIsomorphicLayoutEffect, useQueryDOM, useRafState, useScroll, useUnmount, useWindowScroll };

package/dist/index.mjs

@@ -1,274 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
-import { useCallback as useCallback$1, useRef as useRef$1 } from "preact/compat";
-
-//#region src/use-ajax-complete.ts
-/**
-* 通用的 Ajax 完成监听 Hook
-* @param config 配置对象
-* @param config.urlPattern 要监听的 URL 模式（支持字符串包含匹配）
-* @param config.onSuccess 成功时的回调函数
-* @param config.onError 错误时的回调函数
-*/
-function useAjaxComplete(config) {
-	useEffect(() => {
-		const { urlPattern, onSuccess, onError } = config;
-		const handleAjaxComplete = (_, jqXHR, option) => {
-			const url = option?.url;
-			if (!url) return;
-			if (!(Array.isArray(urlPattern) ? urlPattern : [urlPattern]).some((pattern) => url.includes(pattern))) return;
-			const response = jqXHR.responseJSON || jqXHR.responseText;
-			const hasError = jqXHR.status >= 400;
-			if (hasError && onError) onError(response, jqXHR, option);
-			else if (!hasError && onSuccess) onSuccess(response, jqXHR, option);
-		};
-		$(document).on("ajaxComplete", handleAjaxComplete);
-		return () => {
-			$(document).off("ajaxComplete", handleAjaxComplete);
-		};
-	}, [config]);
-}
-
-//#endregion
-//#region src/use-effect-once.ts
-const useEffectOnce = (effect) => {
-	useEffect(effect, []);
-};
-
-//#endregion
-//#region src/use-isomorphic-layout-effect.ts
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
-//#endregion
-//#region src/use-event-callback.ts
-function useEventCallback(fn) {
-	const ref = useRef$1(() => {
-		throw new Error("Cannot call an event handler while rendering.");
-	});
-	useIsomorphicLayoutEffect(() => {
-		ref.current = fn;
-	}, [fn]);
-	return useCallback$1((...args) => ref.current?.(...args), [ref]);
-}
-
-//#endregion
-//#region src/use-query-dom.ts
-function useQueryDOM({ selector, observe = false, queryFn, ajaxUrl }) {
-	const [data, setData] = useState(null);
-	const [isPending, setIsPending] = useState(false);
-	const queryFnRef = useRef(queryFn);
-	const observerRef = useRef(null);
-	const ajaxStartRef = useRef(0);
-	const debug = selector === "#user_icon.navbar-avatar" && (() => {
-		try {
-			return globalThis.localStorage.getItem("tona-debug-avatar") === "1";
-		} catch {
-			return false;
-		}
-	})();
-	useEffect(() => {
-		queryFnRef.current = queryFn;
-	}, [queryFn]);
-	const queryElement = useCallback(() => {
-		const element = document.querySelector(selector);
-		const nextData = queryFnRef.current(element);
-		setData((prev) => {
-			if (Object.is(prev, nextData)) return prev;
-			return nextData;
-		});
-		if (debug) console.log("[useQueryDOM]", {
-			selector,
-			elementFound: Boolean(element),
-			nextData,
-			time: (/* @__PURE__ */ new Date()).toISOString()
-		});
-	}, [debug, selector]);
-	useEffect(() => {
-		queryElement();
-		if (!observe) return;
-		const targetNode = document.querySelector(selector)?.parentElement || document.body;
-		const observer = new MutationObserver((records) => {
-			if (debug) {
-				const summary = records.map((r) => ({
-					type: r.type,
-					target: r.target instanceof Element ? r.target.tagName : "unknown",
-					attributeName: r.attributeName || null,
-					addedNodes: r.addedNodes.length,
-					removedNodes: r.removedNodes.length
-				}));
-				console.log("[useQueryDOM:mutation]", {
-					selector,
-					summary
-				});
-			}
-			queryElement();
-		});
-		observerRef.current = observer;
-		observer.observe(targetNode, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			characterData: false
-		});
-		return () => {
-			observer.disconnect();
-			observerRef.current = null;
-		};
-	}, [
-		debug,
-		observe,
-		queryElement,
-		selector
-	]);
-	useEffect(() => {
-		if (!ajaxUrl) return;
-		const urls = Array.isArray(ajaxUrl) ? ajaxUrl : [ajaxUrl];
-		let timeoutId = null;
-		const pendingRequests = /* @__PURE__ */ new Set();
-		const clearPending = () => {
-			setIsPending(false);
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-				timeoutId = null;
-			}
-		};
-		const checkAllRequestsComplete = () => {
-			if (pendingRequests.size === 0) clearPending();
-		};
-		const handleAjaxSend = (_, __, ajaxOptions) => {
-			const url = ajaxOptions?.url || "";
-			if (urls.some((targetUrl) => url.includes(targetUrl))) {
-				pendingRequests.add(url);
-				setIsPending(true);
-				ajaxStartRef.current = Date.now();
-				if (timeoutId) clearTimeout(timeoutId);
-				timeoutId = window.setTimeout(() => {
-					pendingRequests.delete(url);
-					checkAllRequestsComplete();
-				}, 1e4);
-			}
-		};
-		const handleAjaxComplete = (_, __, ajaxOptions) => {
-			const url = ajaxOptions?.url || "";
-			if (urls.some((targetUrl) => url.includes(targetUrl))) {
-				pendingRequests.delete(url);
-				setTimeout(() => {
-					checkAllRequestsComplete();
-				}, 50);
-			}
-		};
-		const handleAjaxError = (_, __, ajaxOptions) => {
-			const url = ajaxOptions?.url || "";
-			if (urls.some((targetUrl) => url.includes(targetUrl))) {
-				pendingRequests.delete(url);
-				checkAllRequestsComplete();
-			}
-		};
-		$(document).ajaxSend(handleAjaxSend);
-		$(document).ajaxComplete(handleAjaxComplete);
-		$(document).ajaxError(handleAjaxError);
-		return () => {
-			$(document).off("ajaxSend", handleAjaxSend);
-			$(document).off("ajaxComplete", handleAjaxComplete);
-			$(document).off("ajaxError", handleAjaxError);
-			if (timeoutId) clearTimeout(timeoutId);
-			pendingRequests.clear();
-		};
-	}, [ajaxUrl]);
-	return {
-		data,
-		isPending
-	};
-}
-
-//#endregion
-//#region src/use-unmount.ts
-const useUnmount = (fn) => {
-	const fnRef = useRef(fn);
-	fnRef.current = fn;
-	useEffectOnce(() => () => fnRef.current());
-};
-
-//#endregion
-//#region src/use-raf-state.ts
-const useRafState = (initialState) => {
-	const frame = useRef(0);
-	const [state, setState] = useState(initialState);
-	const setRafState = useCallback((value) => {
-		cancelAnimationFrame(frame.current);
-		frame.current = requestAnimationFrame(() => {
-			setState(value);
-		});
-	}, []);
-	useUnmount(() => {
-		cancelAnimationFrame(frame.current);
-	});
-	return [state, setRafState];
-};
-
-//#endregion
-//#region src/misc/util.ts
-function on(obj, ...args) {
-	if (obj?.addEventListener) obj.addEventListener(...args);
-}
-function off(obj, ...args) {
-	if (obj?.removeEventListener) obj.removeEventListener(...args);
-}
-const isBrowser = typeof window !== "undefined";
-
-//#endregion
-//#region src/use-scroll.ts
-const useScroll = (ref) => {
-	if (typeof ref !== "object" || typeof ref.current === "undefined") console.error("`useScroll` expects a single ref argument.");
-	const [state, setState] = useRafState({
-		x: 0,
-		y: 0
-	});
-	useEffect(() => {
-		const handler = () => {
-			if (ref.current) setState({
-				x: ref.current.scrollLeft,
-				y: ref.current.scrollTop
-			});
-		};
-		if (ref.current) on(ref.current, "scroll", handler, {
-			capture: false,
-			passive: true
-		});
-		return () => {
-			if (ref.current) off(ref.current, "scroll", handler);
-		};
-	}, [ref, setState]);
-	return state;
-};
-
-//#endregion
-//#region src/use-window-scroll.ts
-const useWindowScroll = () => {
-	const [state, setState] = useRafState(() => ({
-		x: isBrowser ? window.pageXOffset : 0,
-		y: isBrowser ? window.pageYOffset : 0
-	}));
-	useEffect(() => {
-		const handler = () => {
-			setState((state$1) => {
-				const { pageXOffset, pageYOffset } = window;
-				return state$1.x !== pageXOffset || state$1.y !== pageYOffset ? {
-					x: pageXOffset,
-					y: pageYOffset
-				} : state$1;
-			});
-		};
-		handler();
-		on(window, "scroll", handler, {
-			capture: false,
-			passive: true
-		});
-		return () => {
-			off(window, "scroll", handler);
-		};
-	}, [setState]);
-	return state;
-};
-
-//#endregion
-export { useAjaxComplete, useEffectOnce, useEventCallback, useIsomorphicLayoutEffect, useQueryDOM, useRafState, useScroll, useUnmount, useWindowScroll };