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

apps/transloco-playground/src/app/home/home.component.html

@@ -1,10 +1,13 @@
-<h6 class="mb-6"></h6>
-
 <div class="text-center mb-4">
   <h1>Welcome to the Transloco Playground</h1>
-  <a href="https://jsverse.gitbook.io/transloco/" class="btn btn-primary"
-    >📖 Read the docs</a
+  <a
+    href="https://jsverse.gitbook.io/transloco/"
+    class="btn btn-primary"
+    target="_blank"
+    rel="noopener"
   >
+    <span>📖 Read the docs</span>
+  </a>
 </div>
 
 <div class="flex justify-around">
@@ -22,9 +25,13 @@ <h4>📚 Looking for More?</h4>
     <p>
       For detailed guides, advanced topics, and setup instructions, head over to
       the
-      <a href="https://jsverse.gitbook.io/transloco/"
-        >official Transloco documentation</a
-      >.
+      <a
+        href="https://jsverse.gitbook.io/transloco/"
+        target="_blank"
+        rel="noopener"
+      >
+        <span>official Transloco documentation</span>
+      </a>
     </p>
   </div>
 
@@ -33,10 +40,12 @@ <h4>🤿 Dive into the implementation</h4>
     <p>
       You can find the source code for this app in the
       <a
-        target="_blank"
         href="https://github.com/jsverse/transloco/tree/master/apps/transloco-playground"
-        >transloco repo</a
-      >.
+        target="_blank"
+        rel="noopener"
+      >
+        <span>transloco repo</span>
+      </a>
     </p>
   </div>
 </div>
@@ -50,7 +59,7 @@ <h3 class="mb-6">Structural Directive</h3>
           <b>Regular: </b>{{ t('home') }}
         </li>
         <li class="list-group-item" data-cy="with-params">
-          <b>With params: </b>{{ t('alert', { value: dynamic }) }}
+          <b>With params: </b>{{ t('alert', { value: dynamic() }) }}
         </li>
         <li class="list-group-item" data-cy="with-translation-reuse">
           <b>With translation reuse: </b> {{ t('a.b.c') }}
@@ -78,13 +87,16 @@ <h3 class="my-6">Directive</h3>
         data-cy="d-with-params"
       >
         <b>(click) With params: </b
-        ><span transloco="alert" [translocoParams]="{ value: dynamic }"></span>
+        ><span
+          transloco="alert"
+          [translocoParams]="{ value: dynamic() }"
+        ></span>
       </li>
       <li class="list-group-item" data-cy="d-with-translation-reuse">
         <b>With translation reuse: </b> <span transloco="a.b.c"></span>
       </li>
       <li class="list-group-item" (click)="changeKey()" data-cy="d-dynamic-key">
-        (click) <b>Dynamic key: </b> <span [transloco]="key"></span>
+        <b>(click) Dynamic key: </b> <span [transloco]="key()"></span>
       </li>
       <li class="list-group-item" data-cy="d-static-lang-es">
         <b>Static lang 'es': </b
@@ -99,7 +111,10 @@ <h3 class="my-6">Pipe</h3>
         <b>Regular: </b>{{ 'home' | transloco }}
       </li>
       <li class="list-group-item" data-cy="p-with-params">
-        <b>With params: </b>{{ 'alert' | transloco: { value: dynamic } }}
+        <b>With params: </b>{{ 'alert' | transloco: { value: dynamic() } }}
+      </li>
+      <li class="list-group-item" (click)="changeKey()" data-cy="p-dynamic-key">
+        <b>(click) Dynamic key: </b> <span> {{ key() | transloco }}</span>
       </li>
       <li class="list-group-item" data-cy="p-with-translation-reuse">
         <b>With translation reuse: </b> {{ 'a.b.c' | transloco }}
@@ -109,12 +124,33 @@ <h3 class="my-6">Pipe</h3>
       </li>
     </ul>
   </div>
