feat: allow to consume translations inside web-components

[aralroca]

Fixes #54

After this PR:

• web-components: format href and src for i18n, trailingSlash, assetPrefix... #55
• i18n: support i18nKeys for dynamic keys (allow regex) #56

In this PR: it is possible to consume translations also in web-components (in server components was already done), in web-components only is loading the messages that are consumed inside! If some component is consuming only the locale then any message is loaded. All the messages are loaded in a separated chunk, this way the code of the page is cached by the browser when the user changes the language and only needs to load the messages.

The hardest part of this PR has been the work on the build to create the chunks with only the messages that are consumed inside, this way the developers don't have to specify which pages which namespaces have to be consumed, it already does it intelligently, improving DX. The only downside is that it only accepts literal keys, if there are variables then it shows a warning to specify these keys, which will be done in this other issue (the good thing is that it will support Glob).

---

Consume translations

Brisa supports to consume translations inspired by libraries such as i18next and next-translate.

Tip

Good to know: It only occupies 400B of client code if you consume translations in the web-components, if you only use it in server-components, pages, layout, api, middleware, it is 0B of client code.

In order to consume translations, you need first to define the messages property in src/i18n.js file:

import { I18nConfig } from "brisa";

import en from "./messages/en.json";
import es from "./messages/es.json";

const i18nConfig: I18nConfig<typeof en> = {
  defaultLocale: "en",
  locales: ["en", "es"],
  messages: { en, es },
};

export default i18nConfig;

{
  "hello": "Hello {{name}}!",
  "strong-hello": "Hello <strong>{{name}}</strong>!"
}

{
  "hello": "¡Hola {{name}}!",
  "strong-hello": "¡Hola <strong>{{name}}</strong>!"
}

After this, you can consume translations in every part of your app through the request context: middleware, api routes, page routes, all page components, responseHeaders, layout, Head of each page...

Important

Important in TypeScript: The generic type <typeof en> in I18nConfig enables type-safe consumption of translations with the t function by resolving the keys, keys with plurals and nested keys from the preferred locale. This allows IDE autocompletion and type checking of translation keys throughout the codebase, improving productivity and avoiding translation bugs due to typos or invalid keys.

The generic I18nConfig<typeof en> allows you to activate type-safe consuming translations with the t function. Displaying to you all the keys from the preferred locale messages, resolving plurals and nested values.

Example in a component:

import { type RequestContext } from "brisa";

type Props = { name: string };

export default function Hello({ name }: Props, { i18n }: RequestContext) {
  return (
    <main>
      <h1>{i18n.t("hello", { name })}</h1>
      <h2>
        {i18n.t("strong-hello", { name }, { elements: { strong: <strong /> } })}
      </h2>
    </main>
  );
}

export default function Hello({ name }, { i18n }) {
  return <h1>{i18n.t("hello", { name })}</h1>;
}

---

More docs here: https://github.com/aralroca/brisa/blob/995a9cbfb61d3e98ecf0b5397fba936d90ebbafc/docs/02-building-your-application/01-routing/08-internationalization.md

[aralroca]

Probably I should use @/core directly