feat(transloco): allow to provide multiple scopes via `provideTranslocoScopes`

[EricPoul]

PR Checklist

Please check if your PR fulfills the following requirements:

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

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] 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?

Issue Number: https://github.com/ngneat/transloco/issues/708

What is the new behavior?

Does this PR introduce a breaking change?

• [x] Yes
• [ ] No

Other information

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[EricPoul]

@NetanelBasal could someone check this one?

[alexfriesen]

This looks like a breaking change as you are removing provideTranslocoScope. I think adding provideTranslocoScopes as an additional function would be a better idea

[EricPoul]

I don't mind adding a new function and the previous one marking as deprecated

[EricPoul]

@farshadhemmati would you like to keep an old provideTranslocoScope in addition to provideTranslocoScopes or just a new provideTranslocoScopes with breaking changes? I get time to make changes now.

[shaharkazaz]

@EricPoul We can merge this let's just skip the function rename

[majkers]

@EricPoul @shaharkazaz Is it just me or there is something wrong with it now?

I have:

@Component({
...
  providers: [provideTranslocoScope('ea')],
  standalone: true,
...
})

and then:

private scope: TranslocoScope = inject(TRANSLOCO_SCOPE); and when calling

this.translocoService.selectTranslate('header.logOut', undefined, this.scope) I get an error because it is an array now:

core.mjs:6531 ERROR TypeError: lang.split is not a function
    at getLangFromScope (jsverse-transloco.mjs:379:17)
    at TranslocoService.isScopeWithLang (jsverse-transloco.mjs:658:28)
    at TranslocoService.selectTranslate (jsverse-transloco.mjs:642:39)

but when I go back to decalre scope like this:

it is working OK

providers: [{
    provide: TRANSLOCO_SCOPE,
    useValue: 'ea'
  }],

EDIT: It is also working ok when I do this:

providers: [provideTranslocoScope({ scope: 'ea', alias: 'ea' })],

[shaharkazaz]

@majkers hm... It's a case that got missed when adding this feature, since now the scope is provided as multi the inject will return an array which I guess is a breaking change.

As a workaround you can just access the scope at position 0.

I'll need to check why providing the Transloco scope object is resolving the issue for you as well.

A proposed fix might be to drop the multi flag in case one scope is provided, but the thing with this is that you can get either an array or a scope if you inject it.

WDYT? @EricPoul

[majkers]

@shaharkazaz Thank for a replay but I think we must digg a bit deeper. IMHO:

This function used in selectTranslate is causing a problem for me:

And especially this fragment of code:

This if statement is returning false even though this is an array and that is because of:

export function isScopeArray(item: any): item is ProviderScope[] {
  return Array.isArray(item) && item.every(isScopeObject);
}

and this is because of:

export function isScopeObject(item: any): item is ProviderScope {
  return item && typeof item.scope === 'string';
}

Like I said. When I use this (what is OK with docs) I get an error:

providers: [provideTranslocoScope('ea')]

but when I use this, I don't

providers: [provideTranslocoScope({ scope: 'ea'' })]

[shaharkazaz]

@majkers thanks for the extra info! Would you like to open a PR for the fix? Or I'll take it?

[majkers]

Actually I never did any :) I will leave it for You

[shaharkazaz]

@majkers There is always a first time! I think it's a nice chance to contribute to an open source, especially after you have already collected all the information needed 😀

But of course it's your call 🙏

[majkers]

thanks but I will stick to tests for now :)

[shaharkazaz]

@majkers should be ok in v7.4.1