GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src / HydrationResult

Interface: HydrationResult

Properties

mismatches

readonly mismatches: readonly HydrationMismatch[]

recovered

readonly recovered: boolean

retained

readonly retained: boolean

Example

Determine whether hydration retained existing DOM, replaced it, and which structured mismatches were observed:

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