@gluonjs/ssr


@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:

ts
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);