unwrapped 0.1.5 → 0.1.7

package/dist/vue/index.d.ts

@@ -1,6 +1,7 @@
+import * as unwrapped_core from 'unwrapped/core';
+import { ErrorBase, AsyncResult, Result, FlatChainStep, Action, AsyncResultGenerator, AsyncResultList } from 'unwrapped/core';
 import * as vue from 'vue';
-import { Ref, WatchSource, VNode } from 'vue';
-import { ErrorBase, AsyncResult, Result, FlatChainStep, Action, AsyncResultGenerator } from 'unwrapped/core';
+import { Ref, WatchSource, VNode, SlotsType } from 'vue';
 
 interface ReactiveProcessOptions {
     immediate: boolean;
@@ -12,7 +13,7 @@ interface ReactiveProcessOptions {
  * @param asyncResult the result to make reactive
  * @returns the ref to the result
  */
-declare function useAsyncResultRef<T, E extends ErrorBase = ErrorBase>(asyncResult: AsyncResult<T, E>): Ref<AsyncResult<T, E>, AsyncResult<T, E>>;
+declare function useAsyncResultRef<T, E extends ErrorBase = ErrorBase>(asyncResult?: AsyncResult<T, E>): Ref<AsyncResult<T, E>, AsyncResult<T, E>>;
 /**
  * Creates an AsyncResult ref from a promise returning a Result.
  * @param promise the promise returning a Result
@@ -78,68 +79,280 @@ declare function useLazyGenerator<T>(generatorFunc: () => AsyncResultGenerator<T
  * @returns ref to the result
  */
 declare function useReactiveGenerator<Inputs, T, E extends ErrorBase = ErrorBase>(source: WatchSource<Inputs>, generatorFunc: (args: Inputs) => AsyncResultGenerator<T>, options?: ReactiveProcessOptions): Ref<AsyncResult<T, E>>;
-
 /**
- * A Vue component that displays different content based on the state of an AsyncResult.
- * It supports slots for 'loading', 'error', 'success' (default), and 'idle' states.
+ * Creates a reactive AsyncResultList wrapped in a Vue ref.
+ * The AsyncResultList notifies Vue's reactivity system whenever its state changes.
  *
- * @example
- * <AsyncResultLoader :result="myAsyncResult">
- *   <template #loading>
- *     <div>Loading data...</div>
- *   </template>
- *   <template #error="{ error }">
- *     <div>Error occurred: {{ error.message }}</div>
- *   </template>
- *   <template #default="{ value }">
- *     <div>Data loaded: {{ value }}</div>
- *   </template>
- *   <template #idle>
- *     <div>Waiting to start...</div>
- *   </template>
- * </AsyncResultLoader>
+ * @template T - The type of the values in the AsyncResultList.
+ * @template E - The type of the error, extending ErrorBase (default is ErrorBase).
+ * @returns a ref to the AsyncResultList
  */
-declare const AsyncResultLoader: vue.DefineComponent<vue.ExtractPropTypes<{
-    result: {
-        type: () => AsyncResult<unknown>;
-        required: true;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    result: {
-        type: () => AsyncResult<unknown>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function useAsyncResultList<T = any, E extends ErrorBase = ErrorBase>(): Ref<{
+    readonly tasks: Map<string, {
+        key: string;
+        result: {
+            state: {
+                status: "idle";
+            } | {
+                status: "loading";
+                promise: {
+                    then: <TResult1 = Result<T, E>, TResult2 = never>(onfulfilled?: ((value: Result<T, E>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+                    catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<Result<T, E> | TResult>;
+                    finally: (onfinally?: (() => void) | null | undefined) => Promise<Result<T, E>>;
+                    readonly [Symbol.toStringTag]: string;
+                };
+            } | {
+                status: "success";
+                value: vue.UnwrapRef<T>;
+            } | {
+                status: "error";
+                error: vue.UnwrapRef<E>;
+            };
+            isSuccess: () => boolean;
+            isError: () => boolean;
+            isIdle: () => boolean;
+            isLoading: () => boolean;
+            unwrapOrNull: () => T | null;
+            unwrapOrThrow: () => T;
+            unwrapErrorOrNull: () => E | null;
+            updateFromValue: (value: T) => AsyncResult<T, E>;
+            updateFromError: (error: E) => AsyncResult<T, E>;
+            updateFromValuePromise: (promise: Promise<T>) => AsyncResult<T, E>;
+            waitForSettled: () => Promise<AsyncResult<T, E>>;
+            toResultPromise: () => Promise<Result<T, E>>;
+            toValueOrThrowPromise: () => Promise<T>;
+            toValueOrNullPromise: () => Promise<T | null>;
+            updateFromResultPromise: (promise: Promise<Result<T, E>>) => AsyncResult<T, E>;
+            listen: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+            listenUntilSettled: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+            mirror: (other: AsyncResult<T, E>) => () => void;
+            mirrorUntilSettled: (other: AsyncResult<T, E>) => () => void;
+            chain: <O, E2 extends ErrorBase = ErrorBase>(fn: unwrapped_core.ChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+            flatChain: <O, E2 extends ErrorBase = ErrorBase>(fn: FlatChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+            runInPlace: (generatorFunc: () => AsyncResultGenerator<T>) => AsyncResult<T, E>;
+            log: (name?: string) => void;
+            debug: (name?: string) => () => void;
+            [Symbol.iterator]: () => Generator<AsyncResult<T, E>, T, any>;
+        };
+        unsub: () => void;
+    }> & Omit<Map<string, unwrapped_core.AsyncResultListItem<T, E>>, keyof Map<any, any>>;
+    readonly length: number;
+    readonly items: {
+        state: {
+            status: "idle";
+        } | {
+            status: "loading";
+            promise: {
+                then: <TResult1 = Result<T, E>, TResult2 = never>(onfulfilled?: ((value: Result<T, E>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+                catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<Result<T, E> | TResult>;
+                finally: (onfinally?: (() => void) | null | undefined) => Promise<Result<T, E>>;
+                readonly [Symbol.toStringTag]: string;
+            };
+        } | {
+            status: "success";
+            value: vue.UnwrapRef<T>;
+        } | {
+            status: "error";
+            error: vue.UnwrapRef<E>;
+        };
+        isSuccess: () => boolean;
+        isError: () => boolean;
+        isIdle: () => boolean;
+        isLoading: () => boolean;
+        unwrapOrNull: () => T | null;
+        unwrapOrThrow: () => T;
+        unwrapErrorOrNull: () => E | null;
+        updateFromValue: (value: T) => AsyncResult<T, E>;
+        updateFromError: (error: E) => AsyncResult<T, E>;
+        updateFromValuePromise: (promise: Promise<T>) => AsyncResult<T, E>;
+        waitForSettled: () => Promise<AsyncResult<T, E>>;
+        toResultPromise: () => Promise<Result<T, E>>;
+        toValueOrThrowPromise: () => Promise<T>;
+        toValueOrNullPromise: () => Promise<T | null>;
+        updateFromResultPromise: (promise: Promise<Result<T, E>>) => AsyncResult<T, E>;
+        listen: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+        listenUntilSettled: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+        mirror: (other: AsyncResult<T, E>) => () => void;
+        mirrorUntilSettled: (other: AsyncResult<T, E>) => () => void;
+        chain: <O, E2 extends ErrorBase = ErrorBase>(fn: unwrapped_core.ChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+        flatChain: <O, E2 extends ErrorBase = ErrorBase>(fn: FlatChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+        runInPlace: (generatorFunc: () => AsyncResultGenerator<T>) => AsyncResult<T, E>;
+        log: (name?: string) => void;
+        debug: (name?: string) => () => void;
+        [Symbol.iterator]: () => Generator<AsyncResult<T, E>, T, any>;
+    }[];
+    state: unwrapped_core.AsyncResultListState;
+    listen: (listener: (taskQueue: AsyncResultList<T, E>) => void) => () => void;
+    add: (key: string, task: AsyncResult<T, E>, removeOnSettle?: boolean) => AsyncResult<T, E>;
+    clear: () => void;
+    anyLoading: () => boolean;
+    getAllFiltered: (predicate: (task: AsyncResult<T, E>) => boolean) => AsyncResult<T, E>[];
+    getAllFilteredAndMap: <U>(filterPredicate: (task: AsyncResult<T, E>) => boolean, mapFunc: (task: AsyncResult<T, E>) => U) => U[];
+    getAllSuccess: () => AsyncResult<T, E>[];
+    getAllSuccessValues: () => T[];
+    getAllErrors: () => AsyncResult<T, E>[];
+    getAllErrorValues: () => E[];
+    getAllLoading: () => AsyncResult<T, E>[];
+    getAllLoadingPromises: () => Promise<Result<T, E>>[];
+    log: (name?: string) => void;
+    debug: (name?: string) => () => void;
+}, AsyncResultList<T, E> | {
+    readonly tasks: Map<string, {
+        key: string;
+        result: {
+            state: {
+                status: "idle";
+            } | {
+                status: "loading";
+                promise: {
+                    then: <TResult1 = Result<T, E>, TResult2 = never>(onfulfilled?: ((value: Result<T, E>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+                    catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<Result<T, E> | TResult>;
+                    finally: (onfinally?: (() => void) | null | undefined) => Promise<Result<T, E>>;
+                    readonly [Symbol.toStringTag]: string;
+                };
+            } | {
+                status: "success";
+                value: vue.UnwrapRef<T>;
+            } | {
+                status: "error";
+                error: vue.UnwrapRef<E>;
+            };
+            isSuccess: () => boolean;
+            isError: () => boolean;
+            isIdle: () => boolean;
+            isLoading: () => boolean;
+            unwrapOrNull: () => T | null;
+            unwrapOrThrow: () => T;
+            unwrapErrorOrNull: () => E | null;
+            updateFromValue: (value: T) => AsyncResult<T, E>;
+            updateFromError: (error: E) => AsyncResult<T, E>;
+            updateFromValuePromise: (promise: Promise<T>) => AsyncResult<T, E>;
+            waitForSettled: () => Promise<AsyncResult<T, E>>;
+            toResultPromise: () => Promise<Result<T, E>>;
+            toValueOrThrowPromise: () => Promise<T>;
+            toValueOrNullPromise: () => Promise<T | null>;
+            updateFromResultPromise: (promise: Promise<Result<T, E>>) => AsyncResult<T, E>;
+            listen: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+            listenUntilSettled: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+            mirror: (other: AsyncResult<T, E>) => () => void;
+            mirrorUntilSettled: (other: AsyncResult<T, E>) => () => void;
+            chain: <O, E2 extends ErrorBase = ErrorBase>(fn: unwrapped_core.ChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+            flatChain: <O, E2 extends ErrorBase = ErrorBase>(fn: FlatChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+            runInPlace: (generatorFunc: () => AsyncResultGenerator<T>) => AsyncResult<T, E>;
+            log: (name?: string) => void;
+            debug: (name?: string) => () => void;
+            [Symbol.iterator]: () => Generator<AsyncResult<T, E>, T, any>;
+        };
+        unsub: () => void;
+    }> & Omit<Map<string, unwrapped_core.AsyncResultListItem<T, E>>, keyof Map<any, any>>;
+    readonly length: number;
+    readonly items: {
+        state: {
+            status: "idle";
+        } | {
+            status: "loading";
+            promise: {
+                then: <TResult1 = Result<T, E>, TResult2 = never>(onfulfilled?: ((value: Result<T, E>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+                catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<Result<T, E> | TResult>;
+                finally: (onfinally?: (() => void) | null | undefined) => Promise<Result<T, E>>;
+                readonly [Symbol.toStringTag]: string;
+            };
+        } | {
+            status: "success";
+            value: vue.UnwrapRef<T>;
+        } | {
+            status: "error";
+            error: vue.UnwrapRef<E>;
+        };
+        isSuccess: () => boolean;
+        isError: () => boolean;
+        isIdle: () => boolean;
+        isLoading: () => boolean;
+        unwrapOrNull: () => T | null;
+        unwrapOrThrow: () => T;
+        unwrapErrorOrNull: () => E | null;
+        updateFromValue: (value: T) => AsyncResult<T, E>;
+        updateFromError: (error: E) => AsyncResult<T, E>;
+        updateFromValuePromise: (promise: Promise<T>) => AsyncResult<T, E>;
+        waitForSettled: () => Promise<AsyncResult<T, E>>;
+        toResultPromise: () => Promise<Result<T, E>>;
+        toValueOrThrowPromise: () => Promise<T>;
+        toValueOrNullPromise: () => Promise<T | null>;
+        updateFromResultPromise: (promise: Promise<Result<T, E>>) => AsyncResult<T, E>;
+        listen: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+        listenUntilSettled: (listener: unwrapped_core.AsyncResultListener<T, E>, immediate?: boolean) => () => void;
+        mirror: (other: AsyncResult<T, E>) => () => void;
+        mirrorUntilSettled: (other: AsyncResult<T, E>) => () => void;
+        chain: <O, E2 extends ErrorBase = ErrorBase>(fn: unwrapped_core.ChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+        flatChain: <O, E2 extends ErrorBase = ErrorBase>(fn: FlatChainStep<T, O, E | E2>) => AsyncResult<O, E | E2>;
+        runInPlace: (generatorFunc: () => AsyncResultGenerator<T>) => AsyncResult<T, E>;
+        log: (name?: string) => void;
+        debug: (name?: string) => () => void;
+        [Symbol.iterator]: () => Generator<AsyncResult<T, E>, T, any>;
+    }[];
+    state: unwrapped_core.AsyncResultListState;
+    listen: (listener: (taskQueue: AsyncResultList<T, E>) => void) => () => void;
+    add: (key: string, task: AsyncResult<T, E>, removeOnSettle?: boolean) => AsyncResult<T, E>;
+    clear: () => void;
+    anyLoading: () => boolean;
+    getAllFiltered: (predicate: (task: AsyncResult<T, E>) => boolean) => AsyncResult<T, E>[];
+    getAllFilteredAndMap: <U>(filterPredicate: (task: AsyncResult<T, E>) => boolean, mapFunc: (task: AsyncResult<T, E>) => U) => U[];
+    getAllSuccess: () => AsyncResult<T, E>[];
+    getAllSuccessValues: () => T[];
+    getAllErrors: () => AsyncResult<T, E>[];
+    getAllErrorValues: () => E[];
+    getAllLoading: () => AsyncResult<T, E>[];
+    getAllLoadingPromises: () => Promise<Result<T, E>>[];
+    log: (name?: string) => void;
+    debug: (name?: string) => () => void;
+}>;
+
 interface CustomSlots<E extends ErrorBase = ErrorBase> {
     loading?: () => VNode;
     error?: (props: {
         error: E;
     }) => VNode;
+    idle?: () => VNode;
 }
 /**
- * Builds a custom AsyncResultLoader component with predefined slots for loading and error states.
+ * Factory function to create a component that displays different content based on an AsyncResult's state. Provides slots for loading, error, idle, and success states and passes the relevant data to each slot, and are typed appropriately.
+ * @param slots predefined slots for loading, error, and idle states. Useful for not having to repeat the same template for displaying a framework-specific spinner while in loading state, or a custom error message.
+ * @param name Optional internal name for the component
+ * @returns An instantiable component that accepts an AsyncResult prop and a default slot for the success state.
  *
- * Useful for creating reusable components with consistent loading and error handling UI (eg. framework-specific spinners, etc...).
+ * @example
+ * // loaders.ts - Create reusable loader with default loading/error UI
+ * const MyLoader = makeAsyncResultLoader({
+ *   loading: () => h(Spinner),
+ *   error: ({ error }) => h(ErrorDisplay, { error }),
+ *   idle: () => h('div', 'Ready')
+ * });
  *
- * @param slots the custom slots for loading and error states
- * @returns a Vue component that uses the provided slots
+ * // MyPage.vue - Use the loader with custom success content
+ * <MyLoader :result="myAsyncResult">
+ *   <template #default="{ value }">
+ *     <UserProfile :user="value" />
+ *   </template>
+ * </MyLoader>
  */
-declare function buildCustomAsyncResultLoader<T, E extends ErrorBase = ErrorBase>(slots: CustomSlots<E>): vue.DefineComponent<vue.ExtractPropTypes<{
+declare function makeAsyncResultLoader<T, E extends ErrorBase = ErrorBase>(slots: CustomSlots<E>, name?: string): vue.DefineComponent<vue.ExtractPropTypes<{
     result: {
         type: () => AsyncResult<T, E>;
         required: true;
     };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     result: {
         type: () => AsyncResult<T, E>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, SlotsType<CustomSlots<E> & {
+    default: {
+        value: T;
+    };
+}>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AsyncResultLoader, type LazyActionRef, buildCustomAsyncResultLoader, useAction, useAsyncResultRef, useAsyncResultRefFromPromise, useGenerator, useLazyAction, useLazyGenerator, useReactiveChain, useReactiveGenerator };
+export { type LazyActionRef, makeAsyncResultLoader, useAction, useAsyncResultList, useAsyncResultRef, useAsyncResultRefFromPromise, useGenerator, useLazyAction, useLazyGenerator, useReactiveChain, useReactiveGenerator };

package/dist/vue/index.js

@@ -20,9 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/vue/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AsyncResultLoader: () => AsyncResultLoader,
-  buildCustomAsyncResultLoader: () => buildCustomAsyncResultLoader,
+  makeAsyncResultLoader: () => makeAsyncResultLoader,
   useAction: () => useAction,
+  useAsyncResultList: () => useAsyncResultList,
   useAsyncResultRef: () => useAsyncResultRef,
   useAsyncResultRefFromPromise: () => useAsyncResultRefFromPromise,
   useGenerator: () => useGenerator,
@@ -37,6 +37,9 @@ module.exports = __toCommonJS(index_exports);
 var import_vue = require("vue");
 var import_core = require("unwrapped/core");
 function useAsyncResultRef(asyncResult) {
+  if (!asyncResult) {
+    asyncResult = new import_core.AsyncResult();
+  }
   const state = (0, import_vue.ref)(asyncResult);
   const unsub = asyncResult.listen(() => {
     (0, import_vue.triggerRef)(state);
@@ -89,67 +92,56 @@ function useReactiveGenerator(source, generatorFunc, options = { immediate: true
   }, { immediate: options.immediate });
   return resultRef;
 }
+function useAsyncResultList() {
+  const list = new import_core.AsyncResultList();
+  const listRef = (0, import_vue.ref)(list);
+  list.listen(() => {
+    (0, import_vue.triggerRef)(listRef);
+  });
+  return listRef;
+}
 
 // src/vue/components/asyncResultLoader.ts
 var import_vue2 = require("vue");
-var AsyncResultLoader = (0, import_vue2.defineComponent)({
-  name: "AsyncResultLoader",
-  props: {
-    result: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props, { slots }) {
-    let resultRef = useAsyncResultRef(props.result);
-    (0, import_vue2.watch)(
-      () => props.result,
-      (newResult, oldResult) => {
-        if (newResult === oldResult) return;
-        resultRef = useAsyncResultRef(newResult);
-      },
-      { immediate: true }
-    );
-    return () => {
-      const s = resultRef.value.state;
-      switch (s.status) {
-        case "loading":
-          return slots.loading ? slots.loading() : (0, import_vue2.h)("div", { class: "loading" }, "Loading\u2026");
-        case "error":
-          return slots.error ? slots.error({ error: s.error }) : (0, import_vue2.h)("div", { class: "error" }, `Error: ${s.error}`);
-        case "success":
-          return slots.default ? slots.default({ value: s.value }) : null;
-        default:
-          return slots.idle ? slots.idle() : (0, import_vue2.h)("div", { class: "idle" }, "Idle");
-      }
-    };
-  }
-});
-function buildCustomAsyncResultLoader(slots) {
-  const comp = (0, import_vue2.defineComponent)({
-    name: "CustomAsyncResultLoader",
+var import_core2 = require("unwrapped/core");
+function makeAsyncResultLoader(slots, name = "AsyncResultLoader") {
+  return (0, import_vue2.defineComponent)({
+    name,
     props: {
       result: {
         type: Object,
         required: true
       }
     },
+    slots: Object,
     setup(props, context) {
+      let resultRef = useAsyncResultRef(props.result);
+      (0, import_vue2.watch)(
+        () => props.result,
+        (newResult, oldResult) => {
+          if (newResult === oldResult) return;
+          resultRef = useAsyncResultRef(newResult);
+        },
+        { immediate: true }
+      );
       return () => {
-        const renderLoading = context.slots.loading ?? slots.loading ?? (() => void 0);
-        const renderError = context.slots.error ?? slots.error ?? (() => void 0);
-        return (0, import_vue2.h)(
-          AsyncResultLoader,
-          { result: props.result },
-          {
-            default: context.slots.default ? (propsDefault) => context.slots.default(propsDefault) : void 0,
-            loading: () => renderLoading(),
-            error: ((propsError) => renderError(propsError))
-          }
-        );
+        const s = resultRef.value.state;
+        const renderDefault = context.slots.default ?? (() => (0, import_vue2.h)("div", { class: "success" }, "Success"));
+        const renderError = context.slots.error ?? slots.error ?? (() => (0, import_vue2.h)("div", { class: "error" }, "Error"));
+        const renderLoading = context.slots.loading ?? slots.loading ?? (() => (0, import_vue2.h)("div", { class: "loading" }, "Loading\u2026"));
+        const renderIdle = context.slots.idle ?? slots.idle ?? (() => (0, import_vue2.h)("div", { class: "idle" }, "Idle"));
+        switch (s.status) {
+          case "loading":
+            return renderLoading();
+          case "error":
+            return renderError({ error: s.error });
+          case "success":
+            return renderDefault({ value: s.value });
+          default:
+            return renderIdle();
+        }
       };
     }
   });
-  return comp;
 }
 //# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/vue/index.ts","../../src/vue/composables.ts","../../src/vue/components/asyncResultLoader.ts"],"sourcesContent":["export * from \"./composables\"\nexport * from \"./components/asyncResultLoader\"","import { onUnmounted, ref, triggerRef, watch, type Ref, type WatchSource } from \"vue\";\nimport { AsyncResult, ErrorBase, type Action, type AsyncResultGenerator, type FlatChainStep, type Result } from \"unwrapped/core\";\n\n\n// === Vue specific types ===\n\ninterface ReactiveProcessOptions {\n    immediate: boolean;\n}\n\n\n\n// === Vue Composables for AsyncResult ===\n\n/**\n * Makes a ref to the given AsyncResult. Whenever the state of the AsyncResult changes,\n * the ref gets retriggered, making those changes visible to Vue's reactivity system.\n * \n * @param asyncResult the result to make reactive\n * @returns the ref to the result\n */\nexport function useAsyncResultRef<T, E extends ErrorBase = ErrorBase>(asyncResult: AsyncResult<T, E>) {\n    const state = ref<AsyncResult<T, E>>(asyncResult) as Ref<AsyncResult<T, E>>;\n\n    const unsub = asyncResult.listen(() => {\n        triggerRef(state);\n    });\n\n    onUnmounted(() => {\n        unsub();\n    });\n\n    return state;\n}\n\n/**\n * Creates an AsyncResult ref from a promise returning a Result.\n * @param promise the promise returning a Result\n * @returns the ref to the AsyncResult\n */\nexport function useAsyncResultRefFromPromise<T, E extends ErrorBase = ErrorBase>(promise: Promise<Result<T, E>>) {\n    return useAsyncResultRef(AsyncResult.fromResultPromise(promise));\n}\n\n\n\n// === Vue Composables for Chains ===\n\n/**\n * Watches a source, gives it as inputs to the function provided, and updates the result contained in the ref accordingly.\n * \n * @param source the inputs to react to\n * @param pipe the function to run when the inputs change\n * @param options optional settings\n * @returns ref to the result\n */\nexport function useReactiveChain<Inputs, T, E extends ErrorBase = ErrorBase>(source: WatchSource<Inputs>, pipe: FlatChainStep<Inputs, T, E>, options: ReactiveProcessOptions = { immediate: true }): Ref<AsyncResult<T, E>> {\n    const result = new AsyncResult<T, E>();\n    const resultRef = useAsyncResultRef(result);\n\n    let unsub: (() => void) | null = null;\n\n    watch(source, (newInputs) => {\n        unsub?.();\n        unsub = result.mirror(pipe(newInputs));\n    }, { immediate: options.immediate });\n\n    onUnmounted(() => {\n        unsub?.();\n    });\n\n    return resultRef;\n}\n\n\n// === Vue Composables for Actions ===\n\n/**\n * The return type of useLazyAction.\n */\nexport interface LazyActionRef<T, E extends ErrorBase = ErrorBase> {\n    resultRef: Ref<AsyncResult<T, E>>;\n    trigger: () => void;\n}\n\n/**\n * Executes an action immediately and returns a ref to the AsyncResult representing the action's state.\n * \n * Same as useAsyncResultRefFromPromise(action()).\n * \n * @param action the action to execute immediately\n * @returns a ref to the AsyncResult representing the action's state\n */\nexport function useAction<T, E extends ErrorBase = ErrorBase>(action: Action<T, E>): Ref<AsyncResult<T, E>> {\n    return useAsyncResultRefFromPromise(action());\n}\n\n/**\n * Creates a lazy action that can be triggered manually.\n * \n * Same as AsyncResult.makeLazyAction(action), but the AsyncResult is wrapped in a ref for Vue reactivity.\n * \n * @param action the action to execute when triggered\n * @returns an object containing a ref to the AsyncResult and a trigger function\n */\nexport function useLazyAction<T, E extends ErrorBase = ErrorBase>(action: Action<T, E>): LazyActionRef<T, E> {\n    const lazyAction = AsyncResult.makeLazyAction<T, E>(action);\n    const resultRef = useAsyncResultRef(lazyAction.result);\n\n    return { resultRef, trigger: lazyAction.trigger };\n}\n\n\n// === Vue Composables for Generators ===\n\n/**\n * Runs a generator function immediately and returns a ref to the AsyncResult representing the generator's state.\n * @param generatorFunc the generator function to run immediately\n * @returns a ref to the AsyncResult representing the generator's state\n */\nexport function useGenerator<T>(generatorFunc: () => AsyncResultGenerator<T>): Ref<AsyncResult<T, any>> {\n    const resultRef = useAsyncResultRef(AsyncResult.run(generatorFunc));\n    return resultRef;\n}\n\n/**\n * Creates a lazy generator that can be triggered manually.\n * \n * @param generatorFunc the generator function to run when triggered\n * @returns an object containing a ref to the AsyncResult and a trigger function\n */\nexport function useLazyGenerator<T>(generatorFunc: () => AsyncResultGenerator<T>): { resultRef: Ref<AsyncResult<T, any>>, trigger: () => void } {\n    const result = new AsyncResult<T, any>();\n    const resultRef = useAsyncResultRef(result);\n\n    const trigger = () => {\n        result.runInPlace(generatorFunc);\n    }\n\n    return { resultRef, trigger };\n}\n\n/**\n * Watches a source, gives it as inputs to the generator function provided, and updates the result contained in the ref accordingly.\n * \n * @param source the inputs to react to\n * @param generatorFunc the generator function to run when the inputs change\n * @param options optional settings\n * @returns ref to the result\n */\nexport function useReactiveGenerator<Inputs, T, E extends ErrorBase = ErrorBase>(source: WatchSource<Inputs>, generatorFunc: (args: Inputs) => AsyncResultGenerator<T>, options: ReactiveProcessOptions = { immediate: true }): Ref<AsyncResult<T, E>> {\n    const resultRef = useAsyncResultRef(new AsyncResult<T, E>());\n\n    watch(source, (newInputs) => {\n        resultRef.value.runInPlace(() => generatorFunc(newInputs));\n    }, { immediate: options.immediate });\n\n    return resultRef;\n}","import { defineComponent, watch, h, type VNode } from \"vue\"\nimport type { AsyncResult, ErrorBase } from \"unwrapped/core\"\nimport { useAsyncResultRef } from \"../composables\"\n\n/**\n * A Vue component that displays different content based on the state of an AsyncResult.\n * It supports slots for 'loading', 'error', 'success' (default), and 'idle' states.\n * \n * @example\n * <AsyncResultLoader :result=\"myAsyncResult\">\n *   <template #loading>\n *     <div>Loading data...</div>\n *   </template>\n *   <template #error=\"{ error }\">\n *     <div>Error occurred: {{ error.message }}</div>\n *   </template>\n *   <template #default=\"{ value }\">\n *     <div>Data loaded: {{ value }}</div>\n *   </template>\n *   <template #idle>\n *     <div>Waiting to start...</div>\n *   </template>\n * </AsyncResultLoader>\n */\nexport const AsyncResultLoader = defineComponent({\n    name: \"AsyncResultLoader\",\n\n    props: {\n        result: {\n            type: Object as () => AsyncResult<unknown>,\n            required: true\n        }\n    },\n\n    setup(props, { slots }) {\n        let resultRef = useAsyncResultRef(props.result);\n\n        // Watch for prop changes & update listener\n        watch(\n            () => props.result,\n            (newResult, oldResult) => {\n                if (newResult === oldResult) return;\n                resultRef = useAsyncResultRef(newResult);\n            },\n            { immediate: true }\n        )\n\n        return () => {\n            const s = resultRef.value.state;\n\n            // Choose what to render based on status\n            switch (s.status) {\n                case \"loading\":\n                    return slots.loading\n                        ? slots.loading()\n                        : h(\"div\", { class: \"loading\" }, \"Loading…\");\n\n                case \"error\":\n                    return slots.error\n                        ? slots.error({ error: s.error })\n                        : h(\"div\", { class: \"error\" }, `Error: ${s.error}`);\n\n                case \"success\":\n                    return slots.default\n                        ? slots.default({ value: s.value })\n                        : null;\n\n                default:\n                    // \"idle\"\n                    return slots.idle\n                        ? slots.idle()\n                        : h(\"div\", { class: \"idle\" }, \"Idle\");\n            }\n        }\n    }\n})\n\n\n\ninterface CustomSlots<E extends ErrorBase = ErrorBase> {\n    loading?: () => VNode;\n    error?: (props: { error: E }) => VNode;\n}\n\n/**\n * Builds a custom AsyncResultLoader component with predefined slots for loading and error states.\n * \n * Useful for creating reusable components with consistent loading and error handling UI (eg. framework-specific spinners, etc...).\n * \n * @param slots the custom slots for loading and error states\n * @returns a Vue component that uses the provided slots\n */\nexport function buildCustomAsyncResultLoader<T, E extends ErrorBase = ErrorBase>(slots: CustomSlots<E>) {\n    const comp = defineComponent({\n        name: \"CustomAsyncResultLoader\",\n        props: {\n            result: {\n                type: Object as () => AsyncResult<T, E>,\n                required: true\n            }\n        },\n        setup(props, context) {\n            return () => {\n                const renderLoading = context.slots.loading ?? slots.loading ?? (() => undefined);\n                const renderError = context.slots.error ?? slots.error ?? (() => undefined);\n                return h(\n                    AsyncResultLoader,\n                    { result: props.result },\n                    {\n                        default: context.slots.default ? (propsDefault: { value: T }) => context.slots.default!(propsDefault) : undefined,\n\n                        loading: () => renderLoading(),\n                        error: ((propsError: { error: E }) => renderError(propsError))\n                    }\n                )\n            }\n        }\n    });\n\n    return comp;\n}\n"],"mappings":"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","names":["import_vue"]}
+{"version":3,"sources":["../../src/vue/index.ts","../../src/vue/composables.ts","../../src/vue/components/asyncResultLoader.ts"],"sourcesContent":["export * from \"./composables\"\nexport * from \"./components/asyncResultLoader\"","import { onUnmounted, ref, triggerRef, watch, type Ref, type WatchSource } from \"vue\";\nimport { AsyncResult, AsyncResultList, ErrorBase, type Action, type AsyncResultGenerator, type FlatChainStep, type Result } from \"unwrapped/core\";\n\n\n// === Vue specific types ===\n\ninterface ReactiveProcessOptions {\n    immediate: boolean;\n}\n\n\n\n// === Vue Composables for AsyncResult ===\n\n/**\n * Makes a ref to the given AsyncResult. Whenever the state of the AsyncResult changes,\n * the ref gets retriggered, making those changes visible to Vue's reactivity system.\n * \n * @param asyncResult the result to make reactive\n * @returns the ref to the result\n */\nexport function useAsyncResultRef<T, E extends ErrorBase = ErrorBase>(asyncResult?: AsyncResult<T, E>) {\n    if (!asyncResult) {\n        asyncResult = new AsyncResult<T, E>();\n    }\n    const state = ref<AsyncResult<T, E>>(asyncResult) as Ref<AsyncResult<T, E>>;\n\n    const unsub = asyncResult.listen(() => {\n        triggerRef(state);\n    });\n\n    onUnmounted(() => {\n        unsub();\n    });\n\n    return state;\n}\n\n/**\n * Creates an AsyncResult ref from a promise returning a Result.\n * @param promise the promise returning a Result\n * @returns the ref to the AsyncResult\n */\nexport function useAsyncResultRefFromPromise<T, E extends ErrorBase = ErrorBase>(promise: Promise<Result<T, E>>) {\n    return useAsyncResultRef(AsyncResult.fromResultPromise(promise));\n}\n\n\n\n// === Vue Composables for Chains ===\n\n/**\n * Watches a source, gives it as inputs to the function provided, and updates the result contained in the ref accordingly.\n * \n * @param source the inputs to react to\n * @param pipe the function to run when the inputs change\n * @param options optional settings\n * @returns ref to the result\n */\nexport function useReactiveChain<Inputs, T, E extends ErrorBase = ErrorBase>(source: WatchSource<Inputs>, pipe: FlatChainStep<Inputs, T, E>, options: ReactiveProcessOptions = { immediate: true }): Ref<AsyncResult<T, E>> {\n    const result = new AsyncResult<T, E>();\n    const resultRef = useAsyncResultRef(result);\n\n    let unsub: (() => void) | null = null;\n\n    watch(source, (newInputs) => {\n        unsub?.();\n        unsub = result.mirror(pipe(newInputs));\n    }, { immediate: options.immediate });\n\n    onUnmounted(() => {\n        unsub?.();\n    });\n\n    return resultRef;\n}\n\n\n// === Vue Composables for Actions ===\n\n/**\n * The return type of useLazyAction.\n */\nexport interface LazyActionRef<T, E extends ErrorBase = ErrorBase> {\n    resultRef: Ref<AsyncResult<T, E>>;\n    trigger: () => void;\n}\n\n/**\n * Executes an action immediately and returns a ref to the AsyncResult representing the action's state.\n * \n * Same as useAsyncResultRefFromPromise(action()).\n * \n * @param action the action to execute immediately\n * @returns a ref to the AsyncResult representing the action's state\n */\nexport function useAction<T, E extends ErrorBase = ErrorBase>(action: Action<T, E>): Ref<AsyncResult<T, E>> {\n    return useAsyncResultRefFromPromise(action());\n}\n\n/**\n * Creates a lazy action that can be triggered manually.\n * \n * Same as AsyncResult.makeLazyAction(action), but the AsyncResult is wrapped in a ref for Vue reactivity.\n * \n * @param action the action to execute when triggered\n * @returns an object containing a ref to the AsyncResult and a trigger function\n */\nexport function useLazyAction<T, E extends ErrorBase = ErrorBase>(action: Action<T, E>): LazyActionRef<T, E> {\n    const lazyAction = AsyncResult.makeLazyAction<T, E>(action);\n    const resultRef = useAsyncResultRef(lazyAction.result);\n\n    return { resultRef, trigger: lazyAction.trigger };\n}\n\n\n// === Vue Composables for Generators ===\n\n/**\n * Runs a generator function immediately and returns a ref to the AsyncResult representing the generator's state.\n * @param generatorFunc the generator function to run immediately\n * @returns a ref to the AsyncResult representing the generator's state\n */\nexport function useGenerator<T>(generatorFunc: () => AsyncResultGenerator<T>): Ref<AsyncResult<T, any>> {\n    const resultRef = useAsyncResultRef(AsyncResult.run(generatorFunc));\n    return resultRef;\n}\n\n/**\n * Creates a lazy generator that can be triggered manually.\n * \n * @param generatorFunc the generator function to run when triggered\n * @returns an object containing a ref to the AsyncResult and a trigger function\n */\nexport function useLazyGenerator<T>(generatorFunc: () => AsyncResultGenerator<T>): { resultRef: Ref<AsyncResult<T, any>>, trigger: () => void } {\n    const result = new AsyncResult<T, any>();\n    const resultRef = useAsyncResultRef(result);\n\n    const trigger = () => {\n        result.runInPlace(generatorFunc);\n    }\n\n    return { resultRef, trigger };\n}\n\n/**\n * Watches a source, gives it as inputs to the generator function provided, and updates the result contained in the ref accordingly.\n * \n * @param source the inputs to react to\n * @param generatorFunc the generator function to run when the inputs change\n * @param options optional settings\n * @returns ref to the result\n */\nexport function useReactiveGenerator<Inputs, T, E extends ErrorBase = ErrorBase>(source: WatchSource<Inputs>, generatorFunc: (args: Inputs) => AsyncResultGenerator<T>, options: ReactiveProcessOptions = { immediate: true }): Ref<AsyncResult<T, E>> {\n    const resultRef = useAsyncResultRef(new AsyncResult<T, E>());\n\n    watch(source, (newInputs) => {\n        resultRef.value.runInPlace(() => generatorFunc(newInputs));\n    }, { immediate: options.immediate });\n\n    return resultRef;\n}\n\n\n// === Vue Composables for AsyncResultList ===\n\n/**\n * Creates a reactive AsyncResultList wrapped in a Vue ref.\n * The AsyncResultList notifies Vue's reactivity system whenever its state changes.\n * \n * @template T - The type of the values in the AsyncResultList.\n * @template E - The type of the error, extending ErrorBase (default is ErrorBase).\n * @returns a ref to the AsyncResultList\n */\nexport function useAsyncResultList<T = any, E extends ErrorBase = ErrorBase>() {\n    const list = new AsyncResultList<T, E>();\n    const listRef = ref(list);\n\n    list.listen(() => {\n        triggerRef(listRef);\n    });\n\n    return listRef;\n}","import { defineComponent, watch, h, type VNode, type SlotsType } from \"vue\"\nimport { ErrorBase, type AsyncResult } from \"unwrapped/core\"\nimport { useAsyncResultRef } from \"../composables\"\n\ninterface CustomSlots<E extends ErrorBase = ErrorBase> {\n    loading?: () => VNode;\n    error?: (props: { error: E }) => VNode;\n    idle?: () => VNode;\n}\n\n/**\n * Factory function to create a component that displays different content based on an AsyncResult's state. Provides slots for loading, error, idle, and success states and passes the relevant data to each slot, and are typed appropriately.\n * @param slots predefined slots for loading, error, and idle states. Useful for not having to repeat the same template for displaying a framework-specific spinner while in loading state, or a custom error message.\n * @param name Optional internal name for the component\n * @returns An instantiable component that accepts an AsyncResult prop and a default slot for the success state.\n * \n * @example\n * // loaders.ts - Create reusable loader with default loading/error UI\n * const MyLoader = makeAsyncResultLoader({\n *   loading: () => h(Spinner),\n *   error: ({ error }) => h(ErrorDisplay, { error }),\n *   idle: () => h('div', 'Ready')\n * });\n * \n * // MyPage.vue - Use the loader with custom success content\n * <MyLoader :result=\"myAsyncResult\">\n *   <template #default=\"{ value }\">\n *     <UserProfile :user=\"value\" />\n *   </template>\n * </MyLoader>\n */\nexport function makeAsyncResultLoader<T, E extends ErrorBase = ErrorBase>(slots: CustomSlots<E>, name = \"AsyncResultLoader\") {\n    return defineComponent({\n        name,\n        props: {\n            result: {\n                type: Object as () => AsyncResult<T, E>,\n                required: true\n            }\n        },\n        slots: Object as SlotsType<CustomSlots<E> & { default: { value: T } }>,\n        setup(props, context) {\n            let resultRef = useAsyncResultRef(props.result);\n\n            // Watch for prop changes & update listener\n            watch(\n                () => props.result,\n                (newResult, oldResult) => {\n                    if (newResult === oldResult) return;\n                    resultRef = useAsyncResultRef(newResult);\n                },\n                { immediate: true }\n            )\n\n            return () => {\n                const s = resultRef.value.state;\n\n                const renderDefault = context.slots.default ?? (() => h(\"div\", { class: \"success\" }, \"Success\"));\n                const renderError = context.slots.error ?? slots.error ?? (() => h(\"div\", { class: \"error\" }, \"Error\"));\n                const renderLoading = context.slots.loading ?? slots.loading ?? (() => h(\"div\", { class: \"loading\" }, \"Loading…\"));\n                const renderIdle = context.slots.idle ?? slots.idle ?? (() => h(\"div\", { class: \"idle\" }, \"Idle\"));\n\n                // Choose what to render based on status\n                switch (s.status) {\n                    case \"loading\":\n                        return renderLoading();\n\n                    case \"error\":\n                        return renderError({ error: s.error });\n\n                    case \"success\":\n                        return renderDefault({ value: s.value });\n\n                    default:\n                        return renderIdle();\n                }\n            }\n        }\n    })\n}"],"mappings":"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","names":["import_vue","import_core"]}