Implement customisations & login component Module API 1.11.0 (#32687)

* Update to Module API v1.11.0

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale state field to make CQL happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Bump npm dep

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

apps/web/src/modules/Api.ts

@@ -31,6 +31,7 @@ import { ElementWebBuiltinsApi } from "./BuiltinsApi.tsx";
 import { ClientApi } from "./ClientApi.ts";
 import { StoresApi } from "./StoresApi.ts";
 import { WidgetLifecycleApi } from "./WidgetLifecycleApi.ts";
+import { CustomisationsApi } from "./customisationsApi.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
     let used = false;
@@ -84,6 +85,7 @@ export class ModuleApi implements Api {
     public readonly config = new ConfigApi();
     public readonly i18n = new I18nApi();
     public readonly customComponents = new CustomComponentsApi();
+    public readonly customisations = new CustomisationsApi();
     public readonly extras = new ElementWebExtrasApi();
     public readonly builtins = new ElementWebBuiltinsApi();
     public readonly widgetLifecycle = new WidgetLifecycleApi();

apps/web/src/modules/customComponentApi.ts

@@ -16,6 +16,7 @@ import type {
     CustomMessageRenderHints as ModuleCustomCustomMessageRenderHints,
     MatrixEvent as ModuleMatrixEvent,
     CustomRoomPreviewBarRenderFunction,
+    CustomLoginRenderFunction,
 } from "@element-hq/element-web-module-api";
 import type React from "react";
 
@@ -153,4 +154,21 @@ export class CustomComponentsApi implements ICustomComponentsApi {
     public registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void {
         this._roomPreviewBarRenderer = renderer;
     }
+
+    private _loginRenderer?: CustomLoginRenderFunction;
+
+    /**
+     * Get the custom login component renderer, if any has been registered.
+     */
+    public get loginComponentRenderer(): CustomLoginRenderFunction | undefined {
+        return this._loginRenderer;
+    }
+
+    /**
+     * Register a custom login component renderer.
+     * @param renderer - the function that will render the login component.
+     */
+    public registerLoginComponent(renderer: CustomLoginRenderFunction): void {
+        this._loginRenderer = renderer;
+    }
 }

apps/web/src/modules/customisationsApi.ts

@@ -0,0 +1,35 @@
+/*
+Copyright 2026 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 { UIComponent, CustomisationsApi as ICustomisationsApi } from "@element-hq/element-web-module-api";
+
+export class CustomisationsApi implements ICustomisationsApi {
+    private shouldShowComponentFunctions = new Set<(component: UIComponent) => boolean | void>();
+
+    /**
+     * Method to register a callback which can affect whether a given component is drawn or not.
+     * @param fn - the callback, if it returns true the component will be rendered, if false it will not be.
+     *   If undefined will defer to the next callback, ultimately falling through to `true` if none return false.
+     *   The next callback is decided in FIFO call order to this register function.
+     */
+    public registerShouldShowComponent(fn: (this: void, component: UIComponent) => boolean | void): void {
+        this.shouldShowComponentFunctions.add(fn);
+    }
+
+    /**
+     * Method to check whether, according to any registered modules, a given component should be rendered.
+     * @param component - the component to check
+     */
+    public shouldShowComponent(component: UIComponent): boolean | void {
+        for (const fn of this.shouldShowComponentFunctions) {
+            const v = fn(component);
+            if (typeof v === "boolean") {
+                return v;
+            }
+        }
+    }
+}