From 2bb33a378778e3e437832f5b0b64e09240dc9823 Mon Sep 17 00:00:00 2001
From: Bill Min <nmin@ebay.com>
Date: Mon, 8 Jan 2024 14:59:48 -0500
Subject: [PATCH] feat: better ways to control src change and slot refreshing
 logic (#28)

feat: sse slot no-refresh option
---
 .../micro-frame-slot/marko-tag.json           |  8 ++++
 src/components/micro-frame-sse/README.md      |  4 ++
 .../renders.expected/loading.0.html           | 19 ++++++++
 .../renders.expected/loading.1.html           | 23 +++++++++
 .../renders.expected/loading.2.html           | 24 ++++++++++
 .../renders.expected/loading.3.html           | 48 +++++++++++++++++++
 .../renders.expected/loading.4.html           | 40 ++++++++++++++++
 .../renders.expected/step-0.0.html            | 35 ++++++++++++++
 .../renders.expected/step-0.1.html            | 37 ++++++++++++++
 .../renders.expected/loading.0.html           | 19 ++++++++
 .../renders.expected/loading.1.html           | 23 +++++++++
 .../renders.expected/loading.2.html           | 24 ++++++++++
 .../renders.expected/loading.3.html           | 48 +++++++++++++++++++
 .../renders.expected/loading.4.html           | 40 ++++++++++++++++
 .../renders.expected/step-0.0.html            | 35 ++++++++++++++
 .../renders.expected/step-0.1.html            | 37 ++++++++++++++
 .../components/app.marko                      | 16 +++++++
 .../ssr-change-src-and-name/embed.marko       | 25 ++++++++++
 .../ssr-change-src-and-name/embed_2.marko     | 15 ++++++
 .../ssr-change-src-and-name/index.marko       | 13 +++++
 .../ssr-change-src-and-name/slot_1.html       |  1 +
 .../ssr-change-src-and-name/slot_2.html       |  1 +
 .../ssr-no-refresh/components/app.marko       | 13 +++++
 .../fixtures/ssr-no-refresh/embed.marko       | 25 ++++++++++
 .../fixtures/ssr-no-refresh/embed_2.marko     |  9 ++++
 .../fixtures/ssr-no-refresh/index.marko       | 13 +++++
 .../fixtures/ssr-no-refresh/slot_1.html       |  1 +
 .../fixtures/ssr-no-refresh/slot_2.html       |  1 +
 .../micro-frame-sse/__tests__/server.test.ts  | 14 ++++++
 .../web.component.ts                          | 23 ++++-----
 .../stream-source-component/web.component.ts  |  4 +-
 31 files changed, 626 insertions(+), 12 deletions(-)
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.0.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.2.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.3.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.4.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.0.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.4.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.0.html
 create mode 100644 src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/components/app.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed_2.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/index.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/slot_1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/slot_2.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/components/app.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/embed.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/embed_2.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/index.marko
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_1.html
 create mode 100644 src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_2.html

diff --git a/src/components/micro-frame-slot/marko-tag.json b/src/components/micro-frame-slot/marko-tag.json
index ce5d990..99c6c89 100644
--- 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/src/components/micro-frame-sse/README.md b/src/components/micro-frame-sse/README.md
index c2c6d71..c067fe5 100644
--- a/src/components/micro-frame-sse/README.md
+++ b/src/components/micro-frame-sse/README.md
@@ -254,6 +254,10 @@ Optional `style` attribute which works the same way as [Marko style attribute](h
 <micro-frame-slot from="..." slot="..." style=["display:block", null, { marginRight: 16 }]/>
 ```
 
+## `no-refresh`
+
+Boolean value controls whether the slot should refresh when its stream source src change.
+
 # Communicating between host and child
 
 Communicating between host and child works the same way as [micro-frame](../../../README.md).
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.0.html
new file mode 100644
index 0000000..721429b
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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"
+/>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.1.html
new file mode 100644
index 0000000..99f8541
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.2.html
new file mode 100644
index 0000000..808df14
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.3.html
new file mode 100644
index 0000000..e84c2eb
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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_change_src_and_name_index_C=(window.$ssr_change_src_and_name_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["z62K5Yyz"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.4.html
new file mode 100644
index 0000000..8dc9814
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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_change_src_and_name_index_C=(window.$ssr_change_src_and_name_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["z62K5Yyz"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.0.html
new file mode 100644
index 0000000..2542739
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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_change_src_and_name_index_C=(window.$ssr_change_src_and_name_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["z62K5Yyz"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.1.html
new file mode 100644
index 0000000..eb56a8a
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/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_change_src_and_name_index_C=(window.$ssr_change_src_and_name_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["z62K5Yyz"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html
new file mode 100644
index 0000000..721429b
--- /dev/null
+++ b/src/components/micro-frame-sse/__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"
+/>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html
new file mode 100644
index 0000000..99f8541
--- /dev/null
+++ b/src/components/micro-frame-sse/__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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html
new file mode 100644
index 0000000..808df14
--- /dev/null
+++ b/src/components/micro-frame-sse/__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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html
new file mode 100644
index 0000000..8b18766
--- /dev/null
+++ b/src/components/micro-frame-sse/__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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.4.html
new file mode 100644
index 0000000..50b46c6
--- /dev/null
+++ b/src/components/micro-frame-sse/__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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.0.html
new file mode 100644
index 0000000..87b59c0
--- /dev/null
+++ b/src/components/micro-frame-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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/step-0.1.html
new file mode 100644
index 0000000..5134640
--- /dev/null
+++ b/src/components/micro-frame-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>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/components/app.marko
new file mode 100644
index 0000000..dd6e423
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/components/app.marko
@@ -0,0 +1,16 @@
+class {
+  onCreate() {
+    this.state = { src: "embed", name: "test" };
+  }
+  onMount() {
+    this.state.name = "mounted";
+  }
+  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=state.name slot="slot_1" />
+<micro-frame-slot from="test" slot="slot_2" />
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed.marko
new file mode 100644
index 0000000..cd21d1c
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/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-change-src-and-name/embed_2.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed_2.marko
new file mode 100644
index 0000000..f1774d7
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/embed_2.marko
@@ -0,0 +1,15 @@
+import { wait } from "../../../../../__tests__/queue";
+
+$ const first = `id: slot_1\ndata: slot_1 after src change\n\n`;
+$ const second = `id: slot_2\ndata: slot_2 after src change\n\n`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+    <await(wait())>
+      <@then>
+        $!{second}
+      </@then>
+    </await>
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/index.marko
new file mode 100644
index 0000000..267d8b1
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/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-change-src-and-name/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/slot_1.html
new file mode 100644
index 0000000..e4f8443
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/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-change-src-and-name/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/slot_2.html
new file mode 100644
index 0000000..bc6bb6a
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-change-src-and-name/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__/fixtures/ssr-no-refresh/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/components/app.marko
new file mode 100644
index 0000000..4d7a842
--- /dev/null
+++ 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
new file mode 100644
index 0000000..cd21d1c
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b0ce7fa
--- /dev/null
+++ 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
new file mode 100644
index 0000000..267d8b1
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e4f8443
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/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-no-refresh/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/slot_2.html
new file mode 100644
index 0000000..bc6bb6a
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-no-refresh/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 583f779..f17126a 100644
--- 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
index 2359f26..bddb0fc 100644
--- a/src/node_modules/@internal/micro-frame-slot-component/web.component.ts
+++ b/src/node_modules/@internal/micro-frame-slot-component/web.component.ts
@@ -26,7 +26,6 @@ export = {
     let loading = true;
     if (ssrEl) {
       this.slotId = ssrEl.dataset.slot;
-      this.from = ssrEl.dataset.from;
       loading = false;
     }
 
@@ -34,11 +33,19 @@ export = {
       loading,
       err: undefined,
     };
+
+    this.handleSrcChange = this.handleSrcChange.bind(this);
+  },
+  onInput(input) {
+    if (this.from !== input.from) {
+      this.from = input.from;
+      this.streamSource = getSource(input.from);
+      if (!input.noRefresh) {
+        this.streamSource.onInvalidate(this.handleSrcChange);
+      }
+    }
   },
   onMount() {
-    this.streamSource = getSource(this.input.from);
-    this.handleSrcChange = this.handleSrcChange.bind(this);
-    this.streamSource.onInvalidate(this.handleSrcChange);
     this.onUpdate();
   },
   handleSrcChange(src: string) {
@@ -50,17 +57,11 @@ export = {
     this.streamSource.offInvalidate(this.handleSrcChange);
   },
   async onUpdate() {
-    if (
-      this.slotId === this.input.slot &&
-      this.from === this.input.from &&
-      this.prevSrc === this.curSrc
-    )
-      return;
+    if (this.slotId === this.input.slot && this.prevSrc === this.curSrc) return;
 
     this.state.loading = true;
     this.state.err = undefined;
     this.slotId = this.input.slot;
-    this.from = this.input.from;
     this.prevSrc = this.curSrc;
 
     let writable: ReturnType<typeof getWritableDOM> | undefined;
diff --git a/src/node_modules/@internal/stream-source-component/web.component.ts b/src/node_modules/@internal/stream-source-component/web.component.ts
index 9ed1e57..ac6e322 100644
--- a/src/node_modules/@internal/stream-source-component/web.component.ts
+++ b/src/node_modules/@internal/stream-source-component/web.component.ts
@@ -41,9 +41,11 @@ export = {
       this.src = ssrEl.dataset.src;
     }
   },
+  onInput(input) {
+    this.streamSource = getSource(input.name);
+  },
   onMount() {
     // Only trigger a new load if this wasn't ssr'd, or the src has changed.
-    this.streamSource = getSource(this.input.name);
     this.onUpdate();
   },
   onDestroy() {