wip: output configurator

src/components/configurator/output/element.js

···
+import { DiffuseElement } from "@common/element.js";
+import { computed, signal } from "@common/signal.js";
+
+/**
+ * @import {ProxiedActions} from "@common/worker.d.ts"
+ * @import {Track} from "@definitions/types.d.ts"
+ * @import {OutputManager, OutputElement} from "@components/output/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * @implements {OutputManager<Track[]>}
+ */
+class OutputConfigurator extends DiffuseElement {
+  static NAME = "diffuse/configurator/output";
+  static WORKER_URL = "components/configurator/output/worker.js";
+
+  constructor() {
+    super();
+
+    /** @type {OutputManager<Track[]>} */
+    const manager = {
+      tracks: {
+        collection: computed(() => {
+          return this.#memory.tracks.value;
+        }),
+        reload: async () => {},
+        save: async (newTracks) => {
+          this.#memory.tracks.value = newTracks;
+        },
+        state: () => "loaded",
+      },
+    };
+
+    // Assign manager properties to class
+    this.tracks = manager.tracks;
+  }
+
+  // SIGNALS
+
+  #memory = {
+    tracks: signal(/** @type {Track[]} */ ([])),
+  };
+
+  // LIFECYCLE
+
+  /**
+   * @override
+   */
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+export default OutputConfigurator;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = OutputConfigurator;
+export const NAME = "dc-output";
+
+customElements.define(NAME, CLASS);

src/components/output/polymorphic/indexed-db/element.js

···
 /**
  * @import {ProxiedActions} from "@common/worker.d.ts"
  * @import {OutputManager, OutputWorkerActions} from "../../types.d.ts"
+ * @import {SupportedDataTypes} from "./types.d.ts"
  */
 
 ////////////////////////////////////////////
