Split translations between EW and shared components

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 && yarn --cwd ../.. build:res && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",

packages/shared-components/src/@types/i18n.d.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 TranslationKey as _TranslationKey } from "matrix-web-i18n";
+
+import type Translations from "../i18n/strings/en_EN.json";
+
+declare global {
+    type TranslationKey = _TranslationKey<typeof Translations>;
+}

packages/shared-components/src/index.ts

@@ -34,7 +34,3 @@ export * from "./utils/I18nApi";
 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/utils/I18nApi.ts

@@ -9,7 +9,6 @@ import { type I18nApi as II18nApi, type Variables, type Translations } from "@el
 
 import { humanizeTime } from "./humanize";
 import { _t, getLocale, registerTranslations } from "./i18n";
-import { type TranslationKey } from "../i18nKeys";
 
 export class I18nApi implements II18nApi {
     /**
@@ -24,10 +23,11 @@ export class I18nApi implements II18nApi {
      */
     public register(translations: Partial<Translations>): void {
         const langs: Record<string, Record<string, string>> = {};
+
         for (const key in translations) {
-            for (const lang in translations[key]) {
+            for (const lang in translations[key as keyof Translations]) {
                 langs[lang] = langs[lang] || {};
-                langs[lang][key] = translations[key][lang];
+                langs[lang][key] = translations[key as keyof Translations]![lang];
             }
         }
 

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

@@ -25,8 +25,6 @@ import React from "react";
 import { KEY_SEPARATOR } from "matrix-web-i18n";
 import counterpart from "counterpart";
 
-import type { TranslationKey } from "../index";
-
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
 

src/@types/i18n.d.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 TranslationKey as _TranslationKey } from "matrix-web-i18n";
+
+import type Translations from "../i18n/strings/en_EN.json";
+
+declare global {
+    type TranslationKey = _TranslationKey<typeof Translations>;
+}

src/accessibility/KeyboardShortcuts.ts

@@ -9,7 +9,7 @@ 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 { _td } from "@element-hq/web-shared-components";
 
 import { IS_MAC, IS_ELECTRON, Key } from "../Keyboard";
 import { type IBaseSetting } from "../settings/Settings";

src/components/structures/EmbeddedPage.tsx

@@ -12,7 +12,7 @@ import sanitizeHtml from "sanitize-html";
 import classnames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { _t, type TranslationKey } from "../../languageHandler";
+import { _t } from "../../languageHandler";
 import dis from "../../dispatcher/dispatcher";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import MatrixClientContext from "../../contexts/MatrixClientContext";

src/components/structures/TabbedView.tsx

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import classNames from "classnames";
 
-import { _t, type TranslationKey } from "../../languageHandler";
+import { _t } from "../../languageHandler";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { PosthogScreenTracker, type ScreenName } from "../../PosthogTrackers";
 import { type NonEmptyArray } from "../../@types/common";

src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx

@@ -15,7 +15,7 @@ import { Action } from "../../../../dispatcher/actions";
 import { asyncSome } from "../../../../utils/arrays";
 import { getUserDeviceIds } from "../../../../utils/crypto/deviceInfo";
 import { type RoomMember } from "../../../../models/rooms/RoomMember";
-import { _t, _td, type TranslationKey } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import { E2EStatus } from "../../../../utils/ShieldUtils";
 
 interface MemberTileViewModelProps {

src/components/viewmodels/roomlist/useFilteredRooms.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { FilterKey } from "../../../stores/room-list-v3/skip-list/filters";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import RoomListStoreV3, {
     LISTS_LOADED_EVENT,
     LISTS_UPDATE_EVENT,

src/components/views/auth/EmailField.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ComponentProps, PureComponent, type Ref } from "react";
 
 import Field, { type IInputProps } from "../elements/Field";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
 import * as Email from "../../../email";
 

src/components/views/auth/PassphraseConfirmField.tsx

@@ -10,7 +10,7 @@ import React, { type ComponentProps, PureComponent, type Ref } from "react";
 
 import Field, { type IInputProps } from "../elements/Field";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;

src/components/views/auth/PassphraseField.tsx

@@ -12,7 +12,7 @@ import classNames from "classnames";
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
 import SdkConfig from "../../../SdkConfig";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import Field, { type IInputProps } from "../elements/Field";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 

src/components/views/context_menus/DeviceContextMenu.tsx

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from "react";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
 import IconizedContextMenu, { IconizedContextMenuOptionList, IconizedContextMenuRadio } from "./IconizedContextMenu";
 import { type IProps as IContextMenuProps } from "../../structures/ContextMenu";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 
 const SECTION_NAMES: Record<MediaDeviceKindEnum, TranslationKey> = {
     [MediaDeviceKindEnum.AudioInput]: _td("voip|input_devices"),

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -14,7 +14,7 @@ import { sleep } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, useState } from "react";
 import { Form } from "@vector-im/compound-web";
 
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import BaseDialog from "./BaseDialog";
 import { TimelineEventEditor } from "./devtools/Event";

src/components/views/dialogs/TextInputDialog.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ChangeEvent, createRef } from "react";
 
 import Field from "../elements/Field";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import { type IFieldState, type IValidationResult } from "../elements/Validation";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";

src/components/views/dialogs/devtools/AccountData.tsx

@@ -14,7 +14,7 @@ import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { EventEditor, EventViewer, eventTypeField, type IEditorProps, stringify } from "./Event";
 import FilteredList from "./FilteredList";
-import { _td, type TranslationKey } from "../../../../languageHandler";
+import { _td } from "../../../../languageHandler";
 
 export const AccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const cli = useContext(MatrixClientContext);

src/components/views/dialogs/devtools/BaseTool.tsx

@@ -11,7 +11,7 @@ import React, { createContext, type ReactNode, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
-import { _t, type TranslationKey } from "../../../../languageHandler";
+import { _t } from "../../../../languageHandler";
 import { type XOR } from "../../../../@types/common";
 import { type Tool } from "../DevtoolsDialog";
 

src/components/views/dialogs/devtools/Event.tsx

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ChangeEvent, type ReactNode, useContext, useMemo, useRef, useState } from "react";
 import { type IContent, type MatrixEvent, type TimelineEvents } from "matrix-js-sdk/src/matrix";
 
-import { _t, _td, type TranslationKey } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import Field from "../../elements/Field";
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import classNames from "classnames";
 
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "..//dialogs/BaseDialog";
 import DialogButtons from "./DialogButtons";
 import AccessibleButton from "./AccessibleButton";

src/components/views/rooms/E2EIcon.tsx

@@ -11,7 +11,7 @@ import React, { type JSX, type ComponentProps, type CSSProperties } from "react"
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
 
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 

src/components/views/rooms/LegacyRoomList.tsx

@@ -18,7 +18,7 @@ import { type ActionPayload } from "../../../dispatcher/payloads.ts";
 import { type ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload.ts";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload.ts";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter.ts";
-import { _t, _td, type TranslationKey } from "../../../languageHandler.tsx";
+import { _t, _td } from "../../../languageHandler.tsx";
 import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
 import PosthogTrackers from "../../../PosthogTrackers.ts";
 import SettingsStore from "../../../settings/SettingsStore.ts";

src/components/views/rooms/NewRoomIntro.tsx

@@ -12,7 +12,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader";
 import RoomAvatar from "../avatars/RoomAvatar";

src/components/views/rooms/Stickerpicker.tsx

@@ -10,7 +10,7 @@ import { type Room, ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IWidget } from "matrix-widget-api";
 
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import AppTile from "../elements/AppTile";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";

src/components/views/settings/devices/DeviceTypeIcon.tsx

@@ -15,7 +15,7 @@ import { Icon as WebIcon } from "../../../../../res/img/element-icons/settings/w
 import { Icon as MobileIcon } from "../../../../../res/img/element-icons/settings/mobile.svg";
 import { Icon as VerifiedIcon } from "../../../../../res/img/e2e/verified.svg";
 import { Icon as UnverifiedIcon } from "../../../../../res/img/e2e/warning.svg";
-import { _t, _td, type TranslationKey } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import { type ExtendedDevice } from "./types";
 import { DeviceType } from "../../../../utils/device/parseUserAgent";
 

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -12,7 +12,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { throttle, get, set } from "lodash";
 import { KnownMembership, type RoomPowerLevelsEventContent } from "matrix-js-sdk/src/types";
 
-import { _t, _td, type TranslationKey } from "../../../../../languageHandler";
+import { _t, _td } from "../../../../../languageHandler";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import ErrorDialog from "../../../dialogs/ErrorDialog";

src/effects/effect.ts

@@ -7,8 +7,6 @@ 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 { type TranslationKey } from "../languageHandler";
-
 export type Effect<TOptions extends { [key: string]: any }> = {
     /**
      * one or more emojis that will trigger this effect