Experiment to rebuild Diffuse using web applets.
1<script>
2 import type { Actions } from "@scripts/engine/queue/worker";
3 import type { Track } from "@applets/core/types";
4 import type { State } from "./types.d.ts";
5
6 import { register } from "@scripts/applet/common";
7 import { endpoint, SharedWorker } from "@scripts/common";
8
9 ////////////////////////////////////////////
10 // SETUP
11 ////////////////////////////////////////////
12 const worker = endpoint<Actions>(
13 new SharedWorker(new URL("../../../scripts/engine/queue/worker", import.meta.url), {
14 type: "module",
15 }).port,
16 );
17
18 // Register applet
19 const context = register<State>();
20
21 // Initial state
22 context.data = {
23 past: [],
24 now: null,
25 future: [],
26 };
27
28 ////////////////////////////////////////////
29 // ACTIONS
30 ////////////////////////////////////////////
31 context.setActionHandler("add", add);
32 context.setActionHandler("pool", pool);
33 context.setActionHandler("shift", shift);
34 context.setActionHandler("unshift", unshift);
35
36 async function add(items: Track[]) {
37 context.data = await worker.call.add(context.data, items);
38 }
39
40 async function pool(items: Track[]) {
41 context.data = await worker.call.pool(context.data, items);
42 }
43
44 async function shift() {
45 context.data = await worker.call.shift(context.data);
46 }
47
48 async function unshift() {
49 context.data = await worker.call.unshift(context.data);
50 }
51</script>