How to dev

How to dev

How to start internationalization in SolidJS with rosetta

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: solid-translate.png

Links

Summary

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

Interested in reading more such articles from Marcin Wosinek?

Support the author by donating an amount of your choice.

 
Share this
Proudly part of