fix(v2): i18n fixes (#4466)

packages/docusaurus-theme-classic/package.json

@@ -20,7 +20,7 @@
     "babel:lib-next": "cross-env BABEL_ENV=lib-next babel src -d lib-next --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
     "prettier": "prettier --config ../../.prettierrc --ignore-path ../../.prettierignore --write \"**/*.{js,ts,jsx,tsc}\"",
     "prettier:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\"",
-    "update-code-translations": "node update-code-translations.js"
+    "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
     "@docusaurus/core": "2.0.0-alpha.72",

packages/docusaurus-theme-classic/update-code-translations.js

@@ -9,7 +9,7 @@ const chalk = require('chalk');
 const path = require('path');
 const fs = require('fs-extra');
 const globby = require('globby');
-const {mapValues, pickBy, difference} = require('lodash');
+const {mapValues, pickBy, difference, orderBy} = require('lodash');
 
 const CodeDirPaths = [
   path.join(__dirname, 'lib-next'),
@@ -21,9 +21,16 @@ const CodeDirPaths = [
 
 console.log('Will scan folders for code translations:', CodeDirPaths);
 
+function removeDescriptionSuffix(key) {
+  if (key.replace('___DESCRIPTION')) {
+    return key.replace('___DESCRIPTION', '');
+  }
+  return key;
+}
+
 function sortObjectKeys(obj) {
-  const keys = Object.keys(obj);
+  let keys = Object.keys(obj);
-  keys.sort();
+  keys = orderBy(keys, [(k) => removeDescriptionSuffix(k)]);
   return keys.reduce((acc, key) => {
     acc[key] = obj[key];
     return acc;
@@ -61,7 +68,12 @@ async function extractThemeCodeMessages() {
 
   filesExtractedTranslations.forEach((fileExtractedTranslations) => {
     fileExtractedTranslations.warnings.forEach((warning) => {
-      console.warn(chalk.yellow(warning));
+      throw new Error(`
+Please make sure all theme translations are static!
+Some warnings were found!
+
+${warning}
+      `);
     });
   });
 
@@ -205,18 +217,23 @@ async function updateCodeTranslations() {
   }
 }
 
-updateCodeTranslations().then(
+function run() {
-  () => {
+  updateCodeTranslations().then(
-    console.log('');
+    () => {
-    console.log(chalk.green('updateCodeTranslations end'));
+      console.log('');
-    console.log('');
+      console.log(chalk.green('updateCodeTranslations end'));
-  },
+      console.log('');
-  (e) => {
+    },
-    console.log('');
+    (e) => {
-    console.error(chalk.red(`updateCodeTranslations failure: ${e.message}`));
+      console.log('');
-    console.log('');
+      console.error(chalk.red(`updateCodeTranslations failure: ${e.message}`));
-    console.error(e.stack);
+      console.log('');
-    console.log('');
+      console.error(e.stack);
-    process.exit(1);
+      console.log('');
-  },
+      process.exit(1);
-);
+    },
+  );
+}
+
+exports.run = run;
+exports.extractThemeCodeMessages = extractThemeCodeMessages;

packages/docusaurus-theme-classic/update-code-translations.test.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {extractThemeCodeMessages} = require('./update-code-translations');
+const path = require('path');
+const fs = require('fs-extra');
+const {mapValues, pickBy} = require('lodash');
+
+describe('update-code-translations', () => {
+  test(`to have base.json contain all the translations extracted from the theme. Please run "yarn workspace @docusaurus/theme-classic update-code-translations" to keep base.json up-to-date.`, async () => {
+    const baseMessages = pickBy(
+      JSON.parse(
+        await fs.readFile(
+          path.join(__dirname, 'codeTranslations', 'base.json'),
+        ),
+      ),
+      (_, key) => !key.endsWith('___DESCRIPTION'),
+    );
+
+    const codeMessages = mapValues(
+      await extractThemeCodeMessages(),
+      (translation) => translation.message,
+    );
+    expect(codeMessages).toEqual(baseMessages);
+  });
+});

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js

@@ -13,24 +13,20 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
 
-function Header({translateId, description, text}) {
+function Header({children}) {
-  return (
+  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
-    <div className={clsx(styles.playgroundHeader)}>
-      <Translate id={translateId} description={description}>
-        {text}
-      </Translate>
-    </div>
-  );
 }
 
 function ResultWithHeader() {
   return (
     <>
-      <Header
+      <Header>
-        translateId="theme.Playground.result"
+        <Translate
-        description="The result label of the live codeblocks"
+          id="theme.Playground.result"
-        text="Result"
+          description="The result label of the live codeblocks">
-      />
+          Result
+        </Translate>
+      </Header>
       <div className={styles.playgroundPreview}>
         <LivePreview />
         <LiveError />
@@ -42,11 +38,13 @@ function ResultWithHeader() {
 function EditorWithHeader() {
   return (
     <>
-      <Header
+      <Header>
-        translateId="theme.Playground.liveEditor"
+        <Translate
-        description="The live editor label of the live codeblocks"
+          id="theme.Playground.liveEditor"
-        text="Live Editor"
+          description="The live editor label of the live codeblocks">
-      />
+          Live Editor
+        </Translate>
+      </Header>
       <LiveEditor className={styles.playgroundEditor} />
     </>
   );

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

@@ -167,7 +167,7 @@ function extractSourceCodeAstTranslations(
   sourceCodeFilePath: string,
 ): SourceCodeFileTranslations {
   function staticTranslateJSXWarningPart() {
-    return 'Translate content could not be extracted.\nIt has to be a static string, like <Translate>text</Translate>.';
+    return 'Translate content could not be extracted.\nIt has to be a static string and use optional but static props, like <Translate id="my-id" description="my-description">text</Translate>.';
   }
   function sourceFileWarningPart(node: Node) {
     return `File=${sourceCodeFilePath} at line=${node.loc?.start.line}`;
@@ -268,7 +268,7 @@ function extractSourceCodeAstTranslations(
         };
       } else {
         warnings.push(
-          `${staticTranslateJSXWarningPart}\n${sourceFileWarningPart(
+          `${staticTranslateJSXWarningPart()}\n${sourceFileWarningPart(
             path.node,
           )}\n${generateCode(path.node)}`,
         );