feat: sse slot no-refresh option

marko-js · Jan 4, 2024 · 637709d · 637709d
1 parent f57c448
commit 637709d
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 2 deletions.
diff --git a/src/components/micro-frame-slot/marko-tag.json b/src/components/micro-frame-slot/marko-tag.json
@@ -50,6 +50,14 @@
       }
     ]
   },
+  "@no-refresh": {
+    "type": "boolean",
+    "autocomplete": [
+      {
+        "description": "Flag to disable slot content refresh after stream src change."
+      }
+    ]
+  },
   "@class": {
     "autocomplete": [
       {

diff --git a/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html b/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html
@@ -0,0 +1,19 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+/>
diff --git a/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html b/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html
@@ -0,0 +1,23 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<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>
+</div>
diff --git a/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html b/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html
@@ -0,0 +1,24 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<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>
+  next chunk for slot_1
+</div>
diff --git a/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html b/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html
@@ -0,0 +1,48 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<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>
+  next chunk for slot_1
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-3"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<div
+  id="GENERATED-4"
+  style="display:none"
+>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+<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);$af(1);$ssr_no_refresh_index_C=(window.$ssr_no_refresh_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["Za8QocXx"]})
+</script>
diff --git a/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.4.html b/...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.4.html
@@ -0,0 +1,40 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<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>
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
+  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);$ssr_no_refresh_index_C=(window.$ssr_no_refresh_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["Za8QocXx"]})
+</script>
diff --git a/...sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.0.html b/...sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.0.html
@@ -0,0 +1,35 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-1"
+/>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
+  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);$ssr_no_refresh_index_C=(window.$ssr_no_refresh_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["Za8QocXx"]})
+</script>
diff --git a/...sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.1.html b/...sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.1.html
@@ -0,0 +1,37 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-1"
+>
+  slot_1 after src change
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
+  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);$ssr_no_refresh_index_C=(window.$ssr_no_refresh_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["Za8QocXx"]})
+</script>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/components/app.marko
@@ -0,0 +1,13 @@
+class {
+  onCreate() {
+    this.state = { src: "embed", name: "test" };
+  }
+  change() {
+    this.state.src = "embed_2";
+  }
+}
+
+<button onClick("change")>Change</button>
+<micro-frame-sse src=state.src name=state.name read=(e => [e.lastEventId, e.data]) />
+<micro-frame-slot from="test" slot="slot_1" />
+<micro-frame-slot from="test" slot="slot_2" no-refresh />
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/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\ndata: next chunk for slot_1\n\n`;
+
+<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-no-refresh/embed_2.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/embed_2.marko
@@ -0,0 +1,9 @@
+import { wait } from "../../../../../__tests__/queue";
+
+$ const first = `id: slot_1\ndata: slot_1 after src change\n\n`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/index.marko
@@ -0,0 +1,13 @@
+<!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>
+  <app/>
+</body>
+</html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_1.html
@@ -0,0 +1 @@
+<p>test_html for slot_1</p>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_2.html
@@ -0,0 +1 @@
+<p>test_html for slot_2</p>
diff --git a/src/components/micro-frame-sse/__tests__/server.test.ts b/src/components/micro-frame-sse/__tests__/server.test.ts
@@ -54,6 +54,20 @@ describe("micro-frame-sse", () => {
     ])
   );
 
+  describe(
+    "ssr change src and name",
+    fixture(path.join(__dirname, "fixtures/ssr-change-src-and-name"), [
+      async (page) => await page.click("text=Change"),
+    ])
+  );
+
+  describe(
+    "ssr no refresh",
+    fixture(path.join(__dirname, "fixtures/ssr-no-refresh"), [
+      async (page) => await page.click("text=Change"),
+    ])
+  );
+
   describe(
     "csr then toggle slot",
     fixture(path.join(__dirname, "fixtures/csr-then-toggle-slot"), [

diff --git a/src/node_modules/@internal/micro-frame-slot-component/web.component.ts b/src/node_modules/@internal/micro-frame-slot-component/web.component.ts
@@ -38,8 +38,10 @@ export = {
     if (this.from !== input.from) {
       this.from = input.from;
       this.streamSource = getSource(input.from);
-      this.handleSrcChange = this.handleSrcChange.bind(this);
-      this.streamSource.onInvalidate(this.handleSrcChange);
+      if (!input.noRefresh) {
+        this.handleSrcChange = this.handleSrcChange.bind(this);
+        this.streamSource.onInvalidate(this.handleSrcChange);
+      }
     }
   },
   onMount() {