@hairy/react-lib 1.24.0 → 1.25.0

package/dist/index.cjs

@@ -38,12 +38,14 @@ __export(index_exports, {
   Switch: () => Switch,
   Then: () => Then,
   Trans: () => Trans,
+  Trigger: () => Trigger,
   Unless: () => Unless,
   cls: () => cls,
   defineAsyncStore: () => defineAsyncStore,
   defineStore: () => defineStore,
   proxyWithPersistant: () => proxyWithPersistant,
-  ref: () => ref,
+  ref: () => ref2,
+  track: () => track,
   useAsyncCallback: () => useAsyncCallback,
   useAsyncState: () => useAsyncState,
   useDebounce: () => useDebounce,
@@ -92,6 +94,51 @@ cls.append = function(value, newClass) {
   return value ? `${value} ${newClass}` : newClass;
 };
 
+// ../util-core/src/util/noop.ts
+var noop = () => {
+};
+
+// ../util-core/src/util/deferred.ts
+var Deferred = class extends Promise {
+  resolve;
+  reject;
+  constructor(executor = noop) {
+    let _resolve, _reject;
+    super((resolve_, reject_) => {
+      _resolve = resolve_;
+      _reject = reject_;
+      return executor(resolve_, reject_);
+    });
+    this.resolve = (value) => {
+      _resolve(value);
+      return this;
+    };
+    this.reject = (reason) => {
+      _reject(reason);
+      return this;
+    };
+  }
+};
+
+// ../util-core/src/util/json.ts
+function jsonTryParse(text) {
+  try {
+    return JSON.parse(text || "");
+  } catch {
+    return void 0;
+  }
+}
+
+// src/utils/track.ts
+var import_valtio = require("valtio");
+function track(fn, ...args) {
+  const deferred = (0, import_valtio.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;
+}
+
 // src/utils/wrapper.ts
 var import_react = require("react");
 function wrapper(tag, props, children) {
@@ -203,9 +250,36 @@ function renderNodes(tokens, values) {
   });
 }
 
-// src/hooks/ref.ts
+// src/components/utils/Trigger.ts
 var import_react7 = require("react");
-function ref(value) {
+var import_valtio2 = require("valtio");
+var import_utils8 = require("valtio/utils");
+var pendingTasks = (0, import_utils8.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 (0, import_react7.createElement)(Tracker, { key: Tracker.key });
+}
+function Trigger() {
+  const values = [...(0, import_valtio2.useSnapshot)(pendingTasks).values()];
+  return values.map(createTracker).map(renderTracker);
+}
+Trigger.id = 0;
+Trigger.tasks = pendingTasks;
+
+// src/hooks/ref.ts
+var import_react8 = require("react");
+function ref2(value) {
   function define(value2) {
     if (typeof value2 === "function")
       return (prev) => define(value2(prev.value));
@@ -215,14 +289,14 @@ function ref(value) {
       enumerable: true
     });
   }
-  const [ref2, set] = (0, import_react7.useState)(define(value));
-  return ref2;
+  const [ref3, set] = (0, import_react8.useState)(define(value));
+  return ref3;
 }
 
 // src/hooks/useAsyncCallback.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useAsyncCallback(fun) {
-  const [state, set] = (0, import_react8.useState)({ loading: false });
+  const [state, set] = (0, import_react9.useState)({ loading: false });
   async function execute(...args) {
     set({ loading: true });
     return fun(...args).then((value) => {
@@ -237,11 +311,11 @@ function useAsyncCallback(fun) {
 }
 
 // src/hooks/useAsyncState.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useAsyncState(fun, deps = [], options) {
-  const [value, set] = (0, import_react9.useState)(options?.initial);
+  const [value, set] = (0, import_react10.useState)(options?.initial);
   const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
-  (0, import_react9.useEffect)(
+  (0, import_react10.useEffect)(
     () => {
       execute();
     },
@@ -251,10 +325,10 @@ function useAsyncState(fun, deps = [], options) {
 }
 
 // src/hooks/useDebounce.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react10.useState)(value);
-  (0, import_react10.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react11.useState)(value);
+  (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => setDebouncedValue(value), delay);
     return () => clearTimeout(handler);
   }, [value, delay]);
@@ -263,14 +337,14 @@ function useDebounce(value, delay) {
 
 // src/hooks/useEventBus.ts
 var import_mitt = __toESM(require("mitt"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 var emitter = (0, import_mitt.default)();
 function useEventBus(key) {
-  const onRef = (0, import_react11.useRef)();
+  const onRef = (0, import_react12.useRef)();
   function on(listener) {
     emitter.on(key, listener);
     onRef.current = listener;
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (!onRef.current)
         return;
       emitter.off(key, onRef.current);
@@ -293,9 +367,9 @@ function useEventBus(key) {
 }
 
 // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-var import_react12 = require("react");
+var import_react13 = require("react");
 var useEffectOnce = function(effect) {
-  (0, import_react12.useEffect)(effect, []);
+  (0, import_react13.useEffect)(effect, []);
 };
 var useEffectOnce_default = useEffectOnce;
 
@@ -331,23 +405,23 @@ function fetchRequestIntercept(intercept) {
 }
 
 // src/hooks/useMounted.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => setMounted(true), []);
+  const [mounted, setMounted] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => setMounted(true), []);
   return mounted;
 }
 
 // src/hooks/useWatch.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useWatch(source, callback, options = {}) {
-  const firstUpdate = (0, import_react14.useRef)(false);
-  const then = (0, import_react14.useRef)();
-  const deps = (0, import_react14.useMemo)(
+  const firstUpdate = (0, import_react15.useRef)(false);
+  const then = (0, import_react15.useRef)();
+  const deps = (0, import_react15.useMemo)(
     () => Array.isArray(source) ? source : [source],
     [source]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!firstUpdate.current)
       recordFirst();
     else
@@ -369,23 +443,14 @@ function useWhenever(source, cb, options) {
 }
 
 // src/storage/defineAsyncStore.ts
-var import_utils8 = require("valtio/utils");
+var import_utils10 = require("valtio/utils");
 
 // src/storage/defineStore.ts
-var import_react15 = require("react");
-var import_valtio2 = require("valtio");
-
-// ../util-core/src/util/json.ts
-function jsonTryParse(text) {
-  try {
-    return JSON.parse(text || "");
-  } catch {
-    return void 0;
-  }
-}
+var import_react16 = require("react");
+var import_valtio4 = require("valtio");
 
 // src/storage/persistant.ts
-var import_valtio = require("valtio");
+var import_valtio3 = require("valtio");
 function proxyWithPersistant(keyOrOptions, initialObject) {
   let options;
   if (typeof keyOrOptions === "string") {
@@ -395,8 +460,8 @@ function proxyWithPersistant(keyOrOptions, initialObject) {
   }
   const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
   typeof keyOrOptions === "string" && (keyOrOptions = { id: keyOrOptions });
-  const state = (0, import_valtio.proxy)(jsonTryParse(storage?.getItem(options.id)) || initialObject);
-  (0, import_valtio.subscribe)(state, () => {
+  const state = (0, import_valtio3.proxy)(jsonTryParse(storage?.getItem(options.id)) || initialObject);
+  (0, import_valtio3.subscribe)(state, () => {
     const pick = options.pick || Object.keys(state);
     const statePick = {};
     for (const key of pick)
@@ -415,18 +480,18 @@ function defineStore(store, options = {}) {
   status.finished = false;
   status.loading = false;
   status.error = null;
-  const $status = (0, import_valtio2.proxy)(status);
-  const $state = options.persist ? proxyWithPersistant(options.persist, state) : (0, import_valtio2.proxy)(state);
+  const $status = (0, import_valtio4.proxy)(status);
+  const $state = options.persist ? proxyWithPersistant(options.persist, state) : (0, import_valtio4.proxy)(state);
   const $actions = {};
   const $getters = {};
   setupActions($state, actions, $actions, $status);
   setupGetters(state, $state, getters, $getters);
   setupStatus($actions, $status);
   function $subscribe(listener) {
-    return (0, import_valtio2.subscribe)($state, () => listener($state));
+    return (0, import_valtio4.subscribe)($state, () => listener($state));
   }
   $subscribe.status = function(listener) {
-    return (0, import_valtio2.subscribe)($status, () => listener($status));
+    return (0, import_valtio4.subscribe)($status, () => listener($status));
   };
   function $patch(patch) {
     if (typeof patch === "function")
@@ -435,10 +500,10 @@ function defineStore(store, options = {}) {
       Object.assign($state, patch);
   }
   function $signal(fn) {
-    return (0, import_react15.createElement)(() => fn((0, import_valtio2.useSnapshot)($state)));
+    return (0, import_react16.createElement)(() => fn((0, import_valtio4.useSnapshot)($state)));
   }
   $signal.status = function(fn) {
-    return (0, import_react15.createElement)(() => fn((0, import_valtio2.useSnapshot)($status)));
+    return (0, import_react16.createElement)(() => fn((0, import_valtio4.useSnapshot)($status)));
   };
   return {
     $subscribe,
@@ -451,7 +516,7 @@ function defineStore(store, options = {}) {
     ...$actions
   };
 }
-function track(action, status) {
+function track2(action, status) {
   let loadings = 0;
   const tracking = () => loadings++ === 0 && (status.loading = true);
   const done = () => !--loadings && (status.loading = false);
@@ -478,7 +543,7 @@ function track(action, status) {
 function setupActions($state, actions, $actions, $status) {
   for (const key in actions) {
     $status[key] = { finished: false, loading: false, error: null };
-    $actions[key] = track(actions[key].bind($state), $status[key]);
+    $actions[key] = track2(actions[key].bind($state), $status[key]);
   }
 }
 function setupGetters(state, $state, getters, $getters) {
@@ -529,7 +594,7 @@ function defineAsyncStore(fetch, options = {}) {
     },
     { persist: options.persist ? { id: options.persist, pick: ["value"] } : void 0 }
   );
-  (0, import_utils8.watch)((get) => {
+  (0, import_utils10.watch)((get) => {
     const status = get(store.$status.fetch);
     store.$state.error = status.error;
     store.$state.loading = status.loading;
@@ -540,15 +605,15 @@ function defineAsyncStore(fetch, options = {}) {
 }
 
 // src/storage/useStatus.tsx
-var import_valtio3 = require("valtio");
+var import_valtio5 = require("valtio");
 function useStatus(store) {
-  return (0, import_valtio3.useSnapshot)(store.$status);
+  return (0, import_valtio5.useSnapshot)(store.$status);
 }
 
 // src/storage/useStore.ts
-var import_valtio4 = require("valtio");
+var import_valtio6 = require("valtio");
 function useStore(store) {
-  return (0, import_valtio4.useSnapshot)(store.$state);
+  return (0, import_valtio6.useSnapshot)(store.$state);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -560,12 +625,14 @@ function useStore(store) {
   Switch,
   Then,
   Trans,
+  Trigger,
   Unless,
   cls,
   defineAsyncStore,
   defineStore,
   proxyWithPersistant,
   ref,
+  track,
   useAsyncCallback,
   useAsyncState,
   useDebounce,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BooleanLike, PromiseFn, PromiseType, AnyFn } from '@hairy/utils';
+import { AnyFn, BooleanLike, Deferred, PromiseFn, PromiseType } from '@hairy/utils';
 import * as react from 'react';
 import { JSX, ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, SetStateAction, DetailedHTMLProps, HTMLAttributes } from 'react';
 import * as valtio from 'valtio';
@@ -19,6 +19,18 @@ declare namespace cls {
     var append: (value: any, newClass: any) => any;
 }
 
+/**
+ * @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) // { ... }
+ */
+declare function track<T extends AnyFn>(fn: T, ...args: Parameters<T>): Promise<ReturnType<T>>;
+
 type WrapperTag = keyof JSX.IntrinsicElements | Function;
 type WrapperProps<Kag extends keyof JSX.IntrinsicElements | React.FC | unknown> = {
     tag?: Kag;
@@ -79,6 +91,40 @@ interface TransProps {
 }
 declare function Trans({ i18nKey, ...additionalProps }: TransProps): ReactNode[];
 
+interface Exposer {
+    deferred: Deferred<any>;
+    args: any[];
+    fn: AnyFn;
+    id: number;
+}
+/**
+ * @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) // { ... }
+ * ```
+ */
+declare function Trigger(): ReactNode[];
+declare namespace Trigger {
+    var id: number;
+    var tasks: Map<number, Exposer> & {
+        $$valtioSnapshot: Omit<Map<number, Exposer>, "set" | "delete" | "clear">;
+    };
+}
+
 interface Ref<S> {
     set value(action: SetStateAction<S>);
     get value(): S;
@@ -258,4 +304,4 @@ declare function useStore<S extends object, A extends Actions<S>, G extends Gett
 
 type PropsWithDetailedHTML<T = HTMLDivElement> = DetailedHTMLProps<HTMLAttributes<T>, T>;
 
-export { type Argument, type ArgumentArray, type AsyncStoreOptions, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type Ref, Switch, type SwitchProps, Then, type ThenProps, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, type WrapperProps, type WrapperTag, cls, defineAsyncStore, defineStore, proxyWithPersistant, ref, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useWatch, useWhenever, wrapper };
+export { type Argument, type ArgumentArray, type AsyncStoreOptions, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type Exposer, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type Ref, Switch, type SwitchProps, Then, type ThenProps, Trans, type TransProps, Trigger, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, type WrapperProps, type WrapperTag, cls, defineAsyncStore, defineStore, proxyWithPersistant, ref, track, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useWatch, useWhenever, wrapper };