Skip to content

Commit

Permalink
feat: better ways to control src change and slot refreshing logic (#28)
Browse files Browse the repository at this point in the history 
feat: sse slot no-refresh option
  • Loading branch information
@bill-min
bill-min authored Jan 8, 2024
1 parent 4473bc8 commit 2bb33a3
Show file tree
Hide file tree
Showing 31 changed files with 626 additions and 12 deletions.
8 changes: 8 additions & 0 deletions src/components/micro-frame-slot/marko-tag.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@
}
]
},
"@no-refresh": {
"type": "boolean",
"autocomplete": [
{
"description": "Flag to disable slot content refresh after stream src change."
}
]
},
"@class": {
"autocomplete": [
{
Expand Down
4 changes: 4 additions & 0 deletions src/components/micro-frame-sse/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
19 changes: 19 additions & 0 deletions ...s__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.0.html
View file
Original file line number Diff line number Diff line change
@@ -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"
/>
23 changes: 23 additions & 0 deletions ...s__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.1.html
View file
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions ...s__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.2.html
View file
Original file line number Diff line number Diff line change
@@ -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>
48 changes: 48 additions & 0 deletions ...s__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.3.html
View file
Original file line number Diff line number Diff line change
@@ -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>
40 changes: 40 additions & 0 deletions ...s__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/loading.4.html
View file
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 35 additions & 0 deletions ...ts__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.0.html
View file
Original file line number Diff line number Diff line change
@@ -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>
37 changes: 37 additions & 0 deletions ...ts__/__snapshots__/micro-frame-sse/ssr-change-src-and-name/renders.expected/step-0.1.html
View file
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions ...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.0.html
View file
Original file line number Diff line number Diff line change
@@ -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"
/>
23 changes: 23 additions & 0 deletions ...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.1.html
View file
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions ...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.2.html
View file
Original file line number Diff line number Diff line change
@@ -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>
48 changes: 48 additions & 0 deletions ...se/__tests__/__snapshots__/micro-frame-sse/ssr-no-refresh/renders.expected/loading.3.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 2bb33a3

Please sign in to comment.