@hairy/react-lib 1.34.0 → 1.36.0

package/dist/index.cjs

@@ -40,8 +40,9 @@ __export(index_exports, {
   Trigger: () => Trigger,
   Unless: () => Unless,
   cls: () => cls,
-  defineAsyncStore: () => defineAsyncStore,
+  defienAsyncStore: () => defienAsyncStore,
   defineStore: () => defineStore,
+  defineStoreAsync: () => defineStoreAsync,
   proxyWithPersistant: () => proxyWithPersistant,
   track: () => track,
   tryUseCallback: () => tryUseCallback,
@@ -567,9 +568,6 @@ function useWhenever(source, cb, options) {
   useWatch(source, () => source && cb(source), options);
 }
 
-// src/storage/defineAsyncStore.ts
-var import_utils11 = require("valtio/utils");
-
 // src/storage/defineStore.ts
 var import_react20 = require("react");
 var import_valtio4 = require("valtio");
@@ -596,6 +594,32 @@ function proxyWithPersistant(keyOrOptions, initialObject) {
   return state;
 }
 
+// src/storage/utils/index.ts
+function track2(action, status) {
+  let loadings = 0;
+  const tracking = () => loadings++ === 0 && (status.loading = true);
+  const done = () => !--loadings && (status.loading = false);
+  const fulfilled = (value) => {
+    status.finished = true;
+    done();
+    return value;
+  };
+  const rejected = (error) => {
+    status.error = error;
+    done();
+    throw error;
+  };
+  return function(...args) {
+    tracking();
+    try {
+      const value = action(...args);
+      return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
+    } catch (error) {
+      rejected(error);
+    }
+  };
+}
+
 // src/storage/defineStore.ts
 function defineStore(store, options = {}) {
   const state = typeof store.state === "function" ? store.state() : store.state;
@@ -641,34 +665,13 @@ function defineStore(store, options = {}) {
     ...$actions
   };
 }
-function track2(action, status) {
-  let loadings = 0;
-  const tracking = () => loadings++ === 0 && (status.loading = true);
-  const done = () => !--loadings && (status.loading = false);
-  const fulfilled = (value) => {
-    status.finished = true;
-    done();
-    return value;
-  };
-  const rejected = (error) => {
-    status.error = error;
-    done();
-    throw error;
-  };
-  return function(...args) {
-    tracking();
-    try {
-      const value = action(...args);
-      return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
-    } catch (error) {
-      rejected(error);
-    }
-  };
-}
 function setupActions($state, actions, $actions, $status) {
   for (const key in actions) {
     $status[key] = { finished: false, loading: false, error: null };
     $actions[key] = track2(actions[key].bind($state), $status[key]);
+    Object.defineProperty($state, key, {
+      get: () => $actions[key]
+    });
   }
 }
 function setupGetters(state, $state, getters, $getters) {
@@ -698,8 +701,16 @@ function setupStatus($actions, $status) {
   });
 }
 
-// src/storage/defineAsyncStore.ts
-function defineAsyncStore(fetch, options = {}) {
+// src/storage/defineStoreAsync.ts
+var import_utils12 = require("valtio/utils");
+function defineStoreAsync(fetch, options = {}) {
+  let persist;
+  if (typeof options.persist === "string") {
+    persist = { id: options.persist, pick: ["value"] };
+  }
+  if (typeof options.persist === "object") {
+    persist = { ...options.persist, pick: ["value"] };
+  }
   const store = defineStore(
     {
       state: () => ({
@@ -709,18 +720,18 @@ function defineAsyncStore(fetch, options = {}) {
         finished: false
       }),
       actions: {
-        async fetch(...args) {
+        async refetch(...args) {
           return this.value = await fetch(...args);
         },
-        refresh(value) {
+        reset(value) {
           this.value = value || options.initial;
         }
       }
     },
-    { persist: options.persist ? { id: options.persist, pick: ["value"] } : void 0 }
+    { persist }
   );
-  (0, import_utils11.watch)((get) => {
-    const status = get(store.$status.fetch);
+  (0, import_utils12.watch)((get) => {
+    const status = get(store.$status.refetch);
     store.$state.error = status.error;
     store.$state.loading = status.loading;
     store.$state.finished = status.finished;
@@ -728,6 +739,7 @@ function defineAsyncStore(fetch, options = {}) {
   options.immediate && store.fetch();
   return store;
 }
+var defienAsyncStore = defineStoreAsync;
 
 // src/storage/useStatus.tsx
 var import_valtio5 = require("valtio");
@@ -752,8 +764,9 @@ function useStore(store) {
   Trigger,
   Unless,
   cls,
-  defineAsyncStore,
+  defienAsyncStore,
   defineStore,
+  defineStoreAsync,
   proxyWithPersistant,
   track,
   tryUseCallback,

package/dist/index.d.ts

@@ -249,49 +249,87 @@ interface StorePatch<S, G extends Getters<S>> {
 type Store<S, A extends Actions<S>, G extends Getters<S>> = {
     $subscribe: StoreSubscribe<S, A, G>;
     $patch: StorePatch<S, G>;
-    $state: S & GettersReturnType<G>;
+    $state: S & GettersReturnType<G> & ActionsOmitThisParameter<A>;
     $actions: ActionsOmitThisParameter<A>;
     $getters: GettersReturnType<G>;
     $status: ActionsStatus<A>;
     $signal: StoreSignal<S, A, G>;
 } & ActionsOmitThisParameter<A>;
 
-interface AsyncStoreOptions<T extends AnyFn> {
-    initial?: ReturnType<T> extends Promise<infer U> ? U : undefined;
-    persist?: string;
+/**
+ * @description Define a store
+ * @example
+ * ```tsx
+ * const store = defineStore({
+ *   state: () => ({ count: 0 }),
+ *   actions: {
+ *     increment() {
+ *       this.count++
+ *     },
+ *   },
+ * })
+ *
+ * store.increment()
+ * console.log(store.$state.count) // 1
+ *
+ * function Component() {
+ *   const store = useStore(store)
+ *   return (
+ *     <div>
+ *       <button onClick={store.increment}>Increment</button>
+ *       <div>{store.count}</div>
+ *     </div>
+ *   )
+ * }
+ *
+ * ```
+ */
+declare function defineStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: StoreDefine<S, A, G>, options?: StoreOptions): Store<S, A, G>;
+
+type StoreAsyncInitial<T extends AnyFn> = ReturnType<T> extends Promise<infer U> ? U : ReturnType<T>;
+interface StoreAsyncOptions<T extends AnyFn> {
+    initial?: StoreAsyncInitial<T>;
+    persist?: string | Omit<PersistantOptions, 'pick'> | undefined;
     immediate?: boolean;
 }
-declare function defineAsyncStore<T extends AnyFn>(fetch: T, options?: AsyncStoreOptions<T>): Store<{
-    value: (ReturnType<T> extends Promise<infer U> ? U : undefined) | undefined;
+interface StoreAsyncInitialOptions<T extends AnyFn> extends StoreAsyncOptions<T> {
+    initial: StoreAsyncInitial<T>;
+}
+type StoreAsync<T extends AnyFn, Initial = StoreAsyncInitial<T> | undefined> = Store<{
+    value: Initial;
     error: Error | null | undefined;
     loading: boolean;
     finished: boolean;
 }, {
-    fetch(this: {
-        value: (ReturnType<T> extends Promise<infer U> ? U : undefined) | undefined;
-        error: Error | null | undefined;
-        loading: boolean;
-        finished: boolean;
-    }, ...args: Parameters<T>): Promise<any>;
-    refresh(this: {
-        value: (ReturnType<T> extends Promise<infer U> ? U : undefined) | undefined;
-        error: Error | null | undefined;
-        loading: boolean;
-        finished: boolean;
-    }, value?: (ReturnType<T> extends Promise<infer U_1> ? U_1 : undefined)): void;
-}, Getters<{
-    value: (ReturnType<T> extends Promise<infer U> ? U : undefined) | undefined;
-    error: Error | null | undefined;
-    loading: boolean;
-    finished: boolean;
-}>>;
-
-declare function defineStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: StoreDefine<S, A, G>, options?: StoreOptions): Store<S, A, G>;
+    refetch: (...args: Parameters<T>) => ReturnType<T>;
+    reset: (value?: StoreAsyncInitial<T>) => void;
+}, {}>;
+/**
+ * @description Define a store async
+ * @example
+ * ```tsx
+ * const store = defineStoreAsync(
+ *   () => fetch('https://api.example.com/data').then(response => response.json()),
+ *   {
+ *     initial: [],
+ *     // data will be obtained immediately upon defining the store
+ *     immediate: true,
+ *   },
+ * )
+ * ```
+ */
+declare function defineStoreAsync<T extends AnyFn>(fetch: T, options: StoreAsyncInitialOptions<T>): StoreAsync<T, StoreAsyncInitial<T>>;
+declare function defineStoreAsync<T extends AnyFn>(fetch: T, options?: StoreAsyncOptions<T>): StoreAsync<T>;
+/**
+ * @deprecated
+ * use defineStoreAsync instead
+ */
+declare const defienAsyncStore: typeof defineStoreAsync;
 
 declare function useStatus<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>): valtio.Snapshot<ActionsStatus<A>>;
 
-declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>): valtio.Snapshot<S & GettersReturnType<G>>;
+declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>): valtio.Snapshot<S & GettersReturnType<G> & ActionsOmitThisParameter<A>>;
 
 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 Exposer, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, Switch, type SwitchProps, Then, type ThenProps, Trigger, Unless, type UnlessProps, type UseAsyncStateOptions, type UseWatchCallback, type UseWatchOptions, type Value, type WrapperProps, type WrapperTag, cls, defineAsyncStore, defineStore, proxyWithPersistant, track, tryUseCallback, tryUseEffect, tryUseInsertionEffect, tryUseReducer, tryUseRef, tryUseState, tryUseUpdate, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useUpdate, useWatch, useWhenever, wrapper };
+export { type Argument, type ArgumentArray, 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 StoreAsync, type StoreAsyncInitial, type StoreAsyncInitialOptions, type StoreAsyncOptions, Switch, type SwitchProps, Then, type ThenProps, Trigger, Unless, type UnlessProps, type UseAsyncStateOptions, type UseWatchCallback, type UseWatchOptions, type Value, type WrapperProps, type WrapperTag, cls, defienAsyncStore, defineStore, defineStoreAsync, proxyWithPersistant, track, tryUseCallback, tryUseEffect, tryUseInsertionEffect, tryUseReducer, tryUseRef, tryUseState, tryUseUpdate, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useUpdate, useWatch, useWhenever, wrapper };

package/dist/index.global.js

@@ -52,8 +52,9 @@ var LibReact = (() => {
     Trigger: () => Trigger,
     Unless: () => Unless,
     cls: () => cls,
-    defineAsyncStore: () => defineAsyncStore,
+    defienAsyncStore: () => defienAsyncStore,
     defineStore: () => defineStore,
+    defineStoreAsync: () => defineStoreAsync,
     proxyWithPersistant: () => proxyWithPersistant,
     track: () => track,
     tryUseCallback: () => tryUseCallback,
@@ -1321,6 +1322,32 @@ var LibReact = (() => {
     return state;
   }
 
+  // src/storage/utils/index.ts
+  function track2(action, status) {
+    let loadings = 0;
+    const tracking = () => loadings++ === 0 && (status.loading = true);
+    const done = () => !--loadings && (status.loading = false);
+    const fulfilled = (value) => {
+      status.finished = true;
+      done();
+      return value;
+    };
+    const rejected = (error) => {
+      status.error = error;
+      done();
+      throw error;
+    };
+    return function(...args) {
+      tracking();
+      try {
+        const value = action(...args);
+        return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
+      } catch (error) {
+        rejected(error);
+      }
+    };
+  }
+
   // src/storage/defineStore.ts
   function defineStore(store, options = {}) {
     const state = typeof store.state === "function" ? store.state() : store.state;
@@ -1366,34 +1393,13 @@ var LibReact = (() => {
       ...$actions
     };
   }
-  function track2(action, status) {
-    let loadings = 0;
-    const tracking = () => loadings++ === 0 && (status.loading = true);
-    const done = () => !--loadings && (status.loading = false);
-    const fulfilled = (value) => {
-      status.finished = true;
-      done();
-      return value;
-    };
-    const rejected = (error) => {
-      status.error = error;
-      done();
-      throw error;
-    };
-    return function(...args) {
-      tracking();
-      try {
-        const value = action(...args);
-        return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
-      } catch (error) {
-        rejected(error);
-      }
-    };
-  }
   function setupActions($state, actions, $actions, $status) {
     for (const key in actions) {
       $status[key] = { finished: false, loading: false, error: null };
       $actions[key] = track2(actions[key].bind($state), $status[key]);
+      Object.defineProperty($state, key, {
+        get: () => $actions[key]
+      });
     }
   }
   function setupGetters(state, $state, getters, $getters) {
@@ -1423,8 +1429,15 @@ var LibReact = (() => {
     });
   }
 
-  // src/storage/defineAsyncStore.ts
-  function defineAsyncStore(fetch, options = {}) {
+  // src/storage/defineStoreAsync.ts
+  function defineStoreAsync(fetch, options = {}) {
+    let persist;
+    if (typeof options.persist === "string") {
+      persist = { id: options.persist, pick: ["value"] };
+    }
+    if (typeof options.persist === "object") {
+      persist = { ...options.persist, pick: ["value"] };
+    }
     const store = defineStore(
       {
         state: () => ({
@@ -1434,18 +1447,18 @@ var LibReact = (() => {
           finished: false
         }),
         actions: {
-          async fetch(...args) {
+          async refetch(...args) {
             return this.value = await fetch(...args);
           },
-          refresh(value) {
+          reset(value) {
             this.value = value || options.initial;
           }
         }
       },
-      { persist: options.persist ? { id: options.persist, pick: ["value"] } : void 0 }
+      { persist }
     );
     watch((get) => {
-      const status = get(store.$status.fetch);
+      const status = get(store.$status.refetch);
       store.$state.error = status.error;
       store.$state.loading = status.loading;
       store.$state.finished = status.finished;
@@ -1453,6 +1466,7 @@ var LibReact = (() => {
     options.immediate && store.fetch();
     return store;
   }
+  var defienAsyncStore = defineStoreAsync;
 
   // src/storage/useStatus.tsx
   function useStatus(store) {

package/dist/index.js

@@ -498,9 +498,6 @@ function useWhenever(source, cb, options) {
   useWatch(source, () => source && cb(source), options);
 }
 
-// src/storage/defineAsyncStore.ts
-import { watch } from "valtio/utils";
-
 // src/storage/defineStore.ts
 import { createElement as createElement4 } from "react";
 import { proxy as proxy2, subscribe as subscribe2, useSnapshot as useSnapshot2 } from "valtio";
@@ -527,6 +524,32 @@ function proxyWithPersistant(keyOrOptions, initialObject) {
   return state;
 }
 
+// src/storage/utils/index.ts
+function track2(action, status) {
+  let loadings = 0;
+  const tracking = () => loadings++ === 0 && (status.loading = true);
+  const done = () => !--loadings && (status.loading = false);
+  const fulfilled = (value) => {
+    status.finished = true;
+    done();
+    return value;
+  };
+  const rejected = (error) => {
+    status.error = error;
+    done();
+    throw error;
+  };
+  return function(...args) {
+    tracking();
+    try {
+      const value = action(...args);
+      return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
+    } catch (error) {
+      rejected(error);
+    }
+  };
+}
+
 // src/storage/defineStore.ts
 function defineStore(store, options = {}) {
   const state = typeof store.state === "function" ? store.state() : store.state;
@@ -572,34 +595,13 @@ function defineStore(store, options = {}) {
     ...$actions
   };
 }
-function track2(action, status) {
-  let loadings = 0;
-  const tracking = () => loadings++ === 0 && (status.loading = true);
-  const done = () => !--loadings && (status.loading = false);
-  const fulfilled = (value) => {
-    status.finished = true;
-    done();
-    return value;
-  };
-  const rejected = (error) => {
-    status.error = error;
-    done();
-    throw error;
-  };
-  return function(...args) {
-    tracking();
-    try {
-      const value = action(...args);
-      return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
-    } catch (error) {
-      rejected(error);
-    }
-  };
-}
 function setupActions($state, actions, $actions, $status) {
   for (const key in actions) {
     $status[key] = { finished: false, loading: false, error: null };
     $actions[key] = track2(actions[key].bind($state), $status[key]);
+    Object.defineProperty($state, key, {
+      get: () => $actions[key]
+    });
   }
 }
 function setupGetters(state, $state, getters, $getters) {
@@ -629,8 +631,16 @@ function setupStatus($actions, $status) {
   });
 }
 
-// src/storage/defineAsyncStore.ts
-function defineAsyncStore(fetch, options = {}) {
+// src/storage/defineStoreAsync.ts
+import { watch } from "valtio/utils";
+function defineStoreAsync(fetch, options = {}) {
+  let persist;
+  if (typeof options.persist === "string") {
+    persist = { id: options.persist, pick: ["value"] };
+  }
+  if (typeof options.persist === "object") {
+    persist = { ...options.persist, pick: ["value"] };
+  }
   const store = defineStore(
     {
       state: () => ({
@@ -640,18 +650,18 @@ function defineAsyncStore(fetch, options = {}) {
         finished: false
       }),
       actions: {
-        async fetch(...args) {
+        async refetch(...args) {
           return this.value = await fetch(...args);
         },
-        refresh(value) {
+        reset(value) {
           this.value = value || options.initial;
         }
       }
     },
-    { persist: options.persist ? { id: options.persist, pick: ["value"] } : void 0 }
+    { persist }
   );
   watch((get) => {
-    const status = get(store.$status.fetch);
+    const status = get(store.$status.refetch);
     store.$state.error = status.error;
     store.$state.loading = status.loading;
     store.$state.finished = status.finished;
@@ -659,6 +669,7 @@ function defineAsyncStore(fetch, options = {}) {
   options.immediate && store.fetch();
   return store;
 }
+var defienAsyncStore = defineStoreAsync;
 
 // src/storage/useStatus.tsx
 import { useSnapshot as useSnapshot3 } from "valtio";
@@ -682,8 +693,9 @@ export {
   Trigger,
   Unless,
   cls,
-  defineAsyncStore,
+  defienAsyncStore,
   defineStore,
+  defineStoreAsync,
   proxyWithPersistant,
   track,
   tryUseCallback,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-dom": "^19.1.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.34.0"
+    "@hairy/utils": "1.36.0"
   },
   "scripts": {
     "build": "tsup",