@gluonjs/ssr / packages/ssr/src/streaming / applyProgressivePatchTemplate
Function: applyProgressivePatchTemplate()
applyProgressivePatchTemplate(
root,template,options?):ProgressivePatchApplicationResult
Applies one <template data-gluon-async-patch="id"> from the readable stream.
Parameters
root
ParentNode
template
HTMLTemplateElement
options?
ProgressivePatchApplicationOptions = {}
Returns
ProgressivePatchApplicationResult
Example
Consume one inert streamed async-patch template and apply it through the validated progressive boundary contract:
import { html } from '@gluonjs/core';
import { applyProgressivePatch, applyProgressivePatchTemplate, ProgressivePatchError, renderProgressiveReadableStream, renderToReadableStream, type ProgressiveBoundaryChunk, type ProgressivePatchApplicationOptions, type ProgressivePatchApplicationResult, type ProgressivePatchErrorCode } from '@gluonjs/ssr/streaming';
const page = html`<main><h1>New arrivals</h1></main>`;
const complete: ReadableStream<Uint8Array> = renderToReadableStream(page);
const progressive: ReadableStream<Uint8Array> = renderProgressiveReadableStream(page, {
signal: new AbortController().signal,
});
const root = document.createElement('main');
const patch = { kind: 'boundary', id: 1, html: '<p>Ready</p>', styles: { version: 1, entries: [] } } satisfies ProgressiveBoundaryChunk;
const patchOptions: ProgressivePatchApplicationOptions = { signal: new AbortController().signal };
const applied: ProgressivePatchApplicationResult = applyProgressivePatch(root, patch, patchOptions);
const template = document.createElement('template');
template.setAttribute('data-gluon-async-patch', '1');
const fromTemplate = applyProgressivePatchTemplate(root, template);
const code: ProgressivePatchErrorCode = 'GLUON_SSR_PROGRESSIVE_BOUNDARY';
const failure = new ProgressivePatchError(code, 'Boundary is not available.');
console.log(await new Response(complete).text(), await new Response(progressive).text(), applied, fromTemplate, failure);