Skip to content

Commit

Permalink
feat: allow slot reorder after first chunk (#26)
Browse files Browse the repository at this point in the history 
* feat: allow slot reorder after first chunk
  • Loading branch information
@bill-min
bill-min authored Sep 28, 2023
1 parent 0310d4e commit 4473bc8
Show file tree
Hide file tree
Showing 15 changed files with 402 additions and 5 deletions.
3 changes: 1 addition & 2 deletions src/components/micro-frame-slot/marko-tag.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
Expand Down
8 changes: 8 additions & 0 deletions src/components/micro-frame-sse/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
16 changes: 16 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.0.html
View file
Original file line number Diff line number Diff line change
@@ -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"
/>
44 changes: 44 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.1.html
View file
Original file line number Diff line number Diff line change
@@ -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>
40 changes: 40 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.2.html
View file
Original file line number Diff line number Diff line change
@@ -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>
54 changes: 54 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.3.html
View file
Original file line number Diff line number Diff line change
@@ -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>
50 changes: 50 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.4.html
View file
Original file line number Diff line number Diff line change
@@ -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>
74 changes: 74 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.5.html
View file
Original file line number Diff line number Diff line change
@@ -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>
60 changes: 60 additions & 0 deletions ...snapshots__/micro-frame-sse/ssr-reorder-after-first-chunk/renders.expected/loading.6.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 4473bc8

Please sign in to comment.