Add extraction support to react-i18next framework

examples/by-frameworks/react-i18next/.vscode/settings.json

@@ -1,8 +1,7 @@
 {
   "i18n-ally.localesPaths": "public/locales",
   "i18n-ally.enabledFrameworks": [
-    "react-i18next",
-    "general"
+    "react-i18next"
   ],
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",

src/frameworks/react-i18next.ts

@@ -1,7 +1,8 @@
 import { TextDocument } from 'vscode'
 import { Framework, ScopeRange } from './base'
 import { LanguageId } from '~/utils'
-import { RewriteKeySource, RewriteKeyContext } from '~/core'
+import { extractionsParsers, DefaultExtractionRules, DefaultDynamicExtractionsRules } from '~/extraction'
+import { Config, RewriteKeySource, RewriteKeyContext } from '~/core'
 
 class ReactI18nextFramework extends Framework {
   id = 'react-i18next'
@@ -33,6 +34,14 @@ class ReactI18nextFramework extends Framework {
     '\\Wi18nKey=[\'"`]({key})[\'"`]',
   ]
 
+  supportAutoExtraction = [
+    'javascript',
+    'typescript',
+    'javascriptreact',
+    'typescriptreact',
+    'html',
+  ]
+
   derivedKeyRules = [
     '{key}_plural',
     '{key}_0',
@@ -51,9 +60,37 @@ class ReactI18nextFramework extends Framework {
     '{key}_two',
     '{key}_few',
     '{key}_many',
-    '{key}_other'
+    '{key}_other',
   ]
 
+  detectHardStrings(doc: TextDocument) {
+    const lang = doc.languageId
+    const text = doc.getText()
+
+    if (lang === 'html') {
+      return extractionsParsers.html.detect(
+        text,
+        DefaultExtractionRules,
+        DefaultDynamicExtractionsRules,
+        Config.extractParserHTMLOptions,
+        // <script>
+        script => extractionsParsers.babel.detect(
+          script,
+          DefaultExtractionRules,
+          DefaultDynamicExtractionsRules,
+          Config.extractParserBabelOptions,
+        ),
+      )
+    }
+    else {
+      return extractionsParsers.babel.detect(
+        text,
+        DefaultExtractionRules,
+        DefaultDynamicExtractionsRules,
+      )
+    }
+  }
+
   refactorTemplates(keypath: string) {
     return [
       `{t('${keypath}')}`,
@@ -126,7 +163,7 @@ 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
-    let prevGlobalScope = false;
+    let prevGlobalScope = false
     for (const match of text.matchAll(regUse)) {
       if (typeof match.index !== 'number')
         continue
@@ -137,7 +174,7 @@ class ReactI18nextFramework extends Framework {
 
       // start a new scope if namespace is provided
       if (match[1]) {
-        prevGlobalScope = true;
+        prevGlobalScope = true
         ranges.push({
           start: match.index,
           end: text.length,

test/e2e/frameworks/react-i18next/basic.test.ts

@@ -14,9 +14,8 @@ setupTest('React with i18next', () => {
   it('enables correct frameworks', async() => {
     not(Global, undefined)
     is(Global.enabled, true)
-    is(Global.enabledFrameworks.length, 2)
+    is(Global.enabledFrameworks.length, 1)
     is(Global.enabledFrameworks[0].id, 'react-i18next')
-    is(Global.enabledFrameworks[1].id, 'general')
   })
 
   it('get correct coverage report', async() => {