Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow slot reorder after first chunk #26

Merged
merged 4 commits into from
Sep 28, 2023
+402 −5
Merged

feat: allow slot reorder after first chunk #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7bd8d57
feat: allow slot reorder after first chunk
bill-min Sep 15, 2023
3dcd99c
refactor: remove logic that clears element attrs (#27)
bill-min Sep 21, 2023
ca9288f
Merge branch 'main' into reorder-first-chunk
bill-min Sep 21, 2023
4afedb3
Merge branch 'main' into reorder-first-chunk
bill-min Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/micro-frame-slot/marko-tag.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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