Add locale attribute instead of detecting language (#1244)

Switches to determining the language from an attribute rather than
detecting through `i81n`. This maintains independence from the setup of
the host page whilst allowing the web component to be consistent with
the host in its choice of language.

closes
RaspberryPiFoundation/digital-editor-issues#883

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: loiswells97

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Improved status bar styling (#1221)
 - Added method to translate last saved time (#1223)
 - Deleting unused strings and components (#1225)
+- Determine locale from web component attribute instead of browser path (#1244)
 
 ### Fixed
 

README.md

@@ -66,6 +66,7 @@ The `editor-wc` tag accepts the following attributes, which must be provided as
 - `instructions`: Stringified JSON containing steps to be displayed in the instructions panel in the sidebar
 - `load_cache`: Load latest version of project code from local storage (defaults to `true`)
 - `load_remix_disabled`: Do not load a logged-in user's remixed version of the project specified by `identifier` even if one exists (defaults to `false`)
+- `locale`: Locale for UI elements and to determine the language of projects loaded from the API (defaults to `en`)
 - `output_only`: Only display the output panel (defaults to `false`)
 - `output_panels`: Array of output panel names to display (defaults to `["text", "visual"]`)
 - `output_split_view`: Start with split view in output panel (defaults to `false`, i.e. tabbed view)

package.json

@@ -38,7 +38,6 @@
     "highcharts": "^9.3.1",
     "highcharts-react-official": "^3.1.0",
     "i18next": "^22.0.3",
-    "i18next-browser-languagedetector": "^7.0.0",
     "i18next-http-backend": "^3.0.2",
     "identity-obj-proxy": "3.0.0",
     "jest-axe": "^7.0.0",

src/containers/WebComponentLoader.jsx

@@ -43,6 +43,7 @@ const WebComponentLoader = (props) => {
     instructions,
     theme,
     loadRemixDisabled = false,
+    locale = "en",
     outputOnly = false,
     outputPanels = ["text", "visual"],
     outputSplitView = false,
@@ -87,6 +88,8 @@ const WebComponentLoader = (props) => {
     (state) => state.editor.renameFileModalShowing,
   );
 
+  const { i18n } = useTranslation();
+
   const [cookies, setCookie] = useCookies(["theme", "fontSize"]);
   const themeDefault = window.matchMedia("(prefers-color-scheme:dark)").matches
     ? "dark"
@@ -127,6 +130,12 @@ const WebComponentLoader = (props) => {
     }
   }, [projectOwner, justLoaded]);
 
+  useEffect(() => {
+    if (locale) {
+      i18n.changeLanguage(locale);
+    }
+  }, [locale, i18n]);
+
   useProject({
     reactAppApiEndpoint,
     projectIdentifier: projectIdentifier,

src/containers/WebComponentLoader.test.js

@@ -24,6 +24,19 @@ jest.mock("../hooks/useProjectPersistence", () => ({
   useProjectPersistence: jest.fn(),
 }));
 
+const mockedChangeLanguage = jest.fn(() => new Promise(() => {}));
+
+jest.mock("react-i18next", () => ({
+  useTranslation: () => {
+    return {
+      i18n: {
+        changeLanguage: mockedChangeLanguage,
+      },
+      t: (str) => str,
+    };
+  },
+}));
+
 let store;
 let cookies;
 const code = "print('This project is amazing')";
@@ -69,6 +82,7 @@ describe("When initially rendered", () => {
             instructions={instructions}
             authKey={authKey}
             theme="light"
+            locale="es-LA"
           />
         </CookiesProvider>
       </Provider>,
@@ -90,6 +104,10 @@ describe("When initially rendered", () => {
     expect(window.syntaxHighlight).toEqual(window.Prism);
   });
 
+  test("it sets the language in i18n", () => {
+    expect(mockedChangeLanguage).toHaveBeenCalledWith("es-LA");
+  });
+
   describe("react app API endpoint", () => {
     describe("when react app API endpoint isn't set", () => {
       beforeEach(() => {

src/utils/i18n.js

@@ -1,12 +1,8 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
 import HttpBackend from "i18next-http-backend";
 
 i18n
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next
@@ -104,9 +100,6 @@ i18n
     load: "currentOnly", // otherwise for fr-FR it's load ['fr-FR', 'fr']
 
     // nonExplicitSupportedLngs: true, // allows locale variants on supportedLngs
-    detection: {
-      order: ["path"], // only use path to detect local for now
-    },
 
     interpolation: {
       escapeValue: false, // not needed for react!!

src/web-component.js

@@ -57,6 +57,7 @@ class WebComponent extends HTMLElement {
       "identifier",
       "instructions",
       "load_remix_disabled",
+      "locale",
       "output_only",
       "output_panels",
       "output_split_view",

yarn.lock

@@ -1611,7 +1611,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.25.7
   resolution: "@babel/runtime@npm:7.25.7"
   dependencies:
@@ -2816,7 +2816,6 @@ __metadata:
     highcharts-react-official: ^3.1.0
     html-webpack-plugin: 5.6.0
     i18next: ^22.0.3
-    i18next-browser-languagedetector: ^7.0.0
     i18next-http-backend: ^3.0.2
     identity-obj-proxy: 3.0.0
     jest: ^29.1.2
@@ -10131,15 +10130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next-browser-languagedetector@npm:^7.0.0":
-  version: 7.2.1
-  resolution: "i18next-browser-languagedetector@npm:7.2.1"
-  dependencies:
-    "@babel/runtime": ^7.23.2
-  checksum: 159958be2d8f19444e9378512c36c2bf13a8ab85eddac2fc0000198a03dbc28c73a6f44594ab040b242bdc82dfeabb7c1ab805884b5438ee0a48a8e2b52ca062
-  languageName: node
-  linkType: hard
-
 "i18next-http-backend@npm:^3.0.2":
   version: 3.0.2
   resolution: "i18next-http-backend@npm:3.0.2"