Add support for Module API 1.4.0

jest.config.ts

@@ -40,8 +40,6 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
-        // Requires ESM which is incompatible with our current Jest setup
-        "^@element-hq/element-web-module-api$": "<rootDir>/__mocks__/empty.js",
     },
     transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
     collectCoverageFrom: [

package.json

@@ -86,7 +86,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.3.0",
+        "@element-hq/element-web-module-api": "1.4.1",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",

src/components/views/rooms/RoomPreviewBar.tsx

@@ -31,6 +31,7 @@ import { UIFeature } from "../../../settings/UIFeature";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { Icon as AskToJoinIcon } from "../../../../res/img/element-icons/ask-to-join.svg";
 import Field from "../elements/Field";
+import ModuleApi from "../../../modules/Api.ts";
 
 const MemberEventHtmlReasonField = "io.element.html_reason";
 
@@ -116,7 +117,7 @@ interface IState {
     reason?: string;
 }
 
-export default class RoomPreviewBar extends React.Component<IProps, IState> {
+class RoomPreviewBar extends React.Component<IProps, IState> {
     public static defaultProps = {
         onJoinClick() {},
     };
@@ -747,3 +748,21 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         );
     }
 }
+
+const WrappedRoomPreviewBar = (props: IProps): JSX.Element => {
+    const moduleRenderer = ModuleApi.customComponents.roomPreviewBarRenderer;
+    if (moduleRenderer) {
+        return moduleRenderer(
+            {
+                ...props,
+                roomId: props.room?.roomId ?? props.roomId,
+                roomAlias: props.room?.getCanonicalAlias() ?? props.roomAlias,
+            },
+            (props) => <RoomPreviewBar {...props} />,
+        );
+    }
+
+    return <RoomPreviewBar {...props} />;
+};
+
+export default WrappedRoomPreviewBar;

src/modules/Api.ts

@@ -21,7 +21,11 @@ import { WidgetPermissionCustomisations } from "../customisations/WidgetPermissi
 import { WidgetVariableCustomisations } from "../customisations/WidgetVariables.ts";
 import { ConfigApi } from "./ConfigApi.ts";
 import { I18nApi } from "./I18nApi.ts";
-import { CustomComponentsApi } from "./customComponentApi.ts";
+import { CustomComponentsApi } from "./customComponentApi";
+import { WatchableProfile } from "./Profile.ts";
+import { NavigationApi } from "./Navigation.ts";
+import { openDialog } from "./Dialog.tsx";
+import { overwriteAccountAuth } from "./Auth.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
     let used = false;
@@ -57,6 +61,11 @@ class ModuleApi implements Api {
         legacyCustomisationsFactory(WidgetVariableCustomisations);
     /* eslint-enable @typescript-eslint/naming-convention */
 
+    public readonly navigation = new NavigationApi();
+    public readonly openDialog = openDialog;
+    public readonly overwriteAccountAuth = overwriteAccountAuth;
+    public readonly profile = new WatchableProfile();
+
     public readonly config = new ConfigApi();
     public readonly i18n = new I18nApi();
     public readonly customComponents = new CustomComponentsApi();

src/modules/Auth.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2025 New Vector 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 AccountAuthInfo } from "@element-hq/element-web-module-api";
+import { sleep } from "matrix-js-sdk/src/utils";
+
+import type { OverwriteLoginPayload } from "../dispatcher/payloads/OverwriteLoginPayload.ts";
+import { Action } from "../dispatcher/actions.ts";
+import defaultDispatcher from "../dispatcher/dispatcher.ts";
+import type { ActionPayload } from "../dispatcher/payloads.ts";
+
+export async function overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise<void> {
+    const { promise, resolve } = Promise.withResolvers<void>();
+
+    const onAction = (payload: ActionPayload): void => {
+        if (payload.action === Action.OnLoggedIn) {
+            // We want to wait for the new login to complete before returning.
+            // See `Action.OnLoggedIn` in dispatcher.
+            resolve();
+        }
+    };
+    const dispatcherRef = defaultDispatcher.register(onAction);
+
+    defaultDispatcher.dispatch<OverwriteLoginPayload>(
+        {
+            action: Action.OverwriteLogin,
+            credentials: {
+                ...accountInfo,
+                guest: false,
+            },
+        },
+        true,
+    ); // require to be sync to match inherited interface behaviour
+
+    // wait for login to complete
+    await promise;
+    defaultDispatcher.unregister(dispatcherRef);
+    await sleep(0); // wait for the next tick to ensure the login is fully processed
+}

src/modules/Dialog.tsx

