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]

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