@juulsgaard/signal-tools 18.0.1 → 18.0.2

package/dist/async.mjs

@@ -0,0 +1,96 @@
+import { assertInInjectionContext, signal, effect, DestroyRef, inject } from '@angular/core';
+
+function debouncedSignal(inputSignal, delay = 500, options) {
+  if (options?.injector) assertInInjectionContext(debouncedSignal);
+  const output = signal(inputSignal());
+  effect((onDestroy) => {
+    const value = inputSignal();
+    const timeout = setTimeout(() => output.set(value), delay);
+    onDestroy(() => clearTimeout(timeout));
+  }, { allowSignalWrites: true, injector: options?.injector });
+  return output;
+}
+function throttledSignal(inputSignal, delay = 500, options) {
+  if (options?.injector) assertInInjectionContext(throttledSignal);
+  const output = signal(inputSignal());
+  let nextValue = inputSignal();
+  let timeout = void 0;
+  effect(() => {
+    const value = inputSignal();
+    nextValue = value;
+    if (timeout) return;
+    if (options?.emitLeading) {
+      output.set(value);
+    }
+    timeout = setTimeout(() => {
+      output.set(nextValue);
+      timeout = void 0;
+    }, delay);
+  }, { allowSignalWrites: true, injector: options?.injector });
+  const onDestroy = options?.injector?.get(DestroyRef) ?? inject(DestroyRef);
+  onDestroy.onDestroy(() => clearTimeout(timeout));
+  return output;
+}
+function debouncedThrottledSignal(inputSignal, throttleDelay = 1e3, debounceDelay = 300, options) {
+  if (options?.injector) assertInInjectionContext(debouncedThrottledSignal);
+  const output = signal(inputSignal());
+  let nextValue = inputSignal();
+  let longTimeout = void 0;
+  function clearThrottle() {
+    if (!longTimeout) return;
+    clearTimeout(longTimeout);
+    longTimeout = void 0;
+  }
+  effect((onDestroy2) => {
+    const value = inputSignal();
+    const shortTimeout = setTimeout(() => {
+      output.set(value);
+      clearThrottle();
+    }, debounceDelay);
+    onDestroy2(() => clearTimeout(shortTimeout));
+    nextValue = value;
+    if (longTimeout) return;
+    longTimeout = setTimeout(() => {
+      output.set(nextValue);
+      longTimeout = void 0;
+    }, throttleDelay);
+  }, { allowSignalWrites: true, injector: options?.injector });
+  const onDestroy = options?.injector?.get(DestroyRef) ?? inject(DestroyRef);
+  onDestroy.onDestroy(() => clearTimeout(longTimeout));
+  return output;
+}
+function searchSignal(inputSignal, throttleDelay = 1e3, debounceDelay = 300, options) {
+  if (options?.injector) assertInInjectionContext(searchSignal);
+  const query = signal(inputSignal());
+  let nextValue = inputSignal();
+  let longTimeout = void 0;
+  function clearThrottle() {
+    if (!longTimeout) return;
+    clearTimeout(longTimeout);
+    longTimeout = void 0;
+  }
+  effect((onDestroy2) => {
+    const value = inputSignal();
+    if (value === void 0 || value === "") {
+      query.set(value);
+      clearThrottle();
+      return;
+    }
+    const shortTimeout = setTimeout(() => {
+      query.set(value);
+      clearThrottle();
+    }, debounceDelay);
+    onDestroy2(() => clearTimeout(shortTimeout));
+    nextValue = value;
+    if (longTimeout) return;
+    longTimeout = setTimeout(() => {
+      query.set(nextValue);
+      longTimeout = void 0;
+    }, throttleDelay);
+  }, { allowSignalWrites: true, injector: options?.injector });
+  const onDestroy = options?.injector?.get(DestroyRef) ?? inject(DestroyRef);
+  onDestroy.onDestroy(() => clearTimeout(longTimeout));
+  return query;
+}
+
+export { debouncedSignal, debouncedThrottledSignal, searchSignal, throttledSignal };

package/dist/data-structures/signal-map.mjs

