@hairy/react-lib 1.47.0 → 1.50.0

package/dist/index.mjs

@@ -0,0 +1,447 @@
+import { Deferred, isFunction, noop } from "@hairy/utils";
+import { ref, useSnapshot } from "valtio";
+import { Children, createElement, isValidElement, useCallback, useEffect, useInsertionEffect, useMemo, useReducer, useRef, useState } from "react";
+import { proxyMap } from "valtio/utils";
+import mitt from "mitt";
+import { useMount } from "react-use";
+
+//#region src/utils/cls.ts
+const hasOwn = {}.hasOwnProperty;
+/**
+* A simple JavaScript utility for conditionally joining classNames together.
+*/
+function cls(...args) {
+	let classes = "";
+	for (let i = 0; i < args.length; i++) {
+		const arg = args[i];
+		if (arg) classes = cls.append(classes, cls.parse(arg));
+	}
+	return classes;
+}
+cls.parse = function(arg) {
+	if (typeof arg === "string") return arg;
+	if (typeof arg !== "object") return "";
+	if (Array.isArray(arg)) return cls.apply(null, arg);
+	if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) return cls.toString();
+	let classes = "";
+	for (const key in arg) if (hasOwn.call(arg, key) && arg[key]) classes = cls.append(classes, key);
+	return classes;
+};
+cls.append = function(value, newClass) {
+	if (!newClass) return value;
+	return value ? `${value} ${newClass}` : newClass;
+};
+
+//#endregion
+//#region src/utils/track.ts
+/**
+* @requires `Trigger` component to be mounted in the tree.
+*
+* @example
+* ```tsx
+* // Obtain externally
+* import { track } from '@hairy/lib-react'
+* const context = await track(() => useContext(YourContext))
+* console.log(context) // { ... }
+* ```
+*/
+function track(fn, ...args) {
+	const deferred = ref(new Deferred());
+	const exposer = {
+		fn,
+		args,
+		deferred,
+		id: ++Trigger.id
+	};
+	Trigger.tasks.set(exposer.id, exposer);
+	deferred.then(() => Trigger.tasks.delete(exposer.id));
+	return deferred;
+}
+
+//#endregion
+//#region src/utils/wrapper.ts
+function wrapper(asChild, props, children) {
+	return asChild ? createElement(asChild, props, children) : children;
+}
+
+//#endregion
+//#region src/components/condition/Case.ts
+function Case(props) {
+	const { cond, children, tag, as: asChild, ...attrs } = props;
+	return wrapper(tag || asChild, attrs, children);
+}
+
+//#endregion
+//#region src/components/condition/Default.ts
+function Default(props) {
+	const { children, tag, as: asChild, ...attrs } = props;
+	return wrapper(tag || asChild, attrs, children);
+}
+
+//#endregion
+//#region src/components/condition/Then.ts
+function Then(props) {
+	const { children, cond, else: _else, then, tag, as: asChild, ...attrs } = props;
+	return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag || asChild, attrs, children);
+}
+
+//#endregion
+//#region src/components/condition/If.ts
+function If(props) {
+	const { then, cond, else: _else, children = props.then, tag, as: asChild, ...attrs } = props;
+	const elements = Children.toArray(children);
+	const thenChild = elements.find((c) => c.type === Then);
+	const elseChild = elements.find((c) => c.type === Else);
+	return wrapper(tag || asChild, attrs, thenChild || elseChild ? cond ? thenChild : elseChild : cond ? children : _else);
+}
+
+//#endregion
+//#region src/components/condition/Else.ts
+function Else(props) {
+	const { children, tag, as: asChild, ...attrs } = props;
+	return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag || asChild, attrs, children);
+}
+
+//#endregion
+//#region src/components/condition/Switch.ts
+function Switch(props) {
+	const isUseValue = props.value !== void 0;
+	let matchingCase;
+	let defaultCase;
+	Children.forEach(props.children, (child) => {
+		if (!isValidElement(child) || matchingCase) return;
+		if (child.type === Case) {
+			const cond = child?.props?.cond;
+			if (isUseValue ? props.value === cond : cond) {
+				matchingCase = child;
+				return;
+			}
+		}
+		if (!defaultCase && child.type === Default) defaultCase = child;
+	});
+	return matchingCase ?? defaultCase ?? null;
+}
+
+//#endregion
+//#region src/components/condition/Unless.ts
+function Unless(props) {
+	const { cond, then, else: _else, tag, as: asChild, children = props.then, ...attrs } = props;
+	const elements = Children.toArray(children);
+	const thenChild = elements.find((c) => c.type === Then);
+	const elseChild = elements.find((c) => c.type === Else);
+	return wrapper(tag || asChild, attrs, thenChild || elseChild ? !cond ? elseChild : thenChild : !cond ? children : _else);
+}
+
+//#endregion
+//#region src/components/utils/Injector.ts
+function Injector(props) {
+	return useMemo(() => props.install.map(repack).reverse(), [props.install]).reduce((child, { component: Component, props }) => createElement(Component, props, child), props.children);
+}
+function repack(c) {
+	return c.component ? c : { component: c };
+}
+
+//#endregion
+//#region src/components/utils/Trigger.ts
+const pendingTasks = proxyMap();
+function createTracker(exposer) {
+	const Component = () => {
+		try {
+			exposer.deferred.resolve(exposer.fn(...exposer.args));
+		} catch (error) {
+			exposer.deferred.reject(error);
+		}
+		return null;
+	};
+	Component.key = exposer.id;
+	return Component;
+}
+function renderTracker(Tracker) {
+	return createElement(Tracker, { key: Tracker.key });
+}
+/**
+* @example
+* ```tsx
+* import { Trigger } from '@hairy/lib-react'
+*
+* // Use triggers to capture context
+* function App() {
+*  return (
+*   <YourContext.Provider>
+*    <Trigger />
+*   </YourContext.Provider>
+*  )
+* }
+*
+* // Obtain externally
+* import { track } from '@hairy/lib-react'
+* const context = await track(() => useContext(YourContext))
+* console.log(context) // { ... }
+* ```
+*/
+function Trigger() {
+	return [...useSnapshot(pendingTasks).values()].map(createTracker).map(renderTracker);
+}
+Trigger.id = 0;
+Trigger.tasks = pendingTasks;
+
+//#endregion
+//#region src/hooks/tryUseCallback.ts
+const tryUseCallback = (callback, deps) => {
+	try {
+		return useCallback(callback, deps);
+	} catch {
+		return callback;
+	}
+};
+
+//#endregion
+//#region src/hooks/tryUseEffect.ts
+const tryUseEffect = (effect, deps) => {
+	try {
+		useEffect(effect, deps);
+	} catch {}
+};
+
+//#endregion
+//#region src/hooks/tryUseInsertionEffect.ts
+const tryUseInsertionEffect = (callback, deps) => {
+	try {
+		useInsertionEffect(callback, deps);
+	} catch {}
+};
+
+//#endregion
+//#region src/hooks/tryUseReducer.ts
+const tryUseReducer = (reducer, initializerArg, initializer) => {
+	try {
+		return useReducer(reducer, initializerArg, initializer);
+	} catch {
+		return [initializerArg, () => {}];
+	}
+};
+
+//#endregion
+//#region src/hooks/tryUseRef.ts
+const tryUseRef = (initialValue) => {
+	try {
+		return useRef(initialValue);
+	} catch {
+		return { current: initialValue };
+	}
+};
+
+//#endregion
+//#region src/hooks/tryUseState.ts
+const tryUseState = (initialState) => {
+	try {
+		return useState(initialState);
+	} catch {
+		return [isFunction(initialState) ? initialState() : initialState, noop];
+	}
+};
+
+//#endregion
+//#region src/hooks/useUpdate.ts
+const updateReducer = (num) => (num + 1) % 1e6;
+function useUpdate() {
+	const [, update] = tryUseReducer(updateReducer, 0);
+	return update;
+}
+
+//#endregion
+//#region src/hooks/tryUseUpdate.ts
+function tryUseUpdate() {
+	try {
+		return useUpdate();
+	} catch {
+		return () => {};
+	}
+}
+
+//#endregion
+//#region src/hooks/useAsyncCallback.ts
+function useAsyncCallback(fun) {
+	const [state, set] = useState({ loading: false });
+	async function refetch(...args) {
+		set({ loading: true });
+		return fun(...args).then((value) => {
+			set({ loading: false });
+			return value;
+		}).catch((err) => {
+			set({
+				loading: false,
+				error: err
+			});
+			return Promise.reject(err);
+		});
+	}
+	return [
+		state.loading,
+		refetch,
+		state.error
+	];
+}
+
+//#endregion
+//#region src/hooks/useAsyncState.ts
+function useAsyncState(fun, deps = [], options) {
+	const [value, set] = useState(options?.initial);
+	const [loading, refetch, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
+	useEffect(() => {
+		refetch();
+	}, deps);
+	return [{
+		value,
+		loading,
+		error
+	}, refetch];
+}
+
+//#endregion
+//#region src/hooks/useDebounce.ts
+function useDebounce(value, delay) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const handler = setTimeout(() => setDebouncedValue(value), delay);
+		return () => clearTimeout(handler);
+	}, [value, delay]);
+	return debouncedValue;
+}
+
+//#endregion
+//#region src/hooks/useEventBus.ts
+const emitter = mitt();
+function useEventBus(key) {
+	const onRef = useRef(void 0);
+	function on(listener) {
+		emitter.on(key, listener);
+		onRef.current = listener;
+		useEffect(() => {
+			if (!onRef.current) return;
+			emitter.off(key, onRef.current);
+			emitter.on(key, listener);
+			onRef.current = listener;
+			return () => emitter.off(key, listener);
+		}, [listener]);
+	}
+	function emit(event) {
+		emitter.emit(key, event);
+	}
+	function off(listener) {
+		emitter.off(key, listener);
+	}
+	return {
+		on,
+		emit,
+		off
+	};
+}
+
+//#endregion
+//#region src/hooks/useFetchIntercept.ts
+function useFetchResponseIntercept(intercept) {
+	useMount(() => fetchResponseIntercept(intercept));
+}
+function useFetchRequestIntercept(intercept) {
+	useMount(() => fetchRequestIntercept(intercept));
+}
+function fetchResponseIntercept(intercept) {
+	const { fetch: originalFetch } = window;
+	window.fetch = async (...args) => {
+		const [resource, config] = args;
+		return intercept(await originalFetch(resource, config), config);
+	};
+}
+function fetchRequestIntercept(intercept) {
+	const { fetch: originalFetch } = window;
+	window.fetch = async (...args) => {
+		const [resource, config] = args;
+		return intercept(originalFetch, resource, config);
+	};
+}
+
+//#endregion
+//#region src/hooks/useMounted.ts
+function useMounted() {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	return mounted;
+}
+
+//#endregion
+//#region src/hooks/usePrevious.ts
+function usePrevious(value) {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+
+//#endregion
+//#region src/hooks/useWatch.ts
+function useWatch(source, callback, options = {}) {
+	const firstUpdate = useRef(false);
+	const then = useRef(void 0);
+	const oldValue = usePrevious(source);
+	useEffect(() => {
+		if (!firstUpdate.current) recordFirst();
+		else callback(source, oldValue);
+	}, useMemo(() => Array.isArray(source) ? source : [source], [source]));
+	async function recordFirst() {
+		if (then.current) return;
+		then.current = Promise.resolve(source);
+		then.current.then(() => firstUpdate.current = true);
+		if (options.immediate) then.current.then((value) => callback(value, oldValue));
+	}
+}
+
+//#endregion
+//#region src/hooks/useOffsetPagination.ts
+function useOffsetPagination(options) {
+	const [page, setPage] = useState(options.page || 1);
+	const [pageSize, setPageSize] = useState(options.pageSize || 10);
+	const total = options.total || 0;
+	const pageCount = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize]);
+	const isFirstPage = useMemo(() => page === 1, [page]);
+	const isLastPage = useMemo(() => page === pageCount, [page, pageCount]);
+	function next() {
+		setPage((page) => Math.min(pageCount, page + 1));
+	}
+	function prev() {
+		setPage((page) => Math.max(1, page - 1));
+	}
+	function pageChange(page) {
+		setPage(() => Math.max(1, Math.min(page, pageCount)));
+	}
+	function pageSizeChange(limit) {
+		setPageSize(limit);
+		pageChange(1);
+	}
+	const pagination = {
+		next,
+		prev,
+		page,
+		pageSize,
+		isFirstPage,
+		pageSizeChange,
+		pageChange,
+		isLastPage,
+		pageCount,
+		total
+	};
+	useWatch(page, () => options.onChange?.(pagination));
+	useWatch(pageSize, () => options.onPageSizeChange?.(pagination));
+	useWatch(pageCount, () => options.onPageCountChange?.(pagination));
+	return pagination;
+}
+
+//#endregion
+//#region src/hooks/useWhenever.ts
+function useWhenever(source, cb, options) {
+	useWatch(source, (value, oldValue) => value && cb(value, oldValue), options);
+}
+
+//#endregion
+export { Case, Default, Else, If, Injector, Switch, Then, Trigger, Unless, cls, track, tryUseCallback, tryUseEffect, tryUseInsertionEffect, tryUseReducer, tryUseRef, tryUseState, tryUseUpdate, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useOffsetPagination, useUpdate, useWatch, useWhenever, wrapper };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.47.0",
+  "version": "1.50.0",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -14,22 +14,38 @@
   "bugs": "https://github.com/hairyf/hairylib/issues",
   "keywords": [],
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "publishConfig": {
-    "jsdelivr": "./dist/index.global.js"
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "jsdelivr": "./dist/index.iife.js"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.1.2"
+    "react-i18next": "^14.1.2",
+    "react-use": "^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-i18next": {
+      "optional": true
+    }
   },
   "dependencies": {
     "html-parse-stringify": "^3.0.1",
     "mitt": "^3.0.1",
-    "valtio": "^2"
+    "valtio": "^2",
+    "@hairy/utils": "1.50.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.3",
@@ -37,23 +53,12 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^14.1.2",
-    "react-use": "^17.6.0",
-    "@hairy/utils": "1.47.0"
+    "react-use": "^17.6.0"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "start": "tsx src/index.ts"
   },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/index.global.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./*": "./*"
-  }
+  "unpkg": "./dist/index.iife.js"
 }