i18next-compose-vue

I will explain a bit the different solutions I tried

Inspiration from existing libraries

1. Component interpolation from vue-i18next and i18next-vue

Especially the first one looked promising looking at this issue https://github.com/i18next/i18next-vue/issues/8 as it seemed more dynamic.

But as you can see, they are both using a <i18next> component to interpolate Vue components and/or HTML tags directly and then some specific template or slots are needed, which is not super practical.

Then I went to the React side...

2. Trans component from react-i18next or libs like React HTML Parser

Which initially looks a bit more like what I wanted

But as seen here or here they are mostly using pure HTML parser libraries in the first place, which is what I wanted to do in the first place (using DOMParser https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)

Also find this library https://github.com/henrikjoreteg/html-parse-stringify?tab=readme-ov-file#what-does-the-ast-look-like which is the result form I kind of liked and wanted to have 😄

Solution proposal

After multiple tries I finally chose to not use any DOMParser to parse the string translation, as it could lead to too much complexity with Vue component (as HTML tags are lowercase, tagName is uppercase and parsing through each tags could lead to some uncertainty)

Here's what I propose:

1. Using a function to detect the presence of Vue components (or not) inside the translation

I implemented a method which uses a custom Regex to recognize any component present inside the translation value. It works for for opening, closing, self-closing and snake-case tags (in case of an external library for example)

It will return null or and array or component tags such as

["<NuxtLink>","</NuxtLink>"]`

2. Using a parsing function to correctly render the translation value based on the eixstence of Vue components

Starting from this translation Hallo und <NuxtLink>Wilkommen zurück</NuxtLink>! Viel Spaß <NuxtLink-2>mit unserer <SelfClosingComponent />App</NuxtLink-2><library-component> sie uns </library-component/> wissen

The idea is to get something as such:

[
  'Hallo und ',
  {
    tag: 'NuxtLink',
    content: 'Wilkommen zurück',
  },
  '! Viel Spaß ',
  {
    tag: 'NuxtLink-2',
    // this would need to be recursively parsed
    content: 'mit unserer <SelfClosingComponent />App',
  },
];

To make it easier to work with afterwards

3. Using a single component to interpolate and handle complex translation values containing Vue components

This component would accept the following props:

• The current translations functions (rtTranslate or rtGlobalTfor example) in a given context
• The translation key
• The potential params/values inside the translations
• The list of components to interpolate, as an object where we will pass the props - as they could be dynamic, they won't be part of the translation string

<RtTranslate
  :rt-translate="rtTranslate"
  i18n-key="interpolate_with_complex_translation"
  :components="{
    NuxtLink: { to: toCourseList },
    SelfClosingComponent: { prop1: 'prop1', prop2: 'prop2' },
    'NuxtLink-2': { to: 'blablabla' },
  }"
/>

By specifying NuxtLink through different names (NuxtLink and NuxtLink-2) we ensure to not overlap any existing properties.

I used a render function (h()) (https://v2.vuejs.org/v2/guide/render-function) as the translation could end-up quite complex and a template wouldn't be efficient enough

So far it only works with a simple tag wrapping text (<NuxtLink>Wilkommen zurück</NuxtLink>)

As we also have the issue of not being able to render multiple nodes in Vue 2 (it's possible in Vue 3) Meaning that we would have to wrap everything inside an extra div or span 😬

Seeing https://github.com/vuejs/vue/issues/7088, it seems doable using a functional component though

Here is the working test:

| DE | EN | | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | | |

I resumed a part of all this in the following ticket https://www.notion.so/reteach/Implement-the-solution-to-extract-Vue-components-tags-from-translation-key-values-11afafe5860b4561967d38dd3c7ce26e?pvs=4 which I directly inserted into the sprint and estimated at 8, hope you're fine with it 😄

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
pnpm build

# Runs the end-to-end tests
pnpm test:e2e
# Runs the tests only on Chromium
pnpm test:e2e --project=chromium
# Runs the tests of a specific file
pnpm test:e2e tests/example.spec.ts
# Runs the tests in debug mode
pnpm test:e2e --debug