@gluonjs/ssr / packages/ssr/src / SSR_HYDRATION_MARKER_ATTRIBUTE

Variable: SSR_HYDRATION_MARKER_ATTRIBUTE

const SSR_HYDRATION_MARKER_ATTRIBUTE: "data-gluon-hydration"

Example

Use the public inert host attribute name when inspecting or documenting a DSD marker handoff:

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