···
   constructor() {
     super();
 
-    /** @type {ProxiedActions<OutputWorkerActions>} */
+    /** @type {ProxiedActions<OutputWorkerActions<SupportedDataTypes>>} */
     const p = this.workerProxy();
 
-    // Manager
+    /** @type {OutputManager<SupportedDataTypes>} */
     const manager = outputManager({
       tracks: {
-        empty: () => [],
-        get: p.getTracks,
-        put: p.putTracks,
+        empty: () => undefined,
+        get: () => p.get({ name: this.#cat("tracks") }),
+        put: (data) => p.put({ name: this.#cat("tracks"), data }),
       },
     });
 
     this.tracks = manager.tracks;
+  }
+
+  /** @param {string} name */
+  #cat(name) {
+    const key = this.hasAttribute("key") ? this.getAttribute("key") + "/" : "";
+    return `${key}${name}`;
   }
 }
 

src/components/output/polymorphic/indexed-db/types.d.ts

···
+export type SupportedDataTypes = any;

src/components/output/polymorphic/indexed-db/worker.js

···
 import { ostiary, rpc } from "@common/worker.js";
 
 /**
- * @import {Track} from "@definitions/types.d.ts";
+ * @import {OutputWorkerActions} from "@components/output/types.d.ts";
+ * @import {SupportedDataTypes} from "./types.d.ts"
  */
 
 ////////////////////////////////////////////
···
 ////////////////////////////////////////////
 
 /**
- * @returns {Promise<Track[]>}
+ * @type {OutputWorkerActions<SupportedDataTypes>["get"]}
  */
-export async function getTracks() {
-  /** @type {Track[] | null} */
-  const tracks = await get({ name: "tracks.json" });
-  return tracks ?? [];
+export async function get({ name }) {
+  return await IDB.get(`${IDB_PREFIX}/${name}`);
 }
 
 /**
- * @param {Track[]} tracks
+ * @type {OutputWorkerActions<SupportedDataTypes>["put"]}
  */
-export async function putTracks(tracks) {
-  await put({ name: "tracks.json", data: tracks });
+export async function put({ data, name }) {
+  return await IDB.set(`${IDB_PREFIX}/${name}`, data);
 }
-
 ////////////////////////////////////////////
 // ⚡️
 ////////////////////////////////////////////
 
 ostiary((context) => {
   rpc(context, {
-    getTracks,
-    putTracks,
+    get,
+    put,
   });
 });
-
-////////////////////////////////////////////
-// ⛔️
-////////////////////////////////////////////
-
-/**
- * @param {{ name: string }} _
- */
-async function get({ name }) {
-  return await IDB.get(`${IDB_PREFIX}/${name}`);
-}
-
-/**
- * @param {{ data: any; name: string }} _
- */
-async function put({ data, name }) {
-  return await IDB.set(`${IDB_PREFIX}/${name}`, data);
-}

src/components/output/types.d.ts

···
 import type { SignalReader } from "@common/signal.d.ts";
-import type { Track } from "@definitions/types.d.ts";
 import type { DiffuseElement } from "@common/element.js";
 
 export type OutputElement<Tracks> = DiffuseElement & OutputManager<Tracks>;
···
   };
 };
 
-export type OutputWorkerActions = {
-  getTracks(): Promise<Track[]>;
-  putTracks(tracks: Track[]): Promise<void>;
+export type OutputWorkerActions<DataType> = {
+  get(args: { name: string }): Promise<DataType>;
+  put(args: { data: DataType; name: string }): Promise<void>;
 };

src/components/transformer/output/base.js

···
+import { DiffuseElement, query } from "@common/element.js";
+import { computed, signal } from "@common/signal.js";
+
+/**
+ * @import { OutputElement, OutputManager } from "../../output/types.d.ts"
+ */
+
+/**
+ * @template T
+ */
+export class OutputTransformer extends DiffuseElement {
+  // SIGNALS
+
+  #output = signal(/** @type {OutputElement<T> | undefined} */ (undefined));
+  #outputWhenDefined = Promise.withResolvers();
+
+  output = {
+    whenDefined: this.#outputWhenDefined.promise,
+    signal: this.#output.get,
+  };
+
+  // LIFECYCLE
+
+  /**
+   * @override
+   */
+  connectedCallback() {
+    super.connectedCallback();
+
+    /** @type {OutputElement<T>} */
+    const output = query(this, "output-selector");
+
+    // When defined
+    customElements.whenDefined(output.localName).then(() => {
+      this.#output.value = output;
+      this.#outputWhenDefined.resolve(null);
+    });
+  }
+
+  // MANAGER
+
+  base() {
+    /** @type {OutputManager<T | undefined>} */
+    const m = {
+      tracks: {
+        collection: computed(() => {
+          return this.output.signal()?.tracks?.collection();
+        }),
+        reload: () => {
+          return this.output.signal()?.tracks?.reload() ?? Promise.resolve();
+        },
+        save: async (newTracks) => {
+          if (newTracks === undefined) return;
+          await this.output.whenDefined;
+          await this.output.signal()?.tracks.save(newTracks);
+        },
+        state: computed(() =>
+          this.output.signal()?.tracks.state() ?? "loading"
+        ),
+      },
+    };
+
+    return m;
+  }
+}

src/components/transformer/output/refiner/default/element.js

···
-import { DiffuseElement, query } from "@common/element.js";
-import { computed, signal } from "@common/signal.js";
+import { computed } from "@common/signal.js";
+import { OutputTransformer } from "../../base.js";
 
 /**
- * @import { OutputElement, OutputManager } from "../../../../output/types.d.ts"
+ * @import { OutputManager } from "../../../../output/types.d.ts"
  * @import { Track } from "@definitions/types.d.ts"
  */
 
-class DefaultOutputRefinerTransformer extends DiffuseElement {
+/**
+ * @extends {OutputTransformer<Track[]>}
+ */
+class DefaultOutputRefinerTransformer extends OutputTransformer {
   constructor() {
     super();
+
+    const base = this.base();
 
     /** @type {OutputManager<Track[]>} */
     const manager = {
       tracks: {
+        ...base.tracks,
         collection: computed(() => {
-          return this.#defined.value
-            ? this.output?.tracks?.collection() ?? []
-            : [];
+          return base.tracks.collection() ?? [];
         }),
-        reload: () => this.output?.tracks?.reload() ?? Promise.resolve(),
         save: async (newTracks) => {
           const filtered = newTracks.filter((t) => !t.ephemeral);
-
-          if (!this.output) return;
-
-          await customElements.whenDefined(this.output.localName);
-          await this.output.tracks.save(filtered);
+          await base.tracks.save(filtered);
         },
-        state: computed(() => this.output?.tracks.state() ?? "loading"),
       },
     };
 
     // Assign manager properties to class
     this.tracks = manager.tracks;
-  }
-
-  /** @type {OutputElement<Track[]> | undefined} */
-  output = undefined;
-
-  // SIGNALS
-
-  #defined = signal(false);
-
-  // LIFECYCLE
-
-  /**
-   * @override
-   */
-  connectedCallback() {
-    super.connectedCallback();
-
-    /** @type {OutputElement<Track[]>} */
-    const output = query(this, "output-selector");
-    this.output = output;
-
-    // When defined
-    customElements.whenDefined(this.output.localName).then(
-      () => this.#defined.value = true,
-    );
   }
 }
 

src/components/transformer/output/string/json/element.js

···
-import { DiffuseElement, query } from "@common/element.js";
-import { computed, signal } from "@common/signal.js";
+import { computed } from "@common/signal.js";
+import { OutputTransformer } from "../../base.js";
 
 /**
- * @import { OutputElement, OutputManager } from "../../../../output/types.d.ts"
+ * @import { OutputManager } from "../../../../output/types.d.ts"
  * @import { Track } from "@definitions/types.d.ts"
  */
 
-class JsonStringOutputTransformer extends DiffuseElement {
+/**
+ * @extends {OutputTransformer<string>}
+ */
+class JsonStringOutputTransformer extends OutputTransformer {
   constructor() {
     super();
 
+    const base = this.base();
+
     /** @type {OutputManager<Track[]>} */
     const manager = {
       tracks: {
+        ...base.tracks,
         collection: computed(() => {
-          const json = this.#defined.value
-            ? this.output?.tracks?.collection() ?? []
-            : [];
-
-          // In addition to the above, Some polymorphic outputs
-          // use an empty array as the default return value.
-          if (Array.isArray(json)) return json;
+          const json = base.tracks.collection() ?? "[]";
 
           // Try parsing JSON
           try {
···
             return [];
           }
         }),
-        reload: () => this.output?.tracks?.reload() ?? Promise.resolve(),
         save: async (newTracks) => {
           const json = JSON.stringify(newTracks);
-
-          if (!this.output) return;
-
-          await customElements.whenDefined(this.output.localName);
-          await this.output.tracks.save(json);
+          await base.tracks.save(json);
         },
-        state: computed(() => this.output?.tracks?.state() ?? "loading"),
       },
     };
 
     // Assign manager properties to class
     this.tracks = manager.tracks;
-  }
-
-  /** @type {OutputElement<string> | undefined} */
-  output = undefined;
-
-  // SIGNALS
-
-  #defined = signal(false);
-
-  // LIFECYCLE
-
-  /**
-   * @override
-   */
-  connectedCallback() {
-    super.connectedCallback();
-
-    /** @type {OutputElement<string>} */
-    const output = query(this, "output-selector");
-    this.output = output;
-
-    // When defined
-    customElements.whenDefined(this.output.localName).then(
-      () => this.#defined.value = true,
-    );
   }
 }
 

src/themes/webamp/index.js

···
-// import "@components/orchestrator/process-tracks/element.js";
+import "@components/orchestrator/process-tracks/element.js";
 import "@components/orchestrator/queue-tracks/element.js";
 import "@components/input/opensubsonic/element.js";
 import "@components/input/s3/element.js";