+  <div>
+    <h3 class="my-6">Signal</h3>
+    <ul class="list-group">
+      <li class="list-group-item" data-cy="s-regular">
+        <b>Regular:</b> {{ transloco() }}
+      </li>
+      <li class="list-group-item" data-cy="s-object">
+        <b>Object:</b> {{ translocoObject().title }}
+      </li>
+      <li
+        class="list-group-item"
+        data-cy="s-with-params"
+        (click)="changeParam()"
+      >
+        <b>(click) Dynamic params:</b> {{ translocoParams() }}
+      </li>
+      <li class="list-group-item" (click)="changeKey()" data-cy="s-dynamic-key">
+        <b>(click) Dynamic key: </b> {{ translocoKeys() }}
+      </li>
+    </ul>
+  </div>
   <div>
     <h3 class="my-6">Translation in {{ '@for' }}</h3>
     <ul class="list-group">
-      @for (key of translateList; track key) {
+      @for (key of translateList; track key; let index = $index) {
         <li class="list-group-item" data-cy="translation-loop">
-          {{ key | transloco }}
+          <b>Index {{ index + 1 }}:</b> {{ key | transloco }}
         </li>
       }
     </ul>

apps/transloco-playground/src/app/home/home.component.ts

@@ -1,8 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
-import { TranslocoModule } from '@jsverse/transloco';
-
-import { environment } from '../../environments/environment';
+import {
+  TranslocoModule,
+  translateObjectSignal,
+  translateSignal,
+} from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home',
@@ -13,16 +15,21 @@ import { environment } from '../../environments/environment';
   imports: [TranslocoModule],
 })
 export class HomeComponent {
-  dynamic = '🦄';
-  key = 'home';
+  dynamic = signal('🦄');
+  key = signal('home');
+
+  transloco = translateSignal('home');
+  translocoObject = translateObjectSignal('nested');
+  translocoParams = translateSignal('alert', { value: this.dynamic });
+  translocoKeys = translateSignal(this.key);
 
-  translateList = ['b', 'c'];
+  translateList = ['home', 'a.b.c', 'b', 'c'];
 
   changeKey() {
-    this.key = this.key === 'home' ? 'fromList' : 'home';
+    this.key.update((key) => (key === 'home' ? 'fromList' : 'home'));
   }
 
   changeParam() {
-    this.dynamic = this.dynamic === '🦄' ? '🦄🦄🦄' : '🦄';
+    this.dynamic.update((dynamic) => (dynamic === '🦄' ? '🦄🦄🦄' : '🦄'));
   }
 }

apps/transloco-playground/src/app/inline-loaders/inline-loaders.component.html

@@ -1,8 +1,12 @@
 <ng-container *transloco="let t">
-  {{ t('inline.title') }}
+  <p><strong>Directive:</strong> {{ t('inline.title') }}</p>
+
   <p>
-    {{ t('alert') }}
+    <strong>Directive Global Scope:</strong>
+    {{ t('alert', { value: 'global' }) }}
   </p>
 </ng-container>
 
-<p>{{ 'inline.title' | transloco }}</p>
+<p><strong>Pipe:</strong> {{ 'inline.title' | transloco }}</p>
+<p><strong>Async:</strong> {{ title$ | async }}</p>
+<p><strong>Signal:</strong> {{ title() }}</p>

apps/transloco-playground/src/app/inline-loaders/inline-loaders.component.ts

@@ -1,26 +1,30 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import {
   TranslocoModule,
   TranslocoService,
   TRANSLOCO_SCOPE,
+  translateSignal,
 } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-inline',
   templateUrl: './inline-loaders.component.html',
   styleUrls: ['./inline-loaders.component.scss'],
   standalone: true,
