feat: refactor streaming dom writer into standlone module

package.json

@@ -5,7 +5,8 @@
   "author": "Dylan Piercey <[email protected]>",
   "bugs": "https://github.com/marko-js/micro-frame/issues",
   "dependencies": {
-    "make-fetch-happen": "^9.1.0"
+    "make-fetch-happen": "^9.1.0",
+    "writable-dom": "^1.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.0",

src/components/micro-frame/util/stream/web.component.ts → src/components/micro-frame/component/web.component.ts

@@ -1,4 +1,4 @@
-import getWritableDOM from "../writable-dom";
+import getWritableDOM from "writable-dom";
 
 interface Input {
   src: string;
@@ -38,6 +38,8 @@ export = {
     this.state.err = undefined;
     this.src = this.input.src;
     const controller = (this.controller = new AbortController());
+    let writable: ReturnType<typeof getWritableDOM> | undefined;
+    let err: Error | undefined;
 
     try {
       const res = await fetch(this.src, {
@@ -48,28 +50,27 @@ export = {
       if (!res.ok) throw new Error(res.statusText);
       const reader = res.body!.getReader();
       const decoder = new TextDecoder();
-      const writable = getWritableDOM({
-        target: this.el,
-        signal: controller.signal,
+      writable = getWritableDOM(
+        this.el,
         // references the start of the preserved Marko fragment.
-        previousSibling: this.el.lastChild!.previousSibling,
-        onLoad: () => {
-          this.state.loading = false;
-        },
-      });
+        this.el.lastChild!.previousSibling
+      );
 
       let value: Uint8Array | undefined;
       while ((value = (await reader.read()).value)) {
         writable.write(decoder.decode(value));
       }
 
-      writable.close();
-    } catch (err) {
-      if (controller === this.controller) {
-        this.state.loading = false;
-        this.state.err = err as Error;
-        if (!this.input.catch) throw err;
-      }
+      await writable.close();
+    } catch (_err) {
+      err = _err as Error;
+      writable?.abort(err);
+    }
+
+    if (controller === this.controller) {
+      if (err && !this.input.catch) throw err;
+      this.state.loading = false;
+      this.state.err = err;
     }
   },
 } as {

src/components/micro-frame/index.marko

@@ -1,8 +1,8 @@
-import streamTemplate from "./util/stream";
+import component from "./component";
 
 // We have a proxy to the top level component
 // so that we can swap it out using `package.json#browser`.
 // https://gist.github.com/defunctzombie/4339901/49493836fb873ddaa4b8a7aa0ef2352119f69211
 // This allows us to have entirely different streaming implementations
 // depending on if this component is used in the server or browser.
-<${streamTemplate} ...input/>
+<${component} ...input/>