How it works

Process

The process consists of four main stages. We will take the following code as an example:

foo.svelte

<p>Hello</p>

And let’s assume that we want to have two locales, English (en, source locale) and Spanish (es).

Extract and transform

This is the main stage. For each source file, the contents are parsed using the suitable parser into an AST representation. Then, two things are done.

Extraction

Messages are extracted into the catalogs. From the above example, this is extracted:

es.po

msgid "Hello"
msgstr ""

en.po

msgid "Hello"
msgstr "Hello"

Transformation

The source file is modified to replace the messages with a calls that access the translations from the compiled catalogs. The example is transformed into:

<script>
    import _w_rt_ from '../locales/loader.svelte.js'
    const _w_runtime_ = _w_rt_('main')
</script>
<p>{_w_runtime_.t(0)}</p>

The 0 given to the .t(0) call is the index of the message. This is how wuchale avoids the use of string/hash keys which would unnecessarily bloat the bundles.

Translate

Now that the extracted messages are available, they can be translated. The translation can be done on the fly using Gemini or by exchanging the catalogs witha a translator.

In the example, only Spanish needs to be translated.

es.po

msgid "Hello"
msgstr "Hola"

Compile

Now both catalogs get compiled into compact JavaScript modules that can be loaded and imported in the code.

en.compiled.js

export const c = ['Hello']

es.compiled.js

export const c = ['Hola']

Use

Now the compiled catalogs can be loaded and used inside the code. The loading can be done in many different ways. wuchale makes sure that the indices of the messages inside the compiled catalogs matches those inside the transformed modules so that the correct message is shown at runtime.