refactor: s3 input

src/pages/configurator/input/_applet.astro

···
       </a>
     </p>
   </div>
-  <p>
-    <small><em><strong>More options coming soon!</strong></em></small>
-  </p>
 </main>
 
 <style is:global>

src/pages/input/s3/_applet.astro

···
 </style>
 
 <script>
-  import { S3Client } from "@bradenmacdonald/s3-lite-client";
-  import { computed, effect, type Signal, signal } from "spellcaster";
-  import { type Props, repeat, tags, text } from "spellcaster/hyperscript.js";
-  import * as IDB from "idb-keyval";
-  import * as URI from "uri-js";
-  import QS from "query-string";
+  import type { Actions } from "@scripts/input/s3/worker";
 
   import type { Track } from "@applets/core/types.d.ts";
-  import { isAudioFile } from "@scripts/input/common";
   import { register } from "@scripts/applet/common";
-  import manifest from "./_manifest.json";
-
-  type Bucket = {
-    accessKey: string;
-    bucketName: string;
-    host: string;
-    path: string;
-    region: string;
-    secretKey: string;
-  };
-
-  const ENCODINGS = {
-    "\+": "%2B",
-    "\!": "%21",
-    '\"': "%22",
-    "\#": "%23",
-    "\$": "%24",
-    "\&": "%26",
-    "'": "%27",
-    "\(": "%28",
-    "\)": "%29",
-    "\*": "%2A",
-    "\,": "%2C",
-    "\:": "%3A",
-    "\;": "%3B",
-    "\=": "%3D",
-    "\?": "%3F",
-    "\@": "%40",
-  };
+  import { endpoint, inIframe } from "@scripts/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const IDB_PREFIX = "@applets/input/s3";
-  const IDB_BUCKETS = `${IDB_PREFIX}/buckets`;
-  const SCHEME = manifest.input_properties.scheme;
+  const worker = endpoint<Actions>(
+    new Worker("../../../scripts/input/s3/worker", { type: "module" }),
+  );
 
   // Register applet
   const context = register();
 
   ////////////////////////////////////////////
