unwrapped 0.0.1 → 0.1.0

package/.github/workflows/publish.yml

@@ -8,6 +8,7 @@ on:
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
+  id-token: write  # Required for OIDC
   contents: write
   pull-requests: write
 
@@ -31,5 +32,5 @@ jobs:
         with:
           publish: npm run release
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.PUBLISH_GITHUB_SECRET }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# unwrapped
+
+## 0.1.0
+
+### Minor Changes
+
+- 78b1202: Configured build for core and vue package, and added the existing first implementation
+
+### Patch Changes
+
+- c2a6144: Fixed linting script

package/package.json

@@ -1,21 +1,45 @@
 {
     "name": "unwrapped",
-    "version": "0.0.1",
+    "version": "0.1.0",
     "publishConfig": {
         "access": "public"
     },
     "license": "MIT",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
+    "main": "./dist/core/index.js",
+    "module": "./dist/core/index.mjs",
+    "types": "./dist/core/index.d.ts",
+    "exports": {
+        "./core": {
+            "types": "./dist/core/index.d.ts",
+            "import": "./dist/core/index.mjs",
+            "require": "./dist/core/index.js"
+        },
+        "./vue": {
+            "types": "./dist/vue/index.d.ts",
+            "import": "./dist/vue/index.mjs",
+            "require": "./dist/vue/index.js"
+        },
+        "./package.json": "./package.json"
+    },
     "scripts": {
-        "build": "tsup index.ts --format cjs,esm --dts",
+        "build": "npm run build:core && npm run build:vue",
+        "build:core": "tsup --config tsup.config.core.ts",
+        "build:vue": "tsup --config tsup.config.vue.ts",
         "release": "npm run build && changeset publish",
         "lint": "tsc"
     },
     "devDependencies": {
         "@changesets/cli": "^2.29.7",
         "tsup": "^8.5.0",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "vue": "^3.5.24"
+    },
+    "peerDependencies": {
+        "vue": "^3.0.0"
+    },
+    "peerDependenciesMeta": {
+        "vue": {
+            "optional": true
+        }
     }
-}
+}

package/src/core/asyncResult.ts

