[lib] Replace asyncProxy with createAsyncBinding

Author: x0k

.changeset/free-adults-talk.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": major
+---
+
+Replace `asyncProxy` with `createAsyncBinding`

packages/form/src/lib/svelte.svelte.ts

@@ -1,77 +1,67 @@
 import { untrack } from "svelte";
 
-export interface AsyncInput<V> {
-  /**
-   * @param isDependencyRegistrationOnlyCall - when `true`, indicates that function is called only for dependency registration and result will be ignored
-   */
-  (isDependencyRegistrationOnlyCall: false, signal: AbortSignal): Promise<V>;
-  /**
-   * @param signal used here to simplify typing
-   */
-  (isDependencyRegistrationOnlyCall: true, signal: AbortSignal): void;
+import { abortPrevious, createAction } from "./action.svelte.js";
+
+export interface AsyncBindingOptions<I, O> {
+  initialOutput: O;
+  toOutput: (signal: AbortSignal, input: I) => Promise<O>;
+  toInput: (signal: AbortSignal, output: O) => Promise<I>;
+  setInput: (v: I) => void;
+  getInput: () => I;
+  isEqual?: (a: I, b: I | undefined) => boolean;
 }
 
-export function asyncProxy<V>(
-  asyncInput: AsyncInput<V>,
-  asyncOutput: (value: V, signal: AbortSignal) => Promise<void>,
-  defaultValue: (prev: V | undefined) => V
-) {
-  let inputsInProcess = $state.raw(0);
-  let outputsInProcess = $state.raw(0);
-  let proxyValue = $state.raw<V>();
-  let inputController = new AbortController();
-  let outputController = new AbortController();
-  let ignoreProxyUpdate = true;
-  const derivation = $derived.by(() => {
-    const proxyVal = proxyValue;
-    if (ignoreProxyUpdate) {
-      ignoreProxyUpdate = false;
-      asyncInput(true, inputController.signal);
-      return proxyVal as V;
+export function createAsyncBinding<I, O>({
+  initialOutput,
+  getInput,
+  setInput,
+  toInput,
+  toOutput,
+  isEqual = Object.is,
+}: AsyncBindingOptions<I, O>) {
+  let lastInputUpdate: I | undefined;
+  const toInputAction = createAction({
+    combinator: abortPrevious,
+    execute: toInput,
+    onSuccess(result: I) {
+      lastInputUpdate = result;
+      setInput(result);
+    },
+  });
+
+  let output = $state.raw(initialOutput);
+  const toOutputAction = createAction({
+    combinator: abortPrevious,
+    execute: toOutput,
+    onSuccess(result: O) {
+      output = result;
+    },
+  });
+
+  $effect(() => {
+    const input = getInput();
+    if (isEqual(input, lastInputUpdate)) {
+      return;
     }
-    inputController.abort();
-    inputController = new AbortController();
-    outputController.abort();
-    outputController = new AbortController();
     untrack(() => {
-      inputsInProcess++;
+      toInputAction.abort();
+      toOutputAction.run(input);
     });
-    asyncInput(false, inputController.signal)
-      .then((v) => {
-        ignoreProxyUpdate = true;
-        proxyValue = v;
-      })
-      .finally(() => {
-        untrack(() => {
-          inputsInProcess--;
-        });
-      });
-    return defaultValue(proxyVal);
   });
+
   return {
-    get value() {
-      return derivation;
+    get current() {
+      return output;
     },
-    set value(v) {
-      if (Object.is(proxyValue, v)) {
-        return;
-      }
-      outputController.abort();
-      outputController = new AbortController();
-      outputsInProcess++;
-      asyncOutput(v, outputController.signal)
-        .then(() => {
-          ignoreProxyUpdate = true;
-        })
-        .finally(() => {
-          outputsInProcess--;
-        });
+    set current(v) {
+      toOutputAction.abort();
+      toInputAction.run(v);
     },
     get inputProcessing() {
-      return inputsInProcess > 0;
+      return toInputAction.isProcessed;
     },
     get outputProcessing() {
-      return outputsInProcess > 0;
+      return toOutputAction.isProcessed;
     },
   };
 }