Patreon wordmark

Stele - Configuring Stele to be runtime or compile time

Components
HomeHow Stele Works
How To
Common Runtime RefactorsConfiguring Stele to be runtime or compile timeWhat is Runtime modeHow to enable Runtime ModeContextDevelopmentSimple CasesStele Awareness
LicenseTechdebt

What is Runtime mode

Runtime mode allows Stele to perform translation lookups at runtime as opposed to compile time.

This is necessary because sometimes the message to be translated is context dependent and the context is only known at runtime.

Stele achieves this by transforming the message to include an IIFE containing a switch statement of the different locales demonstrated:

Input JSX:

<Text i18n={locale}>hello</Text>

Output JSX:

(function (_locale) {
    switch (_locale) {
      default:
        return <Text>hello</Text>;
      case "fr-FR":
        return <Text>bonjour</Text>;
      case "de-DE":
        return <Text>guten tag</Text>;
    }
  })(locale)

Input translate function:

import { translate } from '@patreon/stele'
translate(locale, 'hello friend')

Output translate function:

translate(locale, (function (_locale) {
    switch (_locale) {
      default:
        return "hello friend";
      case "de-DE":
        return "Hallo Freund";
      case "fr-FR":
        return "salut l'ami";
    }
  })(locale))

How to enable Runtime Mode

To enable runtime mode in your .babelrc, you will want your config for Stele to look something like this:

import { Locale } from '@patreon/stele'
;[
    '@patreon/stele/dist/plugin',
    {
        targetLocales: [Locale('en-US'), Locale('fr-FR'), Locale('de-DE')],
        runtimeInlineTranslations: true,
    },
]

Note: targetLocales is mutually exclusive with compile time's currentLocale

© Patreon