# How to start internationalization in SolidJS with rosetta

In this article, I'll show how to add [rosetta](https://github.com/lukeed/rosetta) - small, but powerful i18n library to [SolidJs](https://www.solidjs.com/) 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](https://how-to.dev/5-javascript-internationalization-libraries-that-look-interesting). Since then, I mostly experimented with [i18next](https://how-to.dev/series/i18next-tutorial), 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](https://www.solidjs.com/guide) and use [degit](https://www.npmjs.com/package/degit) to copy an official project scaffolding:
```shell
$ npx degit solidjs/templates/js solidjs-rosetta
```

After starting the project, we should install its dependencies:
```sh
$ cd solidjs-rosetta
$ npm install 
```

# Dependecies
The only additional dependency we need is rosetta itself:
```sh
$ npm install --save rosetta
```

# Code
For starting my i18n, I'll replace the original `src/App.jsx` with:
```JS
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1630511476979/Xi-Tdbdh1.png)

# Links
* [example respository](https://github.com/how-to-js/solidjs-rosetta)
* [working application](https://how-to-js.github.io/solidjs-rosetta/dist)
* [free video course for SolidJS](https://www.subscribepage.com/freesolidjscourse)

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