@hairy/react-lib 1.24.0 → 1.26.0

package/dist/index.cjs

@@ -37,13 +37,14 @@ __export(index_exports, {
   Injector: () => Injector,
   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 +93,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) {
@@ -184,28 +230,36 @@ function repack(c) {
   return c.component ? c : { component: c };
 }
 
-// src/components/utils/Trans.ts
-var import_html_parse_stringify = __toESM(require("html-parse-stringify"), 1);
+// src/components/utils/Trigger.ts
 var import_react6 = require("react");
-var import_react_i18next = require("react-i18next");
-function Trans({ i18nKey, ...additionalProps }) {
-  const translation = (0, import_react_i18next.useTranslation)().t(i18nKey, additionalProps);
-  return renderNodes(import_html_parse_stringify.default.parse(translation), additionalProps);
-}
-function renderNodes(tokens, values) {
-  let index = 0;
-  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_react6.createElement)("span", { key: index }, values[token.name]) : (0, import_react6.createElement)(token.name, props) : (0, import_react6.createElement)(token.name, props, renderNodes(token.children, {}));
-  });
+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_react6.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_react7 = require("react");
-function ref(value) {
+function ref2(value) {
   function define(value2) {
     if (typeof value2 === "function")
       return (prev) => define(value2(prev.value));
@@ -215,8 +269,8 @@ function ref(value) {
       enumerable: true
     });
   }
-  const [ref2, set] = (0, import_react7.useState)(define(value));
-  return ref2;
+  const [ref3, set] = (0, import_react7.useState)(define(value));
+  return ref3;
 }
 
 // src/hooks/useAsyncCallback.ts
@@ -369,23 +423,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_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 +440,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 +460,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 +480,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_react15.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_react15.createElement)(() => fn((0, import_valtio4.useSnapshot)($status)));
   };
   return {
     $subscribe,
@@ -451,7 +496,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 +523,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 +574,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 +585,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 = {
@@ -559,13 +604,14 @@ function useStore(store) {
   Injector,
   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;
@@ -73,11 +85,39 @@ interface InjectorProps {
 }
 declare function Injector(props: InjectorProps): ReactNode;
 
-interface TransProps {
-    i18nKey: string;
-    [key: string]: 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">;
+    };
 }
-declare function Trans({ i18nKey, ...additionalProps }: TransProps): ReactNode[];
 
 interface Ref<S> {
     set value(action: SetStateAction<S>);
@@ -258,4 +298,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, 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 };