DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Marcin Wosinek
Marcin Wosinek

Posted on • Originally published at 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
Enter fullscreen mode Exit fullscreen mode

After starting the project, we should install its dependencies:

$ cd solidjs-rosetta
$ npm install 
Enter fullscreen mode Exit fullscreen mode

Dependecies

The only additional dependency we need is rosetta itself:

$ npm install --save rosetta
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
davedbase profile image
David Di Biase

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

Collapse
 
marcinwosinek profile image
Marcin Wosinek Author

Thanks for sharing! I've seen it, and I'm looking forward into checking it out one day

Collapse
 
aisone profile image
Aaron Gong

does it handle singular, plural etc?

Collapse
 
marcinwosinek profile image
Marcin Wosinek Author

As far as I can see it doesn't. You could try achieving something like this with the translation function:
github.com/lukeed/rosetta#params

but it feels a bit hacky.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.