Skip to content

Commit

Permalink
docs: update snowpack-plugin.rst on dynamic imports (#1026)
Browse files Browse the repository at this point in the history
  • Loading branch information
amankkg authored Apr 3, 2021
1 parent d7961a0 commit 1069b15
Showing 1 changed file with 20 additions and 5 deletions.
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.

1 comment on commit 1069b15

@vercel
Copy link

@vercel vercel bot commented on 1069b15 Apr 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.