Add dynamic imports for room configs.

matrix-org · Nov 18, 2024 · b4ca8f8 · b4ca8f8
1 parent 6571b9f
commit b4ca8f8
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 25 deletions.
diff --git a/web/components/RoomConfigView.tsx b/web/components/RoomConfigView.tsx
@@ -1,14 +1,8 @@
-import { useState } from "preact/hooks"
+import { lazy, Suspense } from "preact/compat"
+import { useEffect, useState } from "preact/hooks"
 import { BridgeConfig, EmbedType } from "../BridgeAPI";
 import style from "./RoomConfigView.module.scss";
 import { ConnectionCard } from "./ConnectionCard";
-import { FeedsConfig } from "./roomConfig/FeedsConfig";
-import { GenericWebhookConfig } from "./roomConfig/GenericWebhookConfig";
-import { OutboundWebhookConfig } from "./roomConfig/OutboundWebhookConfig";
-import { GithubRepoConfig } from "./roomConfig/GithubRepoConfig";
-import { GitlabRepoConfig } from "./roomConfig/GitlabRepoConfig";
-import { JiraProjectConfig } from "./roomConfig/JiraProjectConfig";
-
 import FeedsIcon from "../icons/feeds.png";
 import GitHubIcon from "../icons/github.png";
 import GitLabIcon from "../icons/gitlab.png";
@@ -45,40 +39,40 @@ const connections: Record<ConnectionType, IConnectionProps> = {
         displayName: "RSS/Atom Feeds",
         description: "Subscribe to an RSS/Atom feed",
         icon: FeedsIcon,
-        component: FeedsConfig,
+        component: lazy(() => import("./roomConfig/FeedsConfig")),
     },
     [ConnectionType.Github]: {
         displayName: 'Github',
         description: "Connect the room to a GitHub project",
         icon: GitHubIcon,
         darkIcon: true,
-        component: GithubRepoConfig,
+        component: lazy(() => import("./roomConfig/GithubRepoConfig")),
     },
     [ConnectionType.Gitlab]: {
         displayName: 'Gitlab',
         description: "Connect the room to a GitLab project",
         icon: GitLabIcon,
-        component: GitlabRepoConfig,
+        component: lazy(() => import("./roomConfig/GitlabRepoConfig")),
     },
     [ConnectionType.Jira]: {
         displayName: 'JIRA',
         description: "Connect the room to a JIRA project",
         icon: JiraIcon,
-        component: JiraProjectConfig,
+        component: lazy(() => import("./roomConfig/JiraProjectConfig")),
     },
     [ConnectionType.Generic]: {
         displayName: 'Inbound (Generic) Webhook',
         description: "Create a webhook which can be used to connect any service to Matrix",
         icon: WebhookIcon,
         darkIcon: true,
-        component: GenericWebhookConfig,
+        component: lazy(() => import("./roomConfig/GenericWebhookConfig")),
     },
     [ConnectionType.GenericOutbound]: {
         displayName: 'Outbound Webhook',
         description: "Create a webhook which can be used to connect any service to Matrix",
         icon: WebhookIcon,
         darkIcon: true,
-        component: OutboundWebhookConfig,
+        component: lazy(() => import("./roomConfig/OutboundWebhookConfig")),
     },
 };
 
