fix(transloco): take the last provided scope on selectTranslate

[matheo]

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/jsverse/transloco/blob/master/CONTRIBUTING.md#commit
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [x] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

What is the current behavior?

Currently we updated the way to provide the scope from:

{
    provide: TRANSLOCO_SCOPE,
    useValue: 'ourScope',
  }

to the util provided by transloco:

provideTranslocoScope({ scope: 'ourScope', loader })

and we started to see untranslated content.

Turns out it was because the util provides multi: true, inside our components, we get an array of scopes like:

[
  {
    scope: 'imported module',
    loader: { ... },
  },
  {
    scope: 'component module',
    loader: { ... },
  },
]

What is the new behavior?

Currently TranslocoService.selectTranslate() takes the array of scopes, and only loads the first one. Turns out, that the scope provided by the module is the last one, so with this PR the TranslocoService will load the scope provided last (at the end of the array).

I wonder if all the scopes in the array should be loaded instead.

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

@jsverse/transloco v7.6.1

[pkg-pr-new[bot]]

Open in StackBlitz

@jsverse/transloco

npm i https://pkg.pr.new/@jsverse/transloco@866

@jsverse/transloco-locale

npm i https://pkg.pr.new/@jsverse/transloco-locale@866

@jsverse/transloco-messageformat

npm i https://pkg.pr.new/@jsverse/transloco-messageformat@866

@jsverse/transloco-optimize

npm i https://pkg.pr.new/@jsverse/transloco-optimize@866

@jsverse/transloco-persist-lang

npm i https://pkg.pr.new/@jsverse/transloco-persist-lang@866

@jsverse/transloco-persist-translations

npm i https://pkg.pr.new/@jsverse/transloco-persist-translations@866

@jsverse/transloco-preload-langs

npm i https://pkg.pr.new/@jsverse/transloco-preload-langs@866

@jsverse/transloco-scoped-libs

npm i https://pkg.pr.new/@jsverse/transloco-scoped-libs@866

@jsverse/transloco-utils

npm i https://pkg.pr.new/@jsverse/transloco-utils@866

@jsverse/transloco-validator

npm i https://pkg.pr.new/@jsverse/transloco-validator@866

commit: 48916b6

[matheo]

Hi @shaharkazaz do you have some time to check the last PRs please? :pray: thanks in advance

[shaharkazaz]

@matheo yes I'll get to it this week, tnx!

[behdi]

hey @shaharkazaz, any plans to go ahead with this? we're having a simlar-ish problem in our project :(

[shaharkazaz]

@matheo @behdi TBH still catching up with the project after a while that I was away due to personal reasons. I'll get to it when I can I promise, I'll do my best to release all the PRs

[shaharkazaz]

@behdi @matheo Since this isn't linked to an issue, just so I'd understand, what you are saying is that Transloco never loads the cope? Or could you tell me what the use case is? Can you share a reproduction link?

[matheo]

@shaharkazaz let's say, we load a component which module provides its particular scope, so it gets added to the last position of the array of the scopes.

While loading translations from this component, I would expect to take the module scope by default, or the scope provided in the same (standalone) component (it will be the last one in the multi: true list of providers).

Currently the library takes the first registered scope as the default one, and that's kinda not intuitive IMHO, and doesn't work without a explicit scope in the leaf component/module.