WIP refactor of i18n

package.json

@@ -29,7 +29,7 @@
         "UserFriendlyError"
     ],
     "scripts": {
-        "i18n": "matrix-gen-i18n src res packages/shared-components/src && yarn i18n:sort && yarn i18n:lint",
+        "i18n": "matrix-gen-i18n src res && yarn i18n:sort && yarn i18n:lint",
         "i18n:sort": "jq --sort-keys '.' src/i18n/strings/en_EN.json > src/i18n/strings/en_EN.json.tmp && mv src/i18n/strings/en_EN.json.tmp src/i18n/strings/en_EN.json",
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",

packages/shared-components/package.json

@@ -34,8 +34,11 @@
         "package.json"
     ],
     "scripts": {
+        "i18n": "matrix-gen-i18n src && yarn i18n:sort && yarn i18n:lint",
+        "i18n:sort": "jq --sort-keys '.' src/i18n/strings/en_EN.json > src/i18n/strings/en_EN.json.tmp && mv src/i18n/strings/en_EN.json.tmp src/i18n/strings/en_EN.json",
+        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "test": "jest",
-        "prepare": "patch-package && yarn --cwd ../.. build:res && node scripts/gatherTranslationKeys.ts && vite build",
+        "prepare": "patch-package && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",
@@ -46,6 +49,7 @@
         "test:storybook:update": "playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
     "dependencies": {
+        "@element-hq/element-web-module-api": "^1.5.0",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
         "lodash": "^4.17.21",

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx

@@ -14,7 +14,7 @@ import { Flex } from "../../utils/Flex";
 import styles from "./AudioPlayerView.module.css";
 import { PlayPauseButton } from "../PlayPauseButton";
 import { type PlaybackState } from "../playback";
-import { _t } from "../../utils/i18n";
+import { _t } from "__i18nAPI";
 import { formatBytes } from "../../utils/FormattingUtils";
 import { Clock } from "../Clock";
 import { SeekBar } from "../SeekBar";

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx

@@ -11,7 +11,7 @@ import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
 
 import styles from "./PlayPauseButton.module.css";
-import { _t } from "../../utils/i18n";
+import { _t } from "__i18nAPI";
 
 export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
     /**

packages/shared-components/src/audio/SeekBar/SeekBar.tsx

@@ -10,7 +10,7 @@ import { throttle } from "lodash";
 import classNames from "classnames";
 
 import style from "./SeekBar.module.css";
-import { _t } from "../../utils/i18n";
+import { _t } from "__i18nAPI";
 
 export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**

packages/shared-components/src/i18n/strings/en_EN.json

@@ -0,0 +1,17 @@
+{
+    "a11y": {
+        "seek_bar_label": "a11y|seek_bar_label"
+    },
+    "action": {
+        "delete": "action|delete",
+        "pause": "action|pause",
+        "play": "action|play"
+    },
+    "timeline": {
+        "m.audio": {
+            "audio_player": "timeline|m.audio|audio_player",
+            "error_downloading_audio": "timeline|m.audio|error_downloading_audio",
+            "unnamed_audio": "timeline|m.audio|unnamed_audio"
+        }
+    }
+}

packages/shared-components/src/i18nStub.ts

@@ -0,0 +1,14 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type Translations from "./i18n/strings/en_EN.json";
+import { type TranslationKey as TranslationKeyType } from "matrix-web-i18n";
+import { translateFn, humanizeTimeFn } from "matrix-web-i18n";
+type TranslationKey = TranslationKeyType<typeof Translations>;
+
+export const _t: translateFn<TranslationKey> = () => "";
+export const humanizeTime: humanizeTimeFn = () => "";

packages/shared-components/src/index.ts

@@ -21,8 +21,6 @@ export * from "./utils/Box";
 export * from "./utils/Flex";
 
 // Utils
-export * from "./utils/i18n";
-export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
 export * from "./utils/FormattingUtils";
@@ -31,7 +29,3 @@ export * from "./utils/FormattingUtils";
 export * from "./viewmodel";
 export * from "./useMockedViewModel";
 export * from "./useViewModel";
-
-// i18n (we must export this directly in order to not confuse the type bundler, it seems,
-// otherwise it will leave it as a relative import rather than bundling it)
-export type * from "./i18nKeys.d.ts";

packages/shared-components/src/pill-input/Pill/Pill.tsx

@@ -12,7 +12,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"
 
 import { Flex } from "../../utils/Flex";
 import styles from "./Pill.module.css";
-import { _t } from "../../utils/i18n";
+import { _t } from "__i18nAPI";
 
 export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     /**

packages/shared-components/src/rich-list/RichItem/RichItem.tsx

@@ -9,7 +9,7 @@ import React, { type HTMLAttributes, type JSX, memo } from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 
 import styles from "./RichItem.module.css";
-import { humanizeTime } from "../../utils/humanize";
+import { humanizeTime } from "__i18nAPI";
 import { Flex } from "../../utils/Flex";
 
 export interface RichItemProps extends HTMLAttributes<HTMLLIElement> {

packages/shared-components/src/test/setupTests.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import fetchMock from "fetch-mock-jest";
 
-import { setLanguage } from "../../src/utils/i18n";
+import { setLanguage } from "__i18nAPI";
 import en from "../../../../src/i18n/strings/en_EN.json";
 
 export function setupLanguageMock(): void {

packages/shared-components/tsconfig.json

@@ -17,6 +17,7 @@
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
         "strict": true,
         "paths": {
+            "__i18nAPI": ["./src/i18nStub.ts"],
             "jest-matrix-react": ["./src/test/utils/jest-matrix-react"],
             "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
         }

packages/shared-components/vite.config.js

@@ -26,13 +26,14 @@ export default defineConfig({
         rollupOptions: {
             // make sure to externalize deps that shouldn't be bundled
             // into your library
-            external: ["react", "react-dom", "@vector-im/compound-design-tokens", "@vector-im/compound-web"],
+            external: ["react", "react-dom", "@vector-im/compound-design-tokens", "@vector-im/compound-web", "__i18nAPI"],
             output: {
                 // Provide global variables to use in the UMD build
                 // for externalized deps
                 globals: {
                     "react": "react",
                     "react-dom": "ReactDom",
+                    "__i18nAPI": "mxI18nAPI",
                 },
             },
         },

packages/shared-components/yarn.lock

@@ -352,6 +352,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@element-hq/element-web-module-api@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.5.0.tgz#077a528917f4eb558059a2a5286b9bb6a2fb1690"
+  integrity sha512-WI/iMADRouXp9WhQy5jov6Z4eKKlHEPh20DKoCsKZ9dWaYcW/MiBhzi09PZxay+o0RLZXA6aDPxpxaIX3lZXag==
+
 "@element-hq/element-web-playwright-common@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@element-hq/element-web-playwright-common/-/element-web-playwright-common-2.0.0.tgz#30cf741a33c69540b4bc434f5349d0fe900bc611"

src/@types/global.d.ts

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
 import "@types/modernizr";
 
-import type { ModuleLoader } from "@element-hq/element-web-module-api";
+import type { I18nApi, ModuleLoader } from "@element-hq/element-web-module-api";
 import type { logger } from "matrix-js-sdk/src/logger";
 import type ContentMessages from "../ContentMessages";
 import { type IMatrixClientPeg } from "../MatrixClientPeg";
@@ -125,6 +125,7 @@ declare global {
         mxOnRecaptchaLoaded?: () => void;
         mxModuleLoader: ModuleLoader;
         mxModuleApi: ModuleApiType;
+        mxI18nAPI: I18nApi;
 
         // electron-only
         electron?: Electron;

src/accessibility/KeyboardShortcuts.ts

@@ -8,12 +8,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-// Import i18n.tsx instead of languageHandler to avoid circular deps
-import { _td, type TranslationKey } from "@element-hq/web-shared-components";
-
 import { IS_MAC, IS_ELECTRON, Key } from "../Keyboard";
 import { type IBaseSetting } from "../settings/Settings";
 import { type KeyCombo } from "../KeyBindingsManager";
+import { type TranslationKey } from "../i18n/i18n";
+import { _td } from "../i18n/i18n";
 
 export enum KeyBindingAction {
     /** Send a message */

src/components/views/beacon/BeaconListItem.tsx

@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type HTMLProps, useContext } from "react";
 import { type Beacon, BeaconEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
-import { humanizeTime } from "@element-hq/web-shared-components";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@@ -19,6 +18,7 @@ import BeaconStatus from "./BeaconStatus";
 import { BeaconDisplayStatus } from "./displayStatus";
 import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
 import ShareLatestLocation from "./ShareLatestLocation";
+import { humanizeTime } from "../../../i18n/humanize";
 
 interface Props {
     beacon: Beacon;

src/components/views/elements/SettingsDropdown.tsx

@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useCallback, useId, useState } from "react";
-import { _t } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { type SettingLevel } from "../../../settings/SettingLevel";
 import { SETTINGS, type StringSettingKey } from "../../../settings/Settings";
 import { useSettingValueAt } from "../../../hooks/useSettings.ts";
 import Dropdown, { type DropdownProps } from "./Dropdown.tsx";
+import { _t } from "../../../languageHandler.tsx";
 
 interface Props {
     settingKey: StringSettingKey;

src/components/views/settings/Notifications.tsx

@@ -30,7 +30,7 @@
     VectorState,
     type VectorPushRuleDefinition,
 } from "../../../notifications";
-import { _t, type TranslatedString } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import SettingsStore from "../../../settings/SettingsStore";
 import StyledRadioButton from "../elements/StyledRadioButton";
@@ -52,6 +52,7 @@
 import { SettingsSubsection } from "./shared/SettingsSubsection";
 import { doesRoomHaveUnreadMessages } from "../../../Unread";
 import SettingsFlag from "../elements/SettingsFlag";
+import { TranslatedString } from "../../../i18n/i18n";
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.

src/components/views/verification/VerificationShowSas.tsx

@@ -10,8 +10,9 @@ import React from "react";
 import { type Device } from "matrix-js-sdk/src/matrix";
 import { type GeneratedSas, type EmojiMapping } from "matrix-js-sdk/src/crypto-api";
 import SasEmoji from "@matrix-org/spec/sas-emoji.json";
+import { getNormalizedLanguageKeys } from "matrix-web-i18n";
 
-import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler";
+import { _t, getUserLanguage } from "../../../languageHandler";
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 

packages/shared-components/src/utils/i18n.tsx → src/i18n/i18n.tsx

@@ -24,13 +24,14 @@
 import React from "react";
 import { KEY_SEPARATOR } from "matrix-web-i18n";
 import counterpart from "counterpart";
+import { type TranslationKey as TranslationKeyType } from "matrix-web-i18n";
 
-import type { TranslationKey } from "../index";
+import type Translations from "../i18n/strings/en_EN.json";
 
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
 
-export { KEY_SEPARATOR, normalizeLanguageKey, getNormalizedLanguageKeys } from "matrix-web-i18n";
+export type TranslationKey = TranslationKeyType<typeof Translations>;
 
 const i18nFolder = "i18n/";
 

src/i18n/strings/en_EN.json

@@ -3463,11 +3463,9 @@
             "unable_to_find": "Tried to load a specific point in this room's timeline, but was unable to find it."
         },
         "m.audio": {
-            "audio_player": "Audio player",
             "error_downloading_audio": "Error downloading audio",
             "error_processing_audio": "Error processing audio message",
-            "error_processing_voice_message": "Error processing voice message",
-            "unnamed_audio": "Unnamed audio"
+            "error_processing_voice_message": "Error processing voice message"
         },
         "m.beacon_info": {
             "view_live_location": "View live location"