Drop usage of SVGs, use compound elements.

package.json

@@ -48,6 +48,8 @@
     "@octokit/rest": "^20.0.2",
     "@octokit/webhooks": "^12.0.10",
     "@sentry/node": "^7.52.1",
+    "@vector-im/compound-design-tokens": "^0.1.0",
+    "@vector-im/compound-web": "^0.9.4",
     "ajv": "^8.11.0",
     "axios": "^1.6.2",
     "cors": "^2.8.5",
@@ -59,11 +61,12 @@
     "markdown-it": "^14.0.0",
     "matrix-appservice-bridge": "^9.0.1",
     "matrix-bot-sdk": "npm:@vector-im/matrix-bot-sdk@^0.6.7-element.1",
-    "matrix-widget-api": "^1.6.0",
+    "matrix-widget-api": "^1.0.0",
     "micromatch": "^4.0.5",
     "mime": "^4.0.1",
     "node-emoji": "^2.1.3",
     "p-queue": "^6.6.2",
+    "preact-render-to-string": "^6.3.1",
     "prom-client": "^15.1.0",
     "quickjs-emscripten": "^0.24.0",
     "reflect-metadata": "^0.2.1",
@@ -79,6 +82,7 @@
     "@codemirror/lang-javascript": "^6.0.2",
     "@napi-rs/cli": "^2.13.2",
     "@preact/preset-vite": "^2.2.0",
+    "@rollup/plugin-alias": "^5.1.0",
     "@tsconfig/node18": "^18.2.2",
     "@types/ajv": "^1.0.0",
     "@types/chai": "^4.2.22",

vite.config.mjs

@@ -1,26 +1,33 @@
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
 import { resolve } from 'path'
-import magicalSvg from 'vite-plugin-magical-svg'
+import alias from '@rollup/plugin-alias'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), magicalSvg.default({
-    // By default, the output will be a dom element (the <svg> you can use inside the webpage).
-    // You can also change the output to react (or preact) to get a component you can use.
-    target: 'preact',
-    // By default, the svgs are optimized with svgo. You can disable this by setting this to false.
-    svgo: true
-  })],
+  plugins: [preact()],
   root: 'web',
   base: '',
