fix(v2): always extract translations from site/src (#4345)

* ensure translation extractor extract translations from site/src

* commit typo

packages/docusaurus/src/commands/writeTranslations.ts

@@ -15,7 +15,7 @@ import {
   getPluginsDefaultCodeTranslationMessages,
   applyDefaultCodeTranslations,
 } from '../server/translations/translations';
-import {extractPluginsSourceCodeTranslations} from '../server/translations/translationsExtractor';
+import {extractSiteSourceCodeTranslations} from '../server/translations/translationsExtractor';
 import {getCustomBabelConfigFilePath, getBabelOptions} from '../webpack/utils';
 
 async function writePluginTranslationFiles({
@@ -74,7 +74,8 @@ Available locales=[${context.i18n.locales.join(',')}]`,
     isServer: true,
     babelOptions: getCustomBabelConfigFilePath(siteDir),
   });
-  const extractedCodeTranslations = await extractPluginsSourceCodeTranslations(
+  const extractedCodeTranslations = await extractSiteSourceCodeTranslations(
+    siteDir,
     plugins,
     babelOptions,
   );

packages/docusaurus/src/server/translations/__tests__/translationsExtractor.test.ts

@@ -9,11 +9,12 @@ import fs from 'fs-extra';
 import tmp from 'tmp-promise';
 import {
   extractSourceCodeFileTranslations,
-  extractPluginsSourceCodeTranslations,
+  extractSiteSourceCodeTranslations,
 } from '../translationsExtractor';
 import {getBabelOptions} from '../../../webpack/utils';
 import path from 'path';
 import {InitPlugin} from '../../plugins/init';
+import {SRC_DIR_NAME} from '../../../constants';
 
 const TestBabelOptions = getBabelOptions({
   isServer: true,
@@ -231,8 +232,32 @@ export default function MyComponent<T>(props: ComponentProps<T>) {
   });
 });
 
-describe('extractPluginsSourceCodeTranslations', () => {
+describe('extractSiteSourceCodeTranslations', () => {
   test('should extract translation from all plugins source code', async () => {
+    const siteDir = await createTmpDir();
+
+    const siteComponentFile1 = path.join(
+      siteDir,
+      SRC_DIR_NAME,
+      'site-component-1.jsx',
+    );
+    await fs.ensureDir(path.dirname(siteComponentFile1));
+    await fs.writeFile(
+      siteComponentFile1,
+      `
+export default function MySiteComponent1() {
+  return (
+      <Translate
+        id="siteComponentFileId1"
+        description="site component 1 desc"
+      >
+        site component 1 message
+      </Translate>
+  );
+}
+`,
+    );
+
     function createTestPlugin(pluginDir: string): InitPlugin {
       // @ts-expect-error: good enough for this test
       return {
@@ -323,11 +348,16 @@ export default function MyComponent(props: Props) {
     const plugin2 = createTestPlugin(plugin2Dir);
 
     const plugins = [plugin1, plugin2];
-    const translations = await extractPluginsSourceCodeTranslations(
+    const translations = await extractSiteSourceCodeTranslations(
+      siteDir,
       plugins,
       TestBabelOptions,
     );
     expect(translations).toEqual({
+      siteComponentFileId1: {
+        description: 'site component 1 desc',
+        message: 'site component 1 message',
+      },
       plugin1Id1: {
         description: 'plugin1 description 1',
         message: 'plugin1 message 1',

packages/docusaurus/src/server/translations/translationsExtractor.ts

@@ -15,6 +15,7 @@ import globby from 'globby';
 import nodePath from 'path';
 import {InitPlugin} from '../plugins/init';
 import {posixPath} from '@docusaurus/utils';
+import {SRC_DIR_NAME} from '../../constants';
 
 // We only support extracting source code translations from these kind of files
 const TranslatableSourceCodeExtension = new Set([
@@ -31,6 +32,10 @@ function isTranslatableSourceCodePath(filePath: string): boolean {
   return TranslatableSourceCodeExtension.has(nodePath.extname(filePath));
 }
 
+function getSiteSourceCodeFilePaths(siteDir): string[] {
+  return [nodePath.join(siteDir, SRC_DIR_NAME)];
+}
+
 function getPluginSourceCodeFilePaths(plugin: InitPlugin): string[] {
   // The getPathsToWatch() generally returns the js/jsx/ts/tsx/md/mdx file paths
   // We can use this method as well to know which folders we should try to extract translations from
@@ -60,17 +65,23 @@ export async function globSourceCodeFilePaths(
 }
 
 async function getSourceCodeFilePaths(
+  siteDir: string,
   plugins: InitPlugin[],
 ): Promise<string[]> {
+  const sitePaths = getSiteSourceCodeFilePaths(siteDir);
+
   // The getPathsToWatch() generally returns the js/jsx/ts/tsx/md/mdx file paths
   // We can use this method as well to know which folders we should try to extract translations from
   // Hacky/implicit, but do we want to introduce a new lifecycle method for that???
-  const allPathsToWatch = flatten(plugins.map(getPluginSourceCodeFilePaths));
+  const pluginsPaths = flatten(plugins.map(getPluginSourceCodeFilePaths));
 
-  return globSourceCodeFilePaths(allPathsToWatch);
+  const allPaths = [...sitePaths, ...pluginsPaths];
+
+  return globSourceCodeFilePaths(allPaths);
 }
 
-export async function extractPluginsSourceCodeTranslations(
+export async function extractSiteSourceCodeTranslations(
+  siteDir: string,
   plugins: InitPlugin[],
   babelOptions: TransformOptions,
 ): Promise<TranslationFileContent> {
@@ -83,7 +94,8 @@ export async function extractPluginsSourceCodeTranslations(
     }, {});
   }
 
-  const sourceCodeFilePaths = await getSourceCodeFilePaths(plugins);
+  const sourceCodeFilePaths = await getSourceCodeFilePaths(siteDir, plugins);
+
   const sourceCodeFilesTranslations = await extractAllSourceCodeFileTranslations(
     sourceCodeFilePaths,
     babelOptions,