GLUON / DOCS Playground

@gluonjs/atoms

@gluonjs/atoms / packages/atoms/src / UiHydrationError

Class: UiHydrationError

Extends

  • Error

Constructors

Constructor

new UiHydrationError(mismatch, message): UiHydrationError

Parameters

mismatch

UiHydrationMismatch

message

string

Returns

UiHydrationError

Overrides

Error.constructor

Properties

code

readonly code: "GLUON_UI_HYDRATION_MISMATCH" = 'GLUON_UI_HYDRATION_MISMATCH'

mismatch

readonly mismatch: UiHydrationMismatch

Example

Handle a deterministic scoped UI carrier mismatch separately from application DOM hydration failures:

ts
import {
  UiHydrationError,
  createUiStyleSelection,
  installUi,
  type InstallUiOptions,
  type UiHydrationMismatch,
  type UiOwner,
  type UiStyleSelection,
} from '@gluonjs/atoms';

const options = { theme: 'dark', hydrate: false } satisfies InstallUiOptions;
const selection: UiStyleSelection = createUiStyleSelection(options.theme);
const owner: UiOwner = installUi(document, options);
owner.setTheme('light');
console.log(selection.entries.map((entry) => entry.id), owner.theme, owner.themeSheet);
owner.dispose();

const mismatch: UiHydrationMismatch = 'missing';
const diagnostic = new UiHydrationError(mismatch, 'The server omitted the UI theme carrier.');
console.error(diagnostic.code, diagnostic.mismatch);