fix: regional locales in editor

packages/visual-editor/src/components/pageSections/ReviewsSection/ReviewsSection.test.tsx

@@ -330,16 +330,11 @@ describe("ReviewsSection", async () => {
         streamDocument: document,
       });
 
-      const templateProps = {
-        document: document,
-        data: data,
-      };
-
-      const updatedData = await injectTranslations(templateProps);
+      const translations = await injectTranslations(document);
 
       const { container } = reactRender(
-        <VisualEditorProvider templateProps={updatedData}>
-          <Render config={puckConfig} data={updatedData.data} />
+        <VisualEditorProvider templateProps={{ document, translations }}>
+          <Render config={puckConfig} data={data} />
         </VisualEditorProvider>
       );
 

packages/visual-editor/src/utils/i18n/components.ts

@@ -1,5 +1,8 @@
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
+import { getTranslations } from "./getTranslations";
+import { StreamDocument } from "../applyTheme";
+import { normalizeLocalesInObject } from "../normalizeLocale";
 
 const NAMESPACE = "visual-editor";
 
@@ -28,55 +31,18 @@ export interface TemplateProps {
  * by consumers of visual-editor in transformProps of a template.
  */
 export const injectTranslations = async (
-  templateProps: TemplateProps
-): Promise<TemplateProps> => {
-  if (!templateProps?.document?.locale) {
-    return templateProps;
-  }
-
-  const translations =
-    (await getTranslations(templateProps?.document?.locale)) || {};
-
-  return {
-    ...templateProps,
-    translations,
-  };
-};
-
-/**
- * Dynamically imports the translation file for the given locale.
- */
-const getTranslations = async (
-  locale: string,
-  isRetry = false
-): Promise<Record<string, string>> => {
-  if (!locale) {
+  streamDocument: StreamDocument
+): Promise<Record<string, string> | Record<string, any>> => {
+  if (!streamDocument?.locale) {
     return {};
   }
 
-  try {
-    const module = await import(
-      `../../../locales/components/${locale}/visual-editor.json`
-    );
-    return module.default;
-  } catch (e) {
-    if (isRetry || locale === "en") {
-      console.error(
-        "Error loading translations for locale",
-        locale,
-        e,
-        "No fallback available."
-      );
-      return {};
-    }
-    console.error(
-      "Error loading translations for locale",
-      locale,
-      e,
-      "Falling back to en."
-    );
-    return getTranslations("en", true);
-  }
+  return (
+    (await getTranslations(
+      normalizeLocalesInObject(streamDocument).locale,
+      "components"
+    )) || {}
+  );
 };
 
 /**
@@ -92,7 +58,8 @@ export const loadComponentTranslations = async (
     return;
   }
 
-  const translationsToInject = translations || (await getTranslations(locale));
+  const translationsToInject =
+    translations || (await getTranslations(locale, "components"));
 
   if (translationsToInject && Object.keys(translationsToInject).length > 0) {
     i18nComponentsInstance.addResourceBundle(

packages/visual-editor/src/utils/i18n/getTranslations.ts

@@ -0,0 +1,46 @@
+const supportedRegionalLocales = ["en-GB", "zh-TW"];
+
+/**
+ * Dynamically imports the translation file for the given locale.
+ */
+export const getTranslations = async (
+  locale: string,
+  instance: "platform" | "components",
+  isRetry = false
+): Promise<Record<string, string>> => {
+  if (!locale) {
+    return {};
+  }
+
+  let strippedLocale = locale;
+  if (!supportedRegionalLocales.includes(locale)) {
+    strippedLocale = locale.split("-")[0];
+  }
+  if (locale.includes("zh-Hant")) {
+    strippedLocale = "zh-TW";
+  }
+
+  try {
+    const module = await import(
+      `../../../locales/${instance}/${strippedLocale}/visual-editor.json`
+    );
+    return module.default;
+  } catch (e) {
+    if (isRetry || strippedLocale === "en") {
+      console.error(
+        `Error loading ${instance} translations for locale`,
+        locale,
+        e,
+        "No fallback available."
+      );
+      return {};
+    }
+    console.error(
+      `Error loading ${instance} translations for locale`,
+      locale,
+      e,
+      "Falling back to en."
+    );
+    return getTranslations("en", instance, true);
+  }
+};

packages/visual-editor/src/utils/i18n/platform.ts

@@ -1,6 +1,6 @@
 import i18next, { TOptions } from "i18next";
 import { initReactI18next, useTranslation } from "react-i18next";
-import { applyI18nFallbacks, defaultI18nFallbacks } from "./fallbacks.ts";
+import { getTranslations } from "./getTranslations.ts";
 
 const NAMESPACE = "visual-editor";
 
@@ -16,42 +16,6 @@ i18nPlatformInstance.use(initReactI18next).init({
   resources: {},
 });
 
-/**
- * Dynamically imports the translation file for the given locale.
- */
-const getTranslations = async (
-  locale: string,
-  isRetry = false
-): Promise<Record<string, string>> => {
-  if (!locale) {
-    return {};
-  }
-
-  try {
-    const module = await import(
-      `../../../locales/platform/${locale}/visual-editor.json`
-    );
-    return module.default;
-  } catch (e) {
-    if (isRetry || locale === "en") {
-      console.error(
-        "Error loading translations for locale",
-        locale,
-        e,
-        "No fallback available."
-      );
-      return {};
-    }
-    console.error(
-      "Error loading translations for locale",
-      locale,
-      e,
-      "Falling back to en."
-    );
-    return getTranslations("en", true);
-  }
-};
-
 /**
  * Loads translations into the i18n instance for the given locale.
  */
@@ -60,8 +24,7 @@ export const loadPlatformTranslations = async (locale: string) => {
     return;
   }
 
-  const translationsToInject = await getTranslations(locale);
-  applyI18nFallbacks(translationsToInject, defaultI18nFallbacks);
+  const translationsToInject = await getTranslations(locale, "platform");
 
   if (translationsToInject && Object.keys(translationsToInject).length > 0) {
     i18nPlatformInstance.addResourceBundle(

packages/visual-editor/src/vite-plugin/templates/directory.tsx

@@ -106,19 +106,19 @@ export const getPath: GetPath<TemplateProps> = ({ document }) => {
 
 export const transformProps: TransformProps<TemplateProps> = async (props) => {
   const { document } = props;
+
   const migratedData = migrate(
     JSON.parse(document.__.layout),
     migrationRegistry,
     directoryConfig,
     document
   );
-  const updatedData = await injectTranslations(
-    await resolveAllData(migratedData, directoryConfig, {
-      streamDocument: document,
-    })
-  );
+  const resolvedPuckData = await resolveAllData(migratedData, directoryConfig, {
+    streamDocument: document,
+  });
+  const translations = await injectTranslations(document);
 
-  return { ...props, data: updatedData };
+  return { ...props, data: resolvedPuckData, translations };
 };
 
 const Directory: Template<TemplateRenderProps> = (props) => {

packages/visual-editor/src/vite-plugin/templates/locator.tsx

@@ -107,19 +107,19 @@ export const getPath: GetPath<TemplateProps> = ({ document }) => {
 
 export const transformProps: TransformProps<TemplateProps> = async (props) => {
   const { document } = props;
+
   const migratedData = migrate(
     JSON.parse(document.__.layout),
     migrationRegistry,
     locatorConfig,
     document
   );
-  const updatedData = await injectTranslations(
-    await resolveAllData(migratedData, locatorConfig, {
-      streamDocument: document,
-    })
-  );
+  const resolvedPuckData = await resolveAllData(migratedData, locatorConfig, {
+    streamDocument: document,
+  });
+  const translations = await injectTranslations(document);
 
-  return { ...props, data: updatedData };
+  return { ...props, data: resolvedPuckData, translations };
 };
 
 const Locator: Template<TemplateRenderProps> = (props) => {

packages/visual-editor/src/vite-plugin/templates/main.tsx

@@ -105,23 +105,24 @@ export const getPath: GetPath<TemplateProps> = ({
 
 export const transformProps: TransformProps<TemplateProps> = async (props) => {
   const { document } = props;
+
   const migratedData = migrate(
     JSON.parse(document.__.layout),
     migrationRegistry,
     mainConfig,
     document
   );
-  const updatedData = await injectTranslations(
-    await resolveAllData(migratedData, mainConfig, {
-      streamDocument: document,
-    })
-  );
+  const resolvedPuckData = await resolveAllData(migratedData, mainConfig, {
+    streamDocument: document,
+  });
+  const translations = await injectTranslations(document);
 
-  return { ...props, data: updatedData };
+  return { ...props, data: resolvedPuckData, translations };
 };
 
 const Location: Template<TemplateRenderProps> = (props) => {
   const { document, data } = props;
+
   const filteredConfig = filterComponentsFromConfig(
     mainConfig,
     document?._additionalLayoutComponents,

starter/src/templates/dev.tsx

@@ -133,7 +133,8 @@ export const getHeadConfig: GetHeadConfig<TemplateRenderProps> = (
 export const transformProps: TransformProps<TemplateProps<any>> = async (
   data,
 ) => {
-  return await injectTranslations(data);
+  const translations = await injectTranslations(data.document);
+  return { ...data, translations };
 };
 
 export const getPath: GetPath<TemplateProps> = ({ document }) => {