Function: useI18n()

import { createApp, html } from '@gluonjs/core';
import {
  createI18n,
  i18nKey,
  useI18n,
  type I18n,
  type I18nFallbackContext,
  type I18nMessages,
  type I18nNamespaceLoader,
  type I18nNamespaceState,
  type I18nNamespaceStatus,
  type I18nOptions,
  type I18nSnapshot,
  type I18nValue,
  type LocaleCode,
  type TranslateOptions,
} from '@gluonjs/i18n';

const fallbackLocale: LocaleCode = 'en';
const english = { title: 'Orbit lamp', greeting: 'Hello {name}' } satisfies I18nMessages;
const loadProduct: I18nNamespaceLoader = async (locale) =>
  locale === 'de' ? { title: 'Orbit-Leuchte' } : english;
const missing = (context: I18nFallbackContext) => `[${context.locale}] ${context.key}`;
const options = {
  locale: 'de',
  fallbackLocale,
  messages: { en: english },
  namespaces: { product: loadProduct },
  missing,
} satisfies I18nOptions;
const plugin = createI18n(options);
const i18n: I18n = plugin;
const translation = { namespace: 'product', values: { name: 'Mara' } } satisfies TranslateOptions;
const namespaceState: I18nNamespaceState = 'loading';
const namespaceStatus: I18nNamespaceStatus = { state: namespaceState };
const value: I18nValue = new Date();
const snapshot: I18nSnapshot = i18n.snapshot();

const ProductTitle = () => html`<h1>${useI18n().t('title', translation)}</h1>`;
createApp(ProductTitle).use(plugin).mount(document.querySelector('#app')!);
console.log(i18n.t('greeting', { values: { name: 'Mara' } }), i18nKey, namespaceStatus, value, snapshot);