Feature: Provide autocomplete

[s4m0r4m4]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When developing an application, the user has no direct/immediate insight into what keys are available. The Key Manager is certainly helpful for this, but I think there is possibly a better path.

Expected behavior

There was an article a while back that provided an interesting solution for providing languages from TypeScript objects instead, which enabled simple autocomplete in any typescript-supporting editor. I was especially blown away by the functionality presented in a gif at the end of the article.

I'm wondering if this would be doable for transloco as well. The hooks seem to be there (modifying the loader, providing a wrapper service), but I wanted to start the discussion to see if there was interest in this and, if so, to gather any pointers you may have if I am to try and develop it.

One concern I have is over breaking other transloco ecosystem tools. I know I can provide my own TranslocoLoader implementation, but my understanding is that that is only used for the application itself, not tooling (like the key manager or others). So I'm a little concerned that if I were to go down this route I would put myself in a place where none of the other tooling works.

Minimal reproduction of the problem with instructions

n/a

What is the motivation / use case for changing the behavior?

I believe this would significantly enhance the usability of transloco and set it miles above existing i18n packages out there. In the world of C#, this would be akin to resources files (.resx) that are automatically generated from XML and provide static classes with keys that are easily accessible in an editor.

Environment

Angular version: 10.0

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12 LTS
- Platform:  Windows

[itayod]

Hi @s4m0r4m4, looking at the article above, it looks like everything that is done in this article can also work in Transloco, saying that you must also know the disadvantage of using this method...

When you import the translation files the way it demonstrated in this article you actually load the translation files eagerly into your bundle which is the main reason why we don't think that's a good practice.

Using this option or not is up to you.

[EladShechter]

I have another idea how to get the advantages of angular-ngx-translate-typing into the project in the one hand, and in the other hand not to load all the languages to the bundle.
The idea is that in the source the translation files, will be written in type script files, and there will be a service that create an object of keys, so the type script of the main translation will be imported for this.
But, for the values, the webpack will convert the ts files to be JSON files in the dist/assets/118n by plugin (I have already been written this plugin), and then in run time the application will behave like now with reading jsons.
The big advantage of writing ts files instead of json files, beside of auto complete is validation, refactoring, tracking usages, handling with missing/unused keys, shortcuts for long hierarchies. It can make some of the tools packages of transloco (like
transloco-keys-manager and transloco-validator ) to be redundant.

[itayod]

Hi @EladShechter not sure I understood exactly how would it work, if you like you can create a poc with your solution and I will take a look at that.

thanks!

[EladShechter]

You can see it in https://github.com/EladShechter/transloco-autocomplete.
This project is forked from the transloco playground.
Look at the files: addTranslationsAssets.js, translocokeys.service.ts, and the changes in lazy directory.

[s4m0r4m4]

Thanks for your reply, much appreciated!

[s4m0r4m4]

Not sure if you want to close this or document it or whatever, your call. I still maintain this is an important feature for long-term maintenance of translation files and their usage, but the architecture would be quite different and probably not something transloco would like to pursue (I managed to build out my own typescript-based lazy loading file architecture, but it would likely result in large changes to transloco). I'm ok if you'd like to close this.

[EladShechter]

Hey, when you use the article solution, you import TS files by Webpack dynamic import. How do you handle with nested translation files? Webpack dynamic import fetches only the direct files, and not in nested folders