-  imports: [TranslocoModule],
+  imports: [TranslocoModule, AsyncPipe],
 })
 export default class InlineLoadersComponent implements OnInit {
   private translocoService = inject(TranslocoService);
   private scope = inject(TRANSLOCO_SCOPE);
-  private title$ = this.translocoService
+  public title$ = this.translocoService
     .selectTranslate('title', {}, this.scope)
     .pipe(takeUntilDestroyed());
 
+  public title = translateSignal('title');
+
   ngOnInit() {
     console.log(this.scope);
     this.title$.subscribe(console.log);

libs/transloco/src/index.ts

@@ -63,3 +63,4 @@ export {
   provideTranslocoLang,
   TranslocoOptions,
 } from './lib/transloco.providers';
+export { translateSignal, translateObjectSignal } from './lib/transloco.signal';

libs/transloco/src/lib/tests/signal.spec.ts

@@ -0,0 +1,120 @@
+import { Component, signal } from '@angular/core';
+import { fakeAsync } from '@angular/core/testing';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { TranslocoModule } from '../transloco.module';
+import { translateSignal, translateObjectSignal } from '../transloco.signal';
+
+import { providersMock, runLoader } from './mocks';
+
+@Component({
+  imports: [TranslocoModule],
+  template: `
+    <div id="text">{{ translatedText() }}</div>
+    <div id="textObject">{{ translatedObject().title }}</div>
+    <div id="dynamicKey">{{ translatedDynamicKey() }}</div>
+    <div id="dynamicParam">{{ translatedDynamicParam() }}</div>
+  `,
+})
+class TestComponent {
+  translatedText = translateSignal('home');
+  translatedObject = translateObjectSignal('nested');
+
+  dynamicKey = signal('home');
+  dynamicParam = signal('Signal');
+
+  translatedDynamicKey = translateSignal(this.dynamicKey);
+  translatedDynamicParam = translateSignal('alert', {
+    value: this.dynamicParam,
+  });
+
+  translatedObjectDynamicKey = translateObjectSignal(this.dynamicKey);
+  translatedObjectDynamicParam = translateObjectSignal(
+    this.dynamicKey,
+    this.dynamicParam,
+  );
+
+  changeKey(key: string) {
+    this.dynamicKey.set(key);
+  }
+
+  changeParam(param: any) {
+    this.dynamicParam.set(param);
+  }
+}
+
+describe('translateSignal in component', () => {
+  let spectator: Spectator<TestComponent>;
+  const createComponent = createComponentFactory({
+    component: TestComponent,
+    imports: [TranslocoModule],
+    providers: providersMock,
+  });
+
+  it('should translate a static key', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    expect(spectator.query('#text')).toHaveText('home english');
+  }));
+
+  it('should translate a dynamic key', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    spectator.component.changeKey('fromList');
+    spectator.detectChanges();
+    expect(spectator.query('#dynamicKey')).toHaveText('from list');
+  }));
+
+  it('should translate with params', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    spectator.component.changeParam('Signal Changed');
+    spectator.detectChanges();
+    expect(spectator.query('#dynamicParam')).toHaveText(
+      'alert Signal Changed english',
+    );
+  }));
+});
+
+describe('translateObjectSignal in component', () => {
+  let spectator: Spectator<TestComponent>;
+  const createComponent = createComponentFactory({
+    component: TestComponent,
+    imports: [TranslocoModule],
+    providers: providersMock,
+  });
+
+  it('should translate a static key to an object', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    expect(spectator.query('#textObject')).toHaveText('Title english');
+  }));
+
+  it('should translate a dynamic key to an object', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    spectator.component.changeKey('key.is.like');
+    spectator.detectChanges();
+    expect(spectator.component.translatedObjectDynamicKey()).toEqual({
+      path: 'key is like path',
+    });
+  }));
+
+  it('should translate with params to an object', fakeAsync(() => {
+    spectator = createComponent();
+    runLoader();
+    spectator.detectChanges();
+    spectator.component.changeKey('a.b');
+    spectator.component.changeParam({ c: { fromList: 'Signal Changed' } });
+    spectator.detectChanges();
+    console.log(spectator.component.translatedObjectDynamicParam());
+    expect(spectator.component.translatedObjectDynamicParam()).toEqual({
+      c: 'a.b.c Signal Changed english',
+    });
+  }));
+});