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:
Links
Summary
In this article, we have built a simple infrastructure for adding multiple languages to an application based on Solid.