@@ -0,0 +1,134 @@
+import { signal, computed, untracked } from '@angular/core';
+
+class SignalMap {
+  constructor(values) {
+    this._map = signal(new Map(values));
+    this.value = this._map.asReadonly();
+    this.size = computed(() => this.value().size);
+    this.empty = computed(() => this.size() <= 0);
+  }
+  [Symbol.iterator]() {
+    return this.value()[Symbol.iterator]();
+  }
+  getCopy() {
+    return new Map(untracked(this.value));
+  }
+  //<editor-fold desc="Actions">
+  /**
+   * Remove all keys not in the whitelist
+   * @param whitelist - The keys to keep
+   */
+  filter(whitelist) {
+    const length = whitelist && "size" in whitelist ? whitelist.size : whitelist?.length;
+    if (!length) {
+      return this.clear();
+    }
+    const whitelistSet = whitelist instanceof Set ? whitelist : new Set(whitelist);
+    const map = this.getCopy();
+    for (let [key] of untracked(this.value)) {
+      if (whitelistSet.has(key)) continue;
+      map.delete(key);
+    }
+    if (untracked(this.size) !== map.size) {
+      this._map.set(map);
+      return true;
+    }
+    return false;
+  }
+  /** Clear the collection */
+  clear() {
+    if (!untracked(this.size)) return false;
+    this._map.set(/* @__PURE__ */ new Map());
+    return true;
+  }
+  /**
+   * Add a value to the collection if the key is not in use
+   * @param key - The key to use
+   * @param value - The value to add
+   * @return added - Returns true if the value was added
+   */
+  add(key, value) {
+    if (untracked(this.value).has(key)) return false;
+    const map = this.getCopy();
+    map.set(key, value);
+    this._map.set(map);
+    return true;
+  }
+  /**
+   * Add a value to the collection
+   * @param key - The key to use
+   * @param value - The value to add
+   * @return added - Returns true if the value was added or changed
+   */
+  set(key, value) {
+    const state = untracked(this.value);
+    if (state.has(key) && state.get(key) === value) return false;
+    const map = this.getCopy();
+    map.set(key, value);
+    this._map.set(map);
+    return true;
+  }
+  /**
+   * Remove a key from the collection
+   * @param key - The key to remove
+   * @return removed - True if an item was removed
+   */
+  delete(key) {
+    if (!untracked(this.value).has(key)) return false;
+    const map = this.getCopy();
+    map.delete(key);
+    this._map.set(map);
+    return true;
+  }
+  /**
+   * Remove keys from the collection
+   * @param values - The keys to remove
+   * @return removed - True if items were removed
+   */
+  deleteRange(values) {
+    const map = this.getCopy();
+    const size = map.size;
+    values.forEach((v) => map.delete(v));
+    if (map.size === size) return false;
+    this._map.set(map);
+    return true;
+  }
+  /**
+   * Toggle a value in the map
+   * @param key - The key to toggle
+   * @param value - The value to insert if applicable
+   * @param state - A forced state (`true` = always add, `false` = always delete)
+   * @returns The applied change (`true` = item added, `false` = item removed, `undefined` = nothing changed)
+   */
+  toggle(key, value, state) {
+    if (untracked(this.value).has(key)) {
+      if (state === true) return void 0;
+      const map2 = this.getCopy();
+      map2.delete(key);
+      this._map.set(map2);
+      return false;
+    }
+    if (state === false) return void 0;
+    const map = this.getCopy();
+    map.set(key, value);
+    this._map.set(map);
+    return true;
+  }
+  /** Manually modify the inner collection */
+  modify(modify) {
+    const map = this.getCopy();
+    modify(map);
+    this._map.set(map);
+  }
+  /** @inheritDoc */
+  has(key) {
+    return computed(() => this.value().has(key));
+  }
+  /** @inheritDoc */
+  get(key) {
+    return computed(() => this.value().get(key));
+  }
+  //</editor-fold>
+}
+
+export { SignalMap };

package/dist/data-structures/signal-queue.mjs

