remix-polyglot

type-safe, cached-forever, split-able, non-flickering, pre-loading, persistence-agnostic internationalization made for remix ♥

...all while still using plain old json files as phrase storage.

🚨 Monkey-Patches Remix 🙈

This package uses unofficial Remix API and monkey-patches Remix data functions to make sure all lazy translation files are loaded before rendering a new page with new translation namespaces.

I hope remix will eventually provide an official way to dynamically declare route dependencies

Until then, this package is mainly meant as a case-study and to underline my opinion that an API for this is needed. The package might break with any patch release of remix - use at your own risk.

Install

npm install remix-polyglot
# yarn add remix-polyglot

Playground

Examples

See examples folder for guidance on how to setup your project

Wait what?!

type-safe

by running remix-polyglot a declaration file is created based on your translation files Enabling:

Auto-Completion:

Catching Typos:

Typed Interpolation:

cached-forever

running remix-polyglot also minifies and content-hashes your translation files and puts them next to the remix build artifacts.

split-able

Each route can use its own set of translations (namespaces) only the translation files used for the current routes and locale are loaded.

non-flickering

🚨 This behavior is achieved using internal and potential unstable Remix API

When navigating in the frontend, the transition to the next page is delayed until all required translations are loaded.
Creating the same UX like with traditional server rendering: First page render already includes all translations.
No need for loading spinners.

Note how the home-EA5A9AB7.json takes much longer to load then the route chunk (this is not the case normally). The page transition will take 1s

pre-loading

🚨 This behavior is achieved using internal and potential unstable Remix API

Required translation files of target routes are loaded along with the route chunk and loader data.
This way, the splitted-out translations are very likely to not increase page load time at all when navigating in the frontend.

Note how loading of home-EA5A9AB7.json starts at the same moment the route chunk is loaded

Let's talk

I've been unhappy with the state of i18n in JS/TS for quite a while and would like to provide a sleek & modern solution here.

Please be invited to discuss about this or send me an email.