fix: event type bug and allow custom read to skip events (#23)

* fix: event property key is wrong in parseEvent
marko-js · Aug 10, 2023 · b9e9159 · b9e9159
1 parent e9eba7d
commit b9e9159
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 11 deletions.
diff --git a/src/components/micro-frame-sse/README.md b/src/components/micro-frame-sse/README.md
@@ -74,7 +74,17 @@ A unique name for the stream which matches slot's [from](#required-from). A page
 
 ## `read`
 
-A function to parse the event which returns slot ID and streamed content as an array (optionally an isDone flag). The input is `MessageEvent`, please refer to [MessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventSource/message_event#event_properties) for details.
+A function to parse the event which returns slot ID and streamed content as an array (optionally an isDone flag). The input is `MessageEvent`, please refer to [MessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventSource/message_event#event_properties) for details. Return `undefined` will force this event to be skipped.
+
+```typescript
+function read(ev: MessageEvent) {
+  if (ev.lastEventId === "someId") {
+    // event with id: someId will be skipped
+    return;
+  }
+  return [ev.lastEventId, ev.data, true];
+}
+```
 
 Note that isDone flag is important when progressive rendering is in-order, because unfinished slot will block content streaming below the tag.
 

diff --git a/...e-sse/__tests__/__snapshots__/micro-frame-sse/custom-read/renders.expected/loading.3.html b/...e-sse/__tests__/__snapshots__/micro-frame-sse/custom-read/renders.expected/loading.3.html
@@ -20,9 +20,7 @@
   data-from="test"
   data-slot="slot_2"
   id="GENERATED-3"
->
-  Custome read for slot_2
-</div>
+/>
 <div
   id="GENERATED-4"
   style="display:none"

diff --git a/...e-sse/__tests__/__snapshots__/micro-frame-sse/custom-read/renders.expected/loading.4.html b/...e-sse/__tests__/__snapshots__/micro-frame-sse/custom-read/renders.expected/loading.4.html
@@ -16,9 +16,7 @@
   data-from="test"
   data-slot="slot_2"
   id="GENERATED-2"
->
-  Custome read for slot_2
-</div>
+/>
 <div
   id="GENERATED-3"
   style="display:none"

diff --git a/src/components/micro-frame-sse/__tests__/fixtures/custom-read/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/custom-read/index.marko
@@ -8,7 +8,7 @@
 </head>
 <body>
   <div>Host app</div>
-  <micro-frame-sse src="embed" name="test" read(e) { return [e.lastEventId, `Custome read for ${e.lastEventId}`] } />
+  <micro-frame-sse src="embed" name="test" read(e) { if (e.lastEventId === "slot_1") return [e.lastEventId, `Custome read for ${e.lastEventId}`] } />
   <micro-frame-slot from="test" slot="slot_1">
     <@catch|err|>
       Slot_1 Error: ${err.message}

diff --git a/src/components/micro-frame-sse/parser.ts b/src/components/micro-frame-sse/parser.ts
@@ -62,10 +62,10 @@ function parseEvent(eventStr: string) {
   } = {
     id: undefined,
     data: "",
-    type: undefined,
+    event: undefined,
   };
   eventStr.split("\n").forEach((line) => {
-    const lineMatch = /^(id|type|data): (.*)$/.exec(line);
+    const lineMatch = /^(id|event|data): (.*)$/.exec(line);
     if (lineMatch) {
       if (lineMatch[1] === "data") {
         ev[lineMatch[1]] += lineMatch[2];
@@ -77,6 +77,6 @@ function parseEvent(eventStr: string) {
   return {
     lastEventId: ev.id,
     data: ev.data as string,
-    type: ev.type,
+    type: ev.event,
   };
 }
diff --git a/src/util/stream.ts b/src/util/stream.ts
@@ -34,6 +34,10 @@ export class StreamSource {
 
       if (done) break;
 
+      if (value === undefined) {
+        continue;
+      }
+
       const [slotId, html, isDone] = value;
       const slot = this.getOrCreateSlot(slotId);
       slot.write(html);