@@ -0,0 +1,115 @@
+import { signal, computed, untracked } from '@angular/core';
+import { pairwiseSignal } from '../operators.mjs';
+
+class SignalQueue {
+  constructor(options) {
+    this._items = signal([]);
+    /** A signal emitting the items of the queue */
+    this.items = this._items.asReadonly();
+    /** A signal emitting the number of items in the queue */
+    this.length = computed(() => this.items().length);
+    /** A signal emitting true if there are no items in the queue */
+    this.empty = computed(() => this.length() <= 0);
+    this._maxSize = options?.size;
+    this.front = computed(() => this.items().at(0));
+    this.back = computed(() => this.items().at(-1));
+    const delta = pairwiseSignal(this.items, []);
+    this.frontDelta = computed(() => {
+      const [prev, next] = delta();
+      const item = next.at(0);
+      return { item, added: !item ? false : !prev.includes(item) };
+    }, { equal: (a, b) => a.item === b.item });
+    this.backDelta = computed(() => {
+      const [prev, next] = delta();
+      const item = next.at(-1);
+      return { item, added: !item ? false : !prev.includes(item) };
+    }, { equal: (a, b) => a.item === b.item });
+  }
+  /** The max size of the queue */
+  get maxSize() {
+    return this._maxSize;
+  }
+  //</editor-fold>
+  //<editor-fold desc="Actions">
+  /**
+   * Removes an item from the scheduler
+   * @param item
+   */
+  removeItem(item) {
+    const index = untracked(this.items).indexOf(item);
+    if (index < 0) return false;
+    const arr = [...untracked(this.items)];
+    arr.splice(index, 1);
+    this._items.set(arr);
+    return true;
+  }
+  dequeue(count) {
+    if (count !== void 0) {
+      if (count < 1) return [];
+      if (!untracked(this.length)) return [];
+      const items = untracked(this.items).slice(0, count);
+      this._items.set(untracked(this.items).slice(count));
+      return items;
+    }
+    if (!untracked(this.length)) return void 0;
+    const item = untracked(this.items).at(0);
+    this._items.set(untracked(this.items).slice(1));
+    return item;
+  }
+  removeFromBack(count) {
+    if (count !== void 0) {
+      if (count < 1) return [];
+      if (!untracked(this.length)) return [];
+      const start = count * -1;
+      const items = untracked(this.items).slice(start);
+      this._items.set(untracked(this.items).slice(0, start));
+      return items;
+    }
+    if (!untracked(this.length)) return void 0;
+    const item = untracked(this.items).at(-1);
+    this._items.set(untracked(this.items).slice(0, -1));
+    return item;
+  }
+  enqueue(...items) {
+    let list = [...untracked(this.items), ...items];
+    if (this.maxSize !== void 0 && list.length > this.maxSize) {
+      const delta = list.length - this.maxSize;
+      list = list.slice(delta);
+    }
+    this._items.set(list);
+  }
+  addToFront(...items) {
+    let list = [...items, ...untracked(this.items)];
+    if (this.maxSize !== void 0 && list.length > this.maxSize) {
+      const delta = list.length - this.maxSize;
+      list = list.slice(0, -delta);
+    }
+    this._items.set(list);
+  }
+  /**
+   * Checks if the item exists in the queue
+   * @param item
+   */
+  contains(item) {
+    return untracked(this.items).includes(item);
+  }
+  /**
+   * Remove all elements from the set
+   */
+  clear() {
+    this._items.set([]);
+  }
+  //</editor-fold>
+  /**
+   * Change the max size of the queue
+   * @param size - The new max size
+   */
+  setMaxSize(size) {
+    this._maxSize = size;
+    if (size === void 0 || untracked(this.length) <= size) return;
+    const delta = untracked(this.length) - size;
+    this._items.set(untracked(this.items).slice(delta));
+  }
+}
+
+export { SignalQueue };

package/dist/data-structures/signal-set.mjs

