feat: add language prop to t function (#3196)

tolgee · Apr 12, 2023 · 4a2490b · 4a2490b
1 parent fde08c6
commit 4a2490b
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 4 deletions.
diff --git a/packages/core/src/Controller/Controller.ts b/packages/core/src/Controller/Controller.ts
@@ -195,9 +195,9 @@ export const Controller = ({ options }: StateServiceProps) => {
     return cache.getTranslationNs(namespaces, languages, key);
   }
 
-  function getTranslation({ key, ns }: KeyAndNamespacesInternal) {
+  function getTranslation({ key, ns, language }: KeyAndNamespacesInternal) {
     const namespaces = getDefaultAndFallbackNs(ns || undefined);
-    const languages = state.getFallbackLangs();
+    const languages = state.getFallbackLangs(language);
     return cache.getTranslationFallback(namespaces, languages, key);
   }
 

diff --git a/packages/core/src/TranslateParams.ts b/packages/core/src/TranslateParams.ts
@@ -10,12 +10,14 @@ function parseCombinedOptions({
   noWrap,
   orEmpty,
   params,
+  language,
   ...rest
 }: Partial<TranslateProps>): Partial<TranslateProps> {
   const options: Required<TranslateOptions> = {
     ns: ns!,
     noWrap: noWrap!,
     orEmpty: orEmpty!,
+    language: language!,
   };
   return {
     ...options,

diff --git a/packages/core/src/__test/cache.test.ts b/packages/core/src/__test/cache.test.ts
@@ -187,4 +187,17 @@ describe('cache', () => {
     await Promise.resolve();
     expect(tolgee.t('test.sub')).toEqual('en.default');
   });
+
+  it('language prop overrides current language', () => {
+    tolgee = TolgeeCore().init({
+      language: 'en',
+      staticData: {
+        en: { hello: 'Hello' },
+        cs: { hello: 'Ahoj' },
+      },
+    });
+
+    expect(tolgee.t('hello')).toEqual('Hello');
+    expect(tolgee.t('hello', { language: 'cs' })).toEqual('Ahoj');
+  });
 });
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
@@ -22,6 +22,7 @@ export type TranslateOptions = {
   ns?: NsType | null;
   noWrap?: boolean;
   orEmpty?: boolean;
+  language?: string;
 };
 
 export type TranslateProps<
@@ -55,5 +56,5 @@ export type TFnType<
 
 export type KeyAndNamespacesInternal = Pick<
   TranslatePropsInternal,
-  'key' | 'ns'
+  'key' | 'ns' | 'language'
 >;
diff --git a/packages/ngx/projects/ngx-tolgee/src/__integration/t.component.spec.ts b/packages/ngx/projects/ngx-tolgee/src/__integration/t.component.spec.ts
@@ -64,6 +64,7 @@ describe('t component', () => {
         </div>
         <div t key="with_tags" data-testid="with_tags" [isHtml]="true"></div>
         <div t key="with_tags" data-testid="with_tags_disabled"></div>
+        <div t key="hello_world" language="en" data-testid="with_language_prop">
        `);
   });
 
@@ -108,6 +109,15 @@ describe('t component', () => {
     );
   });
 
+  it('works with language prop', () => {
+    expect(screen.queryByTestId('with_language_prop')).toContainHTML(
+      'Hello world!'
+    );
+    expect(screen.queryByTestId('with_language_prop')).toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
   describe('language switch', () => {
     beforeEach(async () => {
       await act(async () => {

diff --git a/packages/ngx/projects/ngx-tolgee/src/lib/t.component.ts b/packages/ngx/projects/ngx-tolgee/src/lib/t.component.ts
@@ -20,6 +20,7 @@ export class TComponent implements OnInit, OnDestroy, OnChanges {
   @Input() params?: TranslateParams<any>;
   @Input() default?: string;
   @Input() noWrap?: boolean = false;
+  @Input() language?: string;
 
   /**
    * When true, innerHTML property of element is set.
@@ -66,6 +67,7 @@ export class TComponent implements OnInit, OnDestroy, OnChanges {
       params: this.params,
       defaultValue: this.default,
       noWrap: this.noWrap,
+      language: this.language,
     };
   }
 

diff --git a/packages/react/src/T.tsx b/packages/react/src/T.tsx
@@ -12,6 +12,7 @@ type PropsWithKeyName = {
   keyName: TranslationKey;
   ns?: NsType;
   defaultValue?: string;
+  language?: string;
 };
 
 type PropsWithoutKeyName = {
@@ -20,6 +21,7 @@ type PropsWithoutKeyName = {
   noWrap?: boolean;
   ns?: NsType;
   defaultValue?: string;
+  language?: string;
 };
 
 interface TInterface {
@@ -46,6 +48,7 @@ export const T: TInterface = (props) => {
       defaultValue,
       noWrap: props.noWrap,
       ns: props.ns,
+      language: props.language,
     })
   );
 

diff --git a/packages/react/src/__integration/T.spec.tsx b/packages/react/src/__integration/T.spec.tsx
@@ -60,6 +60,9 @@ describe('T component integration', () => {
             }}
           />
         </div>
+        <div data-testid="with_language_prop">
+          <T keyName="hello_world" language="en" />
+        </div>
       </>
     );
   };
@@ -153,6 +156,15 @@ describe('T component integration', () => {
     expect(screen.queryByTestId('with_tag')).toHaveAttribute('_tolgee');
   });
 
+  it('works with language prop', () => {
+    expect(screen.queryByTestId('with_language_prop')).toContainHTML(
+      'Hello world!'
+    );
+    expect(screen.queryByTestId('with_language_prop')).toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
   describe('language switch', () => {
     beforeEach(async () => {
       await act(async () => {

diff --git a/packages/svelte/src/lib/T.svelte b/packages/svelte/src/lib/T.svelte
@@ -6,7 +6,8 @@
   export let params: Record<string, unknown> | undefined = undefined;
   export let noWrap = false;
   export let defaultValue = undefined;
-  export let ns: NsType = undefined
+  export let ns: NsType = undefined;
+  export let language: string = undefined;
 
   if (!keyName) {
     console.error('Missing keyName prop!');
@@ -21,4 +22,5 @@
   noWrap: noWrap,
   defaultValue: defaultValue,
   ns,
+  language,
 })}
diff --git a/packages/svelte/src/lib/__integration/T.spec.ts b/packages/svelte/src/lib/__integration/T.spec.ts
@@ -65,6 +65,15 @@ describe('T component integration', () => {
     expect(screen.queryByTestId('non_existant')).toHaveAttribute('_tolgee');
   });
 
+  it('works with language prop', () => {
+    expect(screen.queryByTestId('with_language_prop')).toContainHTML(
+      'Hello world!'
+    );
+    expect(screen.queryByTestId('with_language_prop')).toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
   describe('language switch', () => {
     beforeEach(async () => {
       await tolgee.changeLanguage('en');

diff --git a/packages/svelte/src/lib/__integration/components/TestTComponent.svelte b/packages/svelte/src/lib/__integration/components/TestTComponent.svelte
@@ -19,6 +19,9 @@
     <div data-testid="non_existant">
       <T keyName="non_existant" defaultValue="Non existant" />
     </div>
+    <div data-testid="with_language_prop">
+      <T keyName="hello_world" language="en" />
+    </div>
   </div>
   <span slot="fallback">Loading...</span>
 </TolgeeProvider>
diff --git a/packages/vue/src/T.ts b/packages/vue/src/T.ts
@@ -18,6 +18,7 @@ export const T = defineComponent({
       default: false,
     },
     ns: { type: Object as PropType<NsType> },
+    language: { type: String as PropType<string> },
   },
   setup() {
     const { t } = useTranslateInternal();
@@ -30,6 +31,7 @@ export const T = defineComponent({
       defaultValue: this.$props.defaultValue,
       noWrap: this.$props.noWrap,
       ns: this.$props.ns,
+      language: this.$props.language,
     };
     const content = this.t(params);
     return content;

diff --git a/packages/vue/src/__integration/T.spec.ts b/packages/vue/src/__integration/T.spec.ts
@@ -27,6 +27,9 @@ const TestComponent = {
       <div data-testid="non_existant">
         <T keyName="non_existant" defaultValue="Non existant" />
       </div>
+      <div data-testid="with_language_prop">
+        <T keyName="hello_world" language="en" />
+      </div>
     </div>`,
 };
 
@@ -99,6 +102,15 @@ describe('T component integration', () => {
     expect(screen.queryByTestId('non_existant')).toHaveAttribute('_tolgee');
   });
 
+  it('works with language prop', () => {
+    expect(screen.queryByTestId('with_language_prop')).toContainHTML(
+      'Hello world!'
+    );
+    expect(screen.queryByTestId('with_language_prop')).toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
   describe('language switch', () => {
     beforeEach(async () => {
       await tolgee.changeLanguage('en');