Stencil Component Translations

A quick way to set up i18n for Stencil components without dependencies.

Photo by Lucas George Wendt on Unsplash

I have been using the same strategy to internationalize quickly Stencil components without dependencies in various projects. Among others for the project Owlly or the Bonjour foundation.

As all these projects are open source, I will share with you my recipe 🧑‍🍳.

Goal

I recently internationalized with the help of the community our project DeckDeckGo, but this article has for goal to add translations to a relatively small component or set of components without dependency.

I use this solution when I create components that contain some slot with default values and which have has primary market our lovely “four languages + english per default” Switzerland 🇨🇭.

Setup

In your project create a new utility translations.util.ts and add the declarations.

interface Translation {
  [key: string]: string;
}

interface Translations {
  de: Translation;
  en: Translation;
}

For this example, I will “only” use German and English. For a real life use case, extend it with your requirements.

I declared an interface Translation but, it can be replaced with a TypeScript Record<string, string>. The result is the same, as you rather like.

Following the declarations, add a constant for the default (fallback) language and a list of supported languages.

const DEFAULT_LANGUAGE: 'en' = 'en';

const SUPPORTED_LANGUAGES: string[] = ['de', 'en'];

Finally, add the effective translations.

const TRANSLATIONS: Translations = {
  de: {
    question: 'Wie fühlen Sie sich heute?',
    super: 'Sehr gut',
    bad: 'Nicht gut'
  },
  en: {
    question: 'How do you feel today?',
    super: 'Super',
    bad: 'Bad'
  }
};

In this solution, as my goal is to keep it quick and easy, I code the translations.

It is possible to handle these in separate json files and import these dynamically at runtime. That’s two features I have developed for my more complex use case. After all, I may really need to blog about…