@@ -0,0 +1,143 @@
+import { signal, computed, untracked } from '@angular/core';
+
+class SignalSet {
+  constructor(values) {
+    this._set = signal(new Set(values));
+    this.value = this._set.asReadonly();
+    this.size = computed(() => this.value().size);
+    this.empty = computed(() => this.size() <= 0);
+    this.array = computed(() => Array.from(this.value()));
+  }
+  /** @inheritDoc */
+  [Symbol.iterator]() {
+    return this.value()[Symbol.iterator]();
+  }
+  getCopy() {
+    return new Set(untracked(this.value));
+  }
+  //<editor-fold desc="Actions">
+  /**
+   * Remove all keys not in the whitelist
+   * @param whitelist - The keys to keep
+   */
+  filter(whitelist) {
+    const length = whitelist && "size" in whitelist ? whitelist.size : whitelist?.length;
+    if (!length) {
+      return this.clear();
+    }
+    const whitelistSet = whitelist instanceof Set ? whitelist : new Set(whitelist);
+    const set = this.getCopy();
+    for (let value of untracked(this.value)) {
+      if (whitelistSet.has(value)) continue;
+      set.delete(value);
+    }
+    if (untracked(this.size) !== set.size) {
+      this._set.set(set);
+      return true;
+    }
+    return false;
+  }
+  /** Clear the collection */
+  clear() {
+    if (!untracked(this.size)) return false;
+    this._set.set(/* @__PURE__ */ new Set());
+    return true;
+  }
+  /**
+   * Add a value to the collection is not already present
+   * @param value - The value to add
+   * @return added - Returns true if the value was added
+   */
+  add(value) {
+    if (untracked(this.value).has(value)) return false;
+    const set = this.getCopy();
+    set.add(value);
+    this._set.set(set);
+    return true;
+  }
+  /**
+   * Add a list of values to the collection is not already present
+   * @param values - The values to add
+   * @return added - Returns true if any value was added
+   */
+  addRange(values) {
+    const set = this.getCopy();
+    const size = set.size;
+    values.forEach((v) => set.add(v));
+    if (set.size === size) return false;
+    this._set.set(set);
+    return true;
+  }
+  /**
+   * Reset the values in the collection to the provided list
+   * @param values - The values to set
+   * @return changed - Returns true if the collection changed
+   */
+  set(values = []) {
+    if (!values.length && !this.size) return false;
+    if (values.length === untracked(this.size)) {
+      const same = values.every((x) => this.has(x));
+      if (same) return false;
+    }
+    this._set.set(new Set(values));
+    return true;
+  }
+  /**
+   * Remove a value from the collection
+   * @param value - The key to remove
+   * @return removed - True if the value existed
+   */
+  delete(value) {
+    if (!untracked(this.value).has(value)) return false;
+    const set = this.getCopy();
+    set.delete(value);
+    this._set.set(set);
+    return true;
+  }
+  /**
+   * Remove values from the collection
+   * @param values - The values to remove
+   * @return removed - True if any values were removed
+   */
+  deleteRange(values) {
+    const set = this.getCopy();
+    const size = set.size;
+    values.forEach((v) => set.delete(v));
+    if (set.size === size) return false;
+    this._set.set(set);
+    return true;
+  }
+  /**
+   * Toggle a value in the set
+   * @param value - The value to toggle
+   * @param state - A forced state (`true` = always add, `false` = always delete)
+   * @returns The applied change (`true` = item added, `false` = item removed, `undefined` = nothing changed)
+   */
+  toggle(value, state) {
+    if (untracked(this.value).has(value)) {
+      if (state === true) return void 0;
+      const set2 = this.getCopy();
+      set2.delete(value);
+      this._set.set(set2);
+      return false;
+    }
+    if (state === false) return void 0;
+    const set = this.getCopy();
+    set.add(value);
+    this._set.set(set);
+    return true;
+  }
+  /** Manually modify the inner collection */
+  modify(modify) {
+    const set = this.getCopy();
+    modify(set);
+    this._set.set(set);
+  }
+  /** @inheritDoc */
+  has(value) {
+    return computed(() => this.value().has(value));
+  }
+  //</editor-fold>
+}
+
+export { SignalSet };

package/dist/data-structures/signal-stack.mjs

@@ -0,0 +1,90 @@
+import { signal, computed, untracked } from '@angular/core';
+import { pairwiseSignal } from '../operators.mjs';
+
+class SignalStack {
+  constructor() {
+    this._items = signal([]);
+    /** A signal containing the items of the stack from bottom to top */
+    this.items = this._items.asReadonly();
+    /** A signal emitting the number of items in the stack */
+    this.length = computed(() => this.items().length);
+    /** A signal emitting true if there are no items in the stack */
+    this.empty = computed(() => this.length() <= 0);
+    this.top = computed(() => this.items().at(-1));
+    this.bottom = computed(() => this.items().at(0));
+    const delta = pairwiseSignal(this.items, []);
+    this.topDelta = computed(() => {
+      const [prev, next] = delta();
+      const item = next.at(-1);
+      return { item, added: !item ? false : !prev.includes(item) };
+    }, { equal: (a, b) => a.item === b.item });
+    this.bottomDelta = computed(() => {
+      const [prev, next] = delta();
+      const item = next.at(0);
+      return { item, added: !item ? false : !prev.includes(item) };
+    }, { equal: (a, b) => a.item === b.item });
+  }
+  //</editor-fold>
+  //<editor-fold desc="Actions">
+  /**
+   * Removes an item from the scheduler
+   * @param item
+   */
+  removeItem(item) {
+    const index = untracked(this.items).indexOf(item);
+    if (index < 0) return false;
+    const arr = [...untracked(this.items)];
+    arr.splice(index, 1);
+    this._items.set(arr);
+    return true;
+  }
+  removeFromBottom(count) {
+    if (count !== void 0) {
+      if (count < 1) return [];
+      if (!untracked(this.length)) return [];
+      const items = untracked(this.items).slice(0, count);
+      this._items.set(untracked(this.items).slice(count));
+      return items;
+    }
+    if (!untracked(this.length)) return void 0;
+    const item = untracked(this.items).at(0);
+    this._items.set(untracked(this.items).slice(1));
+    return item;
+  }
+  pop(count) {
+    if (count !== void 0) {
+      if (count < 1) return [];
+      if (!untracked(this.length)) return [];
+      const start = count * -1;
+      const items = untracked(this.items).slice(start);
+      this._items.set(untracked(this.items).slice(0, start));
+      return items;
+    }
+    if (!untracked(this.length)) return void 0;
+    const item = untracked(this.items).at(-1);
+    this._items.set(untracked(this.items).slice(0, -1));
+    return item;
+  }
+  push(...items) {
+    this._items.set([...untracked(this.items), ...items]);
+  }
+  addToBottom(...items) {
+    this._items.set([...items, ...untracked(this.items)]);
+  }
+  /**
+   * Checks if the item exists in the queue
+   * @param item
+   */
+  contains(item) {
+    return untracked(this.items).includes(item);
+  }
+  /**
+   * Remove all elements from the set
+   */
+  clear() {
+    this._items.set([]);
+  }
+  //</editor-fold>
+}
+
+export { SignalStack };

