A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: simplify element

+34 -55
+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
··· 1 + import { Signal } from "@common/signals.d.ts"; 2 + import { Track } from "@elements/core/types.d.ts"; 3 + 4 + export type State = { tracks: Signal<Track[]> };
+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 `