fix(content): only collect required translations (#8806)

Gather all translation would slow down the static document build in translated-content. Only gather the translations of the incoming slug might be a better idea.
mdn · May 19, 2023 · 5ec562c · 5ec562c
1 parent dd98b12
commit 5ec562c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 58 deletions.
diff --git a/build/cli.ts b/build/cli.ts
@@ -67,12 +67,10 @@ async function buildDocumentInteractive(
     }
 
     if (!interactive) {
-      const translations = await translationsOf(document.metadata);
-      if (translations && translations.length > 0) {
-        document.translations = translations;
-      } else {
-        document.translations = [];
-      }
+      document.translations = translationsOf(
+        document.metadata.slug,
+        document.metadata.locale
+      );
     }
 
     return { document, doc: await buildDocument(document), skip: false };

diff --git a/content/translations.ts b/content/translations.ts
@@ -8,67 +8,46 @@ const LANGUAGES = new Map(
   })
 );
 
-const TRANSLATIONS_OF = new Map();
+type Translation = {
+  locale: string;
+  title: string;
+  native: string;
+};
 
-async function gatherTranslations() {
-  const iter = (await Document.findAll()).iterDocs();
-  for (const {
-    metadata: { slug, locale, title },
-  } of iter) {
-    if (!slug || !locale || !title) {
-      continue;
-    }
-    const translation = {
-      title,
-      locale,
-      native: LANGUAGES.get(locale.toLowerCase()).native,
-    };
-    const translations = TRANSLATIONS_OF.get(slug.toLowerCase());
-    if (translations) {
-      translations.push(translation);
-      translations.sort(({ locale: a }, { locale: b }) => {
-        if (a < b) return -1;
-        if (a > b) return 1;
-        return 0;
-      });
-    } else {
-      TRANSLATIONS_OF.set(slug.toLowerCase(), [translation]);
-    }
-  }
-}
+const TRANSLATIONS_OF = new Map<string, Array<Translation>>();
 
-export async function translationsOf({ slug, locale: currentLocale }) {
-  if (TRANSLATIONS_OF.size === 0) {
-    const label = "Time to gather all translations";
-    console.time(label);
-    await gatherTranslations();
-    console.timeEnd(label);
-  }
-  const translations = TRANSLATIONS_OF.get(slug.toLowerCase());
-  if (translations && currentLocale) {
-    return translations.filter(
-      ({ locale }) => locale.toLowerCase() !== currentLocale.toLowerCase()
-    );
+// gather and cache all translations of a document,
+// then return all translations except the current locale
+export function translationsOf(
+  slug: string,
+  currentLocale: string
+): Translation[] {
+  let translations = TRANSLATIONS_OF.get(slug.toLowerCase());
+  if (!translations) {
+    translations = findTranslations(slug);
+    TRANSLATIONS_OF.set(slug.toLowerCase(), translations);
   }
-  return translations;
+  return translations.filter(
+    ({ locale }) => locale.toLowerCase() !== currentLocale.toLowerCase()
+  );
 }
 
-export function findDocumentTranslations(document) {
+// return all translations of a document
+export function findTranslations(
+  slug: string,
+  currentLocale: string = null
+): Translation[] {
   const translations = [];
-
   for (const locale of VALID_LOCALES.values()) {
-    if (document.metadata.locale === locale) {
+    if (currentLocale?.toLowerCase() === locale.toLowerCase()) {
       continue;
     }
-    const translatedDocumentURL = document.url.replace(
-      `/${document.metadata.locale}/`,
-      `/${locale}/`
-    );
-    const translatedDocument = Document.findByURL(translatedDocumentURL);
-    if (translatedDocument) {
+    const documentURL = `/${locale}/docs/${slug}`;
+    const document = Document.findByURL(documentURL);
+    if (document) {
       translations.push({
         locale,
-        title: translatedDocument.metadata.title,
+        title: document.metadata.title,
         native: LANGUAGES.get(locale.toLowerCase()).native,
       });
     }

diff --git a/server/index.ts b/server/index.ts
@@ -16,7 +16,7 @@ import {
   buildLiveSamplePageFromURL,
   renderContributorsTxt,
 } from "../build/index.js";
-import { findDocumentTranslations } from "../content/translations.js";
+import { findTranslations } from "../content/translations.js";
 import { Document, Redirect, Image } from "../content/index.js";
 import { CSP_VALUE, DEFAULT_LOCALE } from "../libs/constants/index.js";
 import {
@@ -57,7 +57,10 @@ async function buildDocumentFromURL(url: string) {
     // When you're running the dev server and build documents
     // every time a URL is requested, you won't have had the chance to do
     // the phase that happens when you do a regular `yarn build`.
-    document.translations = findDocumentTranslations(document);
+    document.translations = findTranslations(
+      document.metadata.slug,
+      document.metadata.locale
+    );
   }
   return await buildDocument(document, documentOptions);
 }