package/dist/index.d.ts

@@ -64,15 +64,16 @@ declare function subjectToSignal<T>(subject: BehaviorSubject<T>): Signal<T>;
  */
 declare function subjectToSignal<T>(subject: Subject<T>, initial: T): Signal<T>;
 
-/** @category Loading Signal */
-type LoadingSignal<T> = Signal<T | undefined> & {
+interface LoadingSignalProps {
     /** The current error state */
     readonly error: Signal<Error | undefined>;
     /** The current loading state */
     readonly loading: Signal<boolean>;
     /** Dispose the underlying request / action */
     readonly dispose: () => void;
-};
+}
+/** @category Loading Signal */
+type LoadingSignal<T> = Signal<T | undefined> & LoadingSignalProps;
 /**
  * Options for creating a LoadingSignal
  * @category Loading Signal

package/dist/index.mjs

@@ -0,0 +1,16 @@
+export { debouncedSignal, debouncedThrottledSignal, searchSignal, throttledSignal } from './async.mjs';
+export { subjectToSignal } from './interop.mjs';
+export { loadingSignal, toLoadingSignal } from './loading-signal.mjs';
+export { SignalMap } from './data-structures/signal-map.mjs';
+export { SignalSet } from './data-structures/signal-set.mjs';
+export { SignalQueue } from './data-structures/signal-queue.mjs';
+export { SignalStack } from './data-structures/signal-stack.mjs';
+export { requestState } from './request-state/constructors.mjs';
+export { IRequestState, IValueRequestState } from './request-state/request-state.mjs';
+export { AsyncRequestState } from './request-state/async-request-state.mjs';
+export { EmptyRequestState } from './request-state/empty-request-state.mjs';
+export { ErrorRequestState } from './request-state/error-request-state.mjs';
+export { LoadingRequestState } from './request-state/loading-request-state.mjs';
+export { StaticRequestState } from './request-state/static-request-state.mjs';
+export { WritableRequestState } from './request-state/writable-request-state.mjs';
+export { RequestTracker, ValueRequestTracker, requestTracker } from './request-state/request-tracker.mjs';

package/dist/interop.mjs

@@ -0,0 +1,11 @@
+import { signal } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+function subjectToSignal(subject, initial) {
+  const init = subject instanceof BehaviorSubject ? subject.value : initial;
+  const sig = signal(init);
+  subject.subscribe((val) => sig.set(val));
+  return sig;
+}
+
+export { subjectToSignal };

package/dist/loading-signal.mjs

@@ -0,0 +1,68 @@
+import { signal, assertInInjectionContext, DestroyRef, inject } from '@angular/core';
+import { ILoadingState } from '@juulsgaard/rxjs-tools';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { parseError } from '@juulsgaard/ts-tools';
+
+function loadingSignal(value, options) {
+  const loadingSignal2 = value;
+  loadingSignal2.loading = options?.loading ?? signal(false);
+  loadingSignal2.error = options?.error ?? signal(void 0);
+  loadingSignal2.dispose = options?.dispose ?? (() => void 0);
+  return loadingSignal2;
+}
+function toLoadingSignal(loadingState, options) {
+  const injector = options?.injector;
+  const needsInjector = !!options?.autoDispose;
+  if (needsInjector && !injector) assertInInjectionContext(toLoadingSignal);
+  let state;
+  if (loadingState instanceof ILoadingState) {
+    state = fromLoadingState(loadingState);
+  } else if (loadingState instanceof Promise) {
+    state = fromPromise(loadingState);
+  } else {
+    state = fromObservable(loadingState);
+  }
+  if (options?.autoDispose) {
+    const destroy = injector?.get(DestroyRef) ?? inject(DestroyRef);
+    destroy.onDestroy(() => state.dispose());
+  }
+  return state;
+}
+function fromObservable(value$) {
+  const value = signal(void 0);
+  const loading = signal(true);
+  const error = signal(void 0);
+  const sub = value$.subscribe({
+    next: (val) => {
+      sub.unsubscribe();
+      loading.set(false);
+      value.set(val);
+    },
+    error: (err) => {
+      sub.unsubscribe();
+      loading.set(false);
+      error.set(parseError(err));
+    },
+    complete: () => {
+      sub.unsubscribe();
+      loading.set(false);
+    }
+  });
+  return loadingSignal(value, { loading, error, dispose: () => sub.unsubscribe() });
+}
+function fromPromise(promise) {
+  const value = signal(void 0);
+  const loading = signal(true);
+  const error = signal(void 0);
+  promise.then((val) => value.set(val), (err) => error.set(parseError(err)));
+  promise.finally(() => loading.set(false));
+  return loadingSignal(value, { loading, error });
+}
+function fromLoadingState(state) {
+  const value = toSignal(state.result$, { manualCleanup: true });
+  const loading = toSignal(state.loading$, { manualCleanup: true, initialValue: true });
+  const error = toSignal(state.error$, { manualCleanup: true });
+  return loadingSignal(value, { loading, error, dispose: () => state.cancel() });
+}
+
+export { loadingSignal, toLoadingSignal };

package/dist/operators.mjs

@@ -0,0 +1,13 @@
+import { computed } from '@angular/core';
+
+function pairwiseSignal(inputSignal, firstValue) {
+  let prevValue = firstValue;
+  return computed(() => {
+    const nextValue = inputSignal();
+    const tuple = [prevValue, nextValue];
+    prevValue = nextValue;
+    return tuple;
+  });
+}
+
+export { pairwiseSignal };

package/dist/request-state/async-request-state.mjs

@@ -0,0 +1,48 @@
+import { ReplaySubject, isObservable, take, from } from 'rxjs';
+import { signal, computed } from '@angular/core';
+import { parseError, isString, isFunction } from '@juulsgaard/ts-tools';
+import { CancelledError } from '@juulsgaard/rxjs-tools';
+import { IValueRequestState } from './request-state.mjs';
+
+class AsyncRequestState extends IValueRequestState {
+  constructor(request) {
+    super();
+    this._request$ = new ReplaySubject();
+    this.request$ = this._request$.asObservable();
+    this._result$ = new ReplaySubject();
+    this.result$ = this._result$.asObservable();
+    this._result = signal(void 0);
+    this.result = this._result.asReadonly();
+    this._loading = signal(true);
+    this.loading = this._loading.asReadonly();
+    this._error = signal(void 0);
+    this.error = this._error.asReadonly();
+    this.failed = computed(() => this._error() !== void 0);
+    const request$ = isObservable(request) ? request.pipe(take(1)) : from(request);
+    this.sub = request$.subscribe(this._request$);
+    this.request$.subscribe({
+      next: (value) => {
+        this._result$.next(value);
+        this._result.set(value);
+      },
+      error: (error) => {
+        this._error.set(parseError(error));
+        this._result$.complete();
+        this._loading.set(false);
+      },
+      complete: () => {
+        this._result$.complete();
+        this._loading.set(false);
+      }
+    });
+  }
+  cancel(error) {
+    if (this.sub.closed) return false;
+    this.sub.unsubscribe();
+    const fullError = isString(error) ? new CancelledError(error) : isFunction(error) ? error() : error;
+    this._request$.error(fullError);
+    return true;
+  }
+}
+
+export { AsyncRequestState };

package/dist/request-state/constructors.mjs

@@ -0,0 +1,25 @@
+import { isObservable } from 'rxjs';
+import { WritableRequestState } from './writable-request-state.mjs';
+import { AsyncRequestState } from './async-request-state.mjs';
+import { StaticRequestState } from './static-request-state.mjs';
+import { ErrorRequestState } from './error-request-state.mjs';
+import '@angular/core';
+import '@juulsgaard/ts-tools';
+
+function valueRequestState(data) {
+  if (isObservable(data)) return new AsyncRequestState(data);
+  if (data instanceof Promise) return new AsyncRequestState(data);
+  return new StaticRequestState(data);
+}
+function errorRequestState(error) {
+  return new ErrorRequestState(error instanceof Error ? () => error : error);
+}
+function writableRequestState(onCancel) {
+  return new WritableRequestState(onCancel);
+}
+const compiled = valueRequestState;
+compiled.writable = writableRequestState;
+compiled.error = errorRequestState;
+const requestState = compiled;
+
+export { requestState };

package/dist/request-state/empty-request-state.mjs

@@ -0,0 +1,20 @@
+import { EMPTY } from 'rxjs';
+import { signal } from '@angular/core';
+import { IValueRequestState } from './request-state.mjs';
+
+class EmptyRequestState extends IValueRequestState {
+  constructor() {
+    super(...arguments);
+    this.request$ = EMPTY;
+    this.result$ = this.request$;
+    this.result = signal(void 0).asReadonly();
+    this.loading = signal(false);
+    this.error = signal(void 0);
+    this.failed = signal(false);
+  }
+  cancel() {
+    return false;
+  }
+}
+
+export { EmptyRequestState };

package/dist/request-state/error-request-state.mjs

@@ -0,0 +1,20 @@
+import { EMPTY, throwError } from 'rxjs';
+import { signal } from '@angular/core';
+import { IValueRequestState } from './request-state.mjs';
+
+class ErrorRequestState extends IValueRequestState {
+  constructor(getError) {
+    super();
+    this.result$ = EMPTY;
+    this.result = signal(void 0).asReadonly();
+    this.loading = signal(false);
+    this.failed = signal(true);
+    this.error = signal(getError());
+    this.request$ = throwError(getError);
+  }
+  cancel() {
+    return false;
+  }
+}
+
+export { ErrorRequestState };

package/dist/request-state/loading-request-state.mjs

@@ -0,0 +1,25 @@
+import { Subject } from 'rxjs';
+import { signal } from '@angular/core';
+import { IValueRequestState } from './request-state.mjs';
+
+class LoadingRequestState extends IValueRequestState {
+  constructor() {
+    super(...arguments);
+    this._request$ = new Subject();
+    this.request$ = this._request$.asObservable();
+    this.result$ = this.request$;
+    this.result = signal(void 0).asReadonly();
+    this._loading = signal(true);
+    this.loading = this._loading.asReadonly();
+    this.error = signal(void 0);
+    this.failed = signal(false);
+  }
+  cancel() {
+    if (this._request$.closed) return false;
+    this._request$.complete();
+    this._loading.set(false);
+    return false;
+  }
+}
+
+export { LoadingRequestState };

package/dist/request-state/request-state.mjs

@@ -0,0 +1,39 @@
+import { first } from 'rxjs';
+import { parseError } from '@juulsgaard/ts-tools';
+
+class IRequestState {
+  /**
+   * Subscribe to the underlying request Observable
+   * @param observer
+   */
+  subscribe(observer) {
+    return this.request$.subscribe(observer);
+  }
+}
+class IValueRequestState extends IRequestState {
+  subscribe(observer) {
+    return this.request$.subscribe(observer);
+  }
+  then(onValue, onError) {
+    this.request$.pipe(first()).subscribe({
+      next: (v) => onValue(v),
+      error: (e) => onError?.(parseError(e))
+    });
+    return this;
+  }
+  catch(onError) {
+    this.request$.subscribe({
+      error: (e) => onError(parseError(e))
+    });
+    return this;
+  }
+  finally(onComplete) {
+    this.request$.subscribe({
+      error: (e) => onComplete(parseError(e)),
+      complete: () => onComplete()
+    });
+    return this;
+  }
+}
+
+export { IRequestState, IValueRequestState };

