Ensure theme translation extraction keep working and people don't for…

…get to run it

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);
- keys.sort();
+ let keys = Object.keys(obj);
+ 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(
- () => {
- console.log('');
- console.log(chalk.green('updateCodeTranslations end'));
- console.log('');
- },
- (e) => {
- console.log('');
- console.error(chalk.red(`updateCodeTranslations failure: ${e.message}`));
- console.log('');
- console.error(e.stack);
- console.log('');
- process.exit(1);
- },
-);
+function run() {
+ updateCodeTranslations().then(
+ () => {
+ console.log('');
+ console.log(chalk.green('updateCodeTranslations end'));
+ console.log('');
+ },
+ (e) => {
+ console.log('');
+ console.error(chalk.red(`updateCodeTranslations failure: ${e.message}`));
+ console.log('');
+ console.error(e.stack);
+ 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}) {
- return (
- <div className={clsx(styles.playgroundHeader)}>
- <Translate id={translateId} description={description}>
- {text}
- </Translate>
- </div>
- );
+function Header({children}) {
+ return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
 function ResultWithHeader() {
  return (
  <>
- <Header
- translateId="theme.Playground.result"
- description="The result label of the live codeblocks"
- text="Result"
- />
+ <Header>
+ <Translate
+ id="theme.Playground.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
- translateId="theme.Playground.liveEditor"
- description="The live editor label of the live codeblocks"
- text="Live Editor"
- />
+ <Header>
+ <Translate
+ id="theme.Playground.liveEditor"
+ 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)}`,
  );