Merge pull request #119 from x0k/async-binding

Async binding

Author: x0k

.changeset/free-adults-talk.md

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

packages/form/src/fields/extra-fields/file.svelte

@@ -7,10 +7,8 @@
 </script>
 
 <script lang="ts">
-  import { untrack } from "svelte";
-
   import { fileToDataURL } from "@/lib/file.js";
-  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
+  import { createAsyncBinding } from "@/lib/svelte.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -40,48 +38,24 @@
     validateField(ctx, config, value)
   );
 
-  let lastValueUpdate: string | undefined;
-  const toValue = createAction({
-    combinator: abortPrevious,
-    async execute(
-      signal,
-      files: FileList | undefined
-    ) {
-      return files === undefined || files.length === 0
-        ? undefined
-        : fileToDataURL(signal, files[0]!);
-    },
-    onSuccess(result: string | undefined) {
-      lastValueUpdate = result;
-      value = result;
-    },
-  });
-
-  let files = $state.raw<FileList>();
-  const toFiles = createAction({
-    combinator: abortPrevious,
-    async execute(signal, value: string | undefined) {
+  const files = createAsyncBinding({
+    initialOutput: undefined,
+    getInput: () => value,
+    setInput: (v) => (value = v),
+    async toOutput(signal, value) {
       const data = new DataTransfer();
       if (value !== undefined) {
         await addFile(ctx, signal, data, value);
       }
       return data.files;
     },
-    onSuccess(list: FileList) {
-      files = list;
+    async toInput(signal, files) {
+      return files === undefined || files.length === 0
+        ? undefined
+        : fileToDataURL(signal, files[0]!);
     },
   });
 
-  $effect(() => {
-    if (value === lastValueUpdate) {
-      return;
-    }
-    untrack(() => {
-      toValue.abort();
-      toFiles.run(value);
-    });
-  });
-
   const errors = $derived(getErrors(ctx, config.id));
 </script>
 
@@ -97,15 +71,9 @@
 >
   <Widget
     type="widget"
-    bind:value={
-      () => files,
-      (files) => {
-        toFiles.abort();
-        toValue.run(files);
-      }
-    }
-    processing={toValue.isProcessed}
-    loading={toFiles.isProcessed}
+    bind:value={files.current}
+    processing={files.inputProcessing}
+    loading={files.outputProcessing}
     {uiOption}
     {handlers}
     {errors}

packages/form/src/fields/extra-fields/files.svelte

@@ -7,10 +7,8 @@
 </script>
 
 <script lang="ts">
-  import { untrack } from "svelte";
-
   import { fileToDataURL } from "@/lib/file.js";
-  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
+  import { createAsyncBinding } from "@/lib/svelte.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -40,53 +38,32 @@
     validateField(ctx, config, value)
   );
 
-  let lastValueUpdate: string[] | undefined;
-  const toValue = createAction({
-    combinator: abortPrevious,
-    async execute(signal, files: FileList | undefined) {
-      if (files === undefined) {
-        return undefined;
-      }
-      return Promise.all(
-        Array.from(files).map((f) => fileToDataURL(signal, f))
-      );
-    },
-    onSuccess(result: string[] | undefined) {
-      lastValueUpdate = result;
-      value = result;
-    },
-  });
-
-  let files = $state.raw<FileList>();
-  const toFiles = createAction({
-    combinator: abortPrevious,
-    async execute(signal, value: string[] | undefined) {
+  const files = createAsyncBinding({
+    initialOutput: undefined,
+    getInput: () => value,
+    setInput: (v) => (value = v),
+    isEqual: (a, b) =>
+      // WARN: Do not optimize, avoid svelte reactive value equality warning
+      (a === undefined && b === undefined) ||
+      (Array.isArray(a) &&
+        Array.isArray(b) &&
+        a.length === b.length &&
+        a.every((v, i) => v === b[i])),
+    async toOutput(signal, value) {
       const data = new DataTransfer();
       if (value !== undefined) {
         await addFiles(ctx, signal, data, value);
       }
       return data.files;
     },
-    onSuccess(list: FileList) {
-      files = list;
+    async toInput(signal, files) {
+      return (
+        files &&
+        Promise.all(Array.from(files).map((f) => fileToDataURL(signal, f)))
+      );
     },
   });
 
-  $effect(() => {
-    if (
-      Array.isArray(value) &&
-      Array.isArray(lastValueUpdate) &&
-      value.length === lastValueUpdate.length &&
-      value.every((v, i) => v === lastValueUpdate![i])
-    ) {
-      return;
-    }
-    untrack(() => {
-      toValue.abort();
-      toFiles.run(value);
-    });
-  });
-
   const errors = $derived(getErrors(ctx, config.id));
 </script>
 
@@ -102,15 +79,9 @@
 >
   <Widget
     type="widget"
-    bind:value={
-      () => files,
-      (files) => {
-        toFiles.abort();
-        toValue.run(files);
-      }
-    }
-    processing={toValue.isProcessed}
-    loading={toFiles.isProcessed}
+    bind:value={files.current}
+    processing={files.inputProcessing}
+    loading={files.outputProcessing}
     {uiOption}
     {handlers}
     {errors}

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;
     },
   };
 }