How to start internationalization in SolidJS with rosetta

#javascript #solidjs

In this article, I'll show how to add rosetta - small, but powerful i18n library to SolidJs application.

Rosetta

It is a minimalistic library that caught my attention when I was checking out what i18n libraries are out there - 5 libraries that looked interesting for me. Since then, I mostly experimented with i18next, but it feels a bit too big for many use cases.

Solid

An interesting, React-like framework that reached 1.0.0 in June this year.

Starting a new project

To start a new application with Solid, the best way is to follow the documentation and use degit to copy an official project scaffolding:

$ npx degit solidjs/templates/js solidjs-rosetta

After starting the project, we should install its dependencies:

$ cd solidjs-rosetta
$ npm install

Dependecies

The only additional dependency we need is rosetta itself:

$ npm install --save rosetta

Code

For starting my i18n, I'll replace the original src/App.jsx with:

import styles from "./App.module.css";

import rosetta from "rosetta";

const i18n = new rosetta({
  en: {
    hello: "Hello world!",
  },
});

i18n.locale("en");

function App() {
  return (
    <div class={styles.App}>
      <header class={styles.header}>{i18n.t("hello")}</header>
    </div>
  );
}

export default App;

The size difference between the build application with rosetta and the same with the translation hardcoded inside the view is:

# i18n with rosetta
dist/assets/index.54039bfe.js      1.14 KiB / brotli: 0.54 KiB
dist/assets/vendor.8b5da6db.js     5.73 KiB / brotli: 2.10 KiB

# harcoded value
dist/assets/index.153e60c6.js      1.07 KiB / brotli: 0.51 KiB
dist/assets/vendor.29e4bc78.js     5.29 KiB / brotli: 1.91 KiB

About 0.51 KiB - quite impressive, I would say.

Working application

With all that in place, the application should looks as follow:

Summary

In this article, we have built a simple infrastructure for adding multiple languages to an application based on Solid.

Top comments (4)

David Di Biase • Sep 2 '21

Thanks for writing this great series! There's also a pure Solid implementation of Rosetta's pattern created by a core SolidJS member: github.com/amoutonbrady/solid-i18n