package/dist/request-state/request-tracker.mjs

@@ -0,0 +1,64 @@
+import { computed, signal, untracked } from '@angular/core';
+import { IValueRequestState } from './request-state.mjs';
+import { requestState } from './constructors.mjs';
+
+class RequestTracker {
+  constructor(request) {
+    /** Emits true if the current RequestState is loading */
+    this.loading = computed(() => this._request().loading());
+    /** Emits an error if the current RequestState is in an error state */
+    this.error = computed(() => this._request().error());
+    /** Emits true if the current RequestState has failed */
+    this.failed = computed(() => this._request().failed());
+    this._request = signal(request ?? requestState.empty());
+    this.request = this._request.asReadonly();
+  }
+  /** The currently active RequestState */
+  set current(req) {
+    this.set(req);
+  }
+  get current() {
+    return untracked(this.request);
+  }
+  /**
+   * Set a new current RequestState
+   * @param state - The new RequestState
+   */
+  set(state) {
+    this._request.set(state);
+  }
+  /**
+   * Resets the Tracker to an Empty state
+   */
+  reset() {
+    this._request.set(requestState.empty());
+  }
+}
+class ValueRequestTracker extends RequestTracker {
+  set current(req) {
+    this.set(req);
+  }
+  get current() {
+    return untracked(this.request);
+  }
+  constructor(request) {
+    super();
+    this._valueRequest = signal(request ?? requestState.empty());
+    this.request = this._valueRequest.asReadonly();
+  }
+  set(req) {
+    super.set(req);
+    this._valueRequest.set(req);
+  }
+  reset() {
+    super.reset();
+    this.set(requestState.empty());
+  }
+}
+function requestTracker(request) {
+  if (!request) return new ValueRequestTracker();
+  if (request instanceof IValueRequestState) return new ValueRequestTracker(request);
+  return new RequestTracker(request);
+}
+
+export { RequestTracker, ValueRequestTracker, requestTracker };

