Experimental Module API Additions (#30863)

* Module API experiments

* Move ResizerNotifier into SDKContext

so we don't have to pass it into RoomView

* Add the MultiRoomViewStore

* Make RoomViewStore able to take a roomId prop

* Different interface to add space panel items

A bit less flexible but probably simpler and will help keep things
actually consistent rather than just allowing modules to stick any
JSX into the space panel (which means they also have to worry about
styling if they *do* want it to be consistent).

* Allow space panel items to be updated

and manage which one is selected, allowing module "spaces" to be
considered spaces

* Remove fetchRoomFn from SpaceNotificationStore

which didn't really seem to have any point as it was only called from
one place

* Switch to using module api via .instance

* Fairly awful workaround

to actually break the dependency nightmare

* Add test for multiroomviewstore

* add test

* Make room names deterministic

So the tests don't fail if you add other tests or run them individually

* Add test for builtinsapi

* Update module api

* RVS is not needed as prop anymore

Since it's passed through context

* Add roomId to prop

* Remove RoomViewStore from state

This is now accessed through class field

* Fix test

* No need to pass RVS from LoggedInView

* Add RoomContextType

* Implement new builtins api

* Add tests

* Fix import

* Fix circular dependency issue

* Fix import

* Add more tests

* Improve comment

* room-id is optional

* Update license

* Add implementation for AccountDataApi

* Add implementation for Room

* Add implementation for ClientApi

* Create ClientApi in Api.ts

* Write tests

* Use nullish coalescing assignment

* Implement openRoom in NavigationApi

* Write tests

* Add implementation for StoresApi

* Write tests

* Fix circular dependency

* Add comments in lieu of type

and fix else block

* Change to class field

---------

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

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

@@ -15,7 +15,7 @@ import { render } from "jest-matrix-react";
 
 import MessagePanel, { shouldFormContinuation } from "../../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
+import RoomContext, { type RoomContextType, TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import * as TestUtilsMatrix from "../../../test-utils";
 import {
@@ -29,7 +29,6 @@ import {
     mockClientPushProcessor,
 } from "../../../test-utils";
 import type ResizeNotifier from "../../../../src/utils/ResizeNotifier";
-import { type IRoomState } from "../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
@@ -92,9 +91,9 @@ describe("MessagePanel", function () {
         showAvatarChanges: false,
         showDisplaynameChanges: true,
         showHiddenEvents: false,
-    } as unknown as IRoomState;
+    } as unknown as RoomContextType;
 
-    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
+    const getComponent = (props = {}, roomContext: Partial<RoomContextType> = {}) => (
         <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
             <MessagePanel {...defaultProps} {...props} />
         </ScopedRoomContextProvider>

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

@@ -89,7 +89,6 @@ describe("RoomView", () => {
     let cli: MockedObject<MatrixClient>;
     let room: Room;
     let rooms: Map<string, Room>;
-    let roomCount = 0;
     let stores: SdkContextClass;
     let crypto: CryptoApi;
 
@@ -100,7 +99,9 @@ describe("RoomView", () => {
         mockPlatformPeg({ reload: () => {} });
         cli = mocked(stubClient());
 
-        room = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+        const roomName = (expect.getState().currentTestName ?? "").replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+
+        room = new Room(`!${roomName}:example.org`, cli, "@alice:example.org");
         jest.spyOn(room, "findPredecessor");
         room.getPendingEvents = () => [];
         rooms = new Map();
@@ -158,7 +159,6 @@ describe("RoomView", () => {
                         threepidInvite={undefined as any}
                         forceTimeline={false}
                         ref={ref}
-                        roomViewStore={stores.roomViewStore}
                     />
                 </SDKContext.Provider>
             </MatrixClientContext.Provider>,
@@ -197,7 +197,6 @@ describe("RoomView", () => {
                         threepidInvite={undefined}
                         forceTimeline={false}
                         onRegistered={jest.fn()}
-                        roomViewStore={stores.roomViewStore}
                     />
                 </SDKContext.Provider>
             </MatrixClientContext.Provider>,
@@ -211,6 +210,26 @@ describe("RoomView", () => {
         return ref.current!;
     };
 
+    it("gets a room view store from MultiRoomViewStore when given a room ID", async () => {
+        stores.multiRoomViewStore.getRoomViewStoreForRoom = jest.fn().mockReturnValue(stores.roomViewStore);
+
+        const ref = createRef<RoomView>();
+        render(
+            <MatrixClientContext.Provider value={cli}>
+                <SDKContext.Provider value={stores}>
+                    <RoomView
+                        threepidInvite={undefined as any}
+                        forceTimeline={false}
+                        ref={ref}
+                        roomId="!room:example.dummy"
+                    />
+                </SDKContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+
+        expect(stores.multiRoomViewStore.getRoomViewStoreForRoom).toHaveBeenCalledWith("!room:example.dummy");
+    });
+
     it("should show member list right panel phase on Action.ViewUser without `payload.member`", async () => {
         const spy = jest.spyOn(stores.rightPanelStore, "showOrHidePhase");
         await renderRoomView(false);
@@ -707,7 +726,7 @@ describe("RoomView", () => {
         });
 
         it("should switch rooms when edit is clicked on a search result for a different room", async () => {
-            const room2 = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+            const room2 = new Room(`!roomswitchtest:example.org`, cli, "@alice:example.org");
             rooms.set(room2.roomId, room2);
 
             room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Join);

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

@@ -26,8 +26,8 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { createTestClient, getRoomContext, mkRoom, mockPlatformPeg, stubClient } from "../../../test-utils";
 import { mkThread } from "../../../test-utils/threads";
-import { type IRoomState } from "../../../../src/components/structures/RoomView";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
+import type { RoomContextType } from "../../../../src/contexts/RoomContext.ts";
 
 jest.mock("../../../../src/utils/Feedback");
 
@@ -79,7 +79,7 @@ describe("ThreadPanel", () => {
             mockRoom.getLastLiveEvent.mockReturnValue(mockEvent);
             const roomContextObject = {
                 room: mockRoom,
-            } as unknown as IRoomState;
+            } as unknown as RoomContextType;
             const { container } = render(
                 <ScopedRoomContextProvider {...roomContextObject}>
                     <MatrixClientContext.Provider value={mockClient}>

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -731,12 +731,12 @@ exports[`RoomView invites renders an invite room 1`] = `
         class="mx_RoomPreviewBar_message"
       >
         <h3>
-          Do you want to join !2:example.org?
+          Do you want to join !roomviewinvitesrendersaninviteroom:example.org?
         </h3>
         <p>
           <span
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="4"
+            data-color="2"
             data-testid="avatar-img"
             data-type="round"
             role="presentation"
@@ -817,7 +817,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="5"
+            data-color="1"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -844,7 +844,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !12:example.org
+                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                 </span>
               </div>
             </div>
@@ -1029,7 +1029,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="5"
+            data-color="1"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1056,7 +1056,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !12:example.org
+                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                 </span>
               </div>
             </div>
@@ -1419,7 +1419,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="4"
+            data-color="2"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1446,7 +1446,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !17:example.org
+                  !roomviewvideoroomsshouldrenderjoinedvideoroomview:example.org
                 </span>
               </div>
             </div>