+  optimizeDeps: {
+    exclude: ['@vector-im/compound-web'],
+  },
   build: {
     outDir: '../public',
     rollupOptions: {
       input: {
         main: resolve('web', 'index.html'),
         oauth: resolve('web', 'oauth.html'),
-      }
+      },
+      plugins: [
+        alias({
+          entries: [
+            { find: 'react', replacement: 'preact/compat' },
+            { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+            { find: 'react-dom', replacement: 'preact/compat' },
+            { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+          ]
+        })
+      ]
     },
     emptyOutDir: true,
   },

web/App.tsx

@@ -4,9 +4,10 @@ import WA, { MatrixCapabilities } from 'matrix-widget-api';
 import { BridgeAPI, BridgeAPIError, EmbedType, embedTypeParameter } from './BridgeAPI';
 import { BridgeRoomState } from '../src/Widgets/BridgeWidgetInterface';
 import { LoadingSpinner } from './components/elements/LoadingSpinner';
-import { Card, ErrorPane } from './components/elements';
+import { Card } from './components/elements';
 import AdminSettings from './components/AdminSettings';
 import RoomConfigView from './components/RoomConfigView';
+import { Alert } from '@vector-im/compound-web';
 
 interface IMinimalState {
     error: string|null,
@@ -31,7 +32,7 @@ function parseFragment() {
     return new URLSearchParams(fragmentString.substring(Math.max(fragmentString.indexOf('?'), 0)));
 }
 
-function assertParam(fragment, name) {
+function assertParam(fragment: URLSearchParams, name: string) {
     const val = fragment.get(name);
     if (!val) throw new Error(`${name} is not present in URL - cannot load widget`);
     return val;
@@ -59,7 +60,7 @@ export default class App extends Component<void, IState> {
         const serviceScope = qs.get('serviceScope');
         const embedType = qs.get(embedTypeParameter);
         // Fetch via config.
-        this.widgetApi = new WA.WidgetApi(widgetId);
+        this.widgetApi = new WA.WidgetApi(widgetId, 'http://localhost');
         this.widgetApi.requestCapability(MatrixCapabilities.RequiresClient);
         this.widgetApi.on("ready", () => {
             console.log("Widget ready:", this);
@@ -112,7 +113,7 @@ export default class App extends Component<void, IState> {
         // Return the App component.
         let content;
         if (this.state.error) {
-            content = <ErrorPane>{this.state.error}</ErrorPane>;
+            content = <Alert type="critical" title="An error occured">{this.state.error}</Alert>;
         } else if (this.state.busy) {
             content = <Card>
                 <LoadingSpinner />

web/components/elements/ConnectionSearch.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import { BridgeAPIError } from "../../BridgeAPI";
 import { DropdownSearch, DropItem } from "./DropdownSearch";
-import { ErrorPane } from "./ErrorPane";
 import { InputField } from "./InputField";
+import { Alert } from "@vector-im/compound-web";
 
 interface Instance { 
     name: string;
@@ -121,7 +121,7 @@ export function ConnectionSearch({
 
     return <div>
         {!searchError && instances === null && <p> Loading {serviceName} instances. </p>}
-        {searchError && <ErrorPane header="Search error"> {searchError} </ErrorPane> }
+        {searchError && <Alert type="critical" title="Search error"> {searchError} </Alert> }
         <InputField visible={!!instances?.length} label={`${serviceName} Instance`} noPadding={true}>
             <select onChange={onInstancePicked}>
                 {instanceListResults}

web/components/elements/index.ts

@@ -1,7 +1,5 @@
 export * from "./Button";
 export * from "./ButtonSet";
 export * from "./Card";
-export * from "./ErrorPane";
 export * from "./InputField";
 export * from "./ListItem";
-export * from "./WarningPane";

web/components/roomConfig/RoomConfig.tsx

@@ -1,13 +1,14 @@
 import { FunctionComponent } from "preact";
 import { useCallback, useEffect, useReducer, useState } from "preact/hooks"
 import { BridgeAPI, BridgeAPIError } from "../../BridgeAPI";
-import { ErrorPane, ListItem, WarningPane, Card } from "../elements";
+import { ListItem, Card } from "../elements";
 import style from "./RoomConfig.module.scss";
 import { GetConnectionsResponseItem } from "../../../src/provisioning/api";
 import { IConnectionState } from "../../../src/Connections";
 import { LoadingSpinner } from '../elements/LoadingSpinner';
 import { ErrCode } from "../../../src/api";
 import { retry } from "../../../src/PromiseUtil";
+import { Alert } from "@vector-im/compound-web";
 export interface ConnectionConfigurationProps<SConfig, ConnectionType extends GetConnectionsResponseItem, ConnectionState extends IConnectionState> {
     serviceConfig: SConfig;
     loginLabel?: string;
@@ -153,24 +154,21 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
 
     return <Card>
         <main>
-            {
-                error &&
-                (!error.isWarning
-                        ? <ErrorPane header={error.header || "Error"}>{error.message}</ErrorPane>
-                        : <WarningPane header={error.header || "Warning"}>{error.message}</WarningPane>
-                )
-            }
             { showHeader &&
                 <header className={style.header}>
                     <img alt="" src={headerImg} />
                     <h1>{text.header}</h1>
                 </header>
             }
+            {
+                error &&
+                <Alert type="critical" text={error.header || error.isWarning ? "Warning" : "Error"}>{error.message}</Alert>
+            }
             { !canSendMessages && canEditRoom &&
-                <WarningPane header={"Misconfigured permissions"}>
+                <Alert type="info" title={"Misconfigured permissions"}>
                     This room does not permit the bot to send messages.
                     Please go to the room settings in your client and adjust permissions.
-                </WarningPane>
+                </Alert>
             }
             { canEditRoom && <section>
                 <h2>{text.createNew}</h2>

web/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>GitHub Bridge Widget</title>
   </head>
-  <body>
+  <body class="cpd-theme-light">
     <main id="root"></main>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/index.tsx"></script>

web/index.tsx

@@ -3,6 +3,8 @@ import 'preact/devtools';
 import App from './App';
 import "./fonts/fonts.scss"
 import "./styling.scss";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+import '@vector-im/compound-web/dist/style.css';
 
 const [ root ] = document.getElementsByTagName('main');
 

web/typings/images.d.ts

@@ -1,8 +1,4 @@
 declare module "*.png" {
     const content: string
     export = content
-}
-declare module "*.svg" {
-    const content: string
-    export = content
 }