fix(v2): i18n perf issue: getTranslationFile() should not load conten…

…t again (#4593) * Fix getTranslationFiles() perf issue * improve doc
facebook · Apr 9, 2021 · cb403af · cb403af
1 parent e99bb43
commit cb403af
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 deletions.
diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts
@@ -104,8 +104,8 @@ export default function pluginContentDocs(
         });
     },
 
-    async getTranslationFiles() {
-      return getLoadedContentTranslationFiles(await this.loadContent!());
+    async getTranslationFiles({content}) {
+      return getLoadedContentTranslationFiles(content);
     },
 
     getClientModules() {

diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
@@ -216,14 +216,14 @@ export type AllContent = Record<
 // TODO improve type (not exposed by postcss-loader)
 export type PostCssOptions = Record<string, unknown> & {plugins: unknown[]};
 
-export interface Plugin<T> {
+export interface Plugin<Content> {
   name: string;
-  loadContent?(): Promise<T>;
+  loadContent?(): Promise<Content>;
   contentLoaded?({
     content,
     actions,
   }: {
-    content: T; // the content loaded by this plugin instance
+    content: Content; // the content loaded by this plugin instance
     allContent: AllContent; // content loaded by ALL the plugins
     actions: PluginContentLoadedActions;
   }): void;
@@ -249,7 +249,11 @@ export interface Plugin<T> {
   // TODO before/afterDevServer implementation
 
   // translations
-  getTranslationFiles?(): Promise<TranslationFiles>;
+  getTranslationFiles?({
+    content,
+  }: {
+    content: Content;
+  }): Promise<TranslationFiles>;
   getDefaultCodeTranslationMessages?(): Promise<
     Record<
       string, // id
@@ -260,9 +264,9 @@ export interface Plugin<T> {
     content,
     translationFiles,
   }: {
-    content: T; // the content loaded by this plugin instance
+    content: Content; // the content loaded by this plugin instance
     translationFiles: TranslationFiles;
-  }): T;
+  }): Content;
   translateThemeConfig?({
     themeConfig,
     translationFiles,

diff --git a/packages/docusaurus/src/commands/writeTranslations.ts b/packages/docusaurus/src/commands/writeTranslations.ts
@@ -30,7 +30,10 @@ async function writePluginTranslationFiles({
   options: WriteTranslationsOptions;
 }) {
   if (plugin.getTranslationFiles) {
-    const translationFiles = await plugin.getTranslationFiles();
+    const content = await plugin.loadContent?.();
+    const translationFiles = await plugin.getTranslationFiles({
+      content,
+    });
 
     await Promise.all(
       translationFiles.map(async (translationFile) => {

diff --git a/packages/docusaurus/src/server/plugins/index.ts b/packages/docusaurus/src/server/plugins/index.ts
@@ -52,14 +52,6 @@ export function sortConfig(routeConfigs: RouteConfig[]): void {
   });
 }
 
-export type AllPluginsTranslationFiles = Record<
-  string, // plugin name
-  Record<
-    string, // plugin id
-    TranslationFiles
-  >
->;
-
 export async function loadPlugins({
   pluginConfigs,
   context,
@@ -96,7 +88,9 @@ export async function loadPlugins({
   const contentLoadedTranslatedPlugins: ContentLoadedTranslatedPlugin[] = await Promise.all(
     contentLoadedPlugins.map(async (contentLoadedPlugin) => {
       const translationFiles =
-        (await contentLoadedPlugin.plugin?.getTranslationFiles?.()) ?? [];
+        (await contentLoadedPlugin.plugin?.getTranslationFiles?.({
+          content: contentLoadedPlugin.content,
+        })) ?? [];
       const localizedTranslationFiles = await Promise.all(
         translationFiles.map((translationFile) =>
           localizePluginTranslationFile({

diff --git a/website/docs/lifecycle-apis.md b/website/docs/lifecycle-apis.md
@@ -601,7 +601,7 @@ For example, the in docusaurus-plugin-content-docs:
 
 ## i18n lifecycles {#i18n-lifecycles}
 
-### `getTranslationFiles()` {#get-translation-files}
+### `getTranslationFiles({content})` {#get-translation-files}
 
 Plugins declare the JSON translation files they want to use.
 
@@ -619,7 +619,7 @@ module.exports = function (context, options) {
   return {
     name: 'my-plugin',
     // highlight-start
-    async getTranslationFiles() {
+    async getTranslationFiles({content}) {
       return [
         {
           path: 'sidebar-labels',
@@ -628,6 +628,7 @@ module.exports = function (context, options) {
               message: 'Some Sidebar Label',
               description: 'A label used in my plugin in the sidebar',
             },
+            someLabelFromContent: content.myLabel,
           },
         },
       ];