@@ -90,10 +84,9 @@ export default function RoomConfigView(props: IProps) {
 
     if (activeConnectionType) {
         const ConfigComponent = connections[activeConnectionType].component;
-        content = <ConfigComponent
-            roomId={props.roomId}
-            showHeader={props.embedType !== EmbedType.IntegrationManager}
-        />;
+        content = <Suspense fallback="loading">
+            <ConfigComponent roomId={props.roomId} showHeader={props.embedType !== EmbedType.IntegrationManager} />
+        </Suspense>;
     } else {
         content = <>
             <section>
@@ -114,7 +107,6 @@ export default function RoomConfigView(props: IProps) {
     }
 
     return <div className={style.root}>
-
         {!serviceScope && activeConnectionType &&
             <header>
                 <span className={style.backButton} onClick={() => setActiveConnectionType(null)}>

diff --git a/web/components/roomConfig/FeedsConfig.tsx b/web/components/roomConfig/FeedsConfig.tsx
@@ -92,8 +92,7 @@ const roomConfigText: IRoomConfigText = {
 
 const RoomConfigListItemFunc = (c: FeedResponseItem) => c.config.label || c.config.url;
 
-export const FeedsConfig: BridgeConfig = ({ roomId, showHeader }) => {
-
+const FeedsConfig: BridgeConfig = ({ roomId, showHeader }) => {
     return <RoomConfig<ServiceConfig, FeedResponseItem, FeedConnectionState>
         headerImg={FeedsIcon}
         showHeader={showHeader}
@@ -105,3 +104,5 @@ export const FeedsConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default FeedsConfig;
diff --git a/web/components/roomConfig/GenericWebhookConfig.tsx b/web/components/roomConfig/GenericWebhookConfig.tsx
@@ -124,3 +124,5 @@ export const GenericWebhookConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default GenericWebhookConfig;
diff --git a/web/components/roomConfig/GithubRepoConfig.tsx b/web/components/roomConfig/GithubRepoConfig.tsx
@@ -177,7 +177,7 @@ const roomConfigText: IRoomConfigText = {
 
 const RoomConfigListItemFunc = (c: GitHubRepoResponseItem) => getRepoFullName(c.config);
 
-export const GithubRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
+const GithubRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
     return <RoomConfig<never, GitHubRepoResponseItem, GitHubRepoConnectionState>
         headerImg={GitHubIcon}
         darkHeaderImg={true}
@@ -191,3 +191,5 @@ export const GithubRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default GithubRepoConfig;
diff --git a/web/components/roomConfig/GitlabRepoConfig.tsx b/web/components/roomConfig/GitlabRepoConfig.tsx
@@ -126,7 +126,7 @@ const RoomConfigText = {
 
 const RoomConfigListItemFunc = (c: GitLabRepoResponseItem) => c.config.path;
 
-export const GitlabRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
+const GitlabRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
     return <RoomConfig<never, GitLabRepoResponseItem, GitLabRepoConnectionState>
         headerImg={GitLabIcon}
         showHeader={showHeader}
@@ -138,3 +138,5 @@ export const GitlabRepoConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default GitlabRepoConfig;
diff --git a/web/components/roomConfig/JiraProjectConfig.tsx b/web/components/roomConfig/JiraProjectConfig.tsx
@@ -110,7 +110,7 @@ const RoomConfigText = {
 
 const RoomConfigListItemFunc = (c: JiraProjectResponseItem) => c.config.url;
 
-export const JiraProjectConfig: BridgeConfig = ({ roomId, showHeader }) => {
+const JiraProjectConfig: BridgeConfig = ({ roomId, showHeader }) => {
     return <RoomConfig<never, JiraProjectResponseItem, JiraProjectConnectionState>
         headerImg={JiraIcon}
         showHeader={showHeader}
@@ -122,3 +122,5 @@ export const JiraProjectConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default JiraProjectConfig;
diff --git a/web/components/roomConfig/OutboundWebhookConfig.tsx b/web/components/roomConfig/OutboundWebhookConfig.tsx
@@ -70,7 +70,7 @@ const RoomConfigText = {
 
 const RoomConfigListItemFunc = (c: OutboundHookResponseItem) => c.config.name;
 
-export const OutboundWebhookConfig: BridgeConfig = ({ roomId, showHeader }) => {
+const OutboundWebhookConfig: BridgeConfig = ({ roomId, showHeader }) => {
     return <RoomConfig<ServiceConfig, OutboundHookResponseItem, OutboundHookConnectionState>
         headerImg={WebhookIcon}
         darkHeaderImg={true}
@@ -83,3 +83,5 @@ export const OutboundWebhookConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default OutboundWebhookConfig;
-Original file line number
+Diff line change
@@ Expand Up @@
             connectionConfigComponent={ConnectionConfiguration}
         />;
     };
+    export default GenericWebhookConfig;