Label Module Provider

Want to localize labels and reuse them across different pages? The Label Module Provider serves file-based labels as ES modules, and it shows different translations of each label depending on the user's locale.

To determine the user's locale, the Label Module Provider evaluates these resources in this order:

  1. The locale path parameter in the request
  2. The Accept-Language header in the request
  3. The default locale set by the runtime

In your project's src directory, add a labels folder. For each supported locale, create a JSON file that contains all the labels you want to use. The name of each file should be the all-lowercase locale code corresponding to the language and region of its labels. For example, if you have labels for the fr-FR locale, put them in a file named fr-fr.json.

If the Label Module Provider can't find a label file for a requested language and region code, it looks for a file that corresponds to only the requested language. For example, if a user requests en-US labels but you don't have an en-us.json file, the module provider looks for an en.json file as a fallback.

Here's an example of a file with labels for the English (en) language.

The same labels for the French (fr) language and country of France (FR) are in a separate file.

To import the package for this module provider (@lwrjs/label-module-provider), run this code in your terminal. This also a dependency on @lwrjs/label-module-provider to your project's package.json.

Then, register the module provider in lwr.config.json. Remember to include all the default module providers in the moduleProviders array.

In the same config file, add a route handler to the app route.

In lwr.config.json, you can set a package specifier for importing labels and customize the filepath of the label files.

  • provideDefault - When true, the module provider returns the label reference as the value for any label it can't find. When false, the module provider returns undefined for labels it can't find. This lets any module providers called afterward attempt to resolve the request.
  • labelDirs - An array of one or more label package namespaces and their locations in the project directory.

If you don't specify a value for dir or package, the module provider uses the following configuration by default.

After you create your label files and configure the Label Module Provider, you can import labels into your components.

Here's an example of an app that displays a localized string (greeting) on its homepage. The Label Module Provider returns the label value from the file corresponding to the requested locale.

In this example:

  • import GREETING from '@my/label/home.greeting' determines the language of the text that's displayed on the homepage.
  • @my/label is the package namespace configured through the Label Module Provider
  • home.greeting is the label reference in the label files. It's in the format of a property selector for label JSON file.

Templates can't access the Label Module Provider. To pass translated strings into static templates, use a route handler. Templates have access to the viewParams returned by the route handler.