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

[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

#1071