add `typesafe-18n` support

[ivanhofer]

What framework do you want to have? Please provide links of its i18n solution/package. https://github.com/ivanhofer/typesafe-i18n

Please provide some overall screenshots about how the i18n usage would be like

• svelte
• react
• angular

Please provide a minimal starter project https://github.com/ivanhofer/typesafe-i18n

There are angular, svelte and react examples inside the examples folder

Additional context

I tried to get it working using this wiki-page, The keys show up, but the locale files are not detected. I could not figure out how. Please help!

# .vscode/i18n-ally-custom-framework.yml

languageIds:
   - javascript
   - typescript
   - javascriptreact
   - typescriptreact
   - html
   - svelte

usageMatchRegex:
   - "LL\\.([^(]+)\\("

# refactorTemplates:
#  - LL.$1()

monopoly: true

[terales]

Great localization package! Usually, the extension works with keys as strings, so some tweaks may be needed.

[ivanhofer]

Hi @terales, thanks! What exactly do you mean with "keys as strings"? The keys are already detected, but the issue is that the language files are not detected.

[Juici]

Currently I have this vaguely working with the following configs.

.vscode/settings.json

{
	"i18n-ally.localesPaths": ["src/lib/i18n"],
	"i18n-ally.pathMatcher": "{locale}/index.{ext}",
	"i18n-ally.enabledParsers": ["ts", "js"]
}

.vscode/i18n-ally-custom-framework.yml

languageIds:
  - javascript
  - typescript
  - svelte

usageMatchRegex:
  - "\\$?LL\\.({key})\\(\\)"

# refactorTemplates:
#   - '{$LL.$1()}'
#   - '{LL.$1()}'
#   - '$LL.$1()'
#   - 'LL.$1()'

monopoly: true

Here's a screenshot of the result.

[ivanhofer]

@Juici wow, looks really cool 👍 I will try it on some of my projects the next days

[ivanhofer]

@Juici I have tweaked the config a bit and this is now the config I use:

.vscode/settings.json

{
   "i18n-ally.pathMatcher": "{locale}/index.{ext}",
   "i18n-ally.enabledParsers": ["ts", "js"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["src/i18n"]
}

.vscode/i18n-ally-custom-framework.yml

languageIds:
   - typescript
   - javascript
   - typescriptreact
   - javascriptreact
   - svelte
   - html

usageMatchRegex:
   - "\\$?LL\\.({key})\\(((\\{.*\\})|([^)]*))\\)"

refactorTemplates:
   - '{$LL.$1()}'
   - '{LL.$1()}'
   - '$LL.$1()'
   - 'LL.$1()'

monopoly: true

It works really great! I will try to convert that config to a Framework class

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ivanhofer]

There is an open PR for this issue: #681

[Flammae]

@ivanhofer usageMatchRegex also matches cases like LL.foo[dymanic_value]() which i18n-ally has no way of inferring and throws en: i18n key "foo[dynamic_value]" does not exist. So yes, it might need some more tweaks as @terales suggested.

[ivanhofer]

@beqaMeqvabishvili thanks for your feedback. What should I do if i18n-ally does not support it?

[Flammae]

@ivanhofer Not sure. To be honest I don't even know how to even go around building a tool of this scale. I guess it would require some refactoring on i18n-ally's side to get it working

[ivanhofer]

Probably yes. But the project seems to have been abandoned. It doesn't look like there will be released new versions of this project.

[mvartuc]

If you're getting this error while integrating i18n-ally and typesafe-i18n on vscode: TSError: ⨯ Unable to compile TypeScript: error TS5095: Option 'preserveValueImports' can only be used when 'module' is set to 'es2015' or later.

I found a workaround to fix it: cd ~/.vscode/extensions/lokalise.i18n-ally-2.8.1/ yarn add -D ts-node touch src/i18n/package.json

here's my package.json: { "name": "phantom-i18n" }

You should also think about adding /src/i18n/package.json in your .gitignore (if you're working with a team)

[whalemare]

If someone goes from Google, I add a little hack that allow write your localization in .ts files (because original extension is doesn't support that). It's some weird but worked for my case

https://github.com/lokalise/i18n-ally/pull/1071