forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: simplify element
+34
-55
+24
-19
src/common/element.js
+24
-19
src/common/element.js
···
1
-
import morphdom from "morphdom";
1
+
import morphdom from "morphdom/dist/morphdom.js";
2
+
import { effect } from "@common/signals.js";
2
3
3
4
/**
4
-
* @import {HtmlTagFunction, RenderArg} from "./element.d.ts"
5
+
* @import {HtmlTagFunction} from "./element.d.ts"
5
6
*/
6
7
7
-
/**
8
-
* @template [State={}]
9
-
*/
10
8
export default class DiffuseElement extends HTMLElement {
9
+
#teardown = () => {};
10
+
11
11
constructor() {
12
12
super();
13
13
this.process = this.process.bind(this);
14
14
}
15
15
16
16
process() {
17
+
if (!("render" in this && typeof this.render === "function")) return;
18
+
if (!("state" in this)) return;
19
+
17
20
const tmp = this.render({
18
21
html: this.html,
19
22
state: this.state,
···
23
26
updated.innerHTML = tmp.trim();
24
27
const root = this.shadowRoot ? this.shadowRoot : this;
25
28
26
-
/* @ts-ignore */
27
-
morphdom(
29
+
/** @type {Node} */
30
+
const result = morphdom(
28
31
root,
29
32
updated,
30
33
{
31
34
childrenOnly: true,
32
35
},
33
36
);
37
+
38
+
return result;
34
39
}
35
40
36
41
/**
···
49
54
return String.raw({ raw: strings }, ...values);
50
55
}
51
56
52
-
// TO OVERRIDE
57
+
// LIFECYCLE
58
+
59
+
connectedCallback() {
60
+
if (!("render" in this && typeof this.render === "function")) return;
61
+
62
+
this.#teardown = effect(() => {
63
+
if (!("render" in this && typeof this.render === "function")) return;
64
+
if (!("state" in this)) return;
53
65
54
-
/**
55
-
* @param {RenderArg<State>} _arg
56
-
*/
57
-
render(_arg) {
58
-
return "";
66
+
this.innerHTML = this.render({ html: this.html, state: this.state });
67
+
});
59
68
}
60
69
61
-
/**
62
-
* @returns {State}
63
-
*/
64
-
get state() {
65
-
/* @ts-ignore */
66
-
return {};
70
+
disconnectedCallback() {
71
+
this.#teardown();
67
72
}
68
73
}
+4
src/elements/constituent/blur/browser-list.d.ts
+4
src/elements/constituent/blur/browser-list.d.ts
+6
-36
src/elements/constituent/blur/browser-list.js
+6
-36
src/elements/constituent/blur/browser-list.js
···
1
1
import DiffuseElement from "@common/element.js";
2
-
import { effect, signal } from "@common/signals.js";
2
+
import { signal } from "@common/signals.js";
3
3
4
4
/**
5
5
* @import {RenderArg} from "@common/element.d.ts"
6
-
* @import {Signal} from "@common/signals.d.ts"
7
6
* @import {Track} from "@elements/core/types.d.ts"
7
+
*
8
+
* @import {State} from "./browser-list.d.ts"
8
9
*/
9
10
10
-
/**
11
-
* @typedef {{ tracks: Signal<Track[]> }} State
12
-
*/
13
-
14
-
/**
15
-
* @type {Track[]}
16
-
*/
17
-
const TRACKS = [];
18
-
19
11
////////////////////////////////////////////////
20
12
// ELEMENT
21
13
////////////////////////////////////////////////
22
14
23
15
class List extends DiffuseElement {
24
-
#teardown = () => {};
25
-
26
-
/**
27
-
* @type {Signal<Track[]>}
28
-
*/
29
-
tracks = signal(TRACKS);
16
+
tracks = signal(/** @type {Track[]} */ ([]));
30
17
31
18
// STATE
32
19
33
-
/**
34
-
* @override
35
-
* @returns {State}
36
-
*/
37
20
get state() {
38
21
return {
39
22
tracks: this.tracks,
40
23
};
41
24
}
42
25
43
-
// LIFECYCLE
44
-
45
-
connectedCallback() {
46
-
this.#teardown = effect(() => {
47
-
this.innerHTML = this.render({ html: this.html, state: this.state });
48
-
});
49
-
}
50
-
51
-
disconnectedCallback() {
52
-
this.#teardown();
53
-
}
54
-
55
26
// RENDER
56
27
57
28
/**
58
-
* @override
59
29
* @param {RenderArg<State>} _
60
30
*/
61
31
render({ html, state }) {
62
-
console.log("Rendering", state.tracks);
32
+
console.log("Rendering", state.tracks());
63
33
64
-
const list = (state.tracks() || []).map((t) =>
34
+
const list = state.tracks().map((t) =>
65
35
html`
66
36
<div id="track-${t.id}">${t}</div>
67
37
`