From 4473bc84f242a73ff393eb1ea8da98ae99c2dd40 Mon Sep 17 00:00:00 2001
From: Bill Min <nmin@ebay.com>
Date: Thu, 28 Sep 2023 16:38:09 -0400
Subject: [PATCH] feat: allow slot reorder after first chunk (#26)

* feat: allow slot reorder after first chunk
---
 .../micro-frame-slot/marko-tag.json           |  3 +-
 src/components/micro-frame-sse/README.md      |  8 ++
 .../renders.expected/loading.0.html           | 16 ++++
 .../renders.expected/loading.1.html           | 44 +++++++++++
 .../renders.expected/loading.2.html           | 40 ++++++++++
 .../renders.expected/loading.3.html           | 54 ++++++++++++++
 .../renders.expected/loading.4.html           | 50 +++++++++++++
 .../renders.expected/loading.5.html           | 74 +++++++++++++++++++
 .../renders.expected/loading.6.html           | 60 +++++++++++++++
 .../ssr-reorder-after-first-chunk/embed.marko | 25 +++++++
 .../ssr-reorder-after-first-chunk/index.marko | 20 +++++
 .../ssr-reorder-after-first-chunk/slot_1.html |  1 +
 .../ssr-reorder-after-first-chunk/slot_2.html |  1 +
 .../micro-frame-sse/__tests__/server.test.ts  |  5 ++
 .../micro-frame-slot-component/node.marko     |  6 +-
 15 files changed, 402 insertions(+), 5 deletions(-)
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.0.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.2.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.3.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.4.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.5.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.6.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/embed.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/index.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_2.html

diff --git a/src/components/micro-frame-slot/marko-tag.json b/src/components/micro-frame-slot/marko-tag.json
index e259d7f..ce5d990 100644
--- a/src/components/micro-frame-slot/marko-tag.json
+++ b/src/components/micro-frame-slot/marko-tag.json
@@ -17,10 +17,9 @@
     ]
   },
   "@client-reorder": {
-    "type": "boolean",
     "autocomplete": [
       {
-        "description": "See client-reorder in <await>",
+        "description": "See client-reorder in <await>. Also support additional 'after-first-chunk' value.",
         "descriptionMoreURL": "https://markojs.com/docs/core-tags/#await"
       }
     ]
diff --git a/src/components/micro-frame-sse/README.md b/src/components/micro-frame-sse/README.md
index baa8aeb..c2c6d71 100644
--- a/src/components/micro-frame-sse/README.md
+++ b/src/components/micro-frame-sse/README.md
@@ -189,6 +189,14 @@ Flag indicate if the slot need to be streamed out-of-order. Please refer to [cli
 <micro-frame-slot from="..." slot="..." client-reorder />
 ```
 
+### `client-reorder="after-first-chunk"`
+
+There is an additional value supported here which is `after-first-chunk`. When set, the slot will be rendered in-order before first chunk and will convert to out-of-order while streaming. This is useful when loading indicator is controlled inside stream.
+
+```marko
+<micro-frame-slot from="..." slot="..." client-reorder="after-first-chunk" />
+```
+
 ## `timeout` in slot
 
 A timeout in `ms` (defaults to 30s) that will prematurely abort the slot. This will trigger the `<@catch>` if provided.
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.0.html
new file mode 100644
index 0000000..fa43e92
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.0.html
@@ -0,0 +1,16 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+/>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.1.html
new file mode 100644
index 0000000..09091ab
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.1.html
@@ -0,0 +1,44 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-3"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-4"
+>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+non-reorder data
+<div
+  id="GENERATED-6"
+  style="display:none"
+>
+  <noscript
+    id="GENERATED-7"
+  />
+</div>
+<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)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.2.html
new file mode 100644
index 0000000..085f796
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.2.html
@@ -0,0 +1,40 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-3"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-4"
+>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+non-reorder data
+<div
+  id="GENERATED-6"
+  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)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.3.html
new file mode 100644
index 0000000..cb0a298
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.3.html
@@ -0,0 +1,54 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-3"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-4"
+>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+non-reorder data
+<div
+  id="GENERATED-6"
+  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)
+</script>
+<div
+  id="GENERATED-7"
+  style="display:none"
+>
+  <p>
+    test_html for slot_2
+  </p>
+  <noscript
+    id="GENERATED-8"
+  />
+</div>
+<script>
+  $af(1)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.4.html
new file mode 100644
index 0000000..686fd71
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.4.html
@@ -0,0 +1,50 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-3"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-4"
+>
+  <p>
+    test_html for slot_2
+  </p>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+non-reorder data
+<div
+  id="GENERATED-6"
+  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)
+</script>
+<div
+  id="GENERATED-7"
+  style="display:none"
+/>
+<script>
+  $af(1)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.5.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.5.html
new file mode 100644
index 0000000..ae4dc9a
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.5.html
@@ -0,0 +1,74 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-3"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-4"
+>
+  <p>
+    test_html for slot_2
+  </p>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+non-reorder data
+<div
+  id="GENERATED-6"
+  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)
+</script>
+<div
+  id="GENERATED-7"
+  style="display:none"
+/>
+<script>
+  $af(1)
+</script>
+<div
+  id="GENERATED-8"
+  style="display:none"
+/>
+<div
+  id="GENERATED-9"
+  style="display:none"
+>
+  next chunk for slot_1
+  <noscript
+    id="GENERATED-10"
+  />
+</div>
+<div
+  id="GENERATED-11"
+  style="display:none"
+/>
+<div
+  id="GENERATED-12"
+  style="display:none"
+/>
+<script>
+  $af(2);$af(3);$af(4);$af(5)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.6.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.6.html
new file mode 100644
index 0000000..4678a96
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.6.html
@@ -0,0 +1,60 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-1"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+non-reorder data
+<div
+  id="GENERATED-3"
+  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)
+</script>
+<div
+  id="GENERATED-4"
+  style="display:none"
+/>
+<script>
+  $af(1)
+</script>
+<div
+  id="GENERATED-5"
+  style="display:none"
+/>
+<div
+  id="GENERATED-6"
+  style="display:none"
+/>
+<div
+  id="GENERATED-7"
+  style="display:none"
+/>
+<div
+  id="GENERATED-8"
+  style="display:none"
+/>
+<script>
+  $af(2);$af(3);$af(4);$af(5)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/embed.marko
new file mode 100644
index 0000000..d51be64
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/embed.marko
@@ -0,0 +1,25 @@
+import { wait } from "../../../../../__tests__/queue";
+import fs from "fs";
+import path from "path";
+
+$ const slot_1_html = fs.readFileSync(path.resolve(__dirname ,'slot_1.html'), 'utf8');
+$ const slot_2_html = fs.readFileSync(path.resolve(__dirname ,'slot_2.html'), 'utf8');
+$ const first = `id: slot_1\ndata: ${slot_1_html.replace(/\r?\n/g, '')}\n\n`;
+$ const second = `id: slot_2\ndata: ${slot_2_html.replace(/\r?\n/g, '')}\n\n`;
+$ const third = `id: slot_1\ntype: update\ndata: next chunk for slot_1`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+    <await(wait())>
+      <@then>
+        $!{second}
+        <await(wait())>
+          <@then>
+            $!{third}
+          </@then>
+        </await>
+      </@then>
+    </await>
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/index.marko
new file mode 100644
index 0000000..422f9d6
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/index.marko
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Example</title>
+  <esbuild-assets/>
+</head>
+<body>
+  <div>Host app</div>
+<micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
+<micro-frame-slot from="test" slot="slot_1" client-reorder="after-first-chunk" />
+<micro-frame-slot from="test" slot="slot_2" client-reorder />
+<await(new Promise(res => setTimeout(() => res('non-reorder data'))))>
+  <@then|result|>
+    ${result}
+  </@then>
+</await>
+</body>
+</html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_1.html
new file mode 100644
index 0000000..e4f8443
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_1.html
@@ -0,0 +1 @@
+<p>test_html for slot_1</p>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_2.html
new file mode 100644
index 0000000..bc6bb6a
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-reorder-after-first-chunk/slot_2.html
@@ -0,0 +1 @@
+<p>test_html for slot_2</p>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/server.test.ts b/src/components/micro-frame-sse/__tests__/server.test.ts
index a338f73..583f779 100644
--- a/src/components/micro-frame-sse/__tests__/server.test.ts
+++ b/src/components/micro-frame-sse/__tests__/server.test.ts
@@ -196,6 +196,11 @@ describe("micro-frame-sse", () => {
     fixture(path.join(__dirname, "fixtures/ssr-client-reorder-false"))
   );
 
+  describe(
+    "ssr reorder after first chunk",
+    fixture(path.join(__dirname, "fixtures/ssr-reorder-after-first-chunk"))
+  );
+
   describe(
     "ssr timeout",
     fixture(path.join(__dirname, "fixtures/ssr-timeout"))
diff --git a/src/node_modules/@internal/micro-frame-slot-component/node.marko b/src/node_modules/@internal/micro-frame-slot-component/node.marko
index 68fe308..39c0642 100644
--- a/src/node_modules/@internal/micro-frame-slot-component/node.marko
+++ b/src/node_modules/@internal/micro-frame-slot-component/node.marko
@@ -8,15 +8,15 @@ $ {
     input.loading && new Promise((res) => (finishLoading = res));
 }
 <div id=component.id class=input.class style=input.style data-slot=input.slot data-from=input.from>
-  <macro name="wait">
+  <macro|{ loaded }| name="wait">
     <await(stream.next())
-      client-reorder=input.clientReorder
+      client-reorder=(input.clientReorder === "after-first-chunk" ? !!loaded : !!input.clientReorder)
       timeout=input.timeout
     >
       <@then|{ value, done }|>
         <if(!done)>
           $!{value}
-          <wait/>
+          <wait loaded=true />
         </if>
         <else>
           $ finishLoading && finishLoading();