1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import { morph } from "./runtime.ffi.mjs";
import { Ok, Error } from "./gleam.mjs";
import { ElementNotFound } from "./lustre.mjs";
import { map } from "./lustre/element.mjs";
// RUNTIME ---------------------------------------------------------------------
///
///
export class App {
#root = null;
#state = null;
#queue = [];
#commands = [];
#willUpdate = false;
#didUpdate = false;
#init = null;
#update = null;
#view = null;
constructor(init, update, render) {
this.#init = init;
this.#update = update;
this.#view = render;
}
start(selector = "body") {
if (this.#root) return this;
try {
const el = document.querySelector(selector);
const [next, cmds] = this.#init();
this.#root = el;
this.#state = next;
this.#commands = cmds[0].toArray();
this.#didUpdate = true;
window.requestAnimationFrame(() => this.#tick());
return new Ok((msg) => this.dispatch(msg));
} catch (_) {
return new Error(new ElementNotFound());
}
}
dispatch(msg) {
if (!this.#willUpdate) window.requestAnimationFrame(() => this.#tick());
this.#queue.push(msg);
this.#willUpdate = true;
}
#render() {
const node = this.#view(this.#state);
const vdom = map(node, (msg) => this.dispatch(msg));
morph(this.#root, vdom);
}
#tick() {
this.#flush();
this.#didUpdate && this.#render();
this.#didUpdate = false;
this.#willUpdate = false;
}
#flush(times = 0) {
if (this.#queue.length) {
while (this.#queue.length) {
const [next, cmds] = this.#update(this.#state, this.#queue.shift());
this.#state = next;
this.#commands.concat(cmds[0].toArray());
}
this.#didUpdate = true;
}
// Each update can produce commands which must now be executed.
while (this.#commands.length) this.#commands.shift()(this.dispatch);
// Synchronous commands will immediately queue a message to be processed. If
// it is reasonable, we can process those updates too before proceeding to
// the next render.
if (this.#queue.length) {
times >= 5 ? console.warn(tooManyUpdates) : this.#flush(++times);
}
}
}
export const setup = (init, update, render) => new App(init, update, render);
export const start = (app, selector) => app.start(selector);
|
