@gluonjs/core / src / HydrationOptions

Interface: HydrationOptions

Properties

expectedMarkup

readonly expectedMarkup: string

onMismatch?

readonly optional onMismatch?: (mismatch) => void

Parameters

mismatch

HydrationMismatch

Returns

void

recovery?

readonly optional recovery?: "replace" | "throw"

state?

readonly optional state?: object

client

readonly client: unknown

server

readonly server: unknown

suppress?

readonly optional suppress?: boolean | readonly HydrationMismatchCategory[]

trustedTypes?

readonly optional trustedTypes?: TrustedTypesConfig

Application-owned policy used only for browser HTML parser sinks.

Example

Provide expected server markup, optional application-owned Trusted Types policy, replacement/throw policy, category suppression, mismatch observation, and state comparison:

import { HydrationMismatchError, html, hydrate, type HydrationMismatch, type HydrationMismatchCategory, type HydrationOptions, type HydrationResult } from '@gluonjs/core';

const root = document.querySelector<HTMLElement>('#app')!;
const template = html`<main>Shop</main>`;
const category: HydrationMismatchCategory = 'text';
const observed: HydrationMismatch[] = [];
const options = {
  expectedMarkup: '<main>Shop</main>',
  recovery: 'replace',
  suppress: [category],
  onMismatch: (mismatch: HydrationMismatch) => observed.push(mismatch),
  state: { server: { bag: 1 }, client: { bag: 1 } },
} satisfies HydrationOptions;
try {
  const result: HydrationResult = hydrate(template, root, options);
  console.log(result.retained, result.recovered, result.mismatches);
} catch (error) {
  if (error instanceof HydrationMismatchError) console.error(error.mismatches);
  else throw error;
}