-  // UI
-  ////////////////////////////////////////////
-  const [buckets, setBuckets] = signal<Record<string, Bucket>>(await loadBuckets());
-  const [form, setForm] = signal<{
-    access_key?: string;
-    bucket_name?: string;
-    host?: string;
-    path?: string;
-    region?: string;
-    secret_key?: string;
-  }>({});
-
-  const bucketsMap = computed(() => {
-    return new Map(Object.entries(buckets()));
-  });
-
-  effect(() => {
-    saveBuckets(buckets());
-  });
-
-  ////////////////////////////////////////////
-  // UI ~ BUCKETS
-  ////////////////////////////////////////////
-  const Bucket = (bucket: Signal<Bucket>) => {
-    const onclick = () => {
-      const b = bucket();
-      const id = bucketId(b);
-
-      const col = { ...buckets() };
-      delete col[id];
-
-      setBuckets(col);
-    };
-
-    return tags.li({ onclick, style: "cursor: pointer" }, text(bucket().host));
-  };
-
-  const BucketList = computed(() => {
-    if (bucketsMap().size === 0) {
-      return tags.p({ id: "buckets" }, [tags.small({}, text("Nothing added so far."))]);
-    }
-
-    return tags.ul({ id: "buckets" }, repeat(bucketsMap, Bucket));
-  });
-
-  effect(() => {
-    document.querySelector("#buckets")?.replaceWith(BucketList());
-  });
-
-  ////////////////////////////////////////////
-  // UI ~ FORM
-  ////////////////////////////////////////////
-  function addBucket(event: Event) {
-    event.preventDefault();
-
-    const f = form();
-
-    const bucket: Bucket = {
-      accessKey: f.access_key || "",
-      bucketName: f.bucket_name || "",
-      host: f.host || "s3.amazonaws.com",
-      path: f.path || "/",
-      region: f.region || "us-east-1",
-      secretKey: f.secret_key || "",
-    };
-
-    setBuckets({
-      ...buckets(),
-      [bucketId(bucket)]: bucket,
-    });
-  }
-
-  function Form() {
-    return tags.form({ onsubmit: addBucket }, [
-      tags.fieldset({ className: "grid" }, [
-        Input("access_key", "Access key", "r31w7m9c", { required: true }),
-        Input("secret_key", "Secret key", "v02g2l29", { required: true }),
-      ]),
-      tags.fieldset({ className: "grid" }, [
-        Input("bucket_name", "Bucket name", "bucket", { required: true }),
-        Input("region", "Region", "us-east-1", { required: true }),
-      ]),
-      tags.fieldset({ className: "grid" }, [
-        Input("host", "Host", "s3.amazonaws.com", { required: true }),
-        Input("path", "Path", "/"),
-      ]),
-      tags.fieldset({ className: "grid" }, [tags.input({ type: "submit", value: "Connect" }, [])]),
-    ]);
-  }
-
-  function Input(name: string, label: string, placeholder: string, opts: Props = {}) {
-    return tags.label({}, [
-      tags.span({}, [
-        tags.span({}, text(label)),
-        tags.small({}, text("required" in opts ? "" : " (optional)")),
-      ]),
-      tags.input({
-        ...opts,
-        name,
-        placeholder,
-        oninput: (event: InputEvent) => formInput(name, (event.target as HTMLInputElement).value),
-      }),
-    ]);
-  }
-
-  function formInput(name: string, value: string) {
-    setForm({ ...form(), [name]: value });
-  }
-
-  // 🚀
-  document.querySelector("#form")?.replaceWith(Form());
-
-  ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
   const consult = async (fileUriOrScheme: string) => {
-    if (!navigator.onLine)
-      return { supported: false, reason: "Internet connection is not available" };
-
-    // TODO: Check if bucket is avail*able + CORS works?
-    return { supported: true };
+    return await worker.call.consult(fileUriOrScheme);
   };
 
   const contextualize = async (tracks: Track[]) => {
-    const b = bucketsFromTracks(tracks);
-    setBuckets({ ...buckets(), ...b });
+    const s = await worker.call.contextualize(tracks);
+    ui?.setBuckets({ ...ui?.buckets(), ...s });
   };
 
   const list = async (cachedTracks: Track[] = []) => {
-    const cache = cachedTracks.reduce((acc: Record<string, Track>, t: Track) => {
-      const uri = URI.parse(t.uri);
-      if (!uri.path) return acc;
-      return { ...acc, [URI.unescapeComponent(uri.path)]: t };
-    }, {});
-
-    const promises = Object.values(buckets()).map(async (bucket) => {
-      const client = createClient(bucket);
-
-      const list = await Array.fromAsync(
-        client.listObjects({
-          prefix: bucket.path.replace(/^\//, ""),
-        }),
-      );
-
-      return list
-        .filter((l) => isAudioFile(l.key))
-        .map((l) => {
-          const cachedTrack = cache[`/${l.key}`];
-
-          const id = cachedTrack?.id || crypto.randomUUID();
-          const stats = cachedTrack?.stats;
-          const tags = cachedTrack?.tags;
-
-          const track: Track = {
-            id,
-            stats,
-            tags,
-            uri: buildURI(bucket, l.key),
-          };
-
-          return track;
-        });
-    });
-
-    return (await Promise.all(promises)).flat(1);
+    return await worker.call.list(cachedTracks);
   };
 
-  const resolve = async ({ method, uri }: { method: string; uri: string }) => {
-    const bucket = parseURI(uri);
-    if (!bucket) return undefined;
-
-    const client = createClient(bucket);
-    const parsedURI = URI.parse(uri);
-    const path = (
-      bucket.path.replace(/\/$/, "") + URI.unescapeComponent(parsedURI.path || "")
-    ).replace(/^\//, "");
-
-    const expiresInSeconds = 60 * 60 * 24 * 7; // 7 days
-    const expiresAtSeconds = Math.round(Date.now() / 1000) + expiresInSeconds;
-    const url = await client.getPresignedUrl(method.toUpperCase() as any, path);
-
-    return { expiresAt: expiresAtSeconds, url };
+  const resolve = async (args: { method: string; uri: string }) => {
+    return await worker.call.resolve(args);
   };
 
   const mount = async () => {};
···
   context.setActionHandler("unmount", unmount);
 
   ////////////////////////////////////////////
-  // 🛠️
+  // UI
   ////////////////////////////////////////////
-  function bucketsFromTracks(tracks: Track[]) {
-    return tracks.reduce((acc: Record<string, Bucket>, track: Track) => {
-      const bucket = parseURI(track.uri);
-      if (!bucket) return acc;
-
-      const id = bucketId(bucket);
-      if (acc[id]) return acc;
-
-      return { ...acc, [id]: bucket };
-    }, {});
-  }
-
-  function bucketId(bucket: Bucket) {
-    return `${bucket.accessKey}:${bucket.secretKey}@${bucket.host}`;
-  }
-
-  function buildURI(bucket: Bucket, path: string) {
-    return URI.serialize({
-      scheme: SCHEME,
-      userinfo: `${bucket.accessKey}:${bucket.secretKey}`,
-      host: bucket.host.replace(/^https?:\/\//, ""),
-      path: path,
-      query: QS.stringify({
-        bucketName: bucket.bucketName,
-        bucketPath: bucket.path,
-        region: bucket.region,
-      }),
-    });
-  }
-
-  function createClient(bucket: Bucket) {
-    return new S3Client({
-      bucket: bucket.bucketName,
-      endPoint: `http${bucket.host.startsWith("localhost") ? "" : "s"}://${bucket.host}`,
-      region: bucket.region,
-      pathStyle: false,
-      accessKey: bucket.accessKey,
-      secretKey: bucket.secretKey,
-    });
-  }
-
-  function encodeAwsUriComponent(a: string) {
-    return encodeURIComponent(a).replace(
-      /(\+|!|"|#|\$|&|'|\(|\)|\*|\+|,|:|;|=|\?|@)/gim,
-      (match) => (ENCODINGS as any)[match] ?? match,
-    );
-  }
-
-  async function loadBuckets() {
-    const i = await IDB.get(IDB_BUCKETS);
-    return i ? i : {};
-  }
-
-  function parseURI(uriString: string): Bucket | undefined {
-    const uri = URI.parse(uriString);
-    if (uri.scheme !== SCHEME) return undefined;
-    if (!uri.host) return undefined;
-
-    const [accessKey, secretKey] = uri.userinfo?.split(":") ?? [];
-    if (!accessKey || !secretKey) return undefined;
-
-    const qs = QS.parse(uri.query || "");
-
-    return {
-      accessKey,
-      bucketName: typeof qs.bucketName === "string" ? qs.bucketName : "",
-      host: uri.host,
-      path: qs.bucketPath === "string" ? qs.bucketPath : "/",
-      region: typeof qs.region === "string" ? qs.region : "",
-      secretKey,
-    };
-  }
-
-  async function saveBuckets(items: Record<string, Bucket>) {
-    await IDB.set(IDB_BUCKETS, items);
-  }
+  const ui = inIframe() ? undefined : await import("@scripts/input/s3/ui");
 </script>

src/scripts/input/native-fs/common.ts

···
-import { type FileSystemDirectoryHandle } from "native-file-system-adapter";
 import * as IDB from "idb-keyval";
 import * as URI from "uri-js";
 import QS from "query-string";

src/scripts/input/native-fs/types.d.ts

···
-import type { FileSystemDirectoryHandle } from "native-file-system-adapter";
-
 export type Handles = Record<string, FileSystemDirectoryHandle>;

src/scripts/input/native-fs/ui.ts

···
 import { computed, effect, type Signal } from "spellcaster";
 import { repeat, tags, text } from "spellcaster/hyperscript.js";
-import { type FileSystemDirectoryHandle } from "native-file-system-adapter";
 
-import { IDB_HANDLES } from "./constants";
 import { mount, mounts, unmount } from "./mounting";
+import { isSupported } from "./common";
 
 ////////////////////////////////////////////
 // SIGNALS
 ////////////////////////////////////////////
 
 // Mount button
-document.getElementById("mount")?.addEventListener("click", () => mount());
+document.getElementById("mount")?.addEventListener("click", () => {
+  if (isSupported()) mount();
+  else alert("The File System Access API is not supported on this platform.");
+});
 
 // Directories
 const dirList = computed(() => {

src/scripts/input/native-fs/worker.ts

···
-import { type FileSystemDirectoryHandle } from "native-file-system-adapter";
 import * as URI from "uri-js";
 
 import type { Track } from "@applets/core/types.d.ts";
 import { SCHEME } from "./constants";
-import {
-  fetchHandles,
-  fetchHandlesList,
-  isSupported,
-  recursiveList,
-  trackHandleId,
-} from "./common";
+import { fetchHandles, fetchHandlesList, recursiveList, trackHandleId } from "./common";
 import { expose } from "@scripts/common";
 
 ////////////////////////////////////////////
···
 // Actions
 
 export async function consult(fileUriOrScheme: string) {
-  if (!isSupported()) {
+  if (!self.FileSystemDirectoryHandle) {
     return { supported: false, reason: "File System Access API is not supported" };
   }
 
···
 export async function contextualize(cachedTracks: Track[]) {}
 
 export async function list(cachedTracks: Track[] = []) {
-  if (!isSupported()) {
-    return cachedTracks;
-  }
-
-  // Continue if supported
   const handles = await fetchHandlesList();
 
   // Recursive listing of all tracks of available handles
···
 
 export async function resolve(args: { uri: string }) {
   const fileUri = args.uri;
-
-  if (!isSupported()) {
-    return undefined;
-  }
 
   const uri = URI.parse(fileUri);
   if (uri.scheme !== SCHEME) return undefined;

src/scripts/input/s3/common.ts

···
+import { S3Client } from "@bradenmacdonald/s3-lite-client";
+import * as IDB from "idb-keyval";
+import * as URI from "uri-js";
+import QS from "query-string";
+
+import type { Track } from "@applets/core/types.d.ts";
+import { ENCODINGS, IDB_BUCKETS, SCHEME } from "./constants";
+import type { Bucket } from "./types";
+
+////////////////////////////////////////////
+// 🛠️
+////////////////////////////////////////////
+export function bucketsFromTracks(tracks: Track[]) {
+  return tracks.reduce((acc: Record<string, Bucket>, track: Track) => {
+    const bucket = parseURI(track.uri);
+    if (!bucket) return acc;
+
+    const id = bucketId(bucket);
+    if (acc[id]) return acc;
+
+    return { ...acc, [id]: bucket };
+  }, {});
+}
+
+export function bucketId(bucket: Bucket) {
+  return `${bucket.accessKey}:${bucket.secretKey}@${bucket.host}`;
+}
+
+export function buildURI(bucket: Bucket, path: string) {
+  return URI.serialize({
+    scheme: SCHEME,
+    userinfo: `${bucket.accessKey}:${bucket.secretKey}`,
+    host: bucket.host.replace(/^https?:\/\//, ""),
+    path: path,
+    query: QS.stringify({
+      bucketName: bucket.bucketName,
+      bucketPath: bucket.path,
+      region: bucket.region,
+    }),
+  });
+}
+
+export function createClient(bucket: Bucket) {
+  return new S3Client({
+    bucket: bucket.bucketName,
+    endPoint: `http${bucket.host.startsWith("localhost") ? "" : "s"}://${bucket.host}`,
+    region: bucket.region,
+    pathStyle: false,
+    accessKey: bucket.accessKey,
+    secretKey: bucket.secretKey,
+  });
+}
+
+export function encodeAwsUriComponent(a: string) {
+  return encodeURIComponent(a).replace(
+    /(\+|!|"|#|\$|&|'|\(|\)|\*|\+|,|:|;|=|\?|@)/gim,
+    (match) => (ENCODINGS as any)[match] ?? match,
+  );
+}
+
+export async function loadBuckets(): Promise<Record<string, Bucket>> {
+  const i = await IDB.get(IDB_BUCKETS);
+  return i ? i : {};
+}
+
+export function parseURI(uriString: string): Bucket | undefined {
+  const uri = URI.parse(uriString);
+  if (uri.scheme !== SCHEME) return undefined;
+  if (!uri.host) return undefined;
+
+  const [accessKey, secretKey] = uri.userinfo?.split(":") ?? [];
+  if (!accessKey || !secretKey) return undefined;
+
+  const qs = QS.parse(uri.query || "");
+
+  return {
+    accessKey,
+    bucketName: typeof qs.bucketName === "string" ? qs.bucketName : "",
+    host: uri.host,
+    path: qs.bucketPath === "string" ? qs.bucketPath : "/",
+    region: typeof qs.region === "string" ? qs.region : "",
+    secretKey,
+  };
+}
+
+export async function saveBuckets(items: Record<string, Bucket>) {
+  await IDB.set(IDB_BUCKETS, items);
+}

src/scripts/input/s3/constants.ts

···
+import manifest from "../../../pages/input/s3/_manifest.json";
+
+export const IDB_PREFIX = "@applets/input/s3";
+export const IDB_BUCKETS = `${IDB_PREFIX}/buckets`;
+export const SCHEME = manifest.input_properties.scheme;
+
+export const ENCODINGS = {
+  "\+": "%2B",
+  "\!": "%21",
+  '\"': "%22",
+  "\#": "%23",
+  "\$": "%24",
+  "\&": "%26",
+  "'": "%27",
+  "\(": "%28",
+  "\)": "%29",
+  "\*": "%2A",
+  "\,": "%2C",
+  "\:": "%3A",
+  "\;": "%3B",
+  "\=": "%3D",
+  "\?": "%3F",
+  "\@": "%40",
+};

src/scripts/input/s3/types.d.ts

···
+export type Bucket = {
+  accessKey: string;
+  bucketName: string;
+  host: string;
+  path: string;
+  region: string;
+  secretKey: string;
+};

src/scripts/input/s3/ui.ts

···
+import { computed, effect, type Signal, signal } from "spellcaster";
+import { type Props, repeat, tags, text } from "spellcaster/hyperscript.js";
+
+import type { Bucket } from "./types";
+import { bucketId, loadBuckets, saveBuckets } from "./common";
+
+////////////////////////////////////////////
+// UI
+////////////////////////////////////////////
+export const [buckets, setBuckets] = signal<Record<string, Bucket>>(await loadBuckets());
+export const [form, setForm] = signal<{
+  access_key?: string;
+  bucket_name?: string;
+  host?: string;
+  path?: string;
+  region?: string;
+  secret_key?: string;
+}>({});
+
+export const bucketsMap = computed(() => {
+  return new Map(Object.entries(buckets()));
+});
+
+effect(() => {
+  saveBuckets(buckets());
+});
+
+////////////////////////////////////////////
+// UI ~ BUCKETS
+////////////////////////////////////////////
+const Bucket = (bucket: Signal<Bucket>) => {
+  const onclick = () => {
+    const b = bucket();
+    const id = bucketId(b);
+
+    const col = { ...buckets() };
+    delete col[id];
+
+    setBuckets(col);
+  };
+
+  return tags.li({ onclick, style: "cursor: pointer" }, text(bucket().host));
+};
+
+const BucketList = computed(() => {
+  if (bucketsMap().size === 0) {
+    return tags.p({ id: "buckets" }, [tags.small({}, text("Nothing added so far."))]);
+  }
+
+  return tags.ul({ id: "buckets" }, repeat(bucketsMap, Bucket));
+});
+
+effect(() => {
+  document.querySelector("#buckets")?.replaceWith(BucketList());
+});
+
+////////////////////////////////////////////
+// UI ~ FORM
+////////////////////////////////////////////
+function addBucket(event: Event) {
+  event.preventDefault();
+
+  const f = form();
+
+  const bucket: Bucket = {
+    accessKey: f.access_key || "",
+    bucketName: f.bucket_name || "",
+    host: f.host || "s3.amazonaws.com",
+    path: f.path || "/",
+    region: f.region || "us-east-1",
+    secretKey: f.secret_key || "",
+  };
+
+  setBuckets({
+    ...buckets(),
+    [bucketId(bucket)]: bucket,
+  });
+}
+
+function Form() {
+  return tags.form({ onsubmit: addBucket }, [
+    tags.fieldset({ className: "grid" }, [
+      Input("access_key", "Access key", "r31w7m9c", { required: true }),
+      Input("secret_key", "Secret key", "v02g2l29", { required: true }),
+    ]),
+    tags.fieldset({ className: "grid" }, [
+      Input("bucket_name", "Bucket name", "bucket", { required: true }),
+      Input("region", "Region", "us-east-1", { required: true }),
+    ]),
+    tags.fieldset({ className: "grid" }, [
+      Input("host", "Host", "s3.amazonaws.com", { required: true }),
+      Input("path", "Path", "/"),
+    ]),
+    tags.fieldset({ className: "grid" }, [tags.input({ type: "submit", value: "Connect" }, [])]),
+  ]);
+}
+
+function Input(name: string, label: string, placeholder: string, opts: Props = {}) {
+  return tags.label({}, [
+    tags.span({}, [
+      tags.span({}, text(label)),
+      tags.small({}, text("required" in opts ? "" : " (optional)")),
+    ]),
+    tags.input({
+      ...opts,
+      name,
+      placeholder,
+      oninput: (event: InputEvent) => formInput(name, (event.target as HTMLInputElement).value),
+    }),
+  ]);
+}
+
+function formInput(name: string, value: string) {
+  setForm({ ...form(), [name]: value });
+}
+
+// 🚀
+document.querySelector("#form")?.replaceWith(Form());

src/scripts/input/s3/worker.ts

···
+import * as URI from "uri-js";
+
+import type { Track } from "@applets/core/types.d.ts";
+import { isAudioFile } from "@scripts/input/common";
+import { bucketsFromTracks, buildURI, createClient, loadBuckets, parseURI } from "./common";
+import { expose } from "@scripts/common";
+
+////////////////////////////////////////////
+// ACTIONS
+////////////////////////////////////////////
+const actions = expose({
+  consult,
+  contextualize,
+  list,
+  resolve,
+});
+
+export type Actions = typeof actions;
+
+// Actions
+
+async function consult(fileUriOrScheme: string) {
+  if (!navigator.onLine)
+    return { supported: false, reason: "Internet connection is not available" };
+
+  // TODO: Check if bucket is available + CORS works?
+  return { supported: true };
+}
+
+async function contextualize(tracks: Track[]) {
+  return bucketsFromTracks(tracks);
+}
+
+async function list(cachedTracks: Track[] = []) {
+  const cache = cachedTracks.reduce((acc: Record<string, Track>, t: Track) => {
+    const uri = URI.parse(t.uri);
+    if (!uri.path) return acc;
+    return { ...acc, [URI.unescapeComponent(uri.path)]: t };
+  }, {});
+
+  const buckets = await loadBuckets();
+  const promises = Object.values(buckets).map(async (bucket) => {
+    const client = createClient(bucket);
+
+    const list = await Array.fromAsync(
+      client.listObjects({
+        prefix: bucket.path.replace(/^\//, ""),
+      }),
+    );
+
+    return list
+      .filter((l) => isAudioFile(l.key))
+      .map((l) => {
+        const cachedTrack = cache[`/${l.key}`];
+
+        const id = cachedTrack?.id || crypto.randomUUID();
+        const stats = cachedTrack?.stats;
+        const tags = cachedTrack?.tags;
+
+        const track: Track = {
+          id,
+          stats,
+          tags,
+          uri: buildURI(bucket, l.key),
+        };
+
+        return track;
+      });
+  });
+
+  return (await Promise.all(promises)).flat(1);
+}
+
+async function resolve({ method, uri }: { method: string; uri: string }) {
+  const bucket = parseURI(uri);
+  if (!bucket) return undefined;
+
+  const client = createClient(bucket);
+  const parsedURI = URI.parse(uri);
+  const path = (
+    bucket.path.replace(/\/$/, "") + URI.unescapeComponent(parsedURI.path || "")
+  ).replace(/^\//, "");
+
+  const expiresInSeconds = 60 * 60 * 24 * 7; // 7 days
+  const expiresAtSeconds = Math.round(Date.now() / 1000) + expiresInSeconds;
+  const url = await client.getPresignedUrl(method.toUpperCase() as any, path);
+
+  return { expiresAt: expiresAtSeconds, url };
+}