@@ -0,0 +1,52 @@
+/*
+Copyright 2025 New Vector 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 React, { type ComponentType, type JSX, useCallback } from "react";
+import { type DialogProps, type DialogOptions, type DialogHandle } from "@element-hq/element-web-module-api";
+
+import Modal from "../Modal";
+import BaseDialog from "../components/views/dialogs/BaseDialog.tsx";
+
+const OuterDialog = <M, P extends object>({
+    title,
+    Dialog,
+    props,
+    onFinished,
+}: {
+    title: string;
+    Dialog: ComponentType<DialogProps<M> & P>;
+    props: P;
+    onFinished(ok: boolean, model: M | null): void;
+}): JSX.Element => {
+    const close = useCallback(() => onFinished(false, null), [onFinished]);
+    const submit = useCallback((model: M) => onFinished(true, model), [onFinished]);
+    return (
+        <BaseDialog onFinished={close} title={title}>
+            <Dialog {...props} onSubmit={submit} onCancel={close} />
+        </BaseDialog>
+    );
+};
+
+export function openDialog<M, P extends object>(
+    initialOptions: DialogOptions,
+    Dialog: ComponentType<P & DialogProps<M>>,
+    props: P,
+): DialogHandle<M> {
+    const { close, finished } = Modal.createDialog(OuterDialog<M, P>, {
+        title: initialOptions.title,
+        Dialog,
+        props,
+    });
+
+    return {
+        finished: finished.then(([ok, model]) => ({
+            ok: ok ?? false,
+            model: model ?? null,
+        })),
+        close: () => close(false, null),
+    };
+}

src/modules/Navigation.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2025 New Vector 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 NavigationApi as INavigationApi } from "@element-hq/element-web-module-api";
+
+import { navigateToPermalink } from "../utils/permalinks/navigator.ts";
+import { parsePermalink } from "../utils/permalinks/Permalinks.ts";
+import { getCachedRoomIDForAlias } from "../RoomAliasCache.ts";
+import { MatrixClientPeg } from "../MatrixClientPeg.ts";
+import dispatcher from "../dispatcher/dispatcher.ts";
+import { Action } from "../dispatcher/actions.ts";
+import SettingsStore from "../settings/SettingsStore.ts";
+
+export class NavigationApi implements INavigationApi {
+    public async toMatrixToLink(link: string, join = false): Promise<void> {
+        navigateToPermalink(link);
+
+        const parts = parsePermalink(link);
+        if (parts?.roomIdOrAlias && join) {
+            let roomId: string | undefined = parts.roomIdOrAlias;
+            if (roomId.startsWith("#")) {
+                roomId = getCachedRoomIDForAlias(parts.roomIdOrAlias);
+                if (!roomId) {
+                    // alias resolution failed
+                    const result = await MatrixClientPeg.safeGet().getRoomIdForAlias(parts.roomIdOrAlias);
+                    roomId = result.room_id;
+                }
+            }
+
+            if (roomId) {
+                dispatcher.dispatch({
+                    action: Action.JoinRoom,
+                    canAskToJoin: SettingsStore.getValue("feature_ask_to_join"),
+                    roomId,
+                });
+            }
+        }
+    }
+}

src/modules/Profile.ts

@@ -0,0 +1,32 @@
+/*
+Copyright 2025 New Vector 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 Profile, Watchable } from "@element-hq/element-web-module-api";
+
+import { OwnProfileStore } from "../stores/OwnProfileStore.ts";
+import { UPDATE_EVENT } from "../stores/AsyncStore.ts";
+
+export class WatchableProfile extends Watchable<Profile> {
+    public constructor() {
+        super({});
+        this.value = this.profile;
+
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileChange);
+    }
+
+    private get profile(): Profile {
+        return {
+            isGuest: OwnProfileStore.instance.matrixClient?.isGuest() ?? false,
+            userId: OwnProfileStore.instance.matrixClient?.getUserId() ?? undefined,
+            displayName: OwnProfileStore.instance.displayName ?? undefined,
+        };
+    }
+
+    private readonly onProfileChange = (): void => {
+        this.value = this.profile;
+    };
+}

src/modules/customComponentApi.ts

@@ -12,9 +12,10 @@ import type {
     CustomComponentsApi as ICustomComponentsApi,
     CustomMessageRenderFunction,
     CustomMessageComponentProps as ModuleCustomMessageComponentProps,
-    OriginalComponentProps,
+    OriginalMessageComponentProps,
     CustomMessageRenderHints as ModuleCustomCustomMessageRenderHints,
     MatrixEvent as ModuleMatrixEvent,
+    CustomRoomPreviewBarRenderFunction,
 } from "@element-hq/element-web-module-api";
 import type React from "react";
 
@@ -72,6 +73,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
     ): void {
         this.registeredMessageRenderers.push({ eventTypeOrFilter: eventTypeOrFilter, renderer, hints });
     }
+
     /**
      * Select the correct renderer based on the event information.
      * @param mxEvent The message event being rendered.
@@ -100,7 +102,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
      */
     public renderMessage(
         props: CustomMessageComponentProps,
-        originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element,
+        originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element,
     ): React.JSX.Element | null {
         const moduleEv = CustomComponentsApi.getModuleMatrixEvent(props.mxEvent);
         const renderer = moduleEv && this.selectRenderer(moduleEv);
@@ -134,4 +136,21 @@ export class CustomComponentsApi implements ICustomComponentsApi {
         }
         return null;
     }
