@gluonjs/ssr / packages/ssr/src / SsrHydrationMarkerTransport

Interface: SsrHydrationMarkerTransport

The deterministic marker range carried by every server-serialized Gluon element root.

Properties

end

readonly end: number

Exclusive marker after the element shadow root.

start

readonly start: number

Inclusive first marker allocated inside the element shadow root.

version

readonly version: 1

Example

Represent the versioned local marker range carried by one serialized Gluon element root:

import { GluonElement, defineElement, html } from '@gluonjs/core';
import {
  SSR_HYDRATION_MARKER_ATTRIBUTE,
  renderElement,
  renderToString,
  type RenderSerializationOptions,
  type SsrHydrationMarkerTransport,
} from '@gluonjs/ssr';
import {
  HydrationMarkerTransportError,
  type HydrationMarkerTransportMismatch,
} from '@gluonjs/ssr/hydration';

class NestedBadge extends GluonElement {
  protected render() { return html`<strong>Ready</strong>`; }
}
defineElement('transport-badge', NestedBadge);
const transport: SsrHydrationMarkerTransport = { version: 1, start: 0, end: 1 };
const options = { signal: new AbortController().signal } satisfies RenderSerializationOptions;
const htmlOutput = await renderToString(renderElement(NestedBadge), options);
const attribute = SSR_HYDRATION_MARKER_ATTRIBUTE;
const mismatch: HydrationMarkerTransportMismatch = 'tampered';
const error = new HydrationMarkerTransportError(mismatch, `${attribute}: ${transport.start}-${transport.end}`);
console.log(htmlOutput, error.message);