Ship in every language.
Manage zero keys.

// the server half (Server Action)
"use server";

import { I18n } from "@aurorah/i18n";

// the catalog namespace is enforced HERE, server-side
export const I18nServer = I18n.initServer({ namespace: "my-app" });

// the CSR singleton + React binding
"use client";

import { useEffect, useReducer } from "react";
import { I18n } from "@aurorah/i18n";
import { I18nServer } from "./i18n.server";

// the single client-side instance — connected to the server half
export const i18n = new I18n({ ssrServer: I18nServer });

// re-render subscribed views on language switch / load / translate
export function useI18n() {
  const [, force] = useReducer((x) => x + 1, 0);
  useEffect(() => i18n.subscribe(() => force()), []);
  return { t: i18n.t, m: i18n.m, language: i18n.getLanguage() };
}

// any client component
"use client";

import { useI18n } from "@/lib/i18n";

export function Hello() {
  const { t } = useI18n();
  return <p>{t("Hello~ world !!!")}</p>; // re-renders on draft/refined updates
}

// the shared singleton + Lit binding
import type { ReactiveController, ReactiveControllerHost } from "lit";
import { I18n } from "@aurorah/i18n";

// "www.example.com" = your project's namespace
export const i18n = new I18n({ namespace: "www.example.com" }); // ONE instance app-wide
export const t = i18n.t;
export const m = i18n.m;
export const language = () => i18n.getLanguage();

// reactive controller — requestUpdate() on language switch / load / translate
export class I18nController implements ReactiveController {
  private unsub?: () => void;
  constructor(private host: ReactiveControllerHost) { host.addController(this); }
  hostConnected() { this.unsub = i18n.subscribe(() => this.host.requestUpdate()); }
  hostDisconnected() { this.unsub?.(); }
}

// any Lit element
import { LitElement, html } from "lit";

import { I18nController, t } from "../lib/i18n";

export class HelloView extends LitElement {
  private i18nCtl = new I18nController(this); // subscribe this element

  render() {
    return html`<p>${t("Hello~ world !!!")}</p>`; // re-renders on draft/refined updates
  }
}

// the server half (server-only module in SvelteKit)
import { I18n } from "@aurorah/i18n";

// the catalog namespace is enforced HERE, server-side
export const I18nServer = I18n.initServer({ namespace: "my-app" });

// the CSR singleton + Svelte store binding
import { readable } from "svelte/store";
import { I18n } from "@aurorah/i18n";
import { I18nServer } from "./i18n.server";

// the single client-side instance — connected to the server half
const i18n = new I18n({ ssrServer: I18nServer });

// t / m / language stores re-emit on language switch / load / translate
export const t = readable(i18n.t, (set) => i18n.subscribe(() => set(i18n.t)));
export const m = readable(i18n.m, (set) => i18n.subscribe(() => set(i18n.m)));
export const language = readable(i18n.getLanguage(), (set) =>
  i18n.subscribe(() => set(i18n.getLanguage())));

<!-- any Svelte component -->
<script lang="ts">
  import { t } from "$lib/i18n";
</script>

<p>{$t("Hello~ world !!!")}</p> <!-- re-renders on draft/refined updates -->

// the shared singleton
import { I18n } from "@aurorah/i18n";

// "www.example.com" = your project's namespace
export const i18n = new I18n({ namespace: "www.example.com" }); // ONE instance app-wide
export const t = i18n.t;
export const m = i18n.m;
export const language = () => i18n.getLanguage();

// any view
import { i18n, t } from "./lib/i18n";

const el = document.querySelector("#hello")!;

function retranslate() {
  el.textContent = t("Hello~ world !!!"); // re-renders on draft/refined updates
}
retranslate();

// re-run when the language switches or a background translation arrives;
// call the returned unsubscribe in the view's destroy():
const unsubscribe = i18n.subscribe(retranslate);