i18n: Detect array keys for Webpack string extraction

app/javascript/packages/rails-i18n-webpack-plugin/extract-keys-webpack-plugin.js

@@ -17,7 +17,7 @@ const PLUGIN = 'ExtractKeysWebpackPlugin';
  *
  * @type {RegExp}
  */
-const TRANSLATE_CALL = /(?:^|[^\w'-])(?:I18n\.)?t\)?\(\s*['"](.+?)['"][,\s)]/g;
+const TRANSLATE_CALL = /(?:^|[^\w'-])t\)?\(\[?(['"][a-z\d\s_.,'"]+['"])]?[,\s)]/g;
 
 /**
  * Given an original file name and locale, returns a modified file name with the locale injected
@@ -42,7 +42,9 @@ function getAdditionalAssetFilename(filename, locale) {
  * @return {string[]} Translation keys.
  */
 const getTranslationKeys = (source) =>
-  Array.from(source.matchAll(TRANSLATE_CALL)).map(([, key]) => key);
+  Array.from(source.matchAll(TRANSLATE_CALL)).flatMap(([, keys]) =>
+    keys.split(',').map((key) => key.replace(/[ '"]/g, '')),
+  );
 
 /**
  * Given a file name, returns true if the file is a JavaScript file, or false otherwise.

app/javascript/packages/rails-i18n-webpack-plugin/extract-keys-webpack-plugin.spec.js

@@ -16,24 +16,33 @@ describe('getAdditionalAssetFilename', () => {
 
 describe('getTranslationKeys', () => {
   const source = `
-    import { t } from '@18f/identity-i18n';
+    const text = t('forms.button.submit');
+    const message = t('forms.messages', { count: 2 });
+    const values = t(['forms.key1', 'forms.key2']);
 
-    const text = t('explicit.call');
-
-    // i18n-tasks-use t('comment.added.1')
-    /* i18n-tasks-use t('comment.added.2') */
+    // i18n-tasks-use t('item.1')
+    /* i18n-tasks-use t('item.2') */
     /**
-     * i18n-tasks-use t('comment.added.3')
+     * i18n-tasks-use t('item.3')
      */
-    Array.from({ length: 3 }, (_, i) => t(\`comment.added.\${i + 1}\`))
+    Array.from({ length: 3 }, (_, i) => t(\`item.\${i + 1}\`));
+    // Emulate Babel template literal transpilation
+    // 1. https://babeljs.io/repl#?browsers=ie%2011&code_lz=C4CgBglsCmC2B0ASA3hABAajQRgL5gEog
+    Array.from({ length: 3 }, (_, i) => t('item.'.concat(i + 1)));
+    // 2. https://babeljs.io/repl#?browsers=ie%2011&code_lz=C4CgBgZg9gTgtgZwHQBIDeBrApgTwL5JQB2WYAlEA
+    t("forms.".concat(key, ".one"));
+    t(["forms.".concat(key, ".one")]);
   `;
 
   it('returns keys', () => {
     expect(getTranslationKeys(source)).to.deep.equal([
-      'explicit.call',
-      'comment.added.1',
-      'comment.added.2',
-      'comment.added.3',
+      'forms.button.submit',
+      'forms.messages',
+      'forms.key1',
+      'forms.key2',
+      'item.1',
+      'item.2',
+      'item.3',
     ]);
   });
 });

app/javascript/packages/rails-i18n-webpack-plugin/spec/fixtures/in1.js

@@ -3,6 +3,7 @@ import './resolved';
 
 const text = t('forms.button.submit');
 const message = t('forms.messages', { count: 2 });
+const values = t(['forms.key1', 'forms.key2']);
 
 // i18n-tasks-use t('item.1')
 /* i18n-tasks-use t('item.2') */

app/javascript/packages/rails-i18n-webpack-plugin/spec/fixtures/locales/forms/en.yml

@@ -8,3 +8,5 @@ en:
       submit: Submit
       cancel: Cancel
       reset: Reset
+    key1: value1-en
+    key2: value2-en

app/javascript/packages/rails-i18n-webpack-plugin/spec/fixtures/locales/forms/es.yml

@@ -8,3 +8,5 @@ es:
       submit: Enviar
       cancel: Cancelar
       reset: Reiniciar
+    key1: value1-es
+    key2: value2-es

app/javascript/packages/rails-i18n-webpack-plugin/spec/fixtures/locales/forms/fr.yml

@@ -7,3 +7,5 @@ fr:
     button:
       cancel: Annuler
       reset: Réinitialiser
+    key1: value1-fr
+    key2: value2-fr

app/javascript/packages/verify-flow/steps/password-confirm/forgot-password.tsx

@@ -26,7 +26,7 @@ export function ForgotPassword({ goBack }: ForgotPasswordProps) {
       />
       <PageHeading>{t('idv.forgot_password.modal_header')}</PageHeading>
       <ul className="usa-list">
-        {(t('idv.forgot_password.warnings') as unknown as string[]).map((warning) => (
+        {t(['idv.forgot_password.warnings']).map((warning) => (
           <li key={warning}>{warning}</li>
         ))}
       </ul>