i18n: refresh shared UI translations

Author: 52sanmao

_tools/check-ui-zh.mjs

@@ -0,0 +1,51 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const root = resolve(import.meta.dirname, "..");
+const messageDir = resolve(root, "src/common/messagesJson");
+const en = JSON.parse(readFileSync(resolve(messageDir, "en.json"), "utf8"));
+const zh = JSON.parse(readFileSync(resolve(messageDir, "zh.json"), "utf8"));
+const zhTw = JSON.parse(readFileSync(resolve(messageDir, "zh-tw.json"), "utf8"));
+const placeholderRe = /(%\{[^}]+\}|\$\{[^}]+\})/g;
+const tokens = (value) => Array.from(String(value).matchAll(placeholderRe), (match) => match[1]).sort();
+
+const allowedFallbackKey = /^(lang-.*|K\.long_p2p_sync|K\.short_p2p_sync|moduleLiveSyncMain\.logPluginVersion|obsidianLiveSyncSettingTab\.linkTroubleshooting|obsidianLiveSyncSettingTab\.(optionCouchDB|optionLiveSync|titleCouchDB)|P2P\.PaneTitle|TweakMismatchResolve\.Table\.Row|Ui\.SetupWizard\.SetupRemote\.CouchDbOption|Ui\.UseSetupURI\.Label|moduleMigration\.docUri|Setup\.QRCode)$/;
+const allowedFallbackValue = /^(MB|CouchDB|P2P|S3|MinIO|R2|JWT|IndexedDB|IDB|E2EE|Hatch|Vault|Obsidian|LiveSync|Self-hosted LiveSync|PouchDB|WebRTC|WebSocket|HTTP|HTTPS|Red Flag)$/;
+
+function checkLanguage(lang, messages) {
+    const issues = [];
+    for (const [key, enValue] of Object.entries(en)) {
+        if (!(key in messages)) {
+            issues.push(`${lang}: missing key ${key}`);
+            continue;
+        }
+        const value = String(messages[key]);
+        if (/[?]{2,}|�/.test(value)) {
+            issues.push(`${lang}: damaged value ${key}=${JSON.stringify(value)}`);
+        }
+        if (
+            value === enValue &&
+            !allowedFallbackKey.test(key) &&
+            !allowedFallbackValue.test(String(enValue))
+        ) {
+            issues.push(`${lang}: untranslated value ${key}`);
+        }
+        const expectedTokens = JSON.stringify(tokens(enValue));
+        const actualTokens = JSON.stringify(tokens(value));
+        if (expectedTokens !== actualTokens) {
+            issues.push(`${lang}: placeholder mismatch ${key}: expected ${expectedTokens}, got ${actualTokens}`);
+        }
+    }
+    return issues;
+}
+
+const issues = [...checkLanguage("zh", zh), ...checkLanguage("zh-tw", zhTw)];
+if (issues.length > 0) {
+    console.error(issues.slice(0, 50).join("\n"));
+    if (issues.length > 50) {
+        console.error(`...and ${issues.length - 50} more issues`);
+    }
+    process.exit(1);
+}
+
+console.log("Chinese UI i18n check passed");

src/UI/components/Check.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { translateIfAvailable } from "@lib/common/i18n";
+
     type Props = {
         title: string;
         value: boolean;
@@ -8,11 +10,12 @@
     };
 
     let { title, value = $bindable(), noteOnSelected, noteOnUnselected, children }: Props = $props();
+    const displayTitle = $derived.by(() => translateIfAvailable(title));
 </script>
 
 <label class="choice-row">
     <input type="checkbox" bind:checked={value} />
-    <span class="choice-title">{title}</span>
+    <span class="choice-title">{displayTitle}</span>
 </label>
 <div class="choice-notes">
     <!-- TODO Highlight selected option -->

src/UI/components/Decision.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { fireAndForget } from "octagonal-wheels/promises";
+    import { translateIfAvailable } from "@lib/common/i18n";
 
     type Props = {
         title: string;
@@ -10,6 +11,7 @@
         disabled?: boolean;
     };
     let { title, commit, additionalClasses, important, disabled = $bindable(), destructive }: Props = $props();
+    const displayTitle = $derived.by(() => translateIfAvailable(title));
     function onclick() {
         fireAndForget(async () => commit());
     }
@@ -18,5 +20,5 @@
 <button
     class="button {additionalClasses} {important ? 'mod-cta' : ''} {destructive ? 'mod-destructive' : ''}"
     {onclick}
-    {disabled}>{title}</button
+    {disabled}>{displayTitle}</button
 >

src/UI/components/DialogHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount, tick } from "svelte";
+    import { translateIfAvailable } from "@lib/common/i18n";
     import { getDialogContext } from "../svelteDialog.ts";
 
     type Props = {
@@ -8,24 +9,26 @@
         children?: () => unknown;
     };
     let { title = $bindable(), subtitle, children }: Props = $props();
