diff --git a/examples/suspense/src/components/Suspense.js b/examples/suspense/src/components/Suspense.js
index ffb897ea7..8d447fb19 100644
--- a/examples/suspense/src/components/Suspense.js
+++ b/examples/suspense/src/components/Suspense.js
@@ -1,17 +1,32 @@
-import { createComponent, render, renderSlot, renderSuspense } from 'astro/runtime/server/index.js';
+// astro-head-inject
+import { createComponent, createHeadAndContent, render, renderSlot, renderSuspense, renderComponent, unescapeHTML } from 'astro/runtime/server/index.js';
let ids = new WeakMap();
-export default createComponent({
+const Suspense = createComponent({
factory(result, props, slots) {
- const id = (ids.get(result) ?? -1) + 1;
- ids.set(result, id);
+ const { id } = props;
let suspense = { status: 'pending' }
- suspense.value = renderSuspense(result, id, slots.default).then((result) => {
+ let promise = renderSuspense(result, id, slots.default).then((result) => {
suspense.status = 'fulfilled';
return result;
- })
+ });
+ suspense.value = promise;
result.suspense.set(id, suspense);
-
return render`${renderSlot(result, slots.fallback)}`
}
})
+
+export default createComponent({
+ factory(result, _props, slots) {
+ if (!ids.has(result.response)) {
+ ids.set(result.response, -1);
+ }
+ let id = ids.get(result.response) + 1;
+ ids.set(result.response, id);
+ return createHeadAndContent(
+ unescapeHTML(``),
+ render`${renderComponent(result, 'Suspense', Suspense, { id }, slots)}`
+ )
+ },
+ propagation: 'self'
+})