|
|
import { id as mid } from "module";
|
|
|
import { TraceSource } from "@implab/core-amd/log/TraceSource";
|
|
|
import { MapOf } from "@implab/core-amd/interfaces";
|
|
|
import { mixin } from "@implab/core-amd/safe";
|
|
|
|
|
|
const trace = TraceSource.get(mid);
|
|
|
|
|
|
|
|
|
function on<T extends keyof HTMLElementEventMap>(node: HTMLElement, eventName: T, handler: (this: HTMLElement, ev: HTMLElementEventMap[T]) => unknown): () => void {
|
|
|
// Add an event listener to a DOM node
|
|
|
node.addEventListener(eventName, handler, false);
|
|
|
|
|
|
return () => node.removeEventListener(eventName, handler, false);
|
|
|
}
|
|
|
|
|
|
interface NodeLoadResult {
|
|
|
node: HTMLElement;
|
|
|
}
|
|
|
|
|
|
class DomInject {
|
|
|
injectionPoint?: HTMLElement;
|
|
|
injectAfter?: HTMLElement;
|
|
|
|
|
|
_map: MapOf<Promise<NodeLoadResult>> = {};
|
|
|
|
|
|
_inject<T extends keyof HTMLElementTagNameMap>(name: T, attr: Partial<HTMLElementTagNameMap[T]>) {
|
|
|
const node = document.createElement(name);
|
|
|
|
|
|
return new Promise<NodeLoadResult>((ok, fail) => {
|
|
|
|
|
|
const cleanup = () => {
|
|
|
noerr();
|
|
|
noload();
|
|
|
};
|
|
|
|
|
|
const noload = on(node, "load", () => {
|
|
|
ok({ node });
|
|
|
cleanup();
|
|
|
});
|
|
|
|
|
|
const noerr = on(node, "error", e => {
|
|
|
fail({
|
|
|
error: e,
|
|
|
node
|
|
|
});
|
|
|
cleanup();
|
|
|
});
|
|
|
|
|
|
mixin(node, attr);
|
|
|
|
|
|
const _injectionPoint = this.injectionPoint || document.head;
|
|
|
const _injectBefore = this.injectAfter ? this.injectAfter.nextSibling : null;
|
|
|
|
|
|
_injectionPoint.insertBefore(node, _injectBefore);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
async injectScript(url: string) {
|
|
|
let d = this._map[url];
|
|
|
if (d === undefined) {
|
|
|
trace.log("js {0}", url);
|
|
|
d = this._inject("script", {
|
|
|
type: "text/javascript",
|
|
|
charset: "utf-8",
|
|
|
src: url
|
|
|
});
|
|
|
this._map[url] = d;
|
|
|
}
|
|
|
try {
|
|
|
await d;
|
|
|
trace.log("done {0}", url);
|
|
|
} catch (e) {
|
|
|
trace.error("failed {0}: {1}", url, e);
|
|
|
throw e;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async injectStylesheet(url: string) {
|
|
|
let d = this._map[url];
|
|
|
if (d === undefined) {
|
|
|
trace.log("js {0}", url);
|
|
|
d = this._inject("link", {
|
|
|
type: "text/css",
|
|
|
rel: "stylesheet",
|
|
|
href: url
|
|
|
});
|
|
|
this._map[url] = d;
|
|
|
}
|
|
|
try {
|
|
|
await d;
|
|
|
trace.log("done {0}", url);
|
|
|
} catch (e) {
|
|
|
trace.error("failed {0}: {1}", url, e);
|
|
|
throw e;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const instance = new DomInject();
|
|
|
export default instance;
|
|
|
|
