Skip to content

Commit

Permalink
fix: avoid using macro tag
Browse files Browse the repository at this point in the history
  • Loading branch information
DylanPiercey committed Mar 20, 2024
1 parent f2a3e92 commit 8e1903a
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 62 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<await(input.iter.next()) timeout=input.timeout>
<@then|{ value, done }|>
<if(done)>
<if(input.loading)>
<!-- Remove all of the <@loading> content after we've received all the data -->
$ out.script(
`((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild)}while(d.data!==e)})(${JSON.stringify(input.id)});`,
);
</if>
</if>
<else>
$!{value}
<ssr-wait ...input/>
</else>
</@then>
<@catch|err|>
<if(input.catch)>
<!-- Remove everything in the container and render our catch handler -->
$ out.write(`<script>(function(e){if(e)e.textContent=""})(document.getElementById(${JSON.stringify(input.id)}))</script>`);
<${input.catch}(err)/>
</if>
<else>
$ throw err;
</else>
</@catch>
</await>
37 changes: 7 additions & 30 deletions src/node_modules/@internal/micro-frame-component/node.marko
Original file line number Diff line number Diff line change
Expand Up @@ -98,36 +98,13 @@ static async function fetchStream(input, out) {
$ out.bf("@_", component, true);
<await(fetchStream(input, out)) timeout=input.timeout catch=input.catch>
<@then|iter|>
<macro name="wait">
<await(iter.next()) timeout=input.timeout>
<@then|{ value, done }|>
<if(done)>
<if(input.loading)>
<!-- Remove all of the <@loading> content after we've received all the data -->
$ out.script(
`((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild)}while(d.data!==e)})(${JSON.stringify(component.id)});`,
);
</if>
</if>
<else>
$!{value}
<wait/>
</else>
</@then>
<@catch|err|>
<if(input.catch)>
<!-- Remove everything in the container and render our catch handler -->
<script>(function(e){if(e)e.textContent=""})(document.getElementById(${JSON.stringify(component.id)}))</script>
<${input.catch}(err)/>
</if>
<else>
$ throw err;
</else>
</@catch>
</await>
</macro>

<wait/>
<ssr-wait
id=component.id
iter=iter
timeout=input.timeout
loading=input.loading
catch=input.catch
/>
</@then>
</await>
$ out.ef();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<await(input.iter.next())
client-reorder=(
input.clientReorder === "after-first-chunk"
? !!input.loaded
: !!input.clientReorder
)
timeout=input.timeout
>
<@then|{ value, done }|>
<if(!done)>
$!{value}
<ssr-wait ...input loaded/>
</if>
<else>
$ input.finishLoading();
</else>
</@then>
<@catch|e|>
$ input.finishLoading();
$ out.write(`<script>(function(e){if(e)e.textContent=""})(document.getElementById(${JSON.stringify(input.id)}))</script>`);
<${input.catch}(e)/>
</@catch>
</await>
59 changes: 27 additions & 32 deletions src/node_modules/@internal/micro-frame-slot-component/node.marko
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
import { getSource } from "../../../util/stream";

$ {
const streamSource = getSource(input.from, out);
const stream = streamSource.slot(input.slot);
let finishLoading;
const loadingPromise =
input.loading && new Promise((res) => (finishLoading = res));
}
<div id=component.id class=input.class style=input.style data-slot=input.slot data-from=input.from>
<macro|{ loaded }| name="wait">
<await(stream.next())
client-reorder=(input.clientReorder === "after-first-chunk" ? !!loaded : !!input.clientReorder)
timeout=input.timeout
>
<@then|{ value, done }|>
<if(!done)>
$!{value}
<wait loaded=true />
</if>
<else>
$ finishLoading && finishLoading();
</else>
</@then>
<@catch|e|>
$ finishLoading && finishLoading();
<script>(function(e){if(e)e.textContent=""})(document.getElementById(${JSON.stringify(component.id)}))</script>
<${input.catch}(e)/>
</@catch>
</await>
</macro>
$ const streamSource = getSource(input.from, out);
$ const stream = streamSource.slot(input.slot);
$ let finishLoading;
$ const loadingPromise = (
input.loading && new Promise((res) => (finishLoading = res))
);
<div
id=component.id
class=input.class
style=input.style
data-slot=input.slot
data-from=input.from
>
$ out.bf("@_", component, true);
<if(stream)>
<if(input.loading)>
<await(loadingPromise) placeholder=input.loading client-reorder/>
<await(loadingPromise)
timeout=input.timeout
placeholder=input.loading
client-reorder
/>
</if>
<wait/>
<ssr-wait
id=component.id
iter=stream
timeout=input.timeout
clientReorder=input.clientReorder
finishLoading=(() => finishLoading && finishLoading())
loaded=false
catch=input.catch
/>
</if>
$ out.ef();
</div>

0 comments on commit 8e1903a

Please sign in to comment.