@hairy/react-lib 1.1.1

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2019-PRESENT Hairyf<https://github.com/hairyf>
+
+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/dist/index.cjs

@@ -0,0 +1,450 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Case: () => Case,
+  Default: () => Default,
+  Else: () => Else,
+  If: () => If,
+  Injector: () => Injector,
+  Switch: () => Switch,
+  Then: () => Then,
+  Trans: () => Trans,
+  Unless: () => Unless,
+  cls: () => cls,
+  defineAsyncStorage: () => defineAsyncStorage,
+  defineStore: () => defineStore,
+  proxyWithPersistant: () => proxyWithPersistant,
+  storeToState: () => storeToState,
+  storeToStates: () => storeToStates,
+  useAsyncCallback: () => useAsyncCallback,
+  useAsyncState: () => useAsyncState,
+  useDebounce: () => useDebounce,
+  useEventBus: () => useEventBus,
+  useFetchRequestIntercept: () => useFetchRequestIntercept,
+  useFetchResponseIntercept: () => useFetchResponseIntercept,
+  useMounted: () => useMounted,
+  useStore: () => useStore,
+  useWatch: () => useWatch,
+  useWhenever: () => useWhenever
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/condition/Case.ts
+function Case(props) {
+  return props.children;
+}
+
+// src/components/condition/Default.ts
+function Default(props) {
+  return props.children;
+}
+
+// src/components/condition/Else.ts
+function Else(props) {
+  return props.children;
+}
+
+// src/components/condition/If.ts
+var import_react = require("react");
+
+// src/components/condition/Then.ts
+function Then(props) {
+  return props.children;
+}
+
+// src/components/condition/If.ts
+function If(props) {
+  const children = props.then || props.children;
+  const elements = import_react.Children.toArray(children);
+  const thenChild = elements.find((c) => c.type === Then);
+  const elseChild = elements.find((c) => c.type === Else);
+  return thenChild || elseChild ? props.cond ? thenChild : elseChild : props.cond ? children : props.else;
+}
+
+// src/components/condition/Switch.ts
+var import_react2 = require("react");
+function Switch(props) {
+  var _a;
+  const isUseValue = props.value !== void 0;
+  let matchingCase;
+  let defaultCase;
+  import_react2.Children.forEach(props.children, (child) => {
+    if (!(0, import_react2.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 (_a = matchingCase != null ? matchingCase : defaultCase) != null ? _a : null;
+}
+
+// src/components/condition/Unless.ts
+var import_react3 = require("react");
+function Unless(props) {
+  const children = props.then || props.children;
+  const elements = import_react3.Children.toArray(children);
+  const thenChild = elements.find((c) => c.type === Then);
+  const elseChild = elements.find((c) => c.type === Else);
+  return thenChild || elseChild ? !props.cond ? elseChild : thenChild : !props.cond ? props.children : props.else;
+}
+
+// src/components/utils/Injector.ts
+var import_react4 = require("react");
+function Injector(props) {
+  const installs = (0, import_react4.useMemo)(
+    () => props.install.map(repack).reverse(),
+    [props.install]
+  );
+  return installs.reduce(
+    (child, { component: Component, props: props2 }) => (0, import_react4.createElement)(Component, props2, child),
+    props.children
+  );
+}
+function repack(c) {
+  return c.component ? c : { component: c };
+}
+
+// src/components/utils/Trans.ts
+var import_react_i18next = require("react-i18next");
+var import_react5 = require("react");
+var import_html_parse_stringify = __toESM(require("html-parse-stringify"));
+function Trans({ i18nKey, ...additionalProps }) {
+  const translation = (0, import_react_i18next.useTranslation)().t(i18nKey, additionalProps);
+  return renderNodes(import_html_parse_stringify.default.parse(translation), additionalProps);
+}
+var index = 0;
+function renderNodes(tokens, values) {
+  return tokens.map((token) => {
+    if (token.type === "text")
+      return token.content;
+    index++;
+    const props = { ...token.attrs, key: index };
+    return token.voidElement ? values[token.name] ? (0, import_react5.createElement)("span", { key: index }, values[token.name]) : (0, import_react5.createElement)(token.name, props) : (0, import_react5.createElement)(token.name, props, renderNodes(token.children, {}));
+  });
+}
+
+// src/hooks/useDebounce.ts
+var import_react6 = require("react");
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react6.useState)(value);
+  (0, import_react6.useEffect)(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useEventBus.ts
+var import_react7 = require("react");
+var import_mitt = __toESM(require("mitt"));
+var emitter = (0, import_mitt.default)();
+function useEventBus(key) {
+  const onRef = (0, import_react7.useRef)();
+  function on(listener) {
+    emitter.on(key, listener);
+    onRef.current = listener;
+    (0, import_react7.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
+  };
+}
+
+// src/hooks/useMounted.ts
+var import_react8 = require("react");
+function useMounted() {
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => setMounted(true), []);
+  return mounted;
+}
+
+// src/hooks/useWatch.ts
+var import_react9 = require("react");
+function useWatch(source, callback, options = {}) {
+  const firstUpdate = (0, import_react9.useRef)(false);
+  const then = (0, import_react9.useRef)();
+  const deps = (0, import_react9.useMemo)(
+    () => Array.isArray(source) ? source : [source],
+    [source]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (!firstUpdate.current)
+      recordFirst();
+    else
+      callback(source);
+  }, deps);
+  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));
+  }
+}
+
+// src/hooks/useWhenever.ts
+function useWhenever(source, cb, options) {
+  useWatch(source, () => source && cb(source), options);
+}
+
+// src/hooks/useAsyncCallback.ts
+var import_react10 = require("react");
+function useAsyncCallback(fun) {
+  const [error, setError] = (0, import_react10.useState)();
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  async function execute(...args) {
+    try {
+      setLoading(true);
+      const result = await fun(...args);
+      setLoading(false);
+      return result;
+    } catch (error2) {
+      setLoading(false);
+      setError(error2);
+      throw error2;
+    }
+  }
+  return [loading, execute, error];
+}
+
+// src/hooks/useAsyncState.ts
+var import_react_use = require("react-use");
+function useAsyncState(fn, deps, options) {
+  const [state, _fn] = (0, import_react_use.useAsyncFn)(fn, deps, options == null ? void 0 : options.initial);
+  (0, import_react_use.useMount)(() => (options == null ? void 0 : options.immediate) && _fn());
+  return [state, _fn];
+}
+
+// src/hooks/useFetchIntercept.ts
+var import_react_use2 = require("react-use");
+function useFetchResponseIntercept(intercept) {
+  (0, import_react_use2.useMount)(() => fetchResponseIntercept(intercept));
+}
+function useFetchRequestIntercept(intercept) {
+  (0, import_react_use2.useMount)(() => fetchRequestIntercept(intercept));
+}
+function fetchResponseIntercept(intercept) {
+  const { fetch: originalFetch } = window;
+  window.fetch = async (...args) => {
+    const [resource, config] = args;
+    const response = await originalFetch(resource, config);
+    return intercept(response);
+  };
+}
+function fetchRequestIntercept(intercept) {
+  const { fetch: originalFetch } = window;
+  window.fetch = async (...args) => {
+    const [resource, config] = args;
+    return intercept(originalFetch, resource, config);
+  };
+}
+
+// src/storage/storeToState.ts
+var import_valtio = require("valtio");
+function storeToState(store, key) {
+  const snapshot = (0, import_valtio.useSnapshot)(store);
+  function get() {
+    return snapshot[key];
+  }
+  function set(value) {
+    store[key] = value;
+  }
+  return [get(), set];
+}
+
+// src/storage/proxyWithPersistant.ts
+var import_valtio2 = require("valtio");
+function proxyWithPersistant(key, initialObject, options = {}) {
+  const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const state = (0, import_valtio2.proxy)(parse(storage == null ? void 0 : storage.getItem(key)) || initialObject);
+  (0, import_valtio2.subscribe)(state, () => {
+    storage == null ? void 0 : storage.setItem(key, JSON.stringify(state));
+  });
+  return state;
+}
+function parse(text) {
+  try {
+    return JSON.parse(text || "");
+  } catch (e) {
+  }
+}
+
+// src/storage/storeToStates.ts
+var import_valtio3 = require("valtio");
+function storeToStates(store) {
+  const snapshot = (0, import_valtio3.useSnapshot)(store);
+  const states = {};
+  function toState(key) {
+    const get = () => snapshot[key];
+    const set = (value) => {
+      store[key] = value;
+    };
+    return [get(), set];
+  }
+  for (const key of Object.keys(snapshot))
+    states[key] = toState(key);
+  return states;
+}
+
+// src/storage/defineStore.ts
+var import_valtio4 = require("valtio");
+function defineStore(store, options = {}) {
+  const state = typeof store.state === "function" ? store.state() : store.state;
+  const actions = store.actions || {};
+  const $state = options.persistant ? proxyWithPersistant(options.persistant, state) : (0, import_valtio4.proxy)(state);
+  const $actions = {};
+  for (const key in actions)
+    $actions[key] = actions[key].bind($state);
+  return {
+    $state: state,
+    $actions: actions,
+    ...actions
+  };
+}
+function useStore(store) {
+  return (0, import_valtio4.useSnapshot)(store.$state);
+}
+
+// src/hooks/defineAsyncStorage.ts
+function defineAsyncStorage(options) {
+  const store = defineStore(
+    {
+      state: () => ({
+        promise: void 0,
+        value: options.initial,
+        loading: false,
+        error: void 0
+      })
+    },
+    { persistant: options.persistant }
+  );
+  function use() {
+    const fn = options.setup();
+    const state = useStore(store);
+    function fetch(...args) {
+      if (state.loading)
+        return;
+      store.$state.loading = true;
+      store.$state.promise = fn(...args);
+      store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
+        store.$state.error = error;
+        throw error;
+      });
+      return store.$state.promise;
+    }
+    return [state, fetch];
+  }
+  return use;
+}
+
+// src/utils/index.ts
+var hasOwn = {}.hasOwnProperty;
+function cls(...args) {
+  let classes = "";
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = arguments[i];
+    if (arg)
+      classes = appendClass(classes, parseValue(arg));
+  }
+  return classes;
+}
+function parseValue(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 = appendClass(classes, key);
+  }
+  return classes;
+}
+function appendClass(value, newClass) {
+  if (!newClass)
+    return value;
+  return value ? `${value} ${newClass}` : newClass;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Case,
+  Default,
+  Else,
+  If,
+  Injector,
+  Switch,
+  Then,
+  Trans,
+  Unless,
+  cls,
+  defineAsyncStorage,
+  defineStore,
+  proxyWithPersistant,
+  storeToState,
+  storeToStates,
+  useAsyncCallback,
+  useAsyncState,
+  useDebounce,
+  useEventBus,
+  useFetchRequestIntercept,
+  useFetchResponseIntercept,
+  useMounted,
+  useStore,
+  useWatch,
+  useWhenever
+});