+
+    private _roomPreviewBarRenderer?: CustomRoomPreviewBarRenderFunction;
+
+    /**
+     * Get the custom room preview bar renderer, if any has been registered.
+     */
+    public get roomPreviewBarRenderer(): CustomRoomPreviewBarRenderFunction | undefined {
+        return this._roomPreviewBarRenderer;
+    }
+
+    /**
+     * Register a custom room preview bar renderer.
+     * @param renderer - the function that will render the custom room preview bar.
+     */
+    public registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void {
+        this._roomPreviewBarRenderer = renderer;
+    }
 }

src/stores/RoomViewStore.tsx

@@ -510,8 +510,8 @@ export class RoomViewStore extends EventEmitter {
         });
 
         // take a copy of roomAlias & roomId as they may change by the time the join is complete
-        const { roomAlias, roomId = payload.roomId } = this.state;
-        const address = roomAlias || roomId!;
+        const { roomAlias, roomId } = this.state;
+        const address = roomAlias || payload.roomId || roomId!;
         const viaServers = this.state.viaServers || [];
         try {
             const cli = MatrixClientPeg.safeGet();

test/unit-tests/components/structures/PipContainer-test.tsx

@@ -53,6 +53,7 @@ import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidg
 jest.mock("../../../../src/stores/OwnProfileStore", () => ({
     OwnProfileStore: {
         instance: {
+            on: jest.fn(),
             isProfileInfoFetched: true,
             removeListener: jest.fn(),
             getHttpAvatarUrl: jest.fn().mockReturnValue("http://avatar_url"),

test/unit-tests/components/views/elements/AppTile-test.tsx

@@ -43,6 +43,7 @@ import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permal
 jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
     OwnProfileStore: {
         instance: {
+            on: jest.fn(),
             isProfileInfoFetched: true,
             removeListener: jest.fn(),
             getHttpAvatarUrl: jest.fn().mockReturnValue("http://avatar_url"),

test/unit-tests/components/views/location/LocationShareMenu-test.tsx

@@ -48,6 +48,7 @@ jest.mock("../../../../../src/settings/SettingsStore", () => ({
 jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
     OwnProfileStore: {
         instance: {
+            on: jest.fn(),
             displayName: "Ernie",
             getHttpAvatarUrl: jest.fn().mockReturnValue("image.com/img"),
         },

yarn.lock

@@ -1682,10 +1682,10 @@
   resolved "https://registry.yarnpkg.com/@element-hq/element-call-embedded/-/element-call-embedded-0.13.1.tgz#9161f657f7bebdb5339847b7a8f0a3149a36f95c"
   integrity sha512-6RGZPdx+gOCzpJNe+dbftEyiWuNx+2H+uXiZp7QN8SOZ3dl/yjg0JcK60wsC48i7gXy/6ERdbwTgaL9ez8mvhA==
 
-"@element-hq/element-web-module-api@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.3.0.tgz#6067fa654174d1dd0953447bb036e38f9dfa51a5"
-  integrity sha512-rEV0xnT/tNYPIdqHWWiz2KZo96UeZR0YChfoVLiPT46ZlEYyxqkjxT5bOm1eL2/CiYRe8t1yka3UDkIjq481/g==
+"@element-hq/element-web-module-api@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.4.1.tgz#a46526d58985190f9989bf1686ea872687d3c6e1"
+  integrity sha512-A8yaQtX7QoKThzzZVU+VYOFhpiNyppEMuIQijK48RvhVp1nwmy0cTD6u/6Yn64saNwJjtna+Oy+Qzo/TfwwhxQ==
 
 "@element-hq/element-web-playwright-common@^1.4.3":
   version "1.4.3"
@@ -4543,7 +4543,7 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.39.0-a6238e517f23a2f3025d9c65445914771c63b163-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
   uid ""