Add some experimental module interfaces

...with somewhat placeholder names as they're the best I can think of right now:

 * 'Extras': To add new bits of UI to places (specifically the space panel)
 * 'Builtins': For modules to render components that are part of Element Web
 * 'Navigation': For modules to add paths to the URL router

Author: dbkr

packages/element-web-module-api/src/api/builtins.ts

@@ -0,0 +1,19 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export interface RoomViewProps {
+    roomId?: string;
+}
+
+/**
+ * Exposes components that are part of Element Web to allow modules to render them
+ * as part of their custom components (because they can't import the components from
+ * Element Web since it would cause a dependency cycle)
+ */
+export interface BuiltinsApi {
+    getRoomViewComponent(): React.ComponentType<RoomViewProps>;
+}

packages/element-web-module-api/src/api/extras.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { JSX } from "react";
+
+interface SpacePanelItemProps {
+    isPanelCollapsed: boolean;
+}
+
+export type SpacePanelItemRenderFunction = (props: SpacePanelItemProps) => JSX.Element;
+
+export interface ExtrasApi {
+    addSpacePanelItem(renderer: SpacePanelItemRenderFunction): void;
+}

packages/element-web-module-api/src/api/index.ts

@@ -15,6 +15,8 @@ import { NavigationApi } from "./navigation.ts";
 import { DialogApiExtension } from "./dialog.ts";
 import { AccountAuthApiExtension } from "./auth.ts";
 import { ProfileApiExtension } from "./profile.ts";
+import { ExtrasApi } from "./extras.ts";
+import { BuiltinsApi } from "./builtins.ts";
 
 /**
  * Module interface for modules to implement.
@@ -103,12 +105,16 @@ export interface Api
      */
     readonly customComponents: CustomComponentsApi;
 
+    readonly builtins: BuiltinsApi;
+
     /**
      * API to navigate the application.
      * @public
      */
     readonly navigation: NavigationApi;
 
+    readonly extras: ExtrasApi;
+
     /**
      * Create a ReactDOM root for rendering React components.
      * Exposed to allow modules to avoid needing to bundle their own ReactDOM.

packages/element-web-module-api/src/api/navigation.ts

@@ -5,6 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { JSX } from "react";
+
+export type LocationRenderFunction = () => JSX.Element;
+
 /**
  * API methods to navigate the application.
  * @public
@@ -16,4 +20,6 @@ export interface NavigationApi {
      * @param join - If true, the user will be made to attempt to join the room/space if they are not already a member.
      */
     toMatrixToLink(link: string, join?: boolean): Promise<void>;
+
+    registerLocationRenderer(path: string, renderer: LocationRenderFunction): void;
 }

packages/element-web-module-api/src/index.ts

@@ -11,10 +11,12 @@ export type { Config, ConfigApi } from "./api/config";
 export type { I18nApi, Variables, Translations } from "./api/i18n";
 export type * from "./models/event";
 export type * from "./api/custom-components";
+export type * from "./api/extras";
 export type * from "./api/legacy-modules";
 export type * from "./api/legacy-customisations";
 export type * from "./api/auth";
 export type * from "./api/dialog";
 export type * from "./api/profile";
 export type * from "./api/navigation";
+export type * from "./api/builtins";
 export * from "./api/watchable";