chore: migrate translation extraction to i18next-cli

Author: MartinCupela

.github/actions/setup-node/action.yml

@@ -5,7 +5,7 @@ inputs:
   node-version:
     description: 'Specify Node version'
     required: false
-    default: '22'
+    default: '24'
 
 runs:
   using: 'composite'

AGENTS.md

@@ -42,7 +42,7 @@ Root configs:
 - codecov.yml
 - commitlint.config.mjs
 - eslint.config.mjs,
-- i18next-parser.config.js
+- i18next.config.ts
 - jest.config.js
 - jest.config.js
 - playwright.config.ts

i18next-parser.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'i18next-cli';
+
+export default defineConfig({
+  locales: ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'ko', 'nl', 'pt', 'ru', 'tr'],
+  extract: {
+    defaultNS: false,
+    extractFromComments: false,
+    functions: ['t', '*.t'],
+    input: ['./src/**/*.{tsx,ts}'],
+    keySeparator: false,
+    nsSeparator: false,
+    output: 'src/i18n/{{language}}.json',
+    preservePatterns: [
+      // to preserve a whole group
+      'timestamp/*',
+
+      // or  exact key if you want :
+      // 'timestamp/DateSeparator',
+
+      // or if you’re using explicit namespaces:
+      // 'translation:timestamp/DateSeparator',
+    ],
+    removeUnusedKeys: false,
+  },
+  types: {
+    input: ['locales/{{language}}/{{namespace}}.json'],
+    output: 'src/types/i18next.d.ts',
+  },
+});

i18next.config.ts

@@ -223,7 +223,7 @@
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "globals": "^15.13.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^9.3.0",
+    "i18next-cli": "^1.31.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -242,7 +242,7 @@
   "scripts": {
     "build": "rm -rf dist && yarn build-translations && yarn bundle",
     "bundle": "concurrently ./scripts/bundle-esm.mjs ./scripts/copy-css.sh scripts/bundle-cjs.mjs",
-    "build-translations": "i18next",
+    "build-translations": "i18next-cli extract",
     "coverage": "jest --collectCoverage && codecov",
     "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations",
     "lint-fix": "yarn prettier-fix && yarn eslint-fix",

package.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Action, Attachment } from 'stream-chat';
 
 import { useTranslationContext } from '../../context';
@@ -26,6 +26,15 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
     value?: string,
   ) => actionHandler?.(name, value, event);
 
+  const knownActionText = useMemo<Record<string, string>>(
+    () => ({
+      Cancel: t('Cancel'),
+      Send: t('Send'),
+      Shuffle: t('Shuffle'),
+    }),
+    [t],
+  );
+
   return (
     <div className='str-chat__message-attachment-actions'>
       <div className='str-chat__message-attachment-actions-form'>
@@ -38,7 +47,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
             key={`${id}-${action.value}`}
             onClick={(event) => handleActionClick(event, action.name, action.value)}
           >
-            {action.text ? t(action.text) : null}
+            {action.text ? (knownActionText[action.text] ?? t(action.text)) : null}
           </button>
         ))}
       </div>

src/components/Attachment/AttachmentActions.tsx

@@ -35,6 +35,7 @@ const UnMemoizedDateSeparator = (props: DateSeparatorProps) => {
     messageCreatedAt,
     t,
     tDateTimeParser,
+    // todo: how to register it
     timestampTranslationKey: 'timestamp/DateSeparator',
   });
 

src/components/DateSeparator/DateSeparator.tsx

@@ -33,11 +33,11 @@ export const ReminderNotification = ({ reminder }: ReminderNotificationProps) =>
           <span>
             {isBehindRefreshBoundary
               ? t('Due since {{ dueSince }}', {
-                  dueSince: t(`timestamp/ReminderNotification`, {
+                  dueSince: t('timestamp/ReminderNotification', {
                     timestamp: reminder.remindAt,
                   }),
                 })
-              : t(`Due {{ timeLeft }}`, {
+              : t('Due {{ timeLeft }}', {
                   timeLeft: t('duration/Message reminder', {
                     milliseconds: timeLeftMs,
                   }),

src/components/Message/ReminderNotification.tsx

@@ -45,7 +45,7 @@ export const useMuteHandler = (
 
         notify(
           successMessage ||
-            t(`{{ user }} has been muted`, {
+            t('{{ user }} has been muted', {
               user: message.user.name || message.user.id,
             }),
           'success',
@@ -61,7 +61,7 @@ export const useMuteHandler = (
       try {
         await client.unmuteUser(message.user.id);
 
-        const fallbackMessage = t(`{{ user }} has been unmuted`, {
+        const fallbackMessage = t('{{ user }} has been unmuted', {
           user: message.user.name || message.user.id,
         });
 

src/components/Message/hooks/useMuteHandler.ts

@@ -14,7 +14,7 @@ import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from
 import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
 import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
-import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
+import DefaultFilePreview from './FileAttachmentPreview';
 import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
 import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
 import { useAttachmentsForPreview, useMessageComposer } from '../hooks';