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
+        content = <Suspense fallback="loading">
-            roomId={props.roomId}
+            <ConfigComponent roomId={props.roomId} showHeader={props.embedType !== EmbedType.IntegrationManager} />
-            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 && <CodeEditor value={transFn} onChange={setTransFn} />}
-        {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>
-        </>}
         <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;

web/fonts/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

web/fonts/fonts.scss

@@ -8,78 +8,7 @@
 
 $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10FFFF;
 
-@font-face {
+@import url("@fontsource/inter/400.css");
-    font-family: 'Inter';
+@import url("@fontsource/inter/500.css");
-    font-style:  normal;
+@import url("@fontsource/inter/600.css");
-    font-weight: 400;
+@import url("@fontsource/inter/700.css");
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-Regular.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-Regular.woff?v=3.18") format("woff");
-}
-@font-face {
-    font-family: 'Inter';
-    font-style:  italic;
-    font-weight: 400;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-Italic.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-Italic.woff?v=3.18") format("woff");
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-style:  normal;
-    font-weight: 500;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-Medium.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-Medium.woff?v=3.18") format("woff");
-}
-@font-face {
-    font-family: 'Inter';
-    font-style:  italic;
-    font-weight: 500;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-MediumItalic.woff?v=3.18") format("woff");
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-style:  normal;
-    font-weight: 600;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-SemiBold.woff?v=3.18") format("woff");
-}
-@font-face {
-    font-family: 'Inter';
-    font-style:  italic;
-    font-weight: 600;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff");
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-style:  normal;
-    font-weight: 700;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-Bold.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-Bold.woff?v=3.18") format("woff");
-}
-@font-face {
-    font-family: 'Inter';
-    font-style:  italic;
-    font-weight: 700;
-    font-display: swap;
-    unicode-range: $inter-unicode-range;
-    src: url("./Inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"),
-        url("./Inter/Inter-BoldItalic.woff?v=3.18") format("woff");
-}

yarn.lock

@@ -678,6 +678,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@fontsource/inter@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.1.0.tgz#ab629b2c662457022d2d6a29854b8dc8ba538c47"
+  integrity sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"