Localization support via the svelte compiler.

ivands commented 2 months ago

Describe the problem

I've been thinking of ways to simplify the localization part of our website. And I think svelte is in a particular great position to make localization a lot simpler for devs to implement.

Describe the proposed solution

My idea is as follows: Let's say the Svelte compiler can scan your files for instances where text needs to be translated. My example would be a rune called: $t. Example 1:

<div>{$t`Hello world!`}</div>

Example 2:

const pageTitle = $t`Hello world`

Svelte would be able to auto-generate key-value-based language files. Based on all the instances it saw text that needed to be translated. The benefits would be huge:

It could do some analysis to figure out when and where to load the translation files to get the best performance. (Maybe vite can help here.)
This would keep the original text inline instead of having your text in different locations.
We could feed the auto-generated language files to some AI translation tool for automatic site translations.

What do you guys think of this idea?

Importance

would make my life easier

dummdidumm commented 2 months ago

So far we've been holding off from doing any such thing within SvelteKit, let alone Svelte. i18n has far too many opinionated setups and providers that there's a good one fits all solution. Things like https://www.npmjs.com/package/svelte-i18n or Inlang are good solutions.

ivands commented 2 months ago

oh, man. I hope you will reconsider. Something like this would be a killer feature.

ivands commented 2 months ago

Would it be possible to open up the ability for the community to add runes? That way I could make my own localization support.

7nik commented 2 months ago

But you can have a reactive template function, isn't it enough?

ivands commented 2 months ago

But you can have a reactive template function, isn't it enough?

Sadly not. To make this work I would have to analyze all text that needs to be translated at build time. Just imagine a localization feature where:

$t`Hello world`

Would be compiled to:

$t({
  en: `Hello world`,
  fr: `French version`,
  etc: `...`,
})

We will need some way of hooking into the build step inside of Svelte.

In this example we could for example have some AI tool translate the text in build time and cache it. The $t function can pick the correct translation based on the selected locale of the client.

Something like this would also remove the need for special locale file loaders. Because the transactions are already included in the bundle exactly where you want them.

7nik commented 2 months ago

Sounds more like work for a preprocessor.

ivands commented 2 months ago

Yeaa i kinda agree. Just felt like runes would be a great usecase for this.

ivands commented 2 months ago

I just made a little vite plugin on NPM: @awsless/i18n It actually really simplifies the translation process and removes the need to keep looking at different files for your translations. Maybe someone might find it useful.

ivands commented 2 months ago

When making the plugin I noticed I ran into some issues. One is that we are transforming all instances of $t`` without knowing if it's the $t from @awsless/i18n. The problem is that somebody might have written their own $t store and now it conflicts. This would also be one of the reasons for using runes. People will expect the dollar sign to be rune and not pollute the namespace. We can also be confident that transforming $t will be what users expect.

sveltejs / svelte