feat(react-i18n): add support for custom useTranslation function aliases

locales/en.json

@@ -52,6 +52,7 @@
   "config.editor_prefer_editor": "Prefer to use webview editor for locale editing.",
   "config.enabled_frameworks": "Specify the supported framework(s) to enable. If no value is set, the extension will detect frameworks automatically.",
   "config.enabled_parsers": "Locale file format parsers. By default, It will be handled by activated frameworks",
+  "config.use_translation_functions": "Aliases for a useTranslation function that can set a scoped namespace. By default, It will use \"useTranslation\".",
   "config.encoding": "File encoding for reading and writing locale files",
   "config.full_reload_on_changed": "Perform a full reload on locale file changes. (for .js/.ts dynamic import)",
   "config.google_api_key": "API key for Google Translate (Optional)",

package.json

@@ -859,6 +859,13 @@
           },
           "description": "%config.enabled_parsers%"
         },
+        "i18n-ally.useTranslationFunctions": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "%config.use_translation_functions%"
+        },
         "i18n-ally.keysInUse": {
           "type": "array",
           "items": {

src/core/Config.ts

@@ -18,6 +18,7 @@ export class Config {
     'includeSubfolders',
     'enabledFrameworks',
     'enabledParsers',
+    'useTranslationFunctions',
     'dirStructure',
     'encoding',
     'namespace',
@@ -155,6 +156,15 @@ export class Config {
     return ids
   }
 
+  static get useTranslationFunctions(): string[] | undefined {
+    let ids = this.getConfig<string | string[]>('useTranslationFunctions')
+    if (!ids || !ids.length)
+      return undefined
+    if (typeof ids === 'string')
+      ids = [ids]
+    return ids
+  }
+
   static get enabledParsers(): string[] | undefined {
     let ids = this.getConfig<string | string[]>('enabledParsers')
     if (!ids || !ids.length)

src/frameworks/react-i18next.ts

@@ -162,7 +162,9 @@ class ReactI18nextFramework extends Framework {
 
     // Add first namespace as a global scope resetting on each occurrence
     // useTranslation(ns1) and useTranslation(['ns1', ...])
-    const regUse = /useTranslation\(\s*\[?\s*['"`](.*?)['"`]/g
+    // we support alternate naming of useTranslation via config
+    const useTranslationFunctions = Config.useTranslationFunctions ?? ['useTranslation'];
+    const regUse = new RegExp(`(${useTranslationFunctions.join('|')})\\(\\s*\\[?\\s*['"\`](?<namespace>.*?)['"\`]`, 'g');
     let prevGlobalScope = false
     for (const match of text.matchAll(regUse)) {
       if (typeof match.index !== 'number')
@@ -173,12 +175,12 @@ class ReactI18nextFramework extends Framework {
         ranges[ranges.length - 1].end = match.index
 
       // start a new scope if namespace is provided
-      if (match[1]) {
+      if (match.groups?.namespace) {
         prevGlobalScope = true
         ranges.push({
           start: match.index,
           end: text.length,
-          namespace: match[1],
+          namespace: match.groups.namespace,
         })
       }
     }