From 3dcd99c63f11c52b4a0c51bfe57d7b5307bccabc Mon Sep 17 00:00:00 2001
From: Bill Min <nmin@ebay.com>
Date: Thu, 21 Sep 2023 13:48:51 -0400
Subject: [PATCH] refactor: remove logic that clears element attrs (#27)

---
 .../renders.expected/loading.4.html           | 21 ++++++++++++++-----
 .../renders.expected/step-0.0.html            | 19 +++++++++++++----
 .../renders.expected/step-0.1.html            | 21 ++++++++++++++-----
 .../renders.expected/step-0.2.html            | 21 ++++++++++++++-----
 .../renders.expected/step-0.3.html            | 21 ++++++++++++++-----
 .../renders.expected/loading.4.html           | 21 ++++++++++++++-----
 .../renders.expected/loading.5.html           | 21 ++++++++++++++-----
 .../renders.expected/loading.4.html           | 21 ++++++++++++++-----
 .../renders.expected/step-0.0.html            |  7 +++++--
 .../renders.expected/step-1.0.html            |  9 +++++---
 .../renders.expected/step-2.0.html            |  7 +++++--
 .../renders.expected/loading.4.html           | 21 ++++++++++++++-----
 .../web.component.ts                          |  3 ---
 .../stream-source-component/web.component.ts  |  2 --
 14 files changed, 159 insertions(+), 56 deletions(-)

diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
index b884d57..c00e4c4 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
@@ -4,24 +4,35 @@
 <button>
   Change
 </button>
-<div />
-<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>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html
index d5debbf..8c6f393 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html
@@ -4,15 +4,26 @@
 <button>
   Change
 </button>
-<div />
-<div />
-<div />
 <div
+  data-src="embed"
   id="GENERATED-0"
-  style="display:none"
 />
 <div
+  data-from="test"
+  data-slot="slot_1"
   id="GENERATED-1"
+/>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+/>
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
index 1217e3f..223434c 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
@@ -4,19 +4,30 @@
 <button>
   Change
 </button>
-<div />
-<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>
 </div>
-<div />
 <div
-  id="GENERATED-0"
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+/>
+<div
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html
index a9859be..a1a220e 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html
@@ -4,23 +4,34 @@
 <button>
   Change
 </button>
-<div />
-<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>
 </div>
-<div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html
index d13d45b..c5b2231 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html
@@ -4,24 +4,35 @@
 <button>
   Change
 </button>
-<div />
-<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>
   after src change
 </div>
-<div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.4.html
index b316564..4878da2 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.4.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.4.html
@@ -4,24 +4,35 @@
 <div>
   mounted: false
 </div>
-<div />
-<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>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.5.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.5.html
index db63ef1..4878034 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.5.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr/renders.expected/loading.5.html
@@ -4,24 +4,35 @@
 <div>
   mounted: true
 </div>
-<div />
-<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>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/loading.4.html
index d8ef572..f01017a 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/loading.4.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/loading.4.html
@@ -4,24 +4,35 @@
 <button>
   Toggle
 </button>
-<div />
-<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>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-0.0.html
index 4540c88..c8b17f8 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-0.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-0.0.html
@@ -4,15 +4,18 @@
 <button>
   Toggle
 </button>
-<div />
 <div
+  data-src="embed"
   id="GENERATED-0"
-  style="display:none"
 />
 <div
   id="GENERATED-1"
   style="display:none"
 />
+<div
+  id="GENERATED-2"
+  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_then_toggle_slot_index_C=(window.$ssr_then_toggle_slot_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["PStxccR2"]})
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
index 270dd5d..d64ee75 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
@@ -4,15 +4,18 @@
 <button>
   Toggle
 </button>
-<div />
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
 <div />
 <div />
 <div
-  id="GENERATED-0"
+  id="GENERATED-1"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-2"
   style="display:none"
 />
 <script>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-2.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-2.0.html
index 4540c88..c8b17f8 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-2.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-2.0.html
@@ -4,15 +4,18 @@
 <button>
   Toggle
 </button>
-<div />
 <div
+  data-src="embed"
   id="GENERATED-0"
-  style="display:none"
 />
 <div
   id="GENERATED-1"
   style="display:none"
 />
+<div
+  id="GENERATED-2"
+  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_then_toggle_slot_index_C=(window.$ssr_then_toggle_slot_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["PStxccR2"]})
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle/renders.expected/loading.4.html
index 57c4723..1909282 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle/renders.expected/loading.4.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle/renders.expected/loading.4.html
@@ -4,24 +4,35 @@
 <button>
   Toggle
 </button>
-<div />
-<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>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-0"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-1"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
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 dff4021..2359f26 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
@@ -27,9 +27,6 @@ export = {
     if (ssrEl) {
       this.slotId = ssrEl.dataset.slot;
       this.from = ssrEl.dataset.from;
-      ssrEl.removeAttribute("data-slot");
-      ssrEl.removeAttribute("data-from");
-      ssrEl.removeAttribute("id");
       loading = false;
     }
 
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 4ffcd30..9ed1e57 100644
--- a/src/node_modules/@internal/stream-source-component/web.component.ts
+++ b/src/node_modules/@internal/stream-source-component/web.component.ts
@@ -39,8 +39,6 @@ export = {
     const ssrEl = document.getElementById(this.id);
     if (ssrEl) {
       this.src = ssrEl.dataset.src;
-      ssrEl.removeAttribute("data-src");
-      ssrEl.removeAttribute("id");
     }
   },
   onMount() {