Localization support via the svelte compiler.

[ivands]

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]

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]

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

[ivands]

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]

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

[ivands]

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]

Sounds more like work for a preprocessor.

[ivands]

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

[ivands]

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]

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.