Experiment to rebuild Diffuse using web applets.
1<div id="container"></div>
2
3<script>
4 import { applets } from "@web-applets/sdk";
5 import { QueueItem, State } from "./types";
6
7 ////////////////////////////////////////////
8 // SETUP
9 ////////////////////////////////////////////
10 const context = applets.register<State>();
11
12 // Initial state
13 context.data = {
14 past: [],
15 now: null,
16 future: [],
17 };
18
19 // State helpers
20 function update(partial: Partial<State>): void {
21 context.data = { ...context.data, ...partial };
22 }
23
24 ////////////////////////////////////////////
25 // ACTIONS
26 ////////////////////////////////////////////
27 context.setActionHandler("add", add);
28 context.setActionHandler("shift", shift);
29
30 function add(items: QueueItem[]) {
31 update({ future: [...context.data.future, ...items] });
32 }
33
34 function shift() {
35 const now = context.data.future[0] || null;
36 const future = context.data.future.slice(1);
37 const past = context.data.now ? [...context.data.past, context.data.now] : context.data.past;
38
39 update({ past, now, future });
40 }
41</script>