From b49e0a68bdbe4ba1cab2de6a6ff13bbd9ad6c9be Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 22 Dec 2023 15:36:00 +0000 Subject: [PATCH] Drop usage of SVGs, use compound elements. --- package.json | 6 +- vite.config.mjs | 25 +- web/App.tsx | 9 +- web/components/elements/ConnectionSearch.tsx | 4 +- web/components/elements/ErrorPane.module.scss | 4 - web/components/elements/ErrorPane.tsx | 9 - .../elements/WarningPane.module.scss | 4 - web/components/elements/WarningPane.tsx | 9 - web/components/elements/index.ts | 2 - web/components/roomConfig/RoomConfig.tsx | 18 +- web/icons/error-badge.svg | 5 - web/icons/warning-badge.svg | 5 - web/index.html | 2 +- web/index.tsx | 2 + web/typings/images.d.ts | 4 - yarn.lock | 561 +++++++++++++++++- 16 files changed, 590 insertions(+), 79 deletions(-) delete mode 100644 web/components/elements/ErrorPane.module.scss delete mode 100644 web/components/elements/ErrorPane.tsx delete mode 100644 web/components/elements/WarningPane.module.scss delete mode 100644 web/components/elements/WarningPane.tsx delete mode 100644 web/icons/error-badge.svg delete mode 100644 web/icons/warning-badge.svg diff --git a/package.json b/package.json index e7f7fac83..c730f3db7 100644 --- a/package.json +++ b/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", diff --git a/vite.config.mjs b/vite.config.mjs index 719e2cd7f..010694409 100644 --- a/vite.config.mjs +++ b/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 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, }, diff --git a/web/App.tsx b/web/App.tsx index 5a4d6a11d..0ef095f0a 100644 --- a/web/App.tsx +++ b/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 { 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 { // Return the App component. let content; if (this.state.error) { - content = {this.state.error}; + content = {this.state.error}; } else if (this.state.busy) { content = diff --git a/web/components/elements/ConnectionSearch.tsx b/web/components/elements/ConnectionSearch.tsx index 42f33fce1..a48588e7e 100644 --- a/web/components/elements/ConnectionSearch.tsx +++ b/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
{!searchError && instances === null &&

Loading {serviceName} instances.

} - {searchError && {searchError} } + {searchError && {searchError} }