package/dist/request-state/static-request-state.mjs

@@ -0,0 +1,32 @@
+import { of } from 'rxjs';
+import { signal } from '@angular/core';
+import { IValueRequestState } from './request-state.mjs';
+
+class StaticRequestState extends IValueRequestState {
+  constructor(value) {
+    super();
+    this.value = value;
+    this.loading = signal(false);
+    this.error = signal(void 0);
+    this.failed = signal(false);
+    this.request$ = of(value);
+    this.result$ = this.request$;
+    this.result = signal(value);
+  }
+  cancel() {
+    return false;
+  }
+  then(next, _error) {
+    next(this.value);
+    return this;
+  }
+  catch(_onError) {
+    return this;
+  }
+  finally(onComplete) {
+    onComplete();
+    return this;
+  }
+}
+
+export { StaticRequestState };

package/dist/request-state/writable-request-state.mjs

@@ -0,0 +1,75 @@
+import { ReplaySubject } from 'rxjs';
+import { signal, computed } from '@angular/core';
+import { parseError, isString, isFunction } from '@juulsgaard/ts-tools';
+import { CancelledError } from '@juulsgaard/rxjs-tools';
+import { IValueRequestState } from './request-state.mjs';
+
+class WritableRequestState extends IValueRequestState {
+  constructor(onCancel) {
+    super();
+    this.onCancel = onCancel;
+    this._completed = false;
+    this._request$ = new ReplaySubject();
+    this.request$ = this._request$.asObservable();
+    this._result$ = new ReplaySubject();
+    this.result$ = this._result$.asObservable();
+    this._result = signal(void 0);
+    this.result = this._result.asReadonly();
+    this._loading = signal(true);
+    this.loading = this._loading.asReadonly();
+    this._error = signal(void 0);
+    this.error = this._error.asReadonly();
+    this.failed = computed(() => this._error() !== void 0);
+    this._cancelled = signal(false);
+    /** Emits true when the RequestState has been cancelled by a consumer, otherwise emits false */
+    this.cancelled = this._cancelled.asReadonly();
+    this._cancelled$ = new ReplaySubject();
+    /** Emits true when the RequestState has been cancelled by a consumer */
+    this.cancelled$ = this._cancelled$.asObservable();
+  }
+  get completed() {
+    return this._completed;
+  }
+  /**
+   * Create a Readonly version of the RequestState
+   */
+  asReadonly() {
+    return this;
+  }
+  /**
+   * Set the RequestState to an Error state
+   * @param error - The error for the RequestState
+   */
+  setError(error) {
+    if (this.completed) return;
+    this._completed = true;
+    this._request$.error(error);
+    this._result$.complete();
+    this._loading.set(false);
+    this._error.set(parseError(error));
+  }
+  /**
+   * Set the RequestState to a completed state with a given value
+   * @param value - The value to emit
+   */
+  setValue(value) {
+    if (this.completed) return;
+    this._completed = true;
+    this._request$.next(value);
+    this._request$.complete();
+    this._loading.set(false);
+    this._result.set(value);
+  }
+  cancel(error) {
+    if (this.completed) return false;
+    const fullError = isString(error) ? new CancelledError(error) : isFunction(error) ? error() : error;
+    this.setError(fullError);
+    this._cancelled.set(true);
+    this._cancelled$.next(true);
+    this._cancelled$.complete();
+    this.onCancel?.();
+    return true;
+  }
+}
+
+export { WritableRequestState };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@juulsgaard/signal-tools",
-  "version": "18.0.1",
+  "version": "18.0.2",
   "description": "Tools for working with Angular signals",
   "repository": "git@github.com:Juulsgaard/signal-tools.git",
   "homepage": "https://juulsgaard.github.io/signal-tools/",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "type": "module",
   "sideEffects": false,
@@ -15,7 +15,7 @@
   ],
   "peerDependencies": {
     "@angular/core": "^18.2.8",
-    "@juulsgaard/ts-tools": "^1.6.4",
+    "@juulsgaard/ts-tools": "^1.6.5",
     "@juulsgaard/rxjs-tools": "^1.7.6",
     "rxjs": "^7.8.1",
     "tslib": "^2.7.0",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@angular/core": "18.2.8",
+    "@juulsgaard/ts-tools": "1.6.5",
     "@juulsgaard/rxjs-tools": "1.7.6",
     "@types/jest": "^29.5.13",
     "jest": "^29.7.0",