+    const displayTitle = $derived.by(() => translateIfAvailable(title));
+    const displaySubtitle = $derived.by(() => (subtitle ? translateIfAvailable(subtitle) : ""));
 
     $effect(() => {
-        if (title) {
-            context.setTitle(`${title}${subtitle ? ` - ${subtitle}` : ""}`);
+        if (displayTitle) {
+            context.setTitle(`${displayTitle}${displaySubtitle ? ` - ${displaySubtitle}` : ""}`);
         }
     });
     const context = getDialogContext();
     onMount(async () => {
-        context.setTitle(`${title}${subtitle ? ` - ${subtitle}` : ""}`);
+        context.setTitle(`${displayTitle}${displaySubtitle ? ` - ${displaySubtitle}` : ""}`);
         await tick();
         document.querySelector(".modal")?.scrollTo(0, 0);
     });
 </script>
 
 <div class="dialog-header">
-    <h2>{title}</h2>
-    {#if subtitle}
-        <h4>{subtitle}</h4>
+    <h2>{displayTitle}</h2>
+    {#if displaySubtitle}
+        <h4>{displaySubtitle}</h4>
     {/if}
 </div>
 

src/UI/components/ExtraItems.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
+    import { translateIfAvailable } from "@lib/common/i18n";
+
     type Props = {
         title?: string;
         children?: () => any;
     };
     const { children, title }: Props = $props();
+    const displayTitle = $derived.by(() => (title ? translateIfAvailable(title) : ""));
 </script>
 
 <details>
-    <summary>{title}</summary>
+    <summary>{displayTitle}</summary>
     <div class="sub-section">
         {@render children?.()}
     </div>

src/UI/components/Guidance.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { $t as t } from "@lib/common/i18n";
+    import { translateIfAvailable } from "@lib/common/i18n";
 
     type Props = {
         children?: () => any;
@@ -11,12 +11,13 @@
     const cssClass = $derived.by(() => {
         return important ? "guidance important" : "guidance";
     });
-    const translatedMessage = $derived.by(() => (message ? t(message) : ""));
+    const translatedTitle = $derived.by(() => (title ? translateIfAvailable(title) : ""));
+    const translatedMessage = $derived.by(() => (message ? translateIfAvailable(message) : ""));
 </script>
 
 <div class={cssClass}>
-    {#if title}
-        <h3>{title}</h3>
+    {#if translatedTitle}
+        <h3>{translatedTitle}</h3>
     {/if}
     {#if translatedMessage}
         <p>{translatedMessage}</p>

src/UI/components/InfoNote.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import { translateIfAvailable } from "@lib/common/i18n";
     type Props = {
         title?: string;
+        message?: string;
         children?: () => any;
         cssClass?: string;
         warning?: boolean;
@@ -10,6 +12,7 @@
     };
     const {
         title,
+        message,
         children,
         cssClass,
         warning: isWarning,
@@ -28,11 +31,14 @@
             return "";
         }
     });
+    const displayTitle = $derived.by(() => (title ? translateIfAvailable(title) : ""));
+    const displayMessage = $derived.by(() => (message ? translateIfAvailable(message) : ""));
 </script>
 
 {#if visible === undefined || visible === true}
     <div class={(cssClass ?? "") + " " + derivedCssClass}>
-        {#if title}<h3>{title}</h3>{/if}
+        {#if displayTitle}<h3>{displayTitle}</h3>{/if}
+        {#if displayMessage}<p>{displayMessage}</p>{/if}
         {@render children?.()}
     </div>
 {/if}

src/UI/components/InputRow.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+    import { translateIfAvailable } from "@lib/common/i18n";
+
     type Props = {
         label: string;
         children?: () => any;
     };
     const { label, children }: Props = $props();
+    const displayLabel = $derived.by(() => translateIfAvailable(label));
 </script>
 
 <label class="row"
-    ><span>{label}</span>
+    ><span>{displayLabel}</span>
     {@render children?.()}
-</label>
+</label>

src/UI/components/Instruction.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import { setContext } from "svelte";
-    import { $t as t } from "@lib/common/i18n";
+    import { translateIfAvailable } from "@lib/common/i18n";
 
     type Props = {
         children?: () => any;
         message?: string;
     };
     const { children, message }: Props = $props();
-    const translatedMessage = $derived.by(() => (message ? t(message) : ""));
+    const translatedMessage = $derived.by(() => (message ? translateIfAvailable(message) : ""));
 </script>
 
 <div class="question-container">

src/UI/components/Option.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { getContext } from "svelte";
+    import { translateIfAvailable } from "@lib/common/i18n";
 
     type Props = {
         title: string;
@@ -22,13 +23,14 @@
         children,
     }: Props = $props();
     const actualGroup = group ?? definedGroupContext;
+    const displayTitle = $derived.by(() => translateIfAvailable(title));
 </script>
 
 <div class="option-container {value === selectedValue ? 'selected' : ''}">
     <label>
         <div class="choice-row">
             <input type="radio" bind:group={value} name={actualGroup} value={selectedValue} />
-            <span class="choice-title">{title}</span>
+            <span class="choice-title">{displayTitle}</span>
         </div>
         <div class="choice-notes">
             {#if value === selectedValue && noteOnSelected}