feat(transloco): Added a translateSignal resource for reactive translation

[Rodrigo54]

PR Checklist

Please check if your PR fulfills the following requirements:

• 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?

• Feature
• Bugfix
• 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?

Angular's new change detection is heavily signal-based but transloco does not provide a signal-based solution.

Issue Number: #781

What is the new behavior?

This pull request introduces the translateSignal and translateObjectSignal functions, which allow you to get translated values ​​reactively.

Usage examples

import {
  TranslocoModule,
  translateObjectSignal,
  translateSignal,
} from '@jsverse/transloco';

@Component({
  imports: [TranslocoModule],
  template: `
    <input ([ngModel])="dynamicKey" />
    <div id="text">{{ translatedText() }}</div>
    <div id="textObject">{{ translatedObject().title }}</div>
    <div id="dynamic">{{ translatedDynamic() }}</div>
    <button (click)="changeParam("🦄")">{{ translatedDynamic() }}</div>
  `,
})
class TestComponent {
  translatedText = translateSignal('home');
  translatedObject = translateObjectSignal('nested');

  dynamicKey = signal('home');
  dynamicParam = signal('Signal');
  computedParams = computed(() => ({ value: this.dynamic() }));

  translatedDynamic = translateSignal(this.key, this.computedParams);
  // translatedDynamic = translateSignal(this.dynamicKey,  {
  //  value: this.dynamicParam,
  // });

  changeKey(key: string) {
    this.dynamicKey.set(key);
  }

  changeParam(param: any) {
    this.dynamicParam.set(param);
  }
}

Does this PR introduce a breaking change?

• Yes
• No

[pkg-pr-new]

Open in Stackblitz

@jsverse/transloco

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

@jsverse/transloco-locale

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

@jsverse/transloco-messageformat

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

@jsverse/transloco-optimize

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

@jsverse/transloco-persist-lang

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

@jsverse/transloco-persist-translations

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

@jsverse/transloco-preload-langs

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

@jsverse/transloco-scoped-libs

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

@jsverse/transloco-utils

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

@jsverse/transloco-validator

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

commit: ef031f9

[gleisonkz]

Awesome, this feature will be really welcome!

[shaharkazaz]

@Rodrigo54 Thanks for the PR! Can you try it via the pkg-pr?
Anyone who is willing to try and give feedback that would be great!

[shaharkazaz]

Left a few comments, let's address them and merge 🔥