package/dist/index.d.ts

@@ -0,0 +1,173 @@
+import * as react from 'react';
+import { DetailedHTMLProps as DetailedHTMLProps$1, HTMLAttributes, ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, DependencyList } from 'react';
+import { FunctionReturningPromise, PromiseType } from 'react-use/lib/misc/types';
+import { AsyncState, AsyncFnReturn } from 'react-use/lib/useAsyncFn';
+import { INTERNAL_Snapshot } from 'valtio';
+
+type DetailedHTMLProps<T = HTMLDivElement> = DetailedHTMLProps$1<HTMLAttributes<T>, T>;
+type BooleanLike = any;
+
+interface CaseProps {
+    cond?: BooleanLike;
+    children?: ReactNode;
+}
+declare function Case(props: CaseProps): ReactNode;
+
+declare function Default(props: PropsWithChildren): react.ReactNode;
+
+declare function Else(props: PropsWithChildren): react.ReactNode;
+
+interface IfProps {
+    cond?: BooleanLike;
+    then?: ReactNode;
+    else?: ReactNode;
+    children?: ReactNode;
+}
+declare function If(props: IfProps): ReactNode;
+
+interface SwitchProps extends PropsWithChildren {
+    value?: BooleanLike;
+}
+declare function Switch(props: SwitchProps): ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+
+declare function Then(props: PropsWithChildren): react.ReactNode;
+
+interface UnlessProps {
+    cond?: BooleanLike;
+    then?: ReactNode;
+    else?: ReactNode;
+    children?: ReactNode;
+}
+declare function Unless(props: UnlessProps): ReactNode;
+
+interface InjectComponent<P> {
+    component: FC<P> | ComponentClass<P>;
+    props?: P;
+}
+interface InjectorProps {
+    install: (FC<any> | InjectComponent<any> | ComponentClass<any>)[];
+    children?: ReactNode;
+}
+declare function Injector(props: InjectorProps): ReactNode;
+
+interface TransProps {
+    i18nKey: string;
+    [key: string]: ReactNode;
+}
+declare function Trans({ i18nKey, ...additionalProps }: TransProps): ReactNode[];
+
+declare function useDebounce<T>(value: T, delay: number): T;
+
+interface EventBusListener<T = any> {
+    (event: T): void;
+}
+declare function useEventBus<T>(key: string): {
+    on: (listener: EventBusListener<T>) => void;
+    emit: (event?: T) => void;
+    off: (listener: EventBusListener) => void;
+};
+
+declare function useMounted(): boolean;
+
+interface WatchCallback<T> {
+    (value: T): void;
+}
+interface WatchOptions {
+    immediate?: boolean;
+}
+declare function useWatch<T>(source: T, callback: WatchCallback<T>, options?: WatchOptions): void;
+
+declare function useWhenever<T>(source: T, cb: WatchCallback<Exclude<T, null | undefined>>, options?: WatchOptions): void;
+
+declare function useAsyncCallback<T extends (...args: any[]) => any>(fun: T): readonly [boolean, T, Error | undefined];
+
+type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncState<PromiseType<ReturnType<T>>>;
+interface UseAsyncStateOptions<T extends FunctionReturningPromise> {
+    immediate?: boolean;
+    initial?: StateFromFunctionReturningPromise<T>;
+}
+declare function useAsyncState<T extends FunctionReturningPromise>(fn: T, deps?: DependencyList, options?: UseAsyncStateOptions<T>): AsyncFnReturn<T>;
+
+interface FetchResponseInterceptCallback {
+    (response: Response): Response | Promise<Response>;
+}
+interface FetchRequestInterceptCallback {
+    (fetch: typeof window.fetch, input: RequestInfo | URL, init?: RequestInit | undefined): Response | Promise<Response>;
+}
+declare function useFetchResponseIntercept(intercept: FetchResponseInterceptCallback): void;
+declare function useFetchRequestIntercept(intercept: FetchRequestInterceptCallback): void;
+
+interface AsyncStorageOptions<T extends FunctionReturningPromise> {
+    initial?: ReturnType<T> extends Promise<infer U> ? U : undefined;
+    setup: () => T;
+    persistant?: string;
+}
+declare function defineAsyncStorage<T extends FunctionReturningPromise>(options: AsyncStorageOptions<T>): () => readonly [{
+    readonly promise: any;
+    readonly value: ((ReturnType<T> extends Promise<infer U> ? U : undefined) extends infer T_1 ? T_1 extends (ReturnType<T> extends Promise<infer U> ? U : undefined) ? T_1 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_1 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_1 : T_1 extends Promise<unknown> ? Awaited<T_1> : T_1 extends object ? T_1 extends infer T_2 extends object ? { readonly [K in keyof T_2]: T_1[K] extends infer T_3 ? T_3 extends T_1[K] ? T_3 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_3 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_3 : T_3 extends Promise<unknown> ? Awaited<T_3> : T_3 extends object ? T_3 extends infer T_4 extends object ? { readonly [K_1 in keyof T_4]: T_3[K_1] extends infer T_5 ? T_5 extends T_3[K_1] ? T_5 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_5 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_5 : T_5 extends Promise<unknown> ? Awaited<T_5> : T_5 extends object ? T_5 extends infer T_6 extends object ? { readonly [K_2 in keyof T_6]: T_5[K_2] extends infer T_7 ? T_7 extends T_5[K_2] ? T_7 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_7 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_7 : T_7 extends Promise<unknown> ? Awaited<T_7> : T_7 extends object ? T_7 extends infer T_8 extends object ? { readonly [K_3 in keyof T_8]: T_7[K_3] extends infer T_9 ? T_9 extends T_7[K_3] ? T_9 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_9 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_9 : T_9 extends Promise<unknown> ? Awaited<T_9> : T_9 extends object ? T_9 extends infer T_10 extends object ? { readonly [K_4 in keyof T_10]: T_9[K_4] extends infer T_11 ? T_11 extends T_9[K_4] ? T_11 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_11 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_11 : T_11 extends Promise<unknown> ? Awaited<T_11> : T_11 extends object ? T_11 extends infer T_12 extends object ? { readonly [K_5 in keyof T_12]: T_11[K_5] extends infer T_13 ? T_13 extends T_11[K_5] ? T_13 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_13 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_13 : T_13 extends Promise<unknown> ? Awaited<T_13> : T_13 extends object ? T_13 extends infer T_14 extends object ? { readonly [K_6 in keyof T_14]: T_13[K_6] extends infer T_15 ? T_15 extends T_13[K_6] ? T_15 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_15 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_15 : T_15 extends Promise<unknown> ? Awaited<T_15> : T_15 extends object ? T_15 extends infer T_16 extends object ? { readonly [K_7 in keyof T_16]: T_15[K_7] extends infer T_17 ? T_17 extends T_15[K_7] ? T_17 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_17 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_17 : T_17 extends Promise<unknown> ? Awaited<T_17> : T_17 extends object ? T_17 extends infer T_18 extends object ? { readonly [K_8 in keyof T_18]: T_17[K_8] extends infer T_19 ? T_19 extends T_17[K_8] ? T_19 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_19 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_19 : T_19 extends Promise<unknown> ? Awaited<T_19> : T_19 extends object ? T_19 extends infer T_20 extends object ? { readonly [K_9 in keyof T_20]: T_19[K_9] extends infer T_21 ? T_21 extends T_19[K_9] ? T_21 extends {
+        $$valtioSnapshot: infer S;
+    } ? S : T_21 extends RegExp | Error | Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | ((...args: any[]) => any) | (string | number | bigint | boolean | symbol | null | undefined) ? T_21 : T_21 extends Promise<unknown> ? Awaited<T_21> : T_21 extends object ? any : T_21 : never : never; } : never : T_19 : never : never; } : never : T_17 : never : never; } : never : T_15 : never : never; } : never : T_13 : never : never; } : never : T_11 : never : never; } : never : T_9 : never : never; } : never : T_7 : never : never; } : never : T_5 : never : never; } : never : T_3 : never : never; } : never : T_1 : never : never) | undefined;
+    readonly loading: boolean;
+    readonly error: Error | undefined;
+}, T];
+
+declare function storeToState<T extends object, K extends keyof T>(store: T, key: K): readonly [T[K], (value: T[K]) => void];
+
+interface PersistantOptions {
+    storage?: Storage;
+}
+declare function proxyWithPersistant<T extends object>(key: string, initialObject?: T, options?: PersistantOptions): T;
+
+type StoreToStates<S> = {
+    [K in keyof S]: [S[K], (value: S[K]) => void];
+};
+declare function storeToStates<S extends object>(store: S): StoreToStates<S>;
+
+interface StoreDefine<S extends object, A extends Actions<S> = Record<string, any>> {
+    state: (() => S) | S;
+    actions?: A;
+}
+interface StoreOptions {
+    persistant?: string;
+}
+type Actions<S> = Record<string, (this: S) => void>;
+type Store<S, A> = {
+    $state: S;
+    $actions: A;
+} & A;
+declare function defineStore<S extends object, A extends Actions<S>>(store: StoreDefine<S, A>, options?: StoreOptions): Store<S, A>;
+declare function useStore<S extends object, A extends Actions<S>>(store: Store<S, A>): INTERNAL_Snapshot<S>;
+
+type Value = string | boolean | undefined | null;
+type Mapping = Record<string, any>;
+interface ArgumentArray extends Array<Argument> {
+}
+interface ReadonlyArgumentArray extends ReadonlyArray<Argument> {
+}
+type Argument = Value | Mapping | ArgumentArray | ReadonlyArgumentArray;
+/**
+ * A simple JavaScript utility for conditionally joining classNames together.
+ */
+declare function cls(...args: ArgumentArray): string;
+
+export { Argument, ArgumentArray, AsyncStorageOptions, BooleanLike, Case, CaseProps, Default, DetailedHTMLProps, Else, EventBusListener, FetchRequestInterceptCallback, FetchResponseInterceptCallback, If, IfProps, InjectComponent, Injector, InjectorProps, Mapping, PersistantOptions, ReadonlyArgumentArray, StateFromFunctionReturningPromise, StoreToStates, Switch, SwitchProps, Then, Trans, TransProps, Unless, UnlessProps, UseAsyncStateOptions, Value, WatchCallback, WatchOptions, cls, defineAsyncStorage, defineStore, proxyWithPersistant, storeToState, storeToStates, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStore, useWatch, useWhenever };

