Native sveltekit and sveltekit-i18n support

[sbrinkmann]

Currently there is not conifguration option or auto detect for native sveltekit and sveltekit-i18n* support. As a workarround it is possible to configure svelte support. This at least makes it possible to add translations to the common translation file but it doesn't refernce them correctly in the code.

sveltekit-i18n structures there translations into a common and route dependent translations. To reference them correctly the common and route dependent translations are prefixed and resolved accordingly. A translation from the common file is referenced as following {$t('common.greeting')} and a translation for the about is resolved like this {$t('about.title')}.

Structure for the locales within the file system:

/src/locales

/src/locales/en /src/locales/en/common.json /src/locales/en/about.json /src/locales/en/home.json

/src/locales/de /src/locales/de/common.json /src/locales/de/about.json /src/locales/de/home.json

*https://github.com/sveltekit-i18n/lib

[d0x7]

I tried getting it to work, but it seems the whole extension is broken for me? It's not doing anything. It was complaining the whole time about that the translation key doesn't exist, then I tried some things and it went away, but nothing works. I cannot open the editor, I literally cannot do anything. I set pathMatcher to {namespaces}/{locales}.json which matches my i18n structure but nothing happens (namespaces are checked). When I CTRL-P > Open Editor, it doesn't matter what I enter, a valid key or just spam, nothing happens.

Already reinstalled, any ideas or is this just a "sign" of not proper detecting i18n files?

[mattkanwisher]

Yeah the plugin won't load cause its trying to detect 'svelte-i18n', when it needs to detect 'sveltekit-i18n'. I'm working on a PR over here https://github.com/lokalise/i18n-ally/compare/main...mattkanwisher:i18n-ally:sveltekit?expand=1

[boian-ivanov]

Until support is added, I recommend the manual approach of adding a .vscode/i18n-ally-custom-framework.yml file with the following to at least have support for sveltekit-i18n. After playing around with the regex formula, the following config and regex seem to be able to do the trick. Monopoly is added just to not use any other framework templates in the project, but if necessary can be removed.

languageIds:
  - javascript
  - typescript
  - svelte
  - sveltekit

usageMatchRegex:
  - "[^\\w\\d].*?\\$t\\(['\"`]({key})['\"`]"

monopoly: true

Edit: I've updated the above regex to comply with $t(...) found both in markup and script. Also if you have separate folders with different translations, you can add a directory key like so:

directory: 'src/locales/{locale}/{ns}.json'

This will point to the correct locale in each folder and i18n-ally will give you a prompt for which file to save the translation through it, which is quite useful.

[terales]

The #815 was merged and published within v2.9.0. Can you check how it works for you, please?

@sbrinkmann @d0x7 @mattkanwisher @boian-ivanov Should this issue be closes or there are outstanding improvements to be made?

[boian-ivanov]

@terales After commenting my custom YML file that sorts compatibility with sveltekit-i18n, things seem to be working in the same way. If there are any issues I'll report them back here. Thank you for sorting this out 🙏