@@ -0,0 +1,312 @@
+import type { ErrorBase } from "./error";
+import { Result, type ResultState } from "./result";
+
+export type AsyncResultState<T, E> =
+  | { status: 'idle' }
+  | { status: 'loading'; promise: Promise<Result<T, E>> }
+  | ResultState<T, E>;
+
+export type ChainFunction<I, O, E> = (input: I) => Result<O, E> | Promise<Result<O, E>>;
+export type FlatChainFunction<I, O, E> = (input: I) => AsyncResult<O, E>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AsyncResultListener<T, E> = (result: AsyncResult<T, E>) => any;
+
+export class AsyncResult<T, E = ErrorBase> {
+  private _state: AsyncResultState<T, E>;
+  private _listeners: Set<AsyncResultListener<T, E>> = new Set();
+
+  constructor(state?: AsyncResultState<T, E>) {
+    this._state = state || { status: 'idle' };
+  }
+
+  get state() {
+    return this._state;
+  }
+
+  private set state(newState: AsyncResultState<T, E>) {
+    this._state = newState;
+    this._listeners.forEach((listener) => listener(this));
+  }
+
+  static ok<T>(value: T): AsyncResult<T, never> {
+    return new AsyncResult<T, never>({ status: 'success', value });
+  }
+
+  static err<E>(error: E): AsyncResult<never, E> {
+    return new AsyncResult<never, E>({ status: 'error', error });
+  }
+
+  isSuccess() {
+    return this._state.status === 'success';
+  }
+
+  isError() {
+    return this._state.status === 'error';
+  }
+
+  isLoading() {
+    return this._state.status === 'loading';
+  }
+
+  listen(listener: AsyncResultListener<T, E>, immediate = true) {
+    this._listeners.add(listener);
+    if (immediate) {
+      listener(this);
+    }
+
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+
+  listenUntilSettled(listener: AsyncResultListener<T, E>, immediate = true) {
+    const unsub = this.listen((result) => {
+      listener(result);
+      if (result.state.status === 'success' || result.state.status === 'error') {
+        unsub();
+      }
+    }, immediate);
+
+    return unsub;
+  }
+
+  setState(newState: AsyncResultState<T, E>) {
+    this.state = newState;
+  }
+
+  copyOnceSettled(other: AsyncResult<T, E>) {
+    this.updateFromResultPromise(other.toResultPromise());
+  }
+
+  update(newState: AsyncResultState<T, E>) {
+    this.state = newState;
+  }
+
+  updateToValue(value: T) {
+    this.state = { status: 'success', value };
+  }
+
+  updateToError(error: E) {
+    this.state = { status: 'error', error };
+  }
+
+  updateFromResultPromise(promise: Promise<Result<T, E>>) {
+    this.state = { status: 'loading', promise };
+    promise
+      .then((res) => {
+        this.state = res.state;
+      })
+      .catch((error) => {
+        this.state = { status: 'error', error };
+      });
+  }
+
+  static fromResultPromise<T, E>(promise: Promise<Result<T, E>>): AsyncResult<T, E> {
+    const result = new AsyncResult<T, E>();
+    result.updateFromResultPromise(promise);
+    return result;
+  }
+
+  updateFromValuePromise(promise: Promise<T>) {
+    const resultStatePromise = async (): Promise<Result<T, E>> => {
+      try {
+        const value = await promise;
+        return Result.ok(value);
+      } catch (error) {
+        return Result.err(error as E);
+      }
+    };
+    this.updateFromResultPromise(resultStatePromise());
+  }
+
+  static fromValuePromise<T, E>(promise: Promise<T>): AsyncResult<T, E> {
+    const result = new AsyncResult<T, E>();
+    result.updateFromValuePromise(promise);
+    return result;
+  }
+
+  async waitForSettled(): Promise<AsyncResult<T, E>> {
+    if (this._state.status === 'loading') {
+      try {
+        const value = await this._state.promise;
+        this._state = value.state;
+      } catch (error) {
+        this._state = { status: 'error', error: error as E };
+      }
+    }
+    return this;
+  }
+
+  async waitForSettledResult(): Promise<Result<T, E>> {
+    const settled = await this.waitForSettled();
+    if (settled.state.status === 'idle' || settled.state.status === 'loading') {
+      throw new Error('Cannot convert idle or loading AsyncResult to ResultState');
+    }
+    if (settled.state.status === 'error') {
+      return Result.err(settled.state.error);
+    }
+    return Result.ok(settled.state.value);
+  }
+
+  async toResultPromise(): Promise<Result<T, E>> {
+    if (this._state.status === 'idle') {
+      throw new Error('Cannot convert idle AsyncResult to ResultState');
+    }
+    if (this._state.status === 'loading') {
+      try {
+        const value = await this._state.promise;
+        this._state = value.state;
+      } catch (error) {
+        this._state = { status: 'error', error: error as E };
+      }
+    }
+    return new Result(this._state);
+  }
+
+  async toValuePromiseThrow(): Promise<T> {
+    const settled = await this.waitForSettled();
+    return settled.unwrapOrThrow();
+  }
+
+  async toValueOrNullPromise(): Promise<T | null> {
+    const settled = await this.waitForSettled();
+    return settled.unwrapOrNull();
+  }
+
+  unwrapOrNull(): T | null {
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    return null;
+  }
+
+  async unwrapOrNullOnceSettled(): Promise<T | null> {
+    return (await this.waitForSettled()).unwrapOrNull();
+  }
+
+  unwrapOrThrow(): T {
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    throw new Error('Tried to unwrap an AsyncResult that is not successful');
+  }
+
+  async unwrapOrThrowOnceSettled(): Promise<T> {
+    return (await this.waitForSettled()).unwrapOrThrow();
+  }
+
+  chain<O, E2>(fn: ChainFunction<T, O, E | E2>): AsyncResult<O, E | E2> {
+    const newResultBuilder = async (): Promise<Result<O, E | E2>> => {
+      const settled = await this.waitForSettled();
+      if (settled.state.status === 'loading' || settled.state.status === 'idle') {
+        throw new Error('Unexpected state after waitForSettled'); // TODO handle this case properly
+      }
+      if (settled.state.status === 'error') {
+        return Result.err(settled.state.error);
+      }
+
+      return fn(settled.state.value);
+    };
+
+    return AsyncResult.fromResultPromise<O, E | E2>(newResultBuilder());
+  }
+
+  flatChain<O, E2>(fn: FlatChainFunction<T, O, E | E2>): AsyncResult<O, E | E2> {
+    const newResultBuilder = async (): Promise<Result<O, E | E2>> => {
+      const settled = await this.waitForSettledResult();
+      if (settled.state.status === 'error') {
+        return Result.err(settled.state.error);
+      }
+
+      const nextAsyncResult = fn(settled.state.value);
+      const nextSettled = await nextAsyncResult.waitForSettledResult();
+      return nextSettled;
+    }
+
+    return AsyncResult.fromResultPromise<O, E | E2>(newResultBuilder());
+  }
+
+  // pipeParallel PipeFunction[] -> AsyncResult<T, E>[]
+  // pipeParallelAndCollapse PipeFunction[] -> AsyncResult<T[], E>
+
+  mirror(other: AsyncResult<T, E>) {
+    return other.listen((newState) => {
+      this.setState(newState.state);
+    }, true);
+  }
+
+  mirrorUntilSettled(other: AsyncResult<T, E>) {
+    return other.listenUntilSettled((newState) => {
+      this.setState(newState.state);
+    }, true);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static ensureAvailable<R extends readonly AsyncResult<any, any>[]>(results: R): AsyncResult<{ [K in keyof R]: R[K] extends AsyncResult<infer T, any> ? T : never }, R[number] extends AsyncResult<any, infer E> ? E : never> {
+    if (results.length === 0) {
+      // empty case — TS infers void tuple, so handle gracefully
+      return AsyncResult.ok(undefined as never);
+    }
+
+    const promise = Promise.all(results.map((r) => r.waitForSettled())).then(
+      (settledResults) => {
+        for (const res of settledResults) {
+          if (res.state.status === 'error') {
+            return Result.err(res.state.error);
+          }
+        }
+
+        const values = settledResults.map((r) => r.unwrapOrNull()!) as {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [K in keyof R]: R[K] extends AsyncResult<infer T, any>
+          ? T
+          : never;
+        };
+
+        return Result.ok(values);
+      }
+    );
+
+    return AsyncResult.fromResultPromise(promise);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  *[Symbol.iterator](): Generator<AsyncResult<T, E>, T, any> {
+    yield this;
+
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    return undefined as T;
+  }
+
+  private static _runGeneratorProcessor<T, E>(iterator: Generator<AsyncResult<any, any>, T, any>): () => Promise<Result<T, E>> {
+    return async (): Promise<Result<T, E>> => {
+      let result = iterator.next();
+
+      while (!result.done) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const yielded = result.value as AsyncResult<any, E>;
+        const settled = await yielded.waitForSettledResult();
+        if (settled.state.status === 'error') {
+          return Result.err(settled.state.error);
+        }
+        result = iterator.next(settled.state.value);
+      }
+
+      return Result.ok(result.value);
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static run<T, E = ErrorBase>(generatorFunc: () => Generator<AsyncResult<any, any>, T, any>): AsyncResult<T, E> {
+    const iterator = generatorFunc();
+    return AsyncResult.fromResultPromise<T, E>(AsyncResult._runGeneratorProcessor<T, E>(iterator)());
+  }
+
+  runInPlace(generatorFunc: () => Generator<AsyncResult<any, any>, T, any>) {
+    const iterator = generatorFunc();
+    this.updateFromResultPromise(AsyncResult._runGeneratorProcessor<T, E>(iterator)());
+  }
+}

package/src/core/cache.ts

@@ -0,0 +1,81 @@
+import { AsyncResult, type AsyncResultState, type ChainFunction } from "./asyncResult";
+import type { ErrorBase } from "./error";
+
+type KeyedAsyncCacheRefetchOptions = {
+    policy: 'refetch' | 'if-error' | 'no-refetch';
+};
+
+type CacheItem<P, V, E> = {
+    result: AsyncResult<V, E>;
+    fetcherParams: P;
+};
+
+const _defaultRefetchOptions: KeyedAsyncCacheRefetchOptions = { policy: 'no-refetch' };
+
+function defaultParamsToKey<P>(params: P): string {
+  if (typeof params === 'object') {
+    return JSON.stringify(params);
+  }
+  return String(params);
+}
+
+export class KeyedAsyncCache<P, V, E = ErrorBase> {
+  private _cache: Map<string, CacheItem<P, V, E>> = new Map();
+  private _fetcher: ChainFunction<P, V, E>;
+  private _paramsToKey: (params: P) => string;
+
+  constructor(fetcher: ChainFunction<P, V, E>, paramsToKey: (params: P) => string = defaultParamsToKey) {
+    this._fetcher = fetcher;
+    this._paramsToKey = paramsToKey;
+  }
+
+  private makeCacheItem(result: AsyncResult<V, E>, fetcherParams: P): CacheItem<P, V, E> {
+    return { result, fetcherParams };
+  }
+
+  private shouldRefetch(existingResult: CacheItem<P, V, E>, refetch: KeyedAsyncCacheRefetchOptions): boolean {
+    if (refetch.policy === 'refetch') {
+      return true;
+    }
+    if (refetch.policy === 'if-error') {
+      return existingResult.result.state.status === 'error';
+    }
+    return false;
+  }
+
+  get(params: P, refetch: KeyedAsyncCacheRefetchOptions = _defaultRefetchOptions): AsyncResult<V, E> {
+    const key = this._paramsToKey(params);
+    if (this._cache.has(key)) {
+      const cacheItem = this._cache.get(key)!;
+      if (!this.shouldRefetch(cacheItem, refetch)) {
+        return cacheItem.result;
+      } else {
+        cacheItem.result.updateFromResultPromise(Promise.resolve(this._fetcher(cacheItem.fetcherParams)));
+        return cacheItem.result;
+      }
+    }
+
+    const asyncResult = AsyncResult.fromResultPromise(Promise.resolve(this._fetcher(params)));
+    this._cache.set(key, this.makeCacheItem(asyncResult, params));
+    return asyncResult;
+  }
+
+  async getSettledState(params: P, refetch: KeyedAsyncCacheRefetchOptions = _defaultRefetchOptions): Promise<AsyncResultState<V, E>> {
+    const asyncResult = this.get(params, refetch);
+    await asyncResult.waitForSettled();
+    return asyncResult.state;
+  }
+
+  anyLoading(): boolean {
+    for (const cacheItem of this._cache.values()) {
+      if (cacheItem.result.isLoading()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  clear() {
+    this._cache.clear();
+  }
+}

package/src/core/error.ts

@@ -0,0 +1,23 @@
+export class ErrorBase {
+  code: string;
+  message?: string | undefined;
+  thrownError?: any;
+
+  constructor(code: string, message?: string, thrownError?: any, log: boolean = true) {
+    this.code = code;
+    this.message = message;
+    this.thrownError = thrownError;
+
+    if (log) {
+      this.logError();
+    }
+  }
+
+  toString(): string {
+    return `Error ${this.code}: ${this.message ?? ''}`;
+  }
+
+  logError(): void {
+    console.error(this.toString(), this.thrownError);
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,4 @@
+export * from "./error";
+export * from "./result";
+export * from "./asyncResult";
+export * from "./cache";

package/src/core/result.ts

@@ -0,0 +1,101 @@
+import { ErrorBase } from "./error";
+
+export type ResultState<T, E = ErrorBase> =
+  | { status: 'success'; value: T }
+  | { status: 'error'; error: E };
+
+
+export class Result<T, E = ErrorBase> {
+  private _state: ResultState<T, E>;
+
+  constructor(state: ResultState<T, E>) {
+    this._state = state;
+  }
+
+  get state() {
+    return this._state;
+  }
+
+  static ok<T, E = ErrorBase>(value: T): Result<T, E> {
+    return new Result({ status: 'success', value });
+  }
+
+  static err<E>(error: E): Result<never, E> {
+    return new Result({ status: 'error', error });
+  }
+
+  static errTag(code: string, message?: string): Result<never, ErrorBase> {
+    return Result.err(new ErrorBase(code, message));
+  }
+
+  unwrapOrNull(): T | null {
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    return null;
+  }
+
+  unwrapOrThrow(): T {
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    throw new Error('Tried to unwrap a Result that is not successful');
+  }
+
+  unwrapOr<O>(defaultValue: O): T | O {
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    return defaultValue;
+  }
+
+  isSuccess(): boolean {
+    return this._state.status === 'success';
+  }
+
+  isError(): boolean {
+    return this._state.status === 'error';
+  }
+
+  static tryPromise<T, E>(promise: Promise<T>, errorMapper: (error: unknown) => E): Promise<Result<T, E>> {
+    return promise
+      .then((value) => Result.ok<T, E>(value))
+      .catch((error) => Result.err(errorMapper(error)));
+  }
+
+  static tryFunction<T, E extends ErrorBase = ErrorBase>(fn: () => Promise<T>, errorMapper: (error: unknown) => E): Promise<Result<T, E>> {
+    return Result.tryPromise(fn(), errorMapper);
+  }
+
+  chain<O, E2>(fn: (input: T) => ResultState<O, E | E2>): Result<O, E | E2> {
+    if (this._state.status === 'success') {
+      return new Result<O, E | E2>(fn(this._state.value));
+    }
+    return Result.err<E>(this._state.error);
+  }
+
+  *[Symbol.iterator](): Generator<Result<T, E>, T, any> {
+    yield this;
+
+    if (this._state.status === 'success') {
+      return this._state.value;
+    }
+    return undefined as T;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static run<T, E>(generator: () => Generator<Result<any, E>, T, any>): Result<T, E> {
+    const iterator = generator();
+    let result = iterator.next();
+
+    while (!result.done) {
+      const yielded = result.value;
+      if (yielded._state.status === 'error') {
+        return Result.err(yielded._state.error);
+      }
+      result = iterator.next(yielded._state.value);
+    }
+
+    return Result.ok(result.value);
+  }
+}

package/src/vue/components/asyncResultLoader.ts

@@ -0,0 +1,99 @@
+import { defineComponent, ref, watch, onUnmounted, h, type VNode } from "vue"
+import type { AsyncResult, AsyncResultState } from "unwrapped/core"
+
+export const AsyncResultLoader = defineComponent({
+    name: "AsyncResultLoader",
+
+    props: {
+        result: {
+            type: Object as () => AsyncResult<unknown, unknown>,
+            required: true
+        }
+    },
+
+    setup(props, { slots }) {
+        const state = ref<AsyncResultState<unknown, unknown>>(props.result.state)
+        let unlisten: (() => void) | null = null
+
+        // Unsubscribe on destroy
+        onUnmounted(() => {
+            if (unlisten) unlisten()
+        })
+
+        // Watch for prop changes & update listener
+        watch(
+            () => props.result,
+            (newResult) => {
+                if (unlisten) unlisten()
+                state.value = newResult.state
+                unlisten = newResult.listen((res) => {
+                    state.value = res.state
+                })
+            },
+            { immediate: true }
+        )
+
+        return () => {
+            const s = state.value
+
+            // Choose what to render based on status
+            switch (s.status) {
+                case "loading":
+                    return slots.loading
+                        ? slots.loading()
+                        : h("div", { class: "loading" }, "Loading…")
+
+                case "error":
+                    return slots.error
+                        ? slots.error({ error: s.error })
+                        : h("div", { class: "error" }, `Error: ${s.error}`)
+
+                case "success":
+                    return slots.default
+                        ? slots.default({ value: s.value })
+                        : null
+
+                default:
+                    // "idle"
+                    return slots.idle
+                        ? slots.idle()
+                        : h("div", { class: "idle" }, "Idle")
+            }
+        }
+    }
+})
+
+interface CustomSlots<E> {
+    loading?: () => VNode;
+    error?: (props: { error: E }) => VNode;
+}
+
+export function buildCustomAsyncResultLoader<T, E>(slots: CustomSlots<E>) {
+    const comp = defineComponent({
+        name: "CustomAsyncResultLoader",
+        props: {
+            result: {
+                type: Object as () => AsyncResult<T, E>,
+                required: true
+            }
+        },
+        setup(props, context) {
+            return () => {
+                const renderLoading = context.slots.loading ?? slots.loading ?? (() => undefined);
+                const renderError = context.slots.error ?? slots.error ?? (() => undefined);
+                return h(
+                    AsyncResultLoader,
+                    { result: props.result },
+                    {
+                        default: context.slots.default ? (propsDefault: { value: T }) => context.slots.default!(propsDefault) : undefined,
+
+                        loading: () => renderLoading(),
+                        error: ((propsError: { error: E }) => renderError(propsError))
+                    }
+                )
+            }
+        }
+    });
+
+    return comp;
+}

package/src/vue/composables.ts

@@ -0,0 +1,106 @@
+import { computed, onUnmounted, ref, toRef, triggerRef, watch, type Ref, type WatchSource } from "vue";
+import { AsyncResult, type FlatChainFunction, type Result } from "unwrapped/core";
+
+export function useAsyncResultRef<T, E>(asyncResult: AsyncResult<T, E>) {
+  const state = ref<AsyncResult<T, E>>(asyncResult) as Ref<AsyncResult<T, E>>;
+
+  const unsub = asyncResult.listen(() => {
+    triggerRef(state);
+  });
+
+  onUnmounted(() => {
+    unsub();
+  });
+
+  return state;
+}
+
+export function useReactiveResult<T, E, Inputs>(source: WatchSource<Inputs>, pipe: FlatChainFunction<Inputs, T, E>, options:{ immediate: boolean } = { immediate: true }): Ref<AsyncResult<T, E>> {
+  const result = new AsyncResult<T, E>();
+  const resultRef = useAsyncResultRef(result);
+
+  let unsub: (() => void) | null = null;
+
+  watch(source, (newInputs) => {
+    unsub?.();
+    unsub = result.mirror(pipe(newInputs));
+  }, { immediate: options.immediate });
+  
+  onUnmounted(() => {
+    unsub?.();
+  });
+
+  return resultRef;
+}
+
+export function useAsyncResultRefFromPromise<T, E>(promise: Promise<Result<T, E>>) {
+  return useAsyncResultRef(AsyncResult.fromResultPromise(promise));
+}
+
+export type Action<T,E> = () => Promise<Result<T, E>>;
+export function useImmediateAction<T, E>(action: Action<T, E>): Ref<AsyncResult<T, E>> {
+  return useAsyncResultRefFromPromise(action());
+}
+export interface LazyActionReturn<T, E> {
+  resultRef: Ref<AsyncResult<T, E>>;
+  trigger: () => void;
+}
+
+export function useLazyAction<T, E>(action: Action<T, E>): LazyActionReturn<T, E> {
+  const result = new AsyncResult<T, E>();
+  const resultRef = useAsyncResultRef(result);
+
+  const trigger = () => {
+    result.updateFromResultPromise(action());
+  }
+
+  return { resultRef, trigger };
+}
+
+export function useReactiveAction<I, O, E>(input: I | Ref<I> | (() => I), pipe: FlatChainFunction<I, O, E>, options:{ immediate: boolean } = { immediate: true }): Ref<AsyncResult<O, E>> {
+  const source = typeof input === 'function' ? computed(input as () => I) : toRef(input)
+
+  const outputRef = ref<AsyncResult<O, E>>(new AsyncResult()) as Ref<AsyncResult<O, E>>;
+  let unsub: (() => void) | null = null;
+
+  watch(source, () => {
+    unsub?.();
+    const newOutput = pipe(source.value);
+    unsub = newOutput.listen((newState) => {
+      outputRef.value.setState(newState.state);
+      triggerRef(outputRef);
+    });
+  }, { immediate: options.immediate });
+
+  onUnmounted(() => {
+    unsub?.();
+  });
+
+  return outputRef;
+}
+
+export function useGenerator<T>(generatorFunc: () => Generator<AsyncResult<any, any>, T, any>): Ref<AsyncResult<T, any>> {
+  const resultRef = useAsyncResultRef(AsyncResult.run(generatorFunc));
+  return resultRef;
+}
+
+export function useLazyGenerator<T>(generatorFunc: () => Generator<AsyncResult<any, any>, T, any>): { resultRef: Ref<AsyncResult<T, any>>, trigger: () => void } {
+  const result = new AsyncResult<T, any>();
+  const resultRef = useAsyncResultRef(result);
+
+  const trigger = () => {
+    result.runInPlace(generatorFunc);
+  }
+
+  return { resultRef, trigger };
+}
+
+export function useReactiveGenerator<T, E, Inputs>(source: WatchSource<Inputs>, generatorFunc: (args: Inputs) => Generator<AsyncResult<any, any>, T, any>, options:{ immediate: boolean } = { immediate: true }): Ref<AsyncResult<T, E>> {
+  const resultRef = useAsyncResultRef(new AsyncResult<T, E>());
+
+  watch(source, (newInputs) => {
+    resultRef.value.runInPlace(() => generatorFunc(newInputs));
+  }, { immediate: options.immediate });
+
+  return resultRef;
+}

package/src/vue/index.ts

@@ -0,0 +1,2 @@
+export * from "./composables"
+export * from "./components/asyncResultLoader"

package/tsconfig.json

@@ -17,5 +17,10 @@
     "noEmit": true,
     /* If your code runs in the DOM: */
     "lib": ["es2022", "dom", "dom.iterable"],
-  }
+    "baseUrl": ".",
+    "paths": {
+      "unwrapped/core": ["./src/core/index.ts"]
+    }
+  },
+  "include": ["src"]
 }

package/tsup.config.core.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig([
+    {
+        entry: ["src/core/index.ts"],
+        format: ["cjs", "esm"],
+        sourcemap: true,
+        dts: true,
+        outDir: "dist/core"
+    },
+])

package/tsup.config.vue.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig([
+    {
+        entry: ["src/vue/index.ts"],
+        format: ["cjs", "esm"],
+        sourcemap: true,
+        dts: true,
+        outDir: "dist/vue",
+        external: ["vue", "unwrapped/core"],
+        platform: "browser"
+    }
+])

package/dist/index.d.mts

@@ -1,3 +0,0 @@
-declare function test(): void;
-
-export { test };

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-declare function test(): void;
-
-export { test };

package/dist/index.js

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// index.ts
-var index_exports = {};
-__export(index_exports, {
-  test: () => test
-});
-module.exports = __toCommonJS(index_exports);
-function test() {
-  console.log("test");
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  test
-});

package/dist/index.mjs

@@ -1,7 +0,0 @@
-// index.ts
-function test() {
-  console.log("test");
-}
-export {
-  test
-};