Interface: HydratedApplication<Public>

import {
  GluonElement,
  createApp,
  defineElement,
  html,
  renderGluonApplicationForServer,
} from '@gluonjs/core';
import { createMemoryHistory, createRouter } from '@gluonjs/router';
import { prepareForHydration } from '@gluonjs/ssr';
import {
  SsrTransportError,
  hydrateApplication,
  hydrateElement,
  hydrateRequestState,
  hydrateTemplate,
  readHydrationState,
  type HydrateTemplateOptions,
  type HydratedApplication,
  type RequestHydrationState,
} from '@gluonjs/ssr/hydration';
import { createStoreManager } from '@gluonjs/store';

const container = document.querySelector<HTMLElement>('#app')!;
const app = createApp(() => html`<main>Hydrated shop</main>`);
const serverApp = await prepareForHydration(renderGluonApplicationForServer(app));
container.innerHTML = serverApp.html;
const hydrationOptions = { recovery: 'throw' } satisfies HydrateTemplateOptions;
const hydrated: HydratedApplication = await hydrateApplication(app, container, hydrationOptions);

const standalone = html`<p>Retained template</p>`;
const prepared = await prepareForHydration(standalone);
const templateRoot = document.createElement('div');
templateRoot.innerHTML = prepared.html;
await hydrateTemplate(standalone, templateRoot);

class HydratedBadge extends GluonElement {
  protected render() { return html`<strong>Ready</strong>`; }
}
defineElement('hydrated-badge', HydratedBadge);
const badge = document.createElement('hydrated-badge') as HydratedBadge;
const badgeMarkup = await prepareForHydration(badge.renderForServer());
badge.shadowRoot!.innerHTML = badgeMarkup.html;
await hydrateElement(badge);

const router = createRouter({ history: createMemoryHistory(['/']), routes: [] });
const store = createStoreManager();
const requestState = {
  router: { location: '/' },
  store: { version: 1, stores: {} },
  data: { locale: 'en' },
} satisfies RequestHydrationState<{ locale: string }>;
const data = await hydrateRequestState(requestState, router, store);
const carrier = document.createElement('script');
carrier.type = 'application/json';
carrier.dataset.gluonState = '';
carrier.textContent = JSON.stringify(requestState);
const root = document.createDocumentFragment();
root.append(carrier);
console.log(hydrated.hydration.retained, data.locale, readHydrationState(root));
console.log(SsrTransportError);