From 423a88a168345e8355ac250e2e62466a93f5e009 Mon Sep 17 00:00:00 2001 From: Dylan Piercey Date: Fri, 8 Oct 2021 09:49:54 -0700 Subject: [PATCH] feat: improve client runtime bundle size & output --- .../micro-frame/util/stream/web.component.ts | 30 ++++++++++--------- .../micro-frame/util/writable-dom.ts | 15 ++++------ 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/components/micro-frame/util/stream/web.component.ts b/src/components/micro-frame/util/stream/web.component.ts index 8bd41e6..a63e46f 100644 --- a/src/components/micro-frame/util/stream/web.component.ts +++ b/src/components/micro-frame/util/stream/web.component.ts @@ -14,27 +14,22 @@ interface State { err: undefined | Error; } -export = class { - input!: Input; - state!: State; - el!: HTMLDivElement; - src: string | undefined; - controller?: AbortController; +export = { onCreate() { this.state = { loading: false, err: undefined, }; - } + }, onMount() { // Only trigger a new load if this wasn't ssr'd, or the src has changed. this.src = this.el.dataset.ssr; this.el.removeAttribute("data-ssr"); this.onUpdate(); - } + }, onDestroy() { this.controller?.abort(); - } + }, async onUpdate() { if (this.src === this.input.src) return; @@ -48,10 +43,7 @@ export = class { const res = await fetch(this.src, { cache: this.input.cache, signal: controller.signal, - headers: { - ...this.input.headers, - accept: "text/html", - }, + headers: Object.assign({}, this.input.headers, { accept: "text/html" }), }); if (!res.ok) throw new Error(res.statusText); const reader = res.body!.getReader(); @@ -79,5 +71,15 @@ export = class { if (!this.input.catch) throw err; } } - } + }, +} as { + input: Input; + state: State; + el: HTMLDivElement; + src: string | undefined; + controller: AbortController | undefined; + onUpdate(): unknown; + onCreate(): unknown; + onMount(): unknown; + onDestroy(): unknown; }; diff --git a/src/components/micro-frame/util/writable-dom.ts b/src/components/micro-frame/util/writable-dom.ts index c192847..6d8c435 100644 --- a/src/components/micro-frame/util/writable-dom.ts +++ b/src/components/micro-frame/util/writable-dom.ts @@ -1,16 +1,14 @@ type Options = { target: ParentNode; previousSibling?: ChildNode | null; - signal?: AbortSignal; - onLoad?(): void; + signal: AbortSignal; + onLoad(): void; }; -const noop = () => {}; - export = function toWritable({ target, signal, - onLoad = noop, + onLoad, previousSibling, }: Options) { const doc = document.implementation.createHTMLDocument(""); @@ -19,7 +17,6 @@ export = function toWritable({ const walker = doc.createTreeWalker(root); const targetNodes = new WeakMap([[root, target]]); const nextSibling = previousSibling ? previousSibling.nextSibling : null; - const canContinue = () => !(signal && signal.aborted); let pendingText: Text | null = null; let scanNode: Node | null = null; let isBlocked = false; @@ -27,14 +24,14 @@ export = function toWritable({ return { close() { - if (canContinue()) { + if (!signal.aborted) { doc.close(); isClosed = true; if (!isBlocked) onLoad(); } }, write(chunk: string) { - if (canContinue()) { + if (!signal.aborted) { doc.write(chunk); if (pendingText) { @@ -78,7 +75,7 @@ export = function toWritable({ clone.onload = clone.onerror = () => { isBlocked = false; // Continue the normal content injecting walk. - if (canContinue()) walk(); + if (!signal.aborted) walk(); }; } }