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

* ensure translation extractor extract translations from site/src

* commit typo
This commit is contained in:
Sébastien Lorber 2021-03-04 14:58:55 +01:00 committed by GitHub
parent 43c53df158
commit 6fc6cfebf8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 9 deletions

View file

@ -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,
);

View file

@ -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',

View file

@ -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,