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
|
import { Ok, Error, isEqual } from "./gleam.mjs";
import { Dispatch, Shutdown } from "./lustre/internals/runtime.mjs";
import {
ComponentAlreadyRegistered,
BadComponentName,
NotABrowser,
} from "./lustre.mjs";
import { LustreClientApplication, is_browser } from "./client-runtime.ffi.mjs";
export function register({ init, update, view, on_attribute_change }, name) {
if (!is_browser()) return new Error(new NotABrowser());
if (!name.includes("-")) return new Error(new BadComponentName(name));
if (window.customElements.get(name)) {
return new Error(new ComponentAlreadyRegistered(name));
}
window.customElements.define(
name,
makeComponent(init, update, view, on_attribute_change),
);
return new Ok(undefined);
}
function makeComponent(init, update, view, on_attribute_change) {
return class LustreClientComponent extends HTMLElement {
#root = document.createElement("div");
#application = null;
static get observedAttributes() {
return on_attribute_change.entries().map(([name, _]) => name);
}
constructor() {
super();
on_attribute_change.forEach((decoder, name) => {
Object.defineProperty(this, name, {
get() {
return this[`_${name}`] || this.getAttribute(name);
},
set(value) {
const prev = this[name];
const decoded = decoder(value);
if (decoded.isOk() && !isEqual(prev, value)) {
this.#application
? this.#application.send(new Dispatch(decoded[0]))
: window.requestAnimationFrame(() =>
this.#application.send(new Dispatch(decoded[0])),
);
}
if (typeof value === "string") {
this.setAttribute(name, value);
} else {
this[`_${name}`] = value;
}
},
});
});
}
connectedCallback() {
this.#application = new LustreClientApplication(
init(),
update,
view,
this.#root,
);
this.appendChild(this.#root);
}
disconnectedCallback() {
this.#application.send(new Shutdown());
}
};
}
|
