Server

// apps/docs/examples/i18n/server-translations.tsx
// A Server Component: it runs on this site's server while the page renders.// `@workspace/active-i18n/server` marks itself server-only, so this file can// never end up in a browser bundle.import {createServerTranslations} from '@workspace/active-i18n/server';import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from '@workspace/active-ui/components/primitives/table';
// The host's resources. A real host imports JSON files per language and// namespace; the loader receives the language and the namespace.const RESOURCES: Record<string, Record<string, unknown>> = {  en: {shop: {welcome: 'Welcome, {{name}}', basket: 'Your basket'}},  nl: {shop: {welcome: 'Welkom, {{name}}', basket: 'Je mandje'}},  'pt-BR': {shop: {welcome: 'Bem-vindo, {{name}}', basket: 'Seu carrinho'}},};
// Bound once, at module scope, to the host's source and language set.const translations = createServerTranslations(  {    namespaces: ['shop'],    importNamespace: async (locale, namespace) => {      const tree = RESOURCES[locale]?.[namespace];      if (tree === undefined)        throw Object.assign(new Error(`No ${locale}/${namespace}`), {          code: 'MODULE_NOT_FOUND',        });      return {default: tree};    },  },  {supportedLocales: ['en', 'nl', 'pt-BR'], fallbackLocale: 'en'},);
// The locales a request might ask for; the host resolves its reader's// language (a cookie, a profile, Accept-Language) and passes it in.const REQUESTED = ['nl', 'en-GB', 'pt-BR', 'pt', 'fr'];
/** The server translator for each requested locale, matched against the host's set. */export default async function ServerTranslations() {  const rows = await Promise.all(    REQUESTED.map(async (requested) => {      const {t, locale} = await translations.getServerTranslator(requested);      return {requested, locale, welcome: t('shop.welcome', {name: 'Ada'})};    }),  );  return (    <Table>      <TableHeader>        <TableRow>          <TableHead>Requested</TableHead>          <TableHead>Loaded</TableHead>          <TableHead>shop.welcome</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {rows.map((row) => (          <TableRow key={row.requested} data-i18n-requested={row.requested}>            <TableCell className="font-mono">{row.requested}</TableCell>            <TableCell className="font-mono">{row.locale}</TableCell>            <TableCell lang={row.locale}>{row.welcome}</TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}