Interface: HydrationMismatch

Properties

actual

readonly actual: string

code

readonly code: "GLUON_HYDRATION_ATTRIBUTE_MISMATCH" | "GLUON_HYDRATION_STYLE_MISMATCH" | "GLUON_HYDRATION_TEXT_MISMATCH" | "GLUON_HYDRATION_STRUCTURE_MISMATCH" | "GLUON_HYDRATION_STATE_MISMATCH"

expected

readonly expected: string

path

readonly path: string

recovery

readonly recovery: "replace-root" | "abort"

suppressed

readonly suppressed: boolean

Example

Inspect one categorized hydration difference with DOM path, expected/actual evidence, recovery decision, and suppression state:

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