tona-hooks 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 guangzan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# tona-hooks
+
+博客园皮肤开发用的 React Hooks 工具库。
+
+## 安装
+
+```bash
+npm install tona-hooks
+```
+
+## 使用
+
+```javascript
+import { useQueryDOM } from 'tona-hooks'
+```

package/dist/index.d.mts

@@ -0,0 +1,71 @@
+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.d.ts

@@ -0,0 +1,71 @@
+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.js

@@ -0,0 +1,284 @@
+let preact_hooks = require("preact/hooks");
+let preact_compat = require("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) {
+	(0, preact_hooks.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) => {
+	(0, preact_hooks.useEffect)(effect, []);
+};
+
+//#endregion
+//#region src/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? preact_hooks.useLayoutEffect : preact_hooks.useEffect;
+
+//#endregion
+//#region src/use-event-callback.ts
+function useEventCallback(fn) {
+	const ref = (0, preact_compat.useRef)(() => {
+		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]);
+}
+
+//#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)(() => {
+		queryFnRef.current = queryFn;
+	}, [queryFn]);
+	const queryElement = (0, preact_hooks.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)(() => {
+		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
+	]);
+	(0, preact_hooks.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 = (0, preact_hooks.useRef)(fn);
+	fnRef.current = fn;
+	useEffectOnce(() => () => fnRef.current());
+};
+
+//#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) => {
+		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 (process.env.NODE_ENV === "development") {
+		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)(() => {
+		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
+	}));
+	(0, preact_hooks.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
+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;

package/dist/index.mjs

@@ -0,0 +1,274 @@
+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 };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "tona-hooks",
+  "version": "1.0.1",
+  "description": "",
+  "author": {
+    "name": "guangzan",
+    "url": "https://www.cnblogs.com/guangzan",
+    "email": "guangzan1999@outlook.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/acnblogs/hooks#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acnblogs/hooks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/acnblogs/hooks/issues"
+  },
+  "keywords": [
+    "博客园"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "tsdown": "latest"
+  },
+  "peerDependencies": {
+    "preact": "^10.28.2"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  }
+}