[Question] How to connect a translation store?

[yanickrochon]

I found this project on npmjs and I wonder how can this be "intl" without translating the string it's been provided? What are the plans to connect a translation store with this?

In other words, how to use the t function to substitute the provided string with a localised one prior to process it?

[yanickrochon]

For your consideration: https://github.com/yanickrochon/i18n

[sstur]

Hi @yanickrochon. As it stands right now, this is not a full solution for localization. It's sole purpose is to mark strings for static extraction (via another tool), but after translation each string would need to be either statically replaced with its localized counterpart (during some build step), or some additional runtime code would need to be added to do substitution at runtime (as you mentioned "connect a translation store").

There are plans to expand on this, and make it a more fully-functional solution, but I don't have an exact timeline I can share at this time.

I briefly checked out the project you shared, but without a more detailed README I can't really tell how it compares to the linked projects. Will be happy to check it out again in the future!

[yanickrochon]

Hi @sstur. The project was barely started last week, but one of it's package is very much based on the work of this repository, using almost the same types and tests, however adding another function to feed a map of messages. A few years ago, I created the module universal-i18n, but this module is not suitable for the current ecosystem or standards. I wanted to rewrite that for a while, but ended using next-intl until it started to break on me because of how opinionated it is.

The scope of the project I listed aims to resolve these issue in a non-obstructive and standalone manner, where each package offer building blocks, and not a one-size-fits-all solution:

• @i18n/base mainly exposes common types and standard values such as locales;
• @i18n/t exposed two fully typed functions:
  • format substitute string placeholders with parameter values, pretty much what this project does;
  • translate receive a map of strings and return a format function. The format function enables autocomplete through the provided string map, and the format function is also typed; full TS support;
• @i18n/plurals provides localised plural rules, auto-generated from the clds-data module, the published package only contains the generated plural rules;
• @i18n/react exposes a simple React provider and context, also fully typed, where the t function is provided, along with the plural rules and specified locale (this module does not load any messages, just a provider and context);
• etc.

A envisioned typical React usage would be

import pluralsEN from '@i18n/plurals/en';
import I18nProvider, { useTranslation,  type I18nMessages, Translation } from '@i18n/react';
import type { Locale } from '@i18n/base';

type AppI18nMessages = I18nMessages<typeof getMessages>;

const locale:Locale = "en";
const defaultNamespace = 'default';

const getMessages = async (locale: Locale) => { ... };

const useAppTranslation = useTranslation as Translation<App18nMessages>;

const MyComponent = async () => {
  const messages = await getMessages(locale);

  return (
    <I18nProvider 
      locale={locale} 
      ns={defaultNamespace} 
      messages={messages} 
      plurals={pluralsEN}
    >
      {children}
    </I18nProvider>
  );
};

const LocalizedComponent = () => {
  // TS autocomplete through typed hook
  const { t, plural } = useAppTranslation('namespace');
  // if a pluralised message is used, for example:
  const plurality = plural.cardinal(1); // ex: "one"
  const name = "John";

  return (
    <div>{t("Hello {name}", { plurality, name })}</div>
  );
};

The idea is this: as lucia is to next-auth, I believe Node modules should be building blocks, and not bloated too-opinionated packages. Complex enough to cut-down dev time, but simple enough that it is not in the way.

[yanickrochon]

@sstur I have just published the module mentioned above, with basic documentation, here.

Thank you for the work from this project! It was quite inspiring.

I have not yet implemented the React component render feature you have, here, but it will be added as well.