use js modules for dynamic translations instead

build/app/html/android.html

@@ -20,6 +20,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>DuckDuckGo</title>
+        <base href="duck://privacy-dashboard/" />
         <script src="../public/js/polyfill-loader.js"></script>
         <link rel="stylesheet" href="../public/css/android.css" />
         <link rel="stylesheet" href="../public/css/base.css" />

build/app/locales/bg.json → build/app/locales/bg.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Криптиране"

build/app/locales/cs.json → build/app/locales/cs.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Zašifrujte"

build/app/locales/da.json → build/app/locales/da.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Krypter"

build/app/locales/de.json → build/app/locales/de.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Entschlüsseln"

build/app/locales/el.json → build/app/locales/el.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Κρυπτογράφηση"

build/app/locales/en.json → build/app/locales/en.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Encrypt"

build/app/locales/es.json → build/app/locales/es.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Cifrar"

build/app/locales/et.json → build/app/locales/et.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Krüpteeri"

build/app/locales/fi.json → build/app/locales/fi.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Salaa"

build/app/locales/fr.json → build/app/locales/fr.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Chiffrer"

build/app/locales/hr.json → build/app/locales/hr.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Enkripcija"

build/app/locales/hu.json → build/app/locales/hu.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Titkosítás"

build/app/locales/it.json → build/app/locales/it.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Crittografia"

build/app/locales/lt.json → build/app/locales/lt.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Šifruoti"

build/app/locales/lv.json → build/app/locales/lv.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Šifrēt"

build/app/locales/nb.json → build/app/locales/nb.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Krypter"

build/app/locales/nl.json → build/app/locales/nl.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Versleutelen"

build/app/locales/pl.json → build/app/locales/pl.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Szyfruj"

build/app/locales/pt.json → build/app/locales/pt.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Encriptar"

build/app/locales/ro.json → build/app/locales/ro.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Criptare"

build/app/locales/ru.json → build/app/locales/ru.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Шифрование"

build/app/locales/sk.json → build/app/locales/sk.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Šifrovať"

build/app/locales/sl.json → build/app/locales/sl.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Šifriraj"

build/app/locales/sv.json → build/app/locales/sv.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Kryptera"

build/app/locales/tr.json → build/app/locales/tr.js

