Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions docs/ref/snowpack-plugin.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ API Reference - Snowpack Plugin (@lingui/snowpack-plugin)
It's a good practice to use compiled message catalogs during development. However,
running :cli:`compile` everytime messages are changed soon becomes tedious.

``@lingui/snowpack-plugin`` is a snowpack loader, which compiles messages on the fly:
``@lingui/snowpack-plugin`` is a Snowpack plugin, which compiles messages on the fly:

Installation
============
Expand All @@ -32,15 +32,30 @@ Simply add ``@lingui/snowpack-plugin`` inside your ``snowpack.config.js``:
],
}

Then in your code all you need is to use dynamic() import. Extension is mandatory. In case of using po format, use ``.po``.
Then in your code all you need is to use `dynamic imports <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports>`_ to load only necessary catalog. Extension is mandatory. In case of using po format, use ``.po``.

.. code-block:: jsx
.. code-block:: ts

export async function dynamicActivate(locale: string) {
const { messages } = await import(`./locales/${locale}/messages.po`)
i18n.load(locale, messages)
let catalog: {messages: Messages}

switch (locale) {
case 'cs':
catalog = await import('./locales/cs/messages.po')
break
case 'en':
default:
catalog = await import('./locales/en/messages.po')
break;
}

i18n.load(locale, catalog.messages)
i18n.activate(locale)
}

.. note::
Comparing to `Webpack instructions for dynamic loading <./loader.html>`_, code snippet above doesn't rely on variable ``locale`` to do the actual import. Instead, we manually check every possible value using ``switch/case`` and import final catalog by exact path. This is default behavior (or restriction?) of `esbuild <https://esbuild.github.io>`_ - *extremely fast JavaScript bundler* used by Snowpack under the hood. There is `an issue regarding this feature <https://github.com/evanw/esbuild/issues/700>`_
Similar restrictions apply to Babel macros or other non-standard features - they won't work with ``esbuild``

See the `guide about dynamic loading catalogs <../guides/dynamic-loading-catalogs.html>`_
for more info.