feat: simplify next-js integration (#3391)

Author: stepan662

.github/workflows/publish-examples-check.yml

@@ -15,8 +15,9 @@ jobs:
           [
             'react',
             'next',
-            'next-app',
             'vue',
+            'next-app',
+            'next-app-intl',
             'svelte',
             'ngx',
             'react-i18next',

.github/workflows/publish-examples.yml

@@ -18,6 +18,7 @@ jobs:
             'next',
             'vue',
             'next-app',
+            'next-app-intl',
             'svelte',
             'ngx',
             'react-i18next',

e2e/cypress/e2e/next-app-intl/dev.cy.ts

@@ -0,0 +1,40 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+import { exampleAppDevTest } from '../../common/exampleAppDevTest';
+
+context(
+  'Next with app router (with next-intl) in dev mode',
+  { retries: 5 },
+  () => {
+    const url = 'http://localhost:8125';
+    const translationMethods = url + '/en/translation-methods';
+    exampleAppTest(url);
+    translationMethodsTest(translationMethods, {
+      en: [
+        { text: 'This is a key', count: 2 },
+        { text: 'This is key with params value value2', count: 6 },
+        {
+          text: 'This is a key with tags bold value',
+          count: 2,
+          testId: 'translationWithTags',
+        },
+        { text: 'Translation in translation', count: 2 },
+      ],
+      de: [
+        { text: 'Dies ist ein Schlüssel', count: 2 },
+        {
+          text: 'Dies ist ein Schlüssel mit den Parametern value value2',
+          count: 6,
+        },
+        {
+          text: 'Dies ist ein Schlüssel mit den Tags bold value',
+          count: 2,
+          testId: 'translationWithTags',
+        },
+        { text: 'Translation in translation', count: 2 },
+      ],
+    });
+
+    exampleAppDevTest(url, { noLoading: true });
+  }
+);

e2e/cypress/e2e/next-app-intl/prod.cy.ts

@@ -0,0 +1,33 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+
+context('Next with app router (with next-intl) in prod mode', () => {
+  const url = 'http://localhost:8127';
+  const translationMethods = url + '/en/translation-methods';
+  exampleAppTest(url);
+  translationMethodsTest(translationMethods, {
+    en: [
+      { text: 'This is a key', count: 2 },
+      { text: 'This is key with params value value2', count: 6 },
+      {
+        text: 'This is a key with tags bold value',
+        count: 2,
+        testId: 'translationWithTags',
+      },
+      { text: 'Translation in translation', count: 2 },
+    ],
+    de: [
+      { text: 'Dies ist ein Schlüssel', count: 2 },
+      {
+        text: 'Dies ist ein Schlüssel mit den Parametern value value2',
+        count: 6,
+      },
+      {
+        text: 'Dies ist ein Schlüssel mit den Tags bold value',
+        count: 2,
+        testId: 'translationWithTags',
+      },
+      { text: 'Translation in translation', count: 2 },
+    ],
+  });
+});

e2e/cypress/e2e/next-app/dev.cy.ts

@@ -4,7 +4,7 @@ import { exampleAppDevTest } from '../../common/exampleAppDevTest';
 
 context('Next with app router in dev mode', { retries: 5 }, () => {
   const url = 'http://localhost:8122';
-  const translationMethods = url + '/en/translation-methods';
+  const translationMethods = url + '/translation-methods';
   exampleAppTest(url);
   translationMethodsTest(translationMethods, {
     en: [

e2e/cypress/e2e/next-app/prod.cy.ts

@@ -3,7 +3,7 @@ import { translationMethodsTest } from '../../common/translationMethodsTest';
 
 context('Next with app router in prod mode', () => {
   const url = 'http://localhost:8121';
-  const translationMethods = url + '/en/translation-methods';
+  const translationMethods = url + '/translation-methods';
   exampleAppTest(url);
   translationMethodsTest(translationMethods, {
     en: [

package.json

@@ -25,6 +25,7 @@
     "develop:react-i18next": "npm run develop -- --scope=@tolgee/react-i18next-testapp",
     "develop:vue-i18next": "npm run develop -- --scope=@tolgee/vue-i18next-testapp",
     "develop:next-app": "npm run develop -- --scope=@tolgee/next-app-testapp",
+    "develop:next-app-intl": "npm run develop -- --scope=@tolgee/next-app-intl-testapp",
     "develop:vue-ssr": "npm run develop -- --scope=@tolgee/vue-ssr-testapp",
     "build:e2e": "turbo run build:e2e --cache-dir='.turbo'",
     "test:e2e": "pnpm run build:e2e && pnpm --prefix e2e run start",

packages/core/src/Controller/State/initState.ts

@@ -81,8 +81,8 @@ export type TolgeeOptionsInternal = {
    *
    * ```ts
    * {
-   *   'locale': <translations | async function>
-   *   'locale:namespace': <translations | async function>
+   *   'language': <translations | async function>
+   *   'language:namespace': <translations | async function>
    * }
    * ```
    */

packages/format-icu/src/createFormatIcu.test.ts

@@ -12,10 +12,10 @@ describe('format icu', () => {
     expect(result).toEqual('result is 42,000');
   });
 
-  it('fixes invalid locale', () => {
+  it('fixes invalid language', () => {
     const formatter = createFormatIcu() as any;
-    expect(formatter.getLocale('en_GB')).toEqual('en-GB');
-    expect(formatter.getLocale('en_GB-nonsenceeeee')).toEqual('en-GB');
-    expect(formatter.getLocale('cs CZ')).toEqual('cs-CZ');
+    expect(formatter.getLanguage('en_GB')).toEqual('en-GB');
+    expect(formatter.getLanguage('en_GB-nonsenceeeee')).toEqual('en-GB');
+    expect(formatter.getLanguage('cs CZ')).toEqual('cs-CZ');
   });
 });

packages/format-icu/src/createFormatIcu.ts

@@ -12,7 +12,7 @@ export const createFormatIcu = (): FinalFormatterMiddleware => {
     }
   }
 
-  function getLocale(language: string) {
+  function getLanguage(language: string) {
     if (!locales.get(language)) {
       let localeCandidate: string = String(language).replace(/[^a-zA-Z]/g, '-');
       while (!isLocaleValid(localeCandidate)) {
@@ -33,12 +33,12 @@ export const createFormatIcu = (): FinalFormatterMiddleware => {
       (p) => typeof p === 'function'
     );
 
-    const locale = getLocale(language);
+    const locale = getLanguage(language);
 
     return new IntlMessageFormat(translation, locale, undefined, {
       ignoreTag,
     }).format(params);
   };
 
-  return Object.freeze({ getLocale, format });
+  return Object.freeze({ getLanguage, format });
 };