Skip to content

Commit

Permalink
fix: properly handle source name change
Browse files Browse the repository at this point in the history
  • Loading branch information
bill-min committed Jan 4, 2024
1 parent 4473bc8 commit f57c448
Show file tree
Hide file tree
Showing 15 changed files with 309 additions and 12 deletions.
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"
/>
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>
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>
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>
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>
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>
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>
Original file line number Diff line number Diff line change
@@ -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" />
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>test_html for slot_1</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>test_html for slot_2</p>
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export = {
let loading = true;
if (ssrEl) {
this.slotId = ssrEl.dataset.slot;
this.from = ssrEl.dataset.from;
loading = false;
}

Expand All @@ -35,10 +34,15 @@ export = {
err: undefined,
};
},
onInput(input) {
if (this.from !== input.from) {
this.from = input.from;
this.streamSource = getSource(input.from);
this.handleSrcChange = this.handleSrcChange.bind(this);
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) {
Expand All @@ -50,17 +54,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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down

0 comments on commit f57c448

Please sign in to comment.