Something went wrong. Try again.
the next generation of the in-browser educational proof assistant
Something went wrong. Try again.
4.6 kB · 172 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
export interface Component { toString(): string; dependencyChanged(id: string, comp: Component, msg: any): void;}
let toInitialise: Array<string> = [];
export async function load(url: string): Promise<Handler> { if (url in database) { return database[url]; } else { let requestURI = url.split('/').slice(0, -1).join("/"); let response = await fetch(requestURI); let body = await response.text(); const parser = new DOMParser(); const htmldoc = parser.parseFromString(body, "text/html") /*let host = document.createElement("div"); host.style.border = "1px solid red"; document.body.appendChild(host); let shadow = host.attachShadow({ mode: "open" }); for (let x of knownTags) { for (let y of htmldoc.querySelectorAll(x)) { shadow.appendChild(document.adoptNode(y)); } }*/ for (let x of knownTags) { for (let y of htmldoc.querySelectorAll(x)) { window.customElements.upgrade(document.adoptNode(y)) } } while (toInitialise.length) { database[toInitialise.shift() ?? ""]?.initialise(); } if (!(url in database)) { throw "ERROR" } else { return database[url]; } }}
class Handler { url: string; component: Component | null; subscribers: Array<Handler>; deps: Record<string, Handler | null>; status: "loading" | "ready";
addSubscriber(h: Handler) { this.subscribers.push(h); if (this.status == "ready") { h.dependencyReady(this.url) } } initialise: () => void; dependencyReady: (url: string) => void; notifySubscribers: (msg: any) => void; constructor( url: string, textual: string, deps: Array<string>, maker: new ( data: string, deps: Record<string, Component>, signal: (msg: any) => void, initialised: (msg: any) => void, view?: HTMLElement) => Component, view?: HTMLElement) { this.url = url; this.status = "loading"; this.deps = {}; let awaiting: Array<string> = []; this.subscribers = []; for (let dep of deps) { if (dep != "") { awaiting.push(dep); this.deps[dep] = null; } } this.component = null; this.notifySubscribers = function(msg: any) { console.log(this.url, this.subscribers) if (this.component != null) { for (let sub of this.subscribers) { if (sub.component != null) { sub.component.dependencyChanged(this.url, this.component, msg) } } window.localStorage.setItem(this.url, this.component.toString()) } } this.initialise = function() { for (let dep in this.deps) { load(dep).then((h) => { this.deps[dep] = h; h.addSubscriber(this); }) } if (awaiting.length == 0) { this.component = new maker(textual, {}, (msg) => { this.notifySubscribers(msg) }, (msg) => { this.status = "ready"; for (let sub of this.subscribers) { sub.dependencyReady(this.url); } }, view); } } this.dependencyReady = function(url) { let index = awaiting.indexOf(url); if (index > -1) { awaiting.splice(index, 1); }
if (awaiting.length == 0) { let deps2: Record<string, Component> = {}; for (let dep in this.deps) { let v = this.deps[dep]?.component; if (v != null && v != undefined) { deps2[dep] = v; } } this.component = new maker(textual, deps2, (msg) => { this.notifySubscribers(msg) }, (msg) => { this.status = "ready"; for (let sub of this.subscribers) { sub.dependencyReady(this.url); } }, view); } } }}
let knownTags: Array<string> = [];export let database: Record<string, Handler> = {};
export function setup( spec: Record<string, new (data: string, deps: Record<string, Component>, signal: (msg: any) => void, initialised: (msg: any) => void, view?: HTMLElement) => Component>) { let promises = []; for (const name in spec) { const maker = spec[name]; knownTags.push(name); window.customElements.define(name, class extends HTMLElement { constructor() { super(); let id = this.attributes.getNamedItem("id")?.value ?? "default"; toInitialise.push(id); let deps = (this.attributes.getNamedItem("deps")?.value ?? "").split(" "); let text = window.localStorage.getItem(id) ?? this.innerHTML; this.innerHTML = "loading"; if (this.id in database) { this.innerHTML = "duplicate element" } else { database[this.id] = new Handler(this.id, text, deps, maker, this); } } }); promises.push(window.customElements.whenDefined(name)) } Promise.all(promises).then(() => { while (toInitialise.length) { database[toInitialise.shift() ?? ""]?.initialise(); } })}