Reduce bundle size for widget room configs (#985)

* Add dynamic imports for room configs.

* Try to move code editor to imports

* Load code editor on demand to save a bundle load.

* Load fonts from npm

* changelog

* lint

changelog.d/987.misc

@@ -0,0 +1 @@
+Reduce bundle size of widget.

package.json

@@ -84,6 +84,7 @@
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.0.2",
+    "@fontsource/inter": "^5.1.0",
     "@napi-rs/cli": "^2.13.2",
     "@preact/preset-vite": "^2.2.0",
     "@rollup/plugin-alias": "^5.1.0",

web/components/RoomConfigView.tsx

@@ -1,14 +1,8 @@
+import { lazy, Suspense } from "preact/compat"
 import { 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";
@@ -46,40 +40,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")),
     },
 };
 
@@ -91,10 +85,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>
@@ -115,7 +108,6 @@ export default function RoomConfigView(props: IProps) {
     }
 
     return <div className={style.root}>
-
         {!serviceScope && activeConnectionType &&
             <header>
                 <span className={style.backButton} onClick={() => setActiveConnectionType(null)}>

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;

web/components/roomConfig/GenericWebhookConfig.tsx

@@ -1,7 +1,5 @@
 import { FunctionComponent, createRef } from "preact";
 import { useCallback, useEffect, useState } from "preact/hooks"
-import CodeMirror from '@uiw/react-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
 import { add, format } from "date-fns";
 import { BridgeConfig } from "../../BridgeAPI";
 import type { GenericHookConnectionState, GenericHookResponseItem, GenericHookServiceConfig } from "../../../src/Connections/GenericHook";
@@ -10,6 +8,12 @@ import { InputField, ButtonSet, Button } from "../elements";
 import WebhookIcon from "../../icons/webhook.png";
 import { Alert, ToggleInput } from "@vector-im/compound-web";
 import { InfoIcon, WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"
+import { lazy, Suspense } from "preact/compat";
+import { LoadingSpinner } from "../elements/LoadingSpinner";
+import { Extension } from "@uiw/react-codemirror";
+
+
+const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
 
 const EXAMPLE_SCRIPT = `if (data.counter === undefined) {
     result = {
@@ -29,10 +33,46 @@ const EXAMPLE_SCRIPT = `if (data.counter === undefined) {
   }`;
 
 const DOCUMENTATION_LINK = "https://matrix-org.github.io/matrix-hookshot/latest/setup/webhooks.html#script-api";
-const CODE_MIRROR_EXTENSIONS = [javascript({})];
 
 const EXPIRY_WARN_AT_MS = 3 * 24 * 60 * 60 * 1000;
 
+const CodeEditor: FunctionComponent<{value: string, onChange: (value: string) => void}> = ({value, onChange}) => {
+    const [codeMirrorTheme, setCodeMirrorTheme] = useState<"light"|"dark">("light");
+    const [extensions, setExtensions] = useState<Extension[]>();
+    useEffect(() => {
+        const mm = window.matchMedia('(prefers-color-scheme: dark)');
+        const fn = (event: MediaQueryListEvent) => {
+            setCodeMirrorTheme(event.matches ? "dark" : "light");
+        };
+        mm.addEventListener('change', fn);
+        setCodeMirrorTheme(mm.matches ? "dark" : "light");
+        return () => mm.removeEventListener('change', fn);
+    }, []);
+
+    useEffect(() => {
+        async function loader() {
+            const { javascript } = await import("@codemirror/lang-javascript");
+            setExtensions([javascript({ jsx: false, typescript: false})]);
+            console.log('Extensions loaded');
+        }
+        void loader();
+    }, []);
+
+    if (!extensions) {
+        return <LoadingSpinner />;
+    }
+
+    return <Suspense fallback={<LoadingSpinner />}>
+        <CodeMirror
+            value={value}
+            theme={codeMirrorTheme}
+            extensions={extensions}
+            onChange={onChange}
+        />
+        <p> See the <a target="_blank" rel="noopener noreferrer" href={DOCUMENTATION_LINK}>documentation</a> for help writing transformation functions </p>
+    </Suspense>;
+};
+
 const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<GenericHookServiceConfig, GenericHookResponseItem, GenericHookConnectionState>> = ({serviceConfig, existingConnection, onSave, onRemove, isUpdating}) => {
     const [transFn, setTransFn] = useState<string>(existingConnection?.config.transformationFunction as string || EXAMPLE_SCRIPT);
     const [transFnEnabled, setTransFnEnabled] = useState(serviceConfig.allowJsTransformationFunctions && !!existingConnection?.config.transformationFunction);
@@ -58,21 +98,6 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Ge
         });
     }, [expiryRef, canEdit, onSave, nameRef, transFn, existingConnection, transFnEnabled, waitForComplete]);
 
-    const [codeMirrorTheme, setCodeMirrorTheme] = useState<"light"|"dark">("light");
-    useEffect(() => {
-        if (!transFnEnabled) {
-            return;
-        }
-        const mm = window.matchMedia('(prefers-color-scheme: dark)');
-        const fn = (event: MediaQueryListEvent) => {
-            setCodeMirrorTheme(event.matches ? "dark" : "light");
-        };
-        mm.addEventListener('change', fn);
-        setCodeMirrorTheme(mm.matches ? "dark" : "light");
-        return () => mm.removeEventListener('change', fn);
-    }, [transFnEnabled]);
-
-
     const hasExpired = existingConnection?.secrets?.timeRemainingMs ? existingConnection?.secrets?.timeRemainingMs <= 0 : false;
     const willExpireSoon = !hasExpired && existingConnection?.secrets?.timeRemainingMs ? existingConnection?.secrets?.timeRemainingMs <= EXPIRY_WARN_AT_MS : false;
 
@@ -123,15 +148,7 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Ge
         <InputField visible={serviceConfig.allowJsTransformationFunctions && transFnEnabled} label="Respond after function completes" noPadding={true}>
             <ToggleInput disabled={!canEdit || serviceConfig.waitForComplete} type="checkbox" checked={waitForComplete || serviceConfig.waitForComplete} onChange={useCallback(() => setWaitForComplete(v => !v), [])} />
         </InputField>
-
-        {transFnEnabled && <><CodeMirror
-            value={transFn}
-            theme={codeMirrorTheme}
-            extensions={CODE_MIRROR_EXTENSIONS}
-            onChange={setTransFn}
-        />
-        <p> See the <a target="_blank" rel="noopener noreferrer" href={DOCUMENTATION_LINK}>documentation</a> for help writing transformation functions </p>
-        </>}
+        {transFnEnabled && <CodeEditor value={transFn} onChange={setTransFn} />}
         <ButtonSet>
             { canEdit && <Button disabled={isUpdating} type="submit">{ existingConnection ? "Save" : "Add Webhook" }</Button>}
             { canEdit && existingConnection && <Button disabled={isUpdating} intent="remove" onClick={onRemove}>Remove Webhook</Button>}
@@ -173,3 +190,5 @@ export const GenericWebhookConfig: BridgeConfig = ({ roomId, showHeader }) => {
         connectionConfigComponent={ConnectionConfiguration}
     />;
 };
+
+export default GenericWebhookConfig;

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;

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;

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;

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;