@micro-frame/marko
Version:
A Marko tag for building SSR friendly micro frontends.
76 lines (75 loc) • 2.5 kB
JavaScript
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
import getWritableDOM from "writable-dom";
var require_web_component = __commonJS({
"src/node_modules/@internal/micro-frame-component/web.component.ts"(exports, module) {
module.exports = {
onCreate() {
const ssrEl = document.getElementById(this.id);
let loading = true;
if (ssrEl) {
this.src = ssrEl.dataset.src;
ssrEl.removeAttribute("data-src");
ssrEl.removeAttribute("id");
loading = false;
}
this.state = {
loading,
err: void 0
};
},
onMount() {
this.onUpdate();
},
onDestroy() {
var _a;
(_a = this.controller) == null ? void 0 : _a.abort();
},
async onUpdate() {
var _a;
if (this.src === this.input.src)
return;
(_a = this.controller) == null ? void 0 : _a.abort();
this.state.loading = true;
this.state.err = void 0;
this.src = this.input.src;
const controller = this.controller = new AbortController();
let writable;
let err;
try {
const options = {
cache: this.input.cache,
signal: controller.signal,
headers: Object.assign({}, this.input.headers, { accept: "text/html" })
};
const res = await (this.input.fetch ? this.input.fetch(this.src, options, fetch) : fetch(this.src, options));
if (!res.ok)
throw new Error(res.statusText);
writable = getWritableDOM(this.el, this.el.lastChild.previousSibling);
if (this.input.clientReorder) {
writable.write(await res.text());
} else {
const reader = res.body.getReader();
const decoder = new TextDecoder();
let value;
while (value = (await reader.read()).value) {
writable.write(decoder.decode(value));
}
}
await writable.close();
} catch (_err) {
err = _err;
writable == null ? void 0 : writable.abort(err);
}
if (controller === this.controller) {
if (err && !this.input.catch)
throw err;
this.state.loading = false;
this.state.err = err;
}
}
};
}
});
export default require_web_component();