Merge pull request #118 from x0k/file-actions

File actions

Author: x0k

.changeset/cute-apples-marry.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Refactor async logic in file fields

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

@@ -7,8 +7,10 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   import { fileToDataURL } from "@/lib/file.js";
-  import { asyncProxy } from "@/lib/svelte.svelte";
+  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -22,7 +24,11 @@
 
   import "../extra-widgets/file.js";
 
-  let { config, value = $bindable(), uiOption }: ComponentProps["fileField"] = $props();
+  let {
+    config,
+    value = $bindable(),
+    uiOption,
+  }: ComponentProps["fileField"] = $props();
 
   const ctx = getFormContext();
 
@@ -34,28 +40,47 @@
     validateField(ctx, config, value)
   );
 
-  const files = asyncProxy(
-    async (isRegOnly, signal) => {
-      if (!value || isRegOnly) {
-        return;
-      }
+  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 data = new DataTransfer();
-      await addFile(ctx, signal, data, value);
+      if (value !== undefined) {
+        await addFile(ctx, signal, data, value);
+      }
       return data.files;
     },
-    async (v, signal) => {
-      if (v === undefined || v.length === 0) {
-        value = undefined;
-        return;
-      }
-      try {
-        value = await fileToDataURL(signal, v[0]!);
-      } catch (e) {
-        console.error("Failed to read file", e);
-      }
+    onSuccess(list: FileList) {
+      files = list;
     },
-    (v) => v
-  );
+  });
+
+  $effect(() => {
+    if (value === lastValueUpdate) {
+      return;
+    }
+    untrack(() => {
+      toValue.abort();
+      toFiles.run(value);
+    });
+  });
 
   const errors = $derived(getErrors(ctx, config.id));
 </script>
@@ -72,9 +97,15 @@
 >
   <Widget
     type="widget"
-    bind:value={files.value}
-    processing={files.inputProcessing}
-    loading={files.outputProcessing}
+    bind:value={
+      () => files,
+      (files) => {
+        toFiles.abort();
+        toValue.run(files);
+      }
+    }
+    processing={toValue.isProcessed}
+    loading={toFiles.isProcessed}
     {uiOption}
     {handlers}
     {errors}

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

@@ -7,8 +7,10 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   import { fileToDataURL } from "@/lib/file.js";
-  import { asyncProxy } from "@/lib/svelte.svelte";
+  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -38,30 +40,52 @@
     validateField(ctx, config, value)
   );
 
-  const files = asyncProxy(
-    async (isRegOnly, signal) => {
-      if (!value || isRegOnly) {
-        return;
+  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 data = new DataTransfer();
-      await addFiles(ctx, signal, data, value);
+      if (value !== undefined) {
+        await addFiles(ctx, signal, data, value);
+      }
       return data.files;
     },
-    async (v, signal) => {
-      if (v === undefined || v.length === 0) {
-        value = [];
-        return;
-      }
-      try {
-        value = await Promise.all(
-          Array.from(v).map((f) => fileToDataURL(signal, f))
-        );
-      } catch (e) {
-        console.error("Failed to read file", e);
-      }
+    onSuccess(list: FileList) {
+      files = list;
     },
-    (v) => v
-  );
+  });
+
+  $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>
@@ -78,9 +102,15 @@
 >
   <Widget
     type="widget"
-    bind:value={files.value}
-    processing={files.inputProcessing}
-    loading={files.outputProcessing}
+    bind:value={
+      () => files,
+      (files) => {
+        toFiles.abort();
+        toValue.run(files);
+      }
+    }
+    processing={toValue.isProcessed}
+    loading={toFiles.isProcessed}
     {uiOption}
     {handlers}
     {errors}