fix: delayed empty slot (#12)

marko-js · Dec 8, 2022 · 577ecec · 577ecec
1 parent d469c64
commit 577ecec
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 9 deletions.
diff --git a/src/components/micro-frame-slot/component/node.marko b/src/components/micro-frame-slot/component/node.marko
@@ -40,10 +40,12 @@ $ {
       </await>
     </macro>
     $ out.bf("@_", component, true);
-    <if(input.loading)>
-      <await(loadingPromise) placeholder=input.loading client-reorder/>
+    <if(stream)>
+      <if(input.loading)>
+        <await(loadingPromise) placeholder=input.loading client-reorder/>
+      </if>
+      <wait/>
     </if>
-    <wait/>
     $ out.ef();
   </div>
 </else>
diff --git a/src/components/micro-frame-slot/component/web.component.ts b/src/components/micro-frame-slot/component/web.component.ts
@@ -65,6 +65,10 @@ export = {
 
       this.slot = streamSource.slot(this.slotId);
 
+      if (!this.slot) {
+        return;
+      }
+
       writable = getWritableDOM(
         this.el,
         // references the start of the preserved Marko fragment.

diff --git a/.../__tests__/__snapshots__/micro-frame-sse/ssr-delayed-slot/renders.expected/loading.1.html b/.../__tests__/__snapshots__/micro-frame-sse/ssr-delayed-slot/renders.expected/loading.1.html
@@ -29,15 +29,20 @@
   </p>
 </div>
 <div
+  data-from="test"
+  data-slot="non_exist"
   id="GENERATED-4"
+/>
+<div
+  id="GENERATED-5"
   style="display:none"
 >
   <noscript
-    id="GENERATED-5"
+    id="GENERATED-6"
   />
 </div>
 <div
-  id="GENERATED-6"
+  id="GENERATED-7"
   style="display:none"
 />
 <script>

diff --git a/.../__tests__/__snapshots__/micro-frame-sse/ssr-delayed-slot/renders.expected/loading.2.html b/.../__tests__/__snapshots__/micro-frame-sse/ssr-delayed-slot/renders.expected/loading.2.html
@@ -25,13 +25,18 @@
   </p>
 </div>
 <div
+  data-from="test"
+  data-slot="non_exist"
   id="GENERATED-3"
-  style="display:none"
 />
 <div
   id="GENERATED-4"
   style="display:none"
 />
+<div
+  id="GENERATED-5"
+  style="display:none"
+/>
 <script>
   function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
 </script>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-delayed-slot/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-delayed-slot/index.marko
@@ -11,8 +11,21 @@
   <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
   <await(new Promise(res => setTimeout(res, 1000)))>
     <@then>
-      <micro-frame-slot from="test" slot="slot_1" />
-      <micro-frame-slot from="test" slot="slot_2" />
+      <micro-frame-slot from="test" slot="slot_1">
+        <@catch|err|>
+          Slot_1 Error: ${err.message}
+        </@catch>
+      </micro-frame-slot>
+      <micro-frame-slot from="test" slot="slot_2">
+        <@catch|err|>
+          Slot_2 Error: ${err.message}
+        </@catch>
+      </micro-frame-slot>
+      <micro-frame-slot from="test" slot="non_exist" timeout=200>
+        <@catch|err|>
+          non_exist Error: ${err.message}
+        </@catch>
+      </micro-frame-slot>
     </@then>
   </await>
 </body>

diff --git a/src/components/stream-source/component/StreamSource.ts b/src/components/stream-source/component/StreamSource.ts
@@ -3,6 +3,7 @@ import createWritable, { StreamWritable } from "./StreamWritable";
 export const STREAM_SOURCE_MAP: Map<string, StreamSource> = new Map();
 class StreamSource {
   private readonly _slots: Map<string, StreamWritable>;
+  private _closed: boolean;
 
   private getOrCreateSlot(id: string): StreamWritable {
     if (this._slots.has(id)) {
@@ -16,6 +17,7 @@ class StreamSource {
 
   constructor() {
     this._slots = new Map();
+    this._closed = false;
   }
 
   async run(parserIterator: AsyncIterator<string[]>) {
@@ -35,10 +37,11 @@ class StreamSource {
   }
 
   slot(id: string) {
-    return this.getOrCreateSlot(id);
+    return this._closed ? this._slots.get(id) : this.getOrCreateSlot(id);
   }
 
   close(err?: Error) {
+    this._closed = true;
     this._slots.forEach((slot: StreamWritable) =>
       err ? slot.error(err) : slot.end()
     );