@@ -1,4 +1,4 @@
-{
+export default {
   "connection": {
     "encrypt": {
       "title": "Şifreleme"

build/app/public/js/base.js

@@ -13346,7 +13346,7 @@
   __export(browser_communication_exports, {
     backgroundMessage: () => backgroundMessage,
     doBurn: () => doBurn,
-    fetch: () => fetch2,
+    fetch: () => fetch,
     getBackgroundTabData: () => getBackgroundTabData,
     getBurnOptions: () => getBurnOptions,
     getPrivacyDashboardData: () => getPrivacyDashboardData,
@@ -13571,7 +13571,7 @@
   function setup() {
     setupColorScheme();
   }
-  async function fetch2(message) {
+  async function fetch(message) {
     if (message instanceof CheckBrokenSiteReportHandledMessage) {
       return false;
     }
@@ -13724,7 +13724,7 @@
   var ios_communication_exports = {};
   __export(ios_communication_exports, {
     backgroundMessage: () => backgroundMessage2,
-    fetch: () => fetch4,
+    fetch: () => fetch3,
     getBackgroundTabData: () => getBackgroundTabData2,
     privacyDashboardShowAlertForMissingDescription: () => privacyDashboardShowAlertForMissingDescription,
     privacyDashboardShowNativeFeedback: () => privacyDashboardShowNativeFeedback,
@@ -13752,7 +13752,7 @@
   var macos_communication_exports = {};
   __export(macos_communication_exports, {
     backgroundMessage: () => backgroundMessage2,
-    fetch: () => fetch3,
+    fetch: () => fetch2,
     firstRenderComplete: () => firstRenderComplete,
     getBackgroundTabData: () => getBackgroundTabData2,
     onChangeConsentManaged: () => onChangeConsentManaged,
@@ -14760,7 +14760,7 @@
     invariant(window.webkit?.messageHandlers, "webkit.messageHandlers required");
     window.webkit.messageHandlers.privacyDashboardClose.postMessage(args);
   }
-  async function fetch3(message) {
+  async function fetch2(message) {
     if (message instanceof CloseMessage) {
       privacyDashboardClose({ eventOrigin: message.eventOrigin });
       return;
@@ -14918,7 +14918,7 @@
     invariant(window.webkit?.messageHandlers, "webkit.messageHandlers required");
     window.webkit.messageHandlers.privacyDashboardTelemetrySpan.postMessage(args);
   }
-  async function fetch4(message) {
+  async function fetch3(message) {
     if (message instanceof CheckBrokenSiteReportHandledMessage) {
       privacyDashboardShowReportBrokenSite({});
       return false;
@@ -14935,15 +14935,15 @@
       privacyDashboardTelemetrySpan(message);
       return false;
     }
-    return fetch3(message);
+    return fetch2(message);
   }
 
   // shared/js/browser/android-communication.js
   var android_communication_exports = {};
   __export(android_communication_exports, {
     PrivacyDashboardJavascriptInterface: () => PrivacyDashboardJavascriptInterface,
     backgroundMessage: () => backgroundMessage3,
-    fetch: () => fetch5,
+    fetch: () => fetch4,
     getBackgroundTabData: () => getBackgroundTabData3,
     onChangeConsentManaged: () => onChangeConsentManaged2,
     onChangeFeatureSettings: () => onChangeFeatureSettings,
@@ -15197,7 +15197,7 @@
       return Reflect.apply(target, thisArg, argArray);
     }
   });
-  var fetch5 = new Proxy(fetchAndroid, {
+  var fetch4 = new Proxy(fetchAndroid, {
     apply(target, thisArg, argArray) {
       return Reflect.apply(target, thisArg, argArray);
     }
@@ -15214,7 +15214,7 @@
     SetSize: () => SetSize,
     SubmitBrokenSiteReport: () => SubmitBrokenSiteReport,
     backgroundMessage: () => backgroundMessage4,
-    fetch: () => fetch6,
+    fetch: () => fetch5,
     firstRenderComplete: () => firstRenderComplete2,
     getBackgroundTabData: () => getBackgroundTabData4,
     handleIncomingMessage: () => handleIncomingMessage,
@@ -15276,7 +15276,7 @@
       Data: data
     });
   }
-  async function fetch6(message) {
+  async function fetch5(message) {
     if (message instanceof SubmitBrokenSiteReportMessage) {
       SubmitBrokenSiteReport({
         category: message.category,
@@ -18395,17 +18395,17 @@
   function TranslationProvider({ children }) {
     const data = useData();
     const locale3 = data.tab?.locale;
-    const [ready, setReady] = h2(false);
+    const [state, setReady] = h2(
+      /** @type {'idle'|'ready'|'loading'|'error'} */
+      "idle"
+    );
     p2(() => {
-      let cont = new AbortController();
-      async function fetchFile(locale4, signal) {
-        try {
-          const s3 = await fetch(`../locales/${locale4}.json`, { signal }).then((x2) => x2.json());
-          for (let [ns2, translations] of Object.entries(s3)) {
-            i18n.addResourceBundle(locale4, ns2, translations);
-          }
-        } catch (e3) {
-          console.error("could not load locale");
+      async function fetchFile(locale4) {
+        setReady("loading");
+        const v3 = `/locales/${locale4}.js`;
+        const mod = await import(v3);
+        for (let [ns2, translations] of Object.entries(mod.default)) {
+          i18n.addResourceBundle(locale4, ns2, translations);
         }
         if (Object.keys(
           /** @type {any} */
@@ -18415,17 +18415,20 @@
         } else {
           console.warn(`Unsupported locale ${locale4}`);
         }
+        setReady("ready");
       }
-      if (locale3) {
-        fetchFile(locale3, cont.signal).then(() => setReady(true)).catch(console.error);
+      if (typeof locale3 === "string" && locale3.length === 2) {
+        fetchFile("pl").then(() => setReady("ready")).catch(() => {
+          console.error(`could not load the locale ${locale3}`);
+          setReady("error");
+        });
       } else {
-        console.log("ignoring dup");
+        setReady("ready");
       }
-      return () => {
-        cont.abort();
-      };
     }, [locale3]);
-    if (!ready)
+    if (state === "idle")
+      return null;
+    if (state === "loading")
       return null;
     return /* @__PURE__ */ y(TranslationContext.Provider, { value: { locale: "en" } }, children);
   }

scripts/duplicate-html.js

@@ -6,6 +6,7 @@ const CWD = new URL('..', import.meta.url).pathname
 const env = z
     .object({
         BUILD_OUTPUT: z.string(),
+        NODE_ENV: z.union([z.literal('production'), z.literal('development')]).default('production'),
     })
     .parse(process.env)
 const base = join(CWD, env.BUILD_OUTPUT, 'html/popup.html')
@@ -15,7 +16,13 @@ const platforms = ['ios', 'macos', 'browser', 'android', 'windows']
 for (const platform of platforms) {
     const relative = join(env.BUILD_OUTPUT, 'html', platform + '.html')
     const outFile = join(CWD, relative)
-    const outContent = html.replace('environment--example', 'environment--' + platform)
+    let outContent = html.replace('environment--example', 'environment--' + platform)
+    if (platform === 'android' && env.NODE_ENV === 'production') {
+        outContent = outContent.replace(
+            '<title>DuckDuckGo</title>',
+            '<title>DuckDuckGo</title>\n        <base href="duck://privacy-dashboard/" />'
+        )
+    }
     writeFileSync(outFile, outContent)
     console.log(`✅ [html] [${platform}] ${relative}`)
 }

scripts/locale.mjs

@@ -64,9 +64,9 @@ function processLocales() {
     for (let locale of localeDirs) {
         if (locale.isDirectory()) {
             const json = createLocaleFile(locale.name)
-            const output = path.join(OUTPUT_DIR, `${locale.name}.json`)
-            fs.writeFileSync(output, JSON.stringify(json, null, 2), 'utf8')
-            console.log(`✅ Created ${output}`)
+            const outputFile = path.join(OUTPUT_DIR, `${locale.name}.js`)
+            fs.writeFileSync(outputFile, `export default ` + JSON.stringify(json, null, 2), 'utf8')
+            console.log(`✅ Created ${outputFile}`)
         }
     }
 }