package/dist/index.mjs

@@ -0,0 +1,389 @@
+// src/components/condition/Case.ts
+function Case(props) {
+  return props.children;
+}
+
+// src/components/condition/Default.ts
+function Default(props) {
+  return props.children;
+}
+
+// src/components/condition/Else.ts
+function Else(props) {
+  return props.children;
+}
+
+// src/components/condition/If.ts
+import { Children } from "react";
+
+// src/components/condition/Then.ts
+function Then(props) {
+  return props.children;
+}
+
+// src/components/condition/If.ts
+function If(props) {
+  const children = props.then || props.children;
+  const elements = Children.toArray(children);
+  const thenChild = elements.find((c) => c.type === Then);
+  const elseChild = elements.find((c) => c.type === Else);
+  return thenChild || elseChild ? props.cond ? thenChild : elseChild : props.cond ? children : props.else;
+}
+
+// src/components/condition/Switch.ts
+import { Children as Children2, isValidElement } from "react";
+function Switch(props) {
+  var _a;
+  const isUseValue = props.value !== void 0;
+  let matchingCase;
+  let defaultCase;
+  Children2.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 (_a = matchingCase != null ? matchingCase : defaultCase) != null ? _a : null;
+}
+
+// src/components/condition/Unless.ts
+import { Children as Children3 } from "react";
+function Unless(props) {
+  const children = props.then || props.children;
+  const elements = Children3.toArray(children);
+  const thenChild = elements.find((c) => c.type === Then);
+  const elseChild = elements.find((c) => c.type === Else);
+  return thenChild || elseChild ? !props.cond ? elseChild : thenChild : !props.cond ? props.children : props.else;
+}
+
+// src/components/utils/Injector.ts
+import { createElement, useMemo } from "react";
+function Injector(props) {
+  const installs = useMemo(
+    () => props.install.map(repack).reverse(),
+    [props.install]
+  );
+  return installs.reduce(
+    (child, { component: Component, props: props2 }) => createElement(Component, props2, child),
+    props.children
+  );
+}
+function repack(c) {
+  return c.component ? c : { component: c };
+}
+
+// src/components/utils/Trans.ts
+import { useTranslation } from "react-i18next";
+import { createElement as createElement2 } from "react";
+import HTML from "html-parse-stringify";
+function Trans({ i18nKey, ...additionalProps }) {
+  const translation = useTranslation().t(i18nKey, additionalProps);
+  return renderNodes(HTML.parse(translation), additionalProps);
+}
+var index = 0;
+function renderNodes(tokens, values) {
+  return tokens.map((token) => {
+    if (token.type === "text")
+      return token.content;
+    index++;
+    const props = { ...token.attrs, key: index };
+    return token.voidElement ? values[token.name] ? createElement2("span", { key: index }, values[token.name]) : createElement2(token.name, props) : createElement2(token.name, props, renderNodes(token.children, {}));
+  });
+}
+
+// src/hooks/useDebounce.ts
+import { useEffect, useState } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useEventBus.ts
+import { useEffect as useEffect2, useRef } from "react";
+import mitt from "mitt";
+var emitter = mitt();
+function useEventBus(key) {
+  const onRef = useRef();
+  function on(listener) {
+    emitter.on(key, listener);
+    onRef.current = listener;
+    useEffect2(() => {
+      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
+  };
+}
+
+// src/hooks/useMounted.ts
+import { useEffect as useEffect3, useState as useState2 } from "react";
+function useMounted() {
+  const [mounted, setMounted] = useState2(false);
+  useEffect3(() => setMounted(true), []);
+  return mounted;
+}
+
+// src/hooks/useWatch.ts
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef2 } from "react";
+function useWatch(source, callback, options = {}) {
+  const firstUpdate = useRef2(false);
+  const then = useRef2();
+  const deps = useMemo2(
+    () => Array.isArray(source) ? source : [source],
+    [source]
+  );
+  useEffect4(() => {
+    if (!firstUpdate.current)
+      recordFirst();
+    else
+      callback(source);
+  }, deps);
+  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));
+  }
+}
+
+// src/hooks/useWhenever.ts
+function useWhenever(source, cb, options) {
+  useWatch(source, () => source && cb(source), options);
+}
+
+// src/hooks/useAsyncCallback.ts
+import { useState as useState3 } from "react";
+function useAsyncCallback(fun) {
+  const [error, setError] = useState3();
+  const [loading, setLoading] = useState3(false);
+  async function execute(...args) {
+    try {
+      setLoading(true);
+      const result = await fun(...args);
+      setLoading(false);
+      return result;
+    } catch (error2) {
+      setLoading(false);
+      setError(error2);
+      throw error2;
+    }
+  }
+  return [loading, execute, error];
+}
+
+// src/hooks/useAsyncState.ts
+import { useAsyncFn, useMount } from "react-use";
+function useAsyncState(fn, deps, options) {
+  const [state, _fn] = useAsyncFn(fn, deps, options == null ? void 0 : options.initial);
+  useMount(() => (options == null ? void 0 : options.immediate) && _fn());
+  return [state, _fn];
+}
+
+// src/hooks/useFetchIntercept.ts
+import { useMount as useMount2 } from "react-use";
+function useFetchResponseIntercept(intercept) {
+  useMount2(() => fetchResponseIntercept(intercept));
+}
+function useFetchRequestIntercept(intercept) {
+  useMount2(() => fetchRequestIntercept(intercept));
+}
+function fetchResponseIntercept(intercept) {
+  const { fetch: originalFetch } = window;
+  window.fetch = async (...args) => {
+    const [resource, config] = args;
+    const response = await originalFetch(resource, config);
+    return intercept(response);
+  };
+}
+function fetchRequestIntercept(intercept) {
+  const { fetch: originalFetch } = window;
+  window.fetch = async (...args) => {
+    const [resource, config] = args;
+    return intercept(originalFetch, resource, config);
+  };
+}
+
+// src/storage/storeToState.ts
+import { useSnapshot } from "valtio";
+function storeToState(store, key) {
+  const snapshot = useSnapshot(store);
+  function get() {
+    return snapshot[key];
+  }
+  function set(value) {
+    store[key] = value;
+  }
+  return [get(), set];
+}
+
+// src/storage/proxyWithPersistant.ts
+import { proxy, subscribe } from "valtio";
+function proxyWithPersistant(key, initialObject, options = {}) {
+  const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const state = proxy(parse(storage == null ? void 0 : storage.getItem(key)) || initialObject);
+  subscribe(state, () => {
+    storage == null ? void 0 : storage.setItem(key, JSON.stringify(state));
+  });
+  return state;
+}
+function parse(text) {
+  try {
+    return JSON.parse(text || "");
+  } catch (e) {
+  }
+}
+
+// src/storage/storeToStates.ts
+import { useSnapshot as useSnapshot2 } from "valtio";
+function storeToStates(store) {
+  const snapshot = useSnapshot2(store);
+  const states = {};
+  function toState(key) {
+    const get = () => snapshot[key];
+    const set = (value) => {
+      store[key] = value;
+    };
+    return [get(), set];
+  }
+  for (const key of Object.keys(snapshot))
+    states[key] = toState(key);
+  return states;
+}
+
+// src/storage/defineStore.ts
+import { proxy as proxy2, useSnapshot as useSnapshot3 } from "valtio";
+function defineStore(store, options = {}) {
+  const state = typeof store.state === "function" ? store.state() : store.state;
+  const actions = store.actions || {};
+  const $state = options.persistant ? proxyWithPersistant(options.persistant, state) : proxy2(state);
+  const $actions = {};
+  for (const key in actions)
+    $actions[key] = actions[key].bind($state);
+  return {
+    $state: state,
+    $actions: actions,
+    ...actions
+  };
+}
+function useStore(store) {
+  return useSnapshot3(store.$state);
+}
+
+// src/hooks/defineAsyncStorage.ts
+function defineAsyncStorage(options) {
+  const store = defineStore(
+    {
+      state: () => ({
+        promise: void 0,
+        value: options.initial,
+        loading: false,
+        error: void 0
+      })
+    },
+    { persistant: options.persistant }
+  );
+  function use() {
+    const fn = options.setup();
+    const state = useStore(store);
+    function fetch(...args) {
+      if (state.loading)
+        return;
+      store.$state.loading = true;
+      store.$state.promise = fn(...args);
+      store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
+        store.$state.error = error;
+        throw error;
+      });
+      return store.$state.promise;
+    }
+    return [state, fetch];
+  }
+  return use;
+}
+
+// src/utils/index.ts
+var hasOwn = {}.hasOwnProperty;
+function cls(...args) {
+  let classes = "";
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = arguments[i];
+    if (arg)
+      classes = appendClass(classes, parseValue(arg));
+  }
+  return classes;
+}
+function parseValue(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 = appendClass(classes, key);
+  }
+  return classes;
+}
+function appendClass(value, newClass) {
+  if (!newClass)
+    return value;
+  return value ? `${value} ${newClass}` : newClass;
+}
+export {
+  Case,
+  Default,
+  Else,
+  If,
+  Injector,
+  Switch,
+  Then,
+  Trans,
+  Unless,
+  cls,
+  defineAsyncStorage,
+  defineStore,
+  proxyWithPersistant,
+  storeToState,
+  storeToStates,
+  useAsyncCallback,
+  useAsyncState,
+  useDebounce,
+  useEventBus,
+  useFetchRequestIntercept,
+  useFetchResponseIntercept,
+  useMounted,
+  useStore,
+  useWatch,
+  useWhenever
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@hairy/react-lib",
+  "version": "1.1.1",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "publishConfig": {
+    "jsdelivr": "./dist/index.iife.min.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "html-parse-stringify": "^3.0.1",
+    "mitt": "^3.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
+    "valtio": "^1.13.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.7",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17"
+  },
+  "scripts": {
+    "build": "ptsup src/index.ts --dts"
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.iife.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./*"
+  }
+}