From 63f9af30ae53a2a393c48b87471b7fed729db5f6 Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Thu, 2 Jun 2022 20:16:01 +0100
Subject: [PATCH] Rewrite options page with Svelte

---
 ext/bin/build.js                    |  13 +-
 ext/src/_locales/en/messages.json   |  14 +-
 ext/src/global.d.ts                 |   1 +
 ext/src/ui/options/Bridge.svelte    | 295 +++++++++
 ext/src/ui/options/Bridge.tsx       | 360 -----------
 ext/src/ui/options/Options.svelte   | 305 +++++++++
 ext/src/ui/options/Whitelist.svelte | 145 +++++
 ext/src/ui/options/Whitelist.tsx    | 225 -------
 ext/src/ui/options/index.ts         |  25 +
 ext/src/ui/options/index.tsx        | 462 --------------
 ext/src/ui/options/styles/index.css |  15 +-
 ext/tsconfig.json                   |  13 +-
 package-lock.json                   | 940 +++++++++++++++++++++++++++-
 package.json                        |   3 +
 tsconfig.json                       |  19 +-
 15 files changed, 1741 insertions(+), 1094 deletions(-)
 create mode 100644 ext/src/ui/options/Bridge.svelte
 delete mode 100644 ext/src/ui/options/Bridge.tsx
 create mode 100644 ext/src/ui/options/Options.svelte
 create mode 100644 ext/src/ui/options/Whitelist.svelte
 delete mode 100644 ext/src/ui/options/Whitelist.tsx
 create mode 100644 ext/src/ui/options/index.ts
 delete mode 100644 ext/src/ui/options/index.tsx

diff --git a/ext/bin/build.js b/ext/bin/build.js
index 1435e00..6461b93 100644
--- a/ext/bin/build.js
+++ b/ext/bin/build.js
@@ -6,6 +6,8 @@ const path = require("path");
 
 const esbuild = require("esbuild");
 const minimist = require("minimist");
+const sveltePlugin = require("esbuild-svelte");
+const sveltePreprocess = require("svelte-preprocess");
 const webExt = require("web-ext");
 
 const { copyFilesPlugin } = require("./lib/copyFilesPlugin.js");
@@ -86,7 +88,7 @@ const buildOpts = {
         path.join(srcPath, "/cast/senders/mirroring.ts"),
         // UI
         path.join(srcPath, "ui/popup/index.tsx"),
-        path.join(srcPath, "ui/options/index.tsx")
+        path.join(srcPath, "ui/options/index.ts")
     ],
     define: {
         BRIDGE_NAME: `"${BRIDGE_NAME}"`,
@@ -95,12 +97,17 @@ const buildOpts = {
     },
     plugins: [
         preactCompatPlugin,
+        // @ts-ignore
+        sveltePlugin({
+            // @ts-ignore
+            preprocess: sveltePreprocess()
+        }),
 
         // Copy static files
         copyFilesPlugin({
             src: srcPath,
             dest: outPath,
-            excludePattern: /^(manifest\.json|.*\.(ts|tsx|js|jsx))$/
+            excludePattern: /^(manifest\.json|.*\.(ts|tsx|js|jsx|svelte))$/
         })
     ]
 };
@@ -117,7 +124,7 @@ if (argv.mode === "production") {
  * @param {esbuild.BuildResult} result
  */
 function onBuildResult(result) {
-    if (result.errors.length) {
+    if (result?.errors.length) {
         console.error("Build error!");
         return;
     }
diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json
index 9524953..d93646e 100755
--- a/ext/src/_locales/en/messages.json
+++ b/ext/src/_locales/en/messages.json
@@ -339,7 +339,7 @@
         "description": "Add new whitelist item button title."
     },
     "optionsSiteWhitelistUserAgent": {
-        "message": "Enable UA",
+        "message": "Disable UA",
         "description": "Whitelist item user agent checkbox title."
     },
     "optionsSiteWhitelistEditItem": {
@@ -350,15 +350,9 @@
         "message": "Remove",
         "description": "Remove whitelist item button title. Displayed on each item."
     },
-    "optionsSiteWhitelistInvalidMatchPattern": {
-        "message": "Invalid match pattern $matchPattern$",
-        "description": "Error displayed by input indicating an invalid match pattern.",
-        "placeholders": {
-            "matchPattern": {
-                "content": "$1",
-                "example": "http://example"
-            }
-        }
+    "optionsSiteWhitelistInvalidDuplicatePattern": {
+        "message": "Match pattern already exists!",
+        "description": "Error displayed by input indicating a duplicate match pattern."
     },
 
     "optionsMirroringCategoryName": {
diff --git a/ext/src/global.d.ts b/ext/src/global.d.ts
index 73ba9bd..c6235db 100644
--- a/ext/src/global.d.ts
+++ b/ext/src/global.d.ts
@@ -5,6 +5,7 @@ declare const BRIDGE_NAME: string;
 declare const MIRRORING_APP_ID: string;
 
 declare type Nullable<T> = T | null;
+declare type Optional<T> = T | undefined;
 
 declare type DistributiveOmit<T, K extends keyof any> = T extends any
     ? Omit<T, K>
diff --git a/ext/src/ui/options/Bridge.svelte b/ext/src/ui/options/Bridge.svelte
new file mode 100644
index 0000000..5344606
--- /dev/null
+++ b/ext/src/ui/options/Bridge.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+    import semver from "semver";
+    import { onMount } from "svelte";
+
+    import bridge, { BridgeInfo, BridgeTimedOutError } from "../../lib/bridge";
+    import logger from "../../lib/logger";
+
+    import { Options } from "../../lib/options";
+    import { getNextEllipsis } from "../utils";
+
+    const _ = browser.i18n.getMessage;
+
+    export let opts: Options;
+
+    let bridgeInfo: Nullable<BridgeInfo> = null;
+    let isLoadingInfo = true;
+    let isLoadingInfoTimedOut = false;
+
+    // Status
+    let infoClass = "bridge__info";
+    let statusIcon: string;
+    let statusTitle: string;
+    let statusText: Nullable<string> = null;
+
+    onMount(async () => {
+        try {
+            bridgeInfo = await bridge.getInfo();
+        } catch (err) {
+            logger.error("Failed to fetch bridge/platform info.");
+            if (err instanceof BridgeTimedOutError) {
+                isLoadingInfoTimedOut = true;
+            }
+        }
+
+        isLoadingInfo = false;
+
+        infoClass += ` ${
+            !bridgeInfo
+                ? isLoadingInfoTimedOut
+                    ? "bridge__info--timed-out"
+                    : "bridge__info--not-found"
+                : "bridge__info--found"
+        }`;
+
+        if (!bridgeInfo) {
+            statusIcon = "assets/icons8-cancel-120.png";
+            statusTitle = _("optionsBridgeNotFoundStatusTitle");
+            statusText = _("optionsBridgeNotFoundStatusText");
+        } else if (isLoadingInfoTimedOut) {
+            statusIcon = "assets/icons8-warn-120.png";
+            statusTitle = _("optionsBridgeIssueStatusTitle");
+        } else {
+            if (bridgeInfo.isVersionCompatible) {
+                statusIcon = "assets/icons8-ok-120.png";
+                statusTitle = _("optionsBridgeFoundStatusTitle");
+            } else {
+                statusIcon = "assets/icons8-warn-120.png";
+                statusTitle = _("optionsBridgeIssueStatusTitle");
+            }
+        }
+    });
+
+    // Updates
+    let updateData: Nullable<GitHubRelease> = null;
+    let updateStatus: Nullable<string> = null;
+    let updateStatusTimeout: number;
+
+    let isCheckingUpdate = false;
+    let isUpdateAvailable = false;
+
+    let checkUpdateEllipsis = "";
+
+    interface GitHubRelease {
+        url: string;
+        tag_name: string;
+        html_url: string;
+        assets: Array<{
+            content_type: string;
+            html_url: string;
+        }>;
+    }
+
+    async function checkUpdate() {
+        isCheckingUpdate = true;
+
+        const checkUpdateTimeout = window.setInterval(() => {
+            checkUpdateEllipsis = getNextEllipsis(checkUpdateEllipsis);
+        }, 500);
+
+        let releases: GitHubRelease[];
+        try {
+            releases = await fetch(
+                "https://api.github.com/repos/hensm/fx_cast/releases"
+            ).then(res => res.json());
+        } catch (err) {
+            isCheckingUpdate = false;
+            updateStatus = _("optionsBridgeUpdateStatusError");
+            return;
+        } finally {
+            window.clearTimeout(checkUpdateTimeout);
+        }
+
+        // Ensure valid response
+        if (!Array.isArray(releases)) {
+            throw logger.error("Check update response is not array.", releases);
+        }
+
+        // First non-extension-only release
+        const latestBridgeRelease = releases.find(release =>
+            release.assets.find(
+                asset => asset.content_type !== "application/x-xpinstall"
+            )
+        );
+
+        if (!latestBridgeRelease) {
+            throw logger.error(
+                "Check update response does not contain release info."
+            );
+        }
+
+        /**
+         * Update available if no bridge found or bridge version lower
+         * than fetched release version.
+         */
+        isUpdateAvailable =
+            !bridgeInfo ||
+            semver.lt(bridgeInfo.version, latestBridgeRelease.tag_name);
+
+        if (isUpdateAvailable) {
+            updateData = latestBridgeRelease;
+        } else {
+            updateStatus = _("optionsBridgeUpdateStatusNoUpdates");
+        }
+
+        isCheckingUpdate = false;
+
+        if (updateStatusTimeout) {
+            window.clearTimeout(updateStatusTimeout);
+        }
+        updateStatusTimeout = window.setTimeout(() => {
+            updateStatus = null;
+        }, 1500);
+    }
+
+    function getUpdate() {
+        // Open downloads page
+        if (updateData?.html_url) {
+            browser.tabs.create({ url: updateData.html_url });
+        }
+    }
+
+    const [backupMessageStart, backupMessageEnd] = _(
+        "optionsBridgeBackupEnabled",
+        "\0"
+    ).split("\0");
+</script>
+
+<div class="bridge">
+    {#if isLoadingInfo}
+        <div class="bridge__loading">
+            {_("optionsBridgeLoading")}
+            <progress />
+        </div>
+    {:else}
+        <div class={infoClass}>
+            <div class="bridge__status">
+                <img
+                    class="bridge__status-icon"
+                    width="60"
+                    height="60"
+                    src={statusIcon}
+                    alt="icon, bridge status"
+                />
+                <h2 class="bridge__status-title">{statusTitle}</h2>
+                {#if statusText}
+                    <p class="bridge__status-text">{statusText}</p>
+                {/if}
+            </div>
+
+            {#if bridgeInfo}
+                <table class="bridge__stats">
+                    <tr>
+                        <th>{_("optionsBridgeStatsName")}</th>
+                        <td>{bridgeInfo.name}</td>
+                    </tr>
+                    <tr>
+                        <th>{_("optionsBridgeStatsVersion")}</th>
+                        <td>{bridgeInfo.version}</td>
+                    </tr>
+                    <tr>
+                        <th>{_("optionsBridgeStatsExpectedVersion")}</th>
+                        <td>{bridgeInfo.expectedVersion}</td>
+                    </tr>
+                    <tr>
+                        <th>{_("optionsBridgeStatsCompatibility")}</th>
+                        <td>
+                            {bridgeInfo.isVersionCompatible
+                                ? bridgeInfo.isVersionExact
+                                    ? _("optionsBridgeCompatible")
+                                    : _("optionsBridgeLikelyCompatible")
+                                : _("optionsBridgeIncompatible")}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>{_("optionsBridgeStatsRecommendedAction")}</th>
+                        <td>
+                            {bridgeInfo.isVersionCompatible
+                                ? _("optionsBridgeNoAction")
+                                : bridgeInfo.isVersionOlder
+                                ? _("optionsBridgeOlderAction")
+                                : bridgeInfo.isVersionNewer
+                                ? _("optionsBridgeNewerAction")
+                                : _("optionsBridgeNoAction")}
+                        </td>
+                    </tr>
+                </table>
+            {/if}
+        </div>
+
+        <div class="bridge__options">
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="bridgeBackupEnabled"
+                        id="bridgeBackupEnabled"
+                        type="checkbox"
+                        bind:checked={opts.bridgeBackupEnabled}
+                    />
+                </div>
+                <label class="option__label" for="bridgeBackupEnabled">
+                    {backupMessageStart}
+                    <input
+                        class="bridge__backup-host"
+                        name="bridgeBackupHost"
+                        type="text"
+                        required
+                        bind:value={opts.bridgeBackupHost}
+                    />
+                    :
+                    <input
+                        class="bridge__backup-port"
+                        name="bridgeBackupPort"
+                        type="number"
+                        required
+                        min="1025"
+                        max="65535"
+                        bind:value={opts.bridgeBackupPort}
+                    />
+                    {backupMessageEnd}
+                </label>
+                <div class="option__description">
+                    {_("optionsBridgeBackupEnabledDescription")}
+                </div>
+            </div>
+        </div>
+
+        <div class="bridge__update-info">
+            {#if isUpdateAvailable}
+                <div class="bridge__update">
+                    <p class="bridge__update-label">
+                        {_("optionsBridgeUpdateAvailable")}
+                    </p>
+                    <div class="bridge__update-options">
+                        <button
+                            class="bridge__update-start"
+                            type="button"
+                            on:click={getUpdate}
+                        >
+                            {_("optionsBridgeUpdate")}
+                        </button>
+                    </div>
+                </div>
+            {:else}
+                <button
+                    class="bridge__update-check"
+                    type="button"
+                    disabled={isCheckingUpdate}
+                    on:click={checkUpdate}
+                >
+                    {#if isCheckingUpdate}
+                        {_("optionsBridgeUpdateChecking", checkUpdateEllipsis)}
+                    {:else}
+                        {_("optionsBridgeUpdateCheck")}
+                    {/if}
+                </button>
+            {/if}
+
+            {#if updateStatus && !isUpdateAvailable}
+                <div class="bridge--update-status">
+                    {updateStatus}
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
diff --git a/ext/src/ui/options/Bridge.tsx b/ext/src/ui/options/Bridge.tsx
deleted file mode 100644
index 3b62261..0000000
--- a/ext/src/ui/options/Bridge.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-/* eslint-disable max-len */
-"use strict";
-
-import React, { Component } from "react";
-import semver from "semver";
-
-import { Options } from "../../lib/options";
-
-import { BridgeInfo } from "../../lib/bridge";
-import { getNextEllipsis } from "../../lib/utils";
-import logger from "../../lib/logger";
-
-const _ = browser.i18n.getMessage;
-
-interface Release {
-    url: string;
-    tag_name: string;
-    html_url: string;
-    assets: Array<{
-        content_type: string;
-        html_url: string;
-    }>;
-}
-
-interface BridgeStatsProps {
-    info: BridgeInfo;
-}
-
-const BridgeStats = (props: BridgeStatsProps) => (
-    <table className="bridge__stats">
-        <tr>
-            <th>{_("optionsBridgeStatsName")}</th>
-            <td>{props.info.name}</td>
-        </tr>
-        <tr>
-            <th>{_("optionsBridgeStatsVersion")}</th>
-            <td>{props.info.version}</td>
-        </tr>
-        <tr>
-            <th>{_("optionsBridgeStatsExpectedVersion")}</th>
-            <td>{props.info.expectedVersion}</td>
-        </tr>
-        <tr>
-            <th>{_("optionsBridgeStatsCompatibility")}</th>
-            <td>
-                {props.info.isVersionCompatible
-                    ? props.info.isVersionExact
-                        ? _("optionsBridgeCompatible")
-                        : _("optionsBridgeLikelyCompatible")
-                    : _("optionsBridgeIncompatible")}
-            </td>
-        </tr>
-        <tr>
-            <th>{_("optionsBridgeStatsRecommendedAction")}</th>
-            <td>
-                {props.info.isVersionCompatible
-                    ? _("optionsBridgeNoAction")
-                    : props.info.isVersionOlder
-                    ? _("optionsBridgeOlderAction")
-                    : props.info.isVersionNewer
-                    ? _("optionsBridgeNewerAction")
-                    : _("optionsBridgeNoAction")}
-            </td>
-        </tr>
-    </table>
-);
-
-interface BridgeProps {
-    info?: BridgeInfo;
-    loading: boolean;
-    loadingTimedOut: boolean;
-    options?: Options;
-    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-interface BridgeState {
-    isCheckingUpdates: boolean;
-    isUpdateAvailable: boolean;
-    wasErrorCheckingUpdates: boolean;
-    checkUpdatesEllipsis: string;
-    updateStatus?: string;
-}
-
-export default class Bridge extends Component<BridgeProps, BridgeState> {
-    private updateData?: Release;
-    private updateStatusTimeout?: number;
-
-    constructor(props: BridgeProps) {
-        super(props);
-
-        this.state = {
-            isCheckingUpdates: false,
-            isUpdateAvailable: false,
-            wasErrorCheckingUpdates: false,
-            checkUpdatesEllipsis: "..."
-        };
-
-        this.onCheckUpdates = this.onCheckUpdates.bind(this);
-        this.onCheckUpdatesResponse = this.onCheckUpdatesResponse.bind(this);
-        this.onCheckUpdatesError = this.onCheckUpdatesError.bind(this);
-        this.onUpdate = this.onUpdate.bind(this);
-    }
-
-    public render() {
-        const [backupMessageStart, backupMessageEnd] = _(
-            "optionsBridgeBackupEnabled",
-            "\0"
-        ).split("\0");
-
-        return (
-            <div className="bridge">
-                {this.props.loading ? (
-                    <div className="bridge__loading">
-                        {_("optionsBridgeLoading")}
-                        <progress></progress>
-                    </div>
-                ) : (
-                    this.renderStatus()
-                )}
-
-                {!this.props.loading && this.props.options && (
-                    <div className="bridge__options">
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="bridgeBackupEnabled"
-                                    type="checkbox"
-                                    checked={
-                                        this.props.options.bridgeBackupEnabled
-                                    }
-                                    onChange={this.props.onChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {backupMessageStart}
-                                <input
-                                    className="bridge__backup-host"
-                                    name="bridgeBackupHost"
-                                    type="text"
-                                    required
-                                    value={this.props.options.bridgeBackupHost}
-                                    onChange={this.props.onChange}
-                                />
-                                :
-                                <input
-                                    className="bridge__backup-port"
-                                    name="bridgeBackupPort"
-                                    type="number"
-                                    required
-                                    min="1025"
-                                    max="65535"
-                                    value={this.props.options.bridgeBackupPort}
-                                    onChange={this.props.onChange}
-                                />
-                                {backupMessageEnd}
-                            </div>
-                            <div className="option__description">
-                                {_("optionsBridgeBackupEnabledDescription")}
-                            </div>
-                        </label>
-                    </div>
-                )}
-
-                {!this.props.loading && (
-                    <div className="bridge__update-info">
-                        {this.state.isUpdateAvailable ? (
-                            <div className="bridge__update">
-                                <p className="bridge__update-label">
-                                    {_("optionsBridgeUpdateAvailable")}
-                                </p>
-                                <div className="bridge__update-options">
-                                    <button
-                                        className="bridge__update-start"
-                                        type="button"
-                                        onClick={this.onUpdate}
-                                    >
-                                        {_("optionsBridgeUpdate")}
-                                    </button>
-                                </div>
-                            </div>
-                        ) : (
-                            <button
-                                className="bridge__update-check"
-                                type="button"
-                                disabled={this.state.isCheckingUpdates}
-                                onClick={this.onCheckUpdates}
-                            >
-                                {this.state.isCheckingUpdates
-                                    ? _(
-                                          "optionsBridgeUpdateChecking",
-                                          getNextEllipsis(
-                                              this.state.checkUpdatesEllipsis
-                                          )
-                                      )
-                                    : _("optionsBridgeUpdateCheck")}
-                            </button>
-                        )}
-
-                        <div className="bridge--update-status">
-                            {this.state.updateStatus &&
-                                !this.state.isUpdateAvailable &&
-                                this.state.updateStatus}
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    private renderStatus() {
-        const infoClasses = `bridge__info ${
-            !this.props.info
-                ? this.props.loadingTimedOut
-                    ? "bridge__info--timed-out"
-                    : "bridge__info--not-found"
-                : "bridge__info--found"
-        }`;
-
-        let statusIcon: string;
-        let statusTitle: string;
-        let statusText: string | null = null;
-
-        if (this.props.loadingTimedOut) {
-            statusIcon = "assets/icons8-warn-120.png";
-            statusTitle = _("optionsBridgeIssueStatusTitle");
-        } else if (!this.props.info) {
-            statusIcon = "assets/icons8-cancel-120.png";
-            statusTitle = _("optionsBridgeNotFoundStatusTitle");
-            statusText = _("optionsBridgeNotFoundStatusText");
-        } else {
-            if (this.props.info.isVersionCompatible) {
-                statusIcon = "assets/icons8-ok-120.png";
-                statusTitle = _("optionsBridgeFoundStatusTitle");
-            } else {
-                statusIcon = "assets/icons8-warn-120.png";
-                statusTitle = _("optionsBridgeIssueStatusTitle");
-            }
-        }
-
-        return (
-            <div className={infoClasses}>
-                <div className="bridge__status">
-                    <img
-                        className="bridge__status-icon"
-                        width="60"
-                        height="60"
-                        src={statusIcon}
-                    />
-
-                    <h2 className="bridge__status-title">{statusTitle}</h2>
-
-                    {statusText && (
-                        <p className="bridge__status-text">{statusText}</p>
-                    )}
-                </div>
-
-                {this.props.info && <BridgeStats info={this.props.info} />}
-            </div>
-        );
-    }
-
-    private onCheckUpdates() {
-        this.setState({
-            isCheckingUpdates: true
-        });
-
-        const timeout = window.setInterval(() => {
-            this.setState(state => ({
-                checkUpdatesEllipsis: getNextEllipsis(
-                    state.checkUpdatesEllipsis
-                )
-            }));
-        }, 500);
-
-        fetch("https://api.github.com/repos/hensm/fx_cast/releases")
-            .then(res => {
-                window.clearTimeout(timeout);
-                return res.json();
-            })
-            .then(this.onCheckUpdatesResponse)
-            .catch(this.onCheckUpdatesError);
-    }
-
-    private async onCheckUpdatesResponse(res: Release[]) {
-        if (!Array.isArray(res)) {
-            throw logger.error("Check update response is not array.", res);
-        }
-
-        let latestBridgeRelease;
-        for (const release of res) {
-            if (
-                release.assets.find(
-                    asset => asset.content_type !== "application/x-xpinstall"
-                )
-            ) {
-                latestBridgeRelease = release;
-                break;
-            }
-        }
-
-        if (!latestBridgeRelease) {
-            throw logger.error(
-                "Check update response does not contain release info."
-            );
-        }
-
-        /**
-         * Update available if no bridge found or bridge version lower
-         * than fetched release version.
-         */
-        const isUpdateAvailable =
-            !this.props.info ||
-            semver.lt(this.props.info.version, latestBridgeRelease.tag_name);
-
-        if (isUpdateAvailable) {
-            this.updateData = latestBridgeRelease;
-        } else {
-            this.setState({
-                updateStatus: _("optionsBridgeUpdateStatusNoUpdates")
-            });
-        }
-
-        this.setState({
-            isCheckingUpdates: false,
-            isUpdateAvailable
-        });
-
-        this.showUpdateStatus();
-    }
-
-    private onCheckUpdatesError() {
-        this.setState({
-            isCheckingUpdates: false,
-            wasErrorCheckingUpdates: true,
-            updateStatus: _("optionsBridgeUpdateStatusError")
-        });
-
-        this.showUpdateStatus();
-    }
-
-    private showUpdateStatus() {
-        if (this.updateStatusTimeout) {
-            window.clearTimeout(this.updateStatusTimeout);
-        }
-        this.updateStatusTimeout = window.setTimeout(() => {
-            this.setState({
-                updateStatus: undefined
-            });
-        }, 1500);
-    }
-
-    private async onUpdate() {
-        // Open downloads page
-        if (this.updateData?.html_url) {
-            browser.tabs.create({
-                url: this.updateData.html_url
-            });
-        }
-    }
-}
diff --git a/ext/src/ui/options/Options.svelte b/ext/src/ui/options/Options.svelte
new file mode 100644
index 0000000..13f65d1
--- /dev/null
+++ b/ext/src/ui/options/Options.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+    import { afterUpdate, beforeUpdate, onMount } from "svelte";
+
+    import Bridge from "./Bridge.svelte";
+    import Whitelist from "./Whitelist.svelte";
+    void Bridge, Whitelist;
+
+    import logger from "../../lib/logger";
+
+    import options, { Options } from "../../lib/options";
+    import defaultOptions from "../../defaultOptions";
+
+    const _ = browser.i18n.getMessage;
+
+    let formElement: HTMLFormElement;
+    let isFormValid = true;
+    let showSavedIndicator = false;
+
+    let opts: Options | undefined;
+    onMount(async () => {
+        opts = await options.getAll();
+        options.addEventListener("changed", async () => {
+            opts = await options.getAll();
+        });
+    });
+
+    afterUpdate(() => {
+        isFormValid = formElement?.checkValidity();
+    });
+
+    /** Saves options and show indicator. */
+    async function onFormSubmit() {
+        formElement.reportValidity();
+
+        try {
+            if (!opts) return;
+
+            // Remove unnecessary prop
+            for (const item of opts.siteWhitelist) {
+                if (item.isUserAgentDisabled === false) {
+                    delete item.isUserAgentDisabled;
+                }
+            }
+
+            await options.setAll(opts);
+
+            // 1s long saved indicator
+            showSavedIndicator = true;
+            setTimeout(() => {
+                showSavedIndicator = false;
+            }, 1000);
+        } catch (err) {
+            logger.error("Failed to save options!");
+        }
+    }
+
+    function onFormInput() {
+        isFormValid = formElement.checkValidity();
+    }
+
+    function resetForm() {
+        opts = JSON.parse(JSON.stringify(defaultOptions));
+    }
+</script>
+
+{#if opts}
+    <form
+        id="form"
+        bind:this={formElement}
+        on:input={onFormInput}
+        on:submit|preventDefault={onFormSubmit}
+    >
+        <Bridge bind:opts />
+
+        <fieldset class="category">
+            <legend class="category__name">
+                <h2>{_("optionsMediaCategoryName")}</h2>
+            </legend>
+            <p class="category__description">
+                {_("optionsMediaCategoryDescription")}
+            </p>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="mediaEnabled"
+                        id="mediaEnabled"
+                        type="checkbox"
+                        bind:checked={opts.mediaEnabled}
+                    />
+                </div>
+                <label class="option__label" for="mediaEnabled">
+                    {_("optionsMediaEnabled")}
+                </label>
+            </div>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="mediaSyncElement"
+                        id="mediaSyncElement"
+                        type="checkbox"
+                        bind:checked={opts.mediaSyncElement}
+                    />
+                </div>
+                <label class="option__label" for="mediaSyncElement">
+                    {_("optionsMediaSyncElement")}
+                </label>
+                <div class="option__description">
+                    {_("optionsMediaSyncElementDescription")}
+                </div>
+            </div>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="mediaStopOnUnload"
+                        id="mediaStopOnUnload"
+                        type="checkbox"
+                        bind:checked={opts.mediaStopOnUnload}
+                    />
+                </div>
+                <label class="option__label" for="mediaStopOnUnload">
+                    {_("optionsMediaStopOnUnload")}
+                </label>
+            </div>
+
+            <hr />
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="localMediaEnabled"
+                        id="localMediaEnabled"
+                        type="checkbox"
+                        bind:checked={opts.localMediaEnabled}
+                    />
+                </div>
+                <label class="option__label" for="localMediaEnabled">
+                    {_("optionsLocalMediaEnabled")}
+                </label>
+                <div class="option__description">
+                    {_("optionsLocalMediaCategoryDescription")}
+                </div>
+            </div>
+
+            <div class="option">
+                <label class="option__label" for="localMediaServerPort">
+                    {_("optionsLocalMediaServerPort")}
+                </label>
+                <div class="option__control">
+                    <input
+                        name="localMediaServerPort"
+                        id="localMediaServerPort"
+                        type="number"
+                        required
+                        min="1025"
+                        max="65535"
+                        bind:value={opts.localMediaServerPort}
+                    />
+                </div>
+            </div>
+        </fieldset>
+
+        <fieldset class="category">
+            <legend class="category__name">
+                <h2>{_("optionsMirroringCategoryName")}</h2>
+            </legend>
+            <p class="category__description">
+                {_("optionsMirroringCategoryDescription")}
+            </p>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="mirroringEnabled"
+                        id="mirroringEnabled"
+                        type="checkbox"
+                        bind:checked={opts.mirroringEnabled}
+                    />
+                </div>
+                <label class="option__label" for="mirroringEnabled">
+                    {_("optionsMirroringEnabled")}
+                </label>
+            </div>
+
+            <div class="option">
+                <label class="option__label" for="mirroringAppId">
+                    {_("optionsMirroringAppId")}
+                </label>
+                <div class="option__control">
+                    <input
+                        name="mirroringAppId"
+                        id="mirroringAppId"
+                        type="text"
+                        required
+                        bind:value={opts.mirroringAppId}
+                    />
+                    <div class="option__description">
+                        {_("optionsMirroringAppIdDescription")}
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+
+        <fieldset class="category">
+            <legend class="category__name">
+                <h2>{_("optionsReceiverSelectorCategoryName")}</h2>
+            </legend>
+            <p class="category__description">
+                {_("optionsReceiverSelectorCategoryDescription")}
+            </p>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="receiverSelectorWaitForConnection"
+                        id="receiverSelectorWaitForConnection"
+                        type="checkbox"
+                        bind:checked={opts.receiverSelectorWaitForConnection}
+                    />
+                </div>
+                <label
+                    class="option__label"
+                    for="receiverSelectorWaitForConnection"
+                >
+                    {_("optionsReceiverSelectorWaitForConnection")}
+                </label>
+                <div class="option__description">
+                    {_("optionsReceiverSelectorWaitForConnectionDescription")}
+                </div>
+            </div>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="receiverSelectorCloseIfFocusLost"
+                        id="receiverSelectorCloseIfFocusLost"
+                        type="checkbox"
+                        bind:checked={opts.receiverSelectorCloseIfFocusLost}
+                    />
+                </div>
+                <label
+                    class="option__label"
+                    for="receiverSelectorCloseIfFocusLost"
+                >
+                    {_("optionsReceiverSelectorCloseIfFocusLost")}
+                </label>
+            </div>
+        </fieldset>
+
+        <fieldset class="category">
+            <legend class="category__name">
+                <h2>{_("optionsSiteWhitelistCategoryName")}</h2>
+            </legend>
+            <p class="category__description">
+                {_("optionsSiteWhitelistCategoryDescription")}
+            </p>
+
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        name="siteWhitelistEnabled"
+                        id="siteWhitelistEnabled"
+                        type="checkbox"
+                        bind:checked={opts.siteWhitelistEnabled}
+                    />
+                </div>
+                <label class="option__label" for="siteWhitelistEnabled">
+                    {_("optionsSiteWhitelistEnabled")}
+                    <span class="option__recommended">
+                        {_("optionsOptionRecommended")}
+                    </span>
+                </label>
+                <div class="option__description">
+                    {_("optionsSiteWhitelistEnabledDescription")}
+                </div>
+            </div>
+
+            <div class="option">
+                <div class="option__label">
+                    {_("optionsSiteWhitelistContent")}
+                </div>
+                <div class="option__control">
+                    <Whitelist bind:items={opts.siteWhitelist} />
+                </div>
+            </div>
+        </fieldset>
+
+        <div id="buttons">
+            {#if showSavedIndicator}
+                <div id="status-line">
+                    {_("optionsSaved")}
+                </div>
+            {/if}
+
+            <button on:click={resetForm} type="button">
+                {_("optionsReset")}
+            </button>
+            <button type="submit" default disabled={!isFormValid}>
+                {_("optionsSave")}
+            </button>
+        </div>
+    </form>
+{/if}
diff --git a/ext/src/ui/options/Whitelist.svelte b/ext/src/ui/options/Whitelist.svelte
new file mode 100644
index 0000000..2fc5fb5
--- /dev/null
+++ b/ext/src/ui/options/Whitelist.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { tick } from "svelte";
+
+    import { WhitelistItemData } from "../../background/whitelist";
+    import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern";
+
+    void REMOTE_MATCH_PATTERN_REGEX;
+
+    const _ = browser.i18n.getMessage;
+
+    /** Whitelist items to display. */
+    export let items: WhitelistItemData[];
+
+    let isEditing = false;
+    let editingIndex: number;
+    let editingInput: HTMLInputElement;
+    let editingValue: string;
+
+    $: isEditingValid =
+        isEditing && REMOTE_MATCH_PATTERN_REGEX.test(editingValue);
+
+    async function beginEditing(index: number) {
+        if (isEditing) return;
+
+        editingIndex = index;
+        editingValue = items[index].pattern;
+        isEditing = true;
+
+        await tick();
+
+        isEditingValid = editingInput.validity.valid;
+        editingInput.focus();
+        editingInput.select();
+    }
+    function finishEditing() {
+        if (!isEditing || !editingInput.validity.valid) return;
+
+        isEditing = false;
+        items[editingIndex].pattern = editingValue;
+    }
+
+    function checkEditValidity() {
+        editingInput.setCustomValidity(
+            // Has duplicate pattern
+            items.some(
+                (item, index) =>
+                    index !== editingIndex && item.pattern === editingValue
+            )
+                ? _("optionsSiteWhitelistInvalidDuplicatePattern")
+                : ""
+        );
+
+        isEditingValid = editingInput.checkValidity();
+    }
+
+    function addItem() {
+        if (isEditing) return;
+        items = [...items, { pattern: "" }];
+        beginEditing(items.length - 1);
+    }
+    function removeItem(index: number) {
+        if (isEditing) {
+            if (index !== editingIndex) return;
+            isEditing = false;
+        }
+
+        items.splice(index, 1);
+        items = items;
+    }
+</script>
+
+<div class="whitelist">
+    <ul class="whitelist__items">
+        {#each items as item, i}
+            {@const isEditingItem = isEditing && editingIndex === i}
+
+            <li
+                class="whitelist__item"
+                class:whitelist__item--selected={isEditingItem}
+                on:dblclick={() => beginEditing(i)}
+            >
+                <div class="whitelist__title">
+                    {#if isEditingItem}
+                        <input
+                            type="text"
+                            class="whitelist__input-pattern"
+                            pattern={REMOTE_MATCH_PATTERN_REGEX.source}
+                            required
+                            bind:this={editingInput}
+                            bind:value={editingValue}
+                            on:input={checkEditValidity}
+                            on:blur={finishEditing}
+                            on:keypress={ev =>
+                                ev.key === "Enter" && finishEditing()}
+                        />
+                    {:else}
+                        {item.pattern}
+                    {/if}
+                </div>
+
+                {#if !isEditingItem}
+                    <label class="whitelist__user-agent">
+                        <input
+                            type="checkbox"
+                            bind:checked={item.isUserAgentDisabled}
+                        />
+                        {_("optionsSiteWhitelistUserAgent")}
+                    </label>
+                    <button
+                        type="button"
+                        class="whitelist__edit-button ghost"
+                        title={_("optionsSiteWhitelistEditItem")}
+                        disabled={isEditing && !isEditingValid}
+                        on:click={() => beginEditing(i)}
+                    >
+                        <img src="assets/photon_edit.svg" alt="icon, edit" />
+                    </button>
+                {/if}
+
+                <button
+                    type="button"
+                    class="whitelist__remove-button ghost"
+                    title={_("optionsSiteWhitelistRemoveItem")}
+                    disabled={isEditing && !isEditingItem && !isEditingValid}
+                    on:click={() => removeItem(i)}
+                >
+                    <img src="assets/photon_delete.svg" alt="icon, remove" />
+                </button>
+            </li>
+        {/each}
+    </ul>
+
+    <hr />
+
+    <div class="whitelist__view-actions">
+        <button
+            class="whitelist__add-button ghost"
+            title={_("optionsSiteWhitelistAddItem")}
+            on:click={addItem}
+            type="button"
+        >
+            <img src="assets/photon_new.svg" alt="icon, add" />
+        </button>
+    </div>
+</div>
diff --git a/ext/src/ui/options/Whitelist.tsx b/ext/src/ui/options/Whitelist.tsx
deleted file mode 100644
index a5eff22..0000000
--- a/ext/src/ui/options/Whitelist.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-/* eslint-disable max-len */
-"use strict";
-
-import React, { Component } from "react";
-
-import type { WhitelistItemData } from "../../background/whitelist";
-import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern";
-
-const _ = browser.i18n.getMessage;
-
-interface WhitelistProps {
-    items: WhitelistItemData[];
-    onChange: (items: WhitelistItemData[]) => void;
-}
-interface WhitelistState {
-    addingNewItem: boolean;
-}
-
-/** Editable list component for site whitelist. */
-export default class Whitelist extends Component<
-    WhitelistProps,
-    WhitelistState
-> {
-    state: WhitelistState = {
-        addingNewItem: false
-    };
-
-    render() {
-        return (
-            <div className="whitelist">
-                <ul className="whitelist__items">
-                    {this.props.items.map((item, i) => (
-                        <WhitelistItem
-                            value={item}
-                            onEdit={(oldValue, newValue) => {
-                                // Replace item
-                                this.props.onChange(
-                                    this.props.items.map(item =>
-                                        item.pattern === oldValue?.pattern
-                                            ? newValue
-                                            : item
-                                    )
-                                );
-                            }}
-                            onRemove={value => {
-                                // Remove item
-                                this.props.onChange(
-                                    this.props.items.filter(
-                                        item => item.pattern !== value?.pattern
-                                    )
-                                );
-                            }}
-                            key={i}
-                        />
-                    ))}
-
-                    {this.state.addingNewItem && (
-                        <WhitelistItem
-                            isEditing={true}
-                            onEdit={(__, newValue) => {
-                                // Add new item
-                                this.setState({ addingNewItem: false }, () => {
-                                    this.props.onChange([
-                                        ...this.props.items,
-                                        newValue
-                                    ]);
-                                });
-                            }}
-                            onRemove={() => {
-                                // Cancel adding new item
-                                this.setState({ addingNewItem: false });
-                            }}
-                        />
-                    )}
-                </ul>
-
-                <hr />
-
-                <div className="whitelist__view-actions">
-                    <button
-                        className="whitelist__add-button ghost"
-                        title={_("optionsSiteWhitelistAddItem")}
-                        onClick={() => this.setState({ addingNewItem: true })}
-                        type="button"
-                    >
-                        <img src="assets/photon_new.svg" alt="icon, add" />
-                    </button>
-                </div>
-            </div>
-        );
-    }
-}
-
-interface WhitelistItemProps {
-    value?: WhitelistItemData;
-    /** Initial editing state */
-    isEditing?: boolean;
-    onEdit: (
-        oldValue: WhitelistItemData | undefined,
-        newValue: WhitelistItemData
-    ) => void;
-    onRemove: (value?: WhitelistItemData) => void;
-}
-interface WhitelistItemState {
-    isEditing: boolean;
-    editValue?: WhitelistItemData;
-}
-
-/** Editable item component for whitelist. */
-class WhitelistItem extends Component<WhitelistItemProps, WhitelistItemState> {
-    private inputElement: HTMLInputElement | null = null;
-
-    constructor(props: WhitelistItemProps) {
-        super(props);
-        this.state = { isEditing: props.isEditing ?? false };
-
-        this.beginEditing = this.beginEditing.bind(this);
-        this.finishEditing = this.finishEditing.bind(this);
-    }
-
-    /** Sets editing state and focuses input field. */
-    private beginEditing() {
-        if (this.state.isEditing) return;
-
-        this.setState(
-            {
-                isEditing: true,
-                editValue: this.props.value
-            },
-            () => {
-                this.inputElement?.focus();
-                this.inputElement?.select();
-            }
-        );
-    }
-
-    /** Checks input validity and sends edit update. */
-    private finishEditing() {
-        if (!this.state.isEditing || !this.state.editValue) return;
-
-        if (this.inputElement?.validity.valid) {
-            this.props.onEdit(this.props.value, this.state.editValue);
-            this.setState({
-                isEditing: false,
-                editValue: undefined
-            });
-        }
-    }
-
-    render() {
-        const selectedClassName = this.state.isEditing
-            ? "whitelist__item--selected"
-            : "";
-
-        return (
-            <li className={`whitelist__item ${selectedClassName}`}>
-                <div
-                    className="whitelist__title"
-                    onDoubleClick={this.beginEditing}
-                >
-                    {this.state.isEditing ? (
-                        <input
-                            ref={el => (this.inputElement = el)}
-                            type="text"
-                            className="whitelist__input-pattern"
-                            value={this.state.editValue?.pattern}
-                            pattern={REMOTE_MATCH_PATTERN_REGEX.source}
-                            onChange={ev => {
-                                this.setState(prevState => ({
-                                    editValue: {
-                                        ...prevState.editValue,
-                                        pattern: ev.target.value
-                                    }
-                                }));
-                            }}
-                            onBlur={this.finishEditing}
-                            onKeyPress={ev => {
-                                if (ev.key === "Enter") {
-                                    this.finishEditing();
-                                }
-                            }}
-                        />
-                    ) : (
-                        this.props.value?.pattern
-                    )}
-                </div>
-
-                <label className="whitelist__user-agent">
-                    <input
-                        type="checkbox"
-                        checked={!this.props.value?.isUserAgentDisabled}
-                        onChange={ev => {
-                            if (!this.props.value) return;
-                            this.props.onEdit(this.props.value, {
-                                ...this.props.value,
-                                isUserAgentDisabled: !ev.target.checked
-                            });
-                        }}
-                    />
-                    {_("optionsSiteWhitelistUserAgent")}
-                </label>
-
-                <button
-                    className="whitelist__edit-button ghost"
-                    title={_("optionsSiteWhitelistEditItem")}
-                    onClick={this.beginEditing}
-                    type="button"
-                >
-                    <img src="assets/photon_edit.svg" alt="icon, edit" />
-                </button>
-
-                <button
-                    className="whitelist__remove-button ghost"
-                    title={_("optionsSiteWhitelistRemoveItem")}
-                    onClick={() => {
-                        this.props.onRemove(this.props.value);
-                    }}
-                    type="button"
-                >
-                    <img src="assets/photon_delete.svg" alt="icon, remove" />
-                </button>
-            </li>
-        );
-    }
-}
diff --git a/ext/src/ui/options/index.ts b/ext/src/ui/options/index.ts
new file mode 100644
index 0000000..75b84fa
--- /dev/null
+++ b/ext/src/ui/options/index.ts
@@ -0,0 +1,25 @@
+"use strict";
+
+import Options from "./Options.svelte";
+
+// macOS styles
+browser.runtime.getPlatformInfo().then(platformInfo => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+
+    switch (platformInfo.os) {
+        case "mac": {
+            link.href = "styles/mac.css";
+            break;
+        }
+    }
+
+    if (link.href) {
+        document.head.appendChild(link);
+    }
+});
+
+const target = document.getElementById("root");
+if (target) {
+    new Options({ target });
+}
diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx
deleted file mode 100644
index c735e97..0000000
--- a/ext/src/ui/options/index.tsx
+++ /dev/null
@@ -1,462 +0,0 @@
-/* eslint-disable max-len */
-"use strict";
-
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-
-import defaultOptions from "../../defaultOptions";
-import type { WhitelistItemData } from "../../background/whitelist";
-
-import Bridge from "./Bridge";
-import Whitelist from "./Whitelist";
-
-import bridge, { BridgeInfo, BridgeTimedOutError } from "../../lib/bridge";
-import logger from "../../lib/logger";
-import options, { Options } from "../../lib/options";
-
-const _ = browser.i18n.getMessage;
-
-// macOS styles
-browser.runtime.getPlatformInfo().then(platformInfo => {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-
-    switch (platformInfo.os) {
-        case "mac": {
-            link.href = "styles/mac.css";
-            break;
-        }
-    }
-
-    if (link.href) {
-        document.head.appendChild(link);
-    }
-});
-
-function getInputValue(input: HTMLInputElement) {
-    switch (input.type) {
-        case "checkbox":
-            return input.checked;
-        case "number":
-            return parseFloat(input.value);
-
-        default:
-            return input.value;
-    }
-}
-
-interface OptionsAppProps {}
-interface OptionsAppState {
-    hasLoaded: boolean;
-    bridgeLoading: boolean;
-    bridgeLoadingTimedOut: boolean;
-    isFormValid: boolean;
-    hasSaved: boolean;
-
-    options?: Options;
-    bridgeInfo?: BridgeInfo;
-    platform?: string;
-}
-
-class OptionsApp extends Component<OptionsAppProps, OptionsAppState> {
-    private form: HTMLFormElement | null = null;
-
-    state: OptionsAppState = {
-        hasLoaded: false,
-        bridgeLoading: true,
-        bridgeLoadingTimedOut: false,
-        isFormValid: true,
-        hasSaved: false
-    };
-
-    constructor(props: OptionsAppProps) {
-        super(props);
-
-        this.handleReset = this.handleReset.bind(this);
-        this.handleFormSubmit = this.handleFormSubmit.bind(this);
-        this.handleFormChange = this.handleFormChange.bind(this);
-        this.handleInputChange = this.handleInputChange.bind(this);
-        this.handleWhitelistChange = this.handleWhitelistChange.bind(this);
-    }
-
-    public async componentDidMount() {
-        this.setState({
-            hasLoaded: true,
-            options: await options.getAll(),
-            platform: (await browser.runtime.getPlatformInfo()).os
-        });
-
-        // Update options data if changed whilst page is open
-        options.addEventListener("changed", async () => {
-            this.setState({
-                options: await options.getAll()
-            });
-        });
-
-        try {
-            const bridgeInfo = await bridge.getInfo();
-
-            this.setState({
-                bridgeInfo,
-                bridgeLoading: false
-            });
-        } catch (err) {
-            logger.error("Failed to fetch bridge/platform info.");
-
-            if (err instanceof BridgeTimedOutError) {
-                this.setState({
-                    bridgeLoading: false,
-                    bridgeLoadingTimedOut: true
-                });
-            } else {
-                this.setState({
-                    bridgeLoading: false
-                });
-            }
-        }
-    }
-
-    public render() {
-        if (!this.state.hasLoaded) {
-            return;
-        }
-
-        return (
-            <div>
-                <form
-                    id="form"
-                    ref={form => {
-                        this.form = form;
-                    }}
-                    onSubmit={this.handleFormSubmit}
-                    onChange={this.handleFormChange}
-                >
-                    <Bridge
-                        info={this.state.bridgeInfo}
-                        loading={this.state.bridgeLoading}
-                        loadingTimedOut={this.state.bridgeLoadingTimedOut}
-                        options={this.state.options}
-                        onChange={this.handleInputChange}
-                    />
-
-                    <fieldset className="category">
-                        <legend className="category__name">
-                            <h2>{_("optionsMediaCategoryName")}</h2>
-                        </legend>
-                        <p className="category__description">
-                            {_("optionsMediaCategoryDescription")}
-                        </p>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="mediaEnabled"
-                                    type="checkbox"
-                                    checked={this.state.options?.mediaEnabled}
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsMediaEnabled")}
-                            </div>
-                        </label>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="mediaSyncElement"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options?.mediaSyncElement
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsMediaSyncElement")}
-                            </div>
-                            <div className="option__description">
-                                {_("optionsMediaSyncElementDescription")}
-                            </div>
-                        </label>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="mediaStopOnUnload"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options?.mediaStopOnUnload
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsMediaStopOnUnload")}
-                            </div>
-                        </label>
-
-                        <hr />
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="localMediaEnabled"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options?.localMediaEnabled
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsLocalMediaEnabled")}
-                            </div>
-                            <div className="option__description">
-                                {_("optionsLocalMediaCategoryDescription")}
-                            </div>
-                        </label>
-
-                        <label className="option">
-                            <div className="option__label">
-                                {_("optionsLocalMediaServerPort")}
-                            </div>
-                            <div className="option__control">
-                                <input
-                                    name="localMediaServerPort"
-                                    type="number"
-                                    required
-                                    min="1025"
-                                    max="65535"
-                                    value={
-                                        this.state.options?.localMediaServerPort
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                        </label>
-                    </fieldset>
-
-                    <fieldset className="category">
-                        <legend className="category__name">
-                            <h2>{_("optionsMirroringCategoryName")}</h2>
-                        </legend>
-                        <p className="category__description">
-                            {_("optionsMirroringCategoryDescription")}
-                        </p>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="mirroringEnabled"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options?.mirroringEnabled
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsMirroringEnabled")}
-                            </div>
-                        </label>
-
-                        <label className="option">
-                            <div className="option__label">
-                                {_("optionsMirroringAppId")}
-                            </div>
-                            <div className="option__control">
-                                <input
-                                    name="mirroringAppId"
-                                    type="text"
-                                    required
-                                    value={this.state.options?.mirroringAppId}
-                                    onChange={this.handleInputChange}
-                                />
-                                <div className="option__description">
-                                    {_("optionsMirroringAppIdDescription")}
-                                </div>
-                            </div>
-                        </label>
-                    </fieldset>
-
-                    <fieldset className="category">
-                        <legend className="category__name">
-                            <h2>{_("optionsReceiverSelectorCategoryName")}</h2>
-                        </legend>
-                        <p className="category__description">
-                            {_("optionsReceiverSelectorCategoryDescription")}
-                        </p>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="receiverSelectorWaitForConnection"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options
-                                            ?.receiverSelectorWaitForConnection
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsReceiverSelectorWaitForConnection")}
-                            </div>
-                            <div className="option__description">
-                                {_(
-                                    "optionsReceiverSelectorWaitForConnectionDescription"
-                                )}
-                            </div>
-                        </label>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="receiverSelectorCloseIfFocusLost"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options
-                                            ?.receiverSelectorCloseIfFocusLost
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsReceiverSelectorCloseIfFocusLost")}
-                            </div>
-                        </label>
-                    </fieldset>
-
-                    <fieldset className="category">
-                        <legend className="category__name">
-                            <h2>{_("optionsSiteWhitelistCategoryName")}</h2>
-                        </legend>
-                        <p className="category__description">
-                            {_("optionsSiteWhitelistCategoryDescription")}
-                        </p>
-
-                        <label className="option option--inline">
-                            <div className="option__control">
-                                <input
-                                    name="siteWhitelistEnabled"
-                                    type="checkbox"
-                                    checked={
-                                        this.state.options?.siteWhitelistEnabled
-                                    }
-                                    onChange={this.handleInputChange}
-                                />
-                            </div>
-                            <div className="option__label">
-                                {_("optionsSiteWhitelistEnabled")}
-                                <span className="option__recommended">
-                                    {_("optionsOptionRecommended")}
-                                </span>
-                            </div>
-                            <div className="option__description">
-                                {_("optionsSiteWhitelistEnabledDescription")}
-                            </div>
-                        </label>
-
-                        <div className="option">
-                            <div className="option__label">
-                                {_("optionsSiteWhitelistContent")}
-                            </div>
-                            <div className="option__control">
-                                {this.state.options?.siteWhitelist && (
-                                    <Whitelist
-                                        items={this.state.options.siteWhitelist}
-                                        onChange={this.handleWhitelistChange}
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </fieldset>
-
-                    <div id="buttons">
-                        <div id="status-line">
-                            {this.state.hasSaved && _("optionsSaved")}
-                        </div>
-                        <button onClick={this.handleReset} type="button">
-                            {_("optionsReset")}
-                        </button>
-                        <button
-                            type="submit"
-                            // @ts-ignore
-                            default
-                            disabled={!this.state.isFormValid}
-                        >
-                            {_("optionsSave")}
-                        </button>
-                    </div>
-                </form>
-            </div>
-        );
-    }
-
-    private handleReset() {
-        this.setState({
-            options: { ...defaultOptions }
-        });
-    }
-
-    private async handleFormSubmit(ev: React.FormEvent<HTMLFormElement>) {
-        ev.preventDefault();
-
-        this.form?.reportValidity();
-
-        try {
-            if (this.state.options) {
-                await options.setAll(this.state.options);
-
-                this.setState(
-                    {
-                        hasSaved: true
-                    },
-                    () => {
-                        window.setTimeout(() => {
-                            this.setState({
-                                hasSaved: false
-                            });
-                        }, 1000);
-                    }
-                );
-            }
-        } catch (err) {
-            logger.error("Failed to save options");
-        }
-    }
-
-    private handleFormChange(ev: React.FormEvent<HTMLFormElement>) {
-        ev.preventDefault();
-
-        const isFormValid = this.form?.checkValidity();
-        if (isFormValid !== undefined) {
-            this.setState({
-                isFormValid
-            });
-        }
-    }
-
-    private handleInputChange(ev: React.ChangeEvent<HTMLInputElement>) {
-        this.setState(currentState => {
-            if (currentState.options) {
-                currentState.options[ev.target.name] = getInputValue(ev.target);
-            }
-
-            return currentState;
-        });
-    }
-
-    private handleWhitelistChange(whitelist: WhitelistItemData[]) {
-        this.setState(currentState => {
-            if (currentState.options) {
-                currentState.options.siteWhitelist = whitelist;
-            }
-
-            return currentState;
-        });
-    }
-}
-
-ReactDOM.render(<OptionsApp />, document.querySelector("#root"));
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index 4b5bb10..f42c0d4 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -347,8 +347,9 @@ button.ghost:not(:hover) {
 .whitelist__item {
     align-items: center;
     display: flex;
+    gap: 5px;
     height: 34px;
-    padding: 0 5px;
+    padding: 0 10px;
 }
 
 .whitelist__item:nth-child(odd) {
@@ -368,23 +369,11 @@ button.ghost:not(:hover) {
     white-space: nowrap;
 }
 
-.whitelist__item:not(.whitelist__item--selected) > .whitelist__title {
-    padding: 0 8px;
-}
-
-.whitelist__title + button {
-    margin-inline-end: 5px;
-}
-
 .whitelist__input-pattern {
     font: inherit;
-    margin-inline-end: 1em;
     width: -moz-available;
 }
 
-.whitelist__user-agent {
-    margin-inline-end: 5px;
-}
 .whitelist__add-button {
     margin-inline-end: auto;
 }
diff --git a/ext/tsconfig.json b/ext/tsconfig.json
index 066d39d..da4ad81 100644
--- a/ext/tsconfig.json
+++ b/ext/tsconfig.json
@@ -1,9 +1,10 @@
 {
-    "extends": "../tsconfig"
-  , "compilerOptions": {
-        "jsx": "react"
-      , "lib": [ "ESNext", "DOM", "DOM.Iterable" ]
-      , "moduleResolution": "node"
-      , "sourceMap": true
+    "extends": "../tsconfig",
+    "compilerOptions": {
+        "jsx": "react",
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "module": "esnext"
     }
 }
diff --git a/package-lock.json b/package-lock.json
index a6c260c..c2e1c31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
             "devDependencies": {
                 "@typescript-eslint/eslint-plugin": "^5.14.0",
                 "@typescript-eslint/parser": "^5.14.0",
+                "esbuild-svelte": "^0.7.0",
                 "eslint": "^8.10.0",
                 "eslint-config-prettier": "^8.5.0",
                 "fs-extra": "^10.0.1",
@@ -16,6 +17,8 @@
                 "minimist": "^1.2.5",
                 "prettier": "^2.5.1",
                 "selenium-webdriver": "^4.1.1",
+                "svelte": "^3.48.0",
+                "svelte-preprocess": "^4.10.6",
                 "typescript": "^4.6.2",
                 "ws": "^8.5.0"
             }
@@ -110,6 +113,27 @@
             "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
             "dev": true
         },
+        "node_modules/@types/node": {
+            "version": "17.0.38",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.38.tgz",
+            "integrity": "sha512-5jY9RhV7c0Z4Jy09G+NIDTsCZ5G0L5n+Z+p+Y7t5VJHM30bgwzSjVtlcBxqAj+6L/swIlvtOSzr8rBk/aNyV2g==",
+            "dev": true
+        },
+        "node_modules/@types/pug": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+            "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+            "dev": true
+        },
+        "node_modules/@types/sass": {
+            "version": "1.43.1",
+            "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+            "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+            "dev": true,
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "5.14.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.14.0.tgz",
@@ -395,6 +419,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/buffer-crc32": {
+            "version": "0.2.13",
+            "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+            "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -586,6 +619,15 @@
                 "clone": "^1.0.2"
             }
         },
+        "node_modules/detect-indent": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+            "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/dir-glob": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -610,6 +652,401 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/es6-promise": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+            "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+            "dev": true
+        },
+        "node_modules/esbuild": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.42.tgz",
+            "integrity": "sha512-V0uPZotCEHokJdNqyozH6qsaQXqmZEOiZWrXnds/zaH/0SyrIayRXWRB98CENO73MIZ9T3HBIOsmds5twWtmgw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "peer": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "esbuild-android-64": "0.14.42",
+                "esbuild-android-arm64": "0.14.42",
+                "esbuild-darwin-64": "0.14.42",
+                "esbuild-darwin-arm64": "0.14.42",
+                "esbuild-freebsd-64": "0.14.42",
+                "esbuild-freebsd-arm64": "0.14.42",
+                "esbuild-linux-32": "0.14.42",
+                "esbuild-linux-64": "0.14.42",
+                "esbuild-linux-arm": "0.14.42",
+                "esbuild-linux-arm64": "0.14.42",
+                "esbuild-linux-mips64le": "0.14.42",
+                "esbuild-linux-ppc64le": "0.14.42",
+                "esbuild-linux-riscv64": "0.14.42",
+                "esbuild-linux-s390x": "0.14.42",
+                "esbuild-netbsd-64": "0.14.42",
+                "esbuild-openbsd-64": "0.14.42",
+                "esbuild-sunos-64": "0.14.42",
+                "esbuild-windows-32": "0.14.42",
+                "esbuild-windows-64": "0.14.42",
+                "esbuild-windows-arm64": "0.14.42"
+            }
+        },
+        "node_modules/esbuild-android-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.42.tgz",
+            "integrity": "sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-android-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.42.tgz",
+            "integrity": "sha512-0cOqCubq+RWScPqvtQdjXG3Czb3AWI2CaKw3HeXry2eoA2rrPr85HF7IpdU26UWdBXgPYtlTN1LUiuXbboROhg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-darwin-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.42.tgz",
+            "integrity": "sha512-ipiBdCA3ZjYgRfRLdQwP82rTiv/YVMtW36hTvAN5ZKAIfxBOyPXY7Cejp3bMXWgzKD8B6O+zoMzh01GZsCuEIA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-darwin-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.42.tgz",
+            "integrity": "sha512-bU2tHRqTPOaoH/4m0zYHbFWpiYDmaA0gt90/3BMEFaM0PqVK/a6MA2V/ypV5PO0v8QxN6gH5hBPY4YJ2lopXgA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-freebsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.42.tgz",
+            "integrity": "sha512-75h1+22Ivy07+QvxHyhVqOdekupiTZVLN1PMwCDonAqyXd8TVNJfIRFrdL8QmSJrOJJ5h8H1I9ETyl2L8LQDaw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-freebsd-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.42.tgz",
+            "integrity": "sha512-W6Jebeu5TTDQMJUJVarEzRU9LlKpNkPBbjqSu+GUPTHDCly5zZEQq9uHkmHHl7OKm+mQ2zFySN83nmfCeZCyNA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-32": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.42.tgz",
+            "integrity": "sha512-Ooy/Bj+mJ1z4jlWcK5Dl6SlPlCgQB9zg1UrTCeY8XagvuWZ4qGPyYEWGkT94HUsRi2hKsXvcs6ThTOjBaJSMfg==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.42.tgz",
+            "integrity": "sha512-2L0HbzQfbTuemUWfVqNIjOfaTRt9zsvjnme6lnr7/MO9toz/MJ5tZhjqrG6uDWDxhsaHI2/nsDgrv8uEEN2eoA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-arm": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.42.tgz",
+            "integrity": "sha512-STq69yzCMhdRaWnh29UYrLSr/qaWMm/KqwaRF1pMEK7kDiagaXhSL1zQGXbYv94GuGY/zAwzK98+6idCMUOOCg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.42.tgz",
+            "integrity": "sha512-c3Ug3e9JpVr8jAcfbhirtpBauLxzYPpycjWulD71CF6ZSY26tvzmXMJYooQ2YKqDY4e/fPu5K8bm7MiXMnyxuA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-mips64le": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.42.tgz",
+            "integrity": "sha512-QuvpHGbYlkyXWf2cGm51LBCHx6eUakjaSrRpUqhPwjh/uvNUYvLmz2LgPTTPwCqaKt0iwL+OGVL0tXA5aDbAbg==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-ppc64le": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.42.tgz",
+            "integrity": "sha512-8ohIVIWDbDT+i7lCx44YCyIRrOW1MYlks9fxTo0ME2LS/fxxdoJBwHWzaDYhjvf8kNpA+MInZvyOEAGoVDrMHg==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-riscv64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.42.tgz",
+            "integrity": "sha512-DzDqK3TuoXktPyG1Lwx7vhaF49Onv3eR61KwQyxYo4y5UKTpL3NmuarHSIaSVlTFDDpcIajCDwz5/uwKLLgKiQ==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-linux-s390x": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.42.tgz",
+            "integrity": "sha512-YFRhPCxl8nb//Wn6SiS5pmtplBi4z9yC2gLrYoYI/tvwuB1jldir9r7JwAGy1Ck4D7sE7wBN9GFtUUX/DLdcEQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-netbsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.42.tgz",
+            "integrity": "sha512-QYSD2k+oT9dqB/4eEM9c+7KyNYsIPgzYOSrmfNGDIyJrbT1d+CFVKvnKahDKNJLfOYj8N4MgyFaU9/Ytc6w5Vw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-openbsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.42.tgz",
+            "integrity": "sha512-M2meNVIKWsm2HMY7+TU9AxM7ZVwI9havdsw6m/6EzdXysyCFFSoaTQ/Jg03izjCsK17FsVRHqRe26Llj6x0MNA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-sunos-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.42.tgz",
+            "integrity": "sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-svelte": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/esbuild-svelte/-/esbuild-svelte-0.7.0.tgz",
+            "integrity": "sha512-hfiauhEXtGocUf7oVcxTrLhhF57ajBbvNCCClsS3KntEeITddKU+1WFhmsCt9SO0dQJlCFzJtpPu2dI7dRkXBw==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "esbuild": ">=0.9.6",
+                "svelte": ">=3.43.0"
+            }
+        },
+        "node_modules/esbuild-windows-32": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.42.tgz",
+            "integrity": "sha512-4iw/8qWmRICWi9ZOnJJf9sYt6wmtp3hsN4TdI5NqgjfOkBVMxNdM9Vt3626G1Rda9ya2Q0hjQRD9W1o+m6Lz6g==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-windows-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.42.tgz",
+            "integrity": "sha512-j3cdK+Y3+a5H0wHKmLGTJcq0+/2mMBHPWkItR3vytp/aUGD/ua/t2BLdfBIzbNN9nLCRL9sywCRpOpFMx3CxzA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/esbuild-windows-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.42.tgz",
+            "integrity": "sha512-+lRAARnF+hf8J0mN27ujO+VbhPbDqJ8rCcJKye4y7YZLV6C4n3pTRThAb388k/zqF5uM0lS5O201u0OqoWSicw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/escape-string-regexp": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1328,6 +1765,15 @@
                 "node": ">=10"
             }
         },
+        "node_modules/magic-string": {
+            "version": "0.25.9",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+            "dev": true,
+            "dependencies": {
+                "sourcemap-codec": "^1.4.8"
+            }
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1359,6 +1805,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/min-indent": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+            "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1372,11 +1827,23 @@
             }
         },
         "node_modules/minimist": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
             "dev": true
         },
+        "node_modules/mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dev": true,
+            "dependencies": {
+                "minimist": "^1.2.6"
+            },
+            "bin": {
+                "mkdirp": "bin/cmd.js"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1719,6 +2186,30 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "dev": true
         },
+        "node_modules/sander": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+            "integrity": "sha1-dB4kXiMfB8r7b98PEzrfohalAq0=",
+            "dev": true,
+            "dependencies": {
+                "es6-promise": "^3.1.2",
+                "graceful-fs": "^4.1.3",
+                "mkdirp": "^0.5.1",
+                "rimraf": "^2.5.2"
+            }
+        },
+        "node_modules/sander/node_modules/rimraf": {
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+            "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+            "dev": true,
+            "dependencies": {
+                "glob": "^7.1.3"
+            },
+            "bin": {
+                "rimraf": "bin.js"
+            }
+        },
         "node_modules/selenium-webdriver": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.1.1.tgz",
@@ -1793,6 +2284,27 @@
                 "node": ">=8"
             }
         },
+        "node_modules/sorcery": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+            "integrity": "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=",
+            "dev": true,
+            "dependencies": {
+                "buffer-crc32": "^0.2.5",
+                "minimist": "^1.2.0",
+                "sander": "^0.5.0",
+                "sourcemap-codec": "^1.3.0"
+            },
+            "bin": {
+                "sorcery": "bin/index.js"
+            }
+        },
+        "node_modules/sourcemap-codec": {
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+            "dev": true
+        },
         "node_modules/string_decoder": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -1814,6 +2326,18 @@
                 "node": ">=8"
             }
         },
+        "node_modules/strip-indent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+            "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+            "dev": true,
+            "dependencies": {
+                "min-indent": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -1838,6 +2362,81 @@
                 "node": ">=4"
             }
         },
+        "node_modules/svelte": {
+            "version": "3.48.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.48.0.tgz",
+            "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/svelte-preprocess": {
+            "version": "4.10.6",
+            "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz",
+            "integrity": "sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==",
+            "dev": true,
+            "hasInstallScript": true,
+            "dependencies": {
+                "@types/pug": "^2.0.4",
+                "@types/sass": "^1.16.0",
+                "detect-indent": "^6.0.0",
+                "magic-string": "^0.25.7",
+                "sorcery": "^0.10.0",
+                "strip-indent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 9.11.2"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.10.2",
+                "coffeescript": "^2.5.1",
+                "less": "^3.11.3 || ^4.0.0",
+                "postcss": "^7 || ^8",
+                "postcss-load-config": "^2.1.0 || ^3.0.0",
+                "pug": "^3.0.0",
+                "sass": "^1.26.8",
+                "stylus": "^0.55.0",
+                "sugarss": "^2.0.0",
+                "svelte": "^3.23.0",
+                "typescript": "^3.9.5 || ^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@babel/core": {
+                    "optional": true
+                },
+                "coffeescript": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "node-sass": {
+                    "optional": true
+                },
+                "postcss": {
+                    "optional": true
+                },
+                "postcss-load-config": {
+                    "optional": true
+                },
+                "pug": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2098,6 +2697,27 @@
             "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
             "dev": true
         },
+        "@types/node": {
+            "version": "17.0.38",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.38.tgz",
+            "integrity": "sha512-5jY9RhV7c0Z4Jy09G+NIDTsCZ5G0L5n+Z+p+Y7t5VJHM30bgwzSjVtlcBxqAj+6L/swIlvtOSzr8rBk/aNyV2g==",
+            "dev": true
+        },
+        "@types/pug": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+            "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+            "dev": true
+        },
+        "@types/sass": {
+            "version": "1.43.1",
+            "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+            "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+            "dev": true,
+            "requires": {
+                "@types/node": "*"
+            }
+        },
         "@typescript-eslint/eslint-plugin": {
             "version": "5.14.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.14.0.tgz",
@@ -2270,6 +2890,12 @@
                 "fill-range": "^7.0.1"
             }
         },
+        "buffer-crc32": {
+            "version": "0.2.13",
+            "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+            "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+            "dev": true
+        },
         "callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2416,6 +3042,12 @@
                 "clone": "^1.0.2"
             }
         },
+        "detect-indent": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+            "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+            "dev": true
+        },
         "dir-glob": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2434,6 +3066,208 @@
                 "esutils": "^2.0.2"
             }
         },
+        "es6-promise": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+            "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+            "dev": true
+        },
+        "esbuild": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.42.tgz",
+            "integrity": "sha512-V0uPZotCEHokJdNqyozH6qsaQXqmZEOiZWrXnds/zaH/0SyrIayRXWRB98CENO73MIZ9T3HBIOsmds5twWtmgw==",
+            "dev": true,
+            "peer": true,
+            "requires": {
+                "esbuild-android-64": "0.14.42",
+                "esbuild-android-arm64": "0.14.42",
+                "esbuild-darwin-64": "0.14.42",
+                "esbuild-darwin-arm64": "0.14.42",
+                "esbuild-freebsd-64": "0.14.42",
+                "esbuild-freebsd-arm64": "0.14.42",
+                "esbuild-linux-32": "0.14.42",
+                "esbuild-linux-64": "0.14.42",
+                "esbuild-linux-arm": "0.14.42",
+                "esbuild-linux-arm64": "0.14.42",
+                "esbuild-linux-mips64le": "0.14.42",
+                "esbuild-linux-ppc64le": "0.14.42",
+                "esbuild-linux-riscv64": "0.14.42",
+                "esbuild-linux-s390x": "0.14.42",
+                "esbuild-netbsd-64": "0.14.42",
+                "esbuild-openbsd-64": "0.14.42",
+                "esbuild-sunos-64": "0.14.42",
+                "esbuild-windows-32": "0.14.42",
+                "esbuild-windows-64": "0.14.42",
+                "esbuild-windows-arm64": "0.14.42"
+            }
+        },
+        "esbuild-android-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.42.tgz",
+            "integrity": "sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-android-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.42.tgz",
+            "integrity": "sha512-0cOqCubq+RWScPqvtQdjXG3Czb3AWI2CaKw3HeXry2eoA2rrPr85HF7IpdU26UWdBXgPYtlTN1LUiuXbboROhg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-darwin-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.42.tgz",
+            "integrity": "sha512-ipiBdCA3ZjYgRfRLdQwP82rTiv/YVMtW36hTvAN5ZKAIfxBOyPXY7Cejp3bMXWgzKD8B6O+zoMzh01GZsCuEIA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-darwin-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.42.tgz",
+            "integrity": "sha512-bU2tHRqTPOaoH/4m0zYHbFWpiYDmaA0gt90/3BMEFaM0PqVK/a6MA2V/ypV5PO0v8QxN6gH5hBPY4YJ2lopXgA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-freebsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.42.tgz",
+            "integrity": "sha512-75h1+22Ivy07+QvxHyhVqOdekupiTZVLN1PMwCDonAqyXd8TVNJfIRFrdL8QmSJrOJJ5h8H1I9ETyl2L8LQDaw==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-freebsd-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.42.tgz",
+            "integrity": "sha512-W6Jebeu5TTDQMJUJVarEzRU9LlKpNkPBbjqSu+GUPTHDCly5zZEQq9uHkmHHl7OKm+mQ2zFySN83nmfCeZCyNA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-32": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.42.tgz",
+            "integrity": "sha512-Ooy/Bj+mJ1z4jlWcK5Dl6SlPlCgQB9zg1UrTCeY8XagvuWZ4qGPyYEWGkT94HUsRi2hKsXvcs6ThTOjBaJSMfg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.42.tgz",
+            "integrity": "sha512-2L0HbzQfbTuemUWfVqNIjOfaTRt9zsvjnme6lnr7/MO9toz/MJ5tZhjqrG6uDWDxhsaHI2/nsDgrv8uEEN2eoA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-arm": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.42.tgz",
+            "integrity": "sha512-STq69yzCMhdRaWnh29UYrLSr/qaWMm/KqwaRF1pMEK7kDiagaXhSL1zQGXbYv94GuGY/zAwzK98+6idCMUOOCg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.42.tgz",
+            "integrity": "sha512-c3Ug3e9JpVr8jAcfbhirtpBauLxzYPpycjWulD71CF6ZSY26tvzmXMJYooQ2YKqDY4e/fPu5K8bm7MiXMnyxuA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-mips64le": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.42.tgz",
+            "integrity": "sha512-QuvpHGbYlkyXWf2cGm51LBCHx6eUakjaSrRpUqhPwjh/uvNUYvLmz2LgPTTPwCqaKt0iwL+OGVL0tXA5aDbAbg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-ppc64le": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.42.tgz",
+            "integrity": "sha512-8ohIVIWDbDT+i7lCx44YCyIRrOW1MYlks9fxTo0ME2LS/fxxdoJBwHWzaDYhjvf8kNpA+MInZvyOEAGoVDrMHg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-riscv64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.42.tgz",
+            "integrity": "sha512-DzDqK3TuoXktPyG1Lwx7vhaF49Onv3eR61KwQyxYo4y5UKTpL3NmuarHSIaSVlTFDDpcIajCDwz5/uwKLLgKiQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-linux-s390x": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.42.tgz",
+            "integrity": "sha512-YFRhPCxl8nb//Wn6SiS5pmtplBi4z9yC2gLrYoYI/tvwuB1jldir9r7JwAGy1Ck4D7sE7wBN9GFtUUX/DLdcEQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-netbsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.42.tgz",
+            "integrity": "sha512-QYSD2k+oT9dqB/4eEM9c+7KyNYsIPgzYOSrmfNGDIyJrbT1d+CFVKvnKahDKNJLfOYj8N4MgyFaU9/Ytc6w5Vw==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-openbsd-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.42.tgz",
+            "integrity": "sha512-M2meNVIKWsm2HMY7+TU9AxM7ZVwI9havdsw6m/6EzdXysyCFFSoaTQ/Jg03izjCsK17FsVRHqRe26Llj6x0MNA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-sunos-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.42.tgz",
+            "integrity": "sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-svelte": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/esbuild-svelte/-/esbuild-svelte-0.7.0.tgz",
+            "integrity": "sha512-hfiauhEXtGocUf7oVcxTrLhhF57ajBbvNCCClsS3KntEeITddKU+1WFhmsCt9SO0dQJlCFzJtpPu2dI7dRkXBw==",
+            "dev": true,
+            "requires": {}
+        },
+        "esbuild-windows-32": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.42.tgz",
+            "integrity": "sha512-4iw/8qWmRICWi9ZOnJJf9sYt6wmtp3hsN4TdI5NqgjfOkBVMxNdM9Vt3626G1Rda9ya2Q0hjQRD9W1o+m6Lz6g==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-windows-64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.42.tgz",
+            "integrity": "sha512-j3cdK+Y3+a5H0wHKmLGTJcq0+/2mMBHPWkItR3vytp/aUGD/ua/t2BLdfBIzbNN9nLCRL9sywCRpOpFMx3CxzA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
+        "esbuild-windows-arm64": {
+            "version": "0.14.42",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.42.tgz",
+            "integrity": "sha512-+lRAARnF+hf8J0mN27ujO+VbhPbDqJ8rCcJKye4y7YZLV6C4n3pTRThAb388k/zqF5uM0lS5O201u0OqoWSicw==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "escape-string-regexp": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3003,6 +3837,15 @@
                 "yallist": "^4.0.0"
             }
         },
+        "magic-string": {
+            "version": "0.25.9",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+            "dev": true,
+            "requires": {
+                "sourcemap-codec": "^1.4.8"
+            }
+        },
         "merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3025,6 +3868,12 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
             "dev": true
         },
+        "min-indent": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+            "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+            "dev": true
+        },
         "minimatch": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -3035,11 +3884,20 @@
             }
         },
         "minimist": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
             "dev": true
         },
+        "mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dev": true,
+            "requires": {
+                "minimist": "^1.2.6"
+            }
+        },
         "ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3283,6 +4141,29 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "dev": true
         },
+        "sander": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+            "integrity": "sha1-dB4kXiMfB8r7b98PEzrfohalAq0=",
+            "dev": true,
+            "requires": {
+                "es6-promise": "^3.1.2",
+                "graceful-fs": "^4.1.3",
+                "mkdirp": "^0.5.1",
+                "rimraf": "^2.5.2"
+            },
+            "dependencies": {
+                "rimraf": {
+                    "version": "2.7.1",
+                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+                    "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+                    "dev": true,
+                    "requires": {
+                        "glob": "^7.1.3"
+                    }
+                }
+            }
+        },
         "selenium-webdriver": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.1.1.tgz",
@@ -3336,6 +4217,24 @@
             "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
             "dev": true
         },
+        "sorcery": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+            "integrity": "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=",
+            "dev": true,
+            "requires": {
+                "buffer-crc32": "^0.2.5",
+                "minimist": "^1.2.0",
+                "sander": "^0.5.0",
+                "sourcemap-codec": "^1.3.0"
+            }
+        },
+        "sourcemap-codec": {
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+            "dev": true
+        },
         "string_decoder": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -3354,6 +4253,15 @@
                 "ansi-regex": "^5.0.1"
             }
         },
+        "strip-indent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+            "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+            "dev": true,
+            "requires": {
+                "min-indent": "^1.0.0"
+            }
+        },
         "strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3369,6 +4277,26 @@
                 "has-flag": "^3.0.0"
             }
         },
+        "svelte": {
+            "version": "3.48.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.48.0.tgz",
+            "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==",
+            "dev": true
+        },
+        "svelte-preprocess": {
+            "version": "4.10.6",
+            "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz",
+            "integrity": "sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==",
+            "dev": true,
+            "requires": {
+                "@types/pug": "^2.0.4",
+                "@types/sass": "^1.16.0",
+                "detect-indent": "^6.0.0",
+                "magic-string": "^0.25.7",
+                "sorcery": "^0.10.0",
+                "strip-indent": "^3.0.0"
+            }
+        },
         "text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index 7245034..bbbb12f 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.14.0",
         "@typescript-eslint/parser": "^5.14.0",
+        "esbuild-svelte": "^0.7.0",
         "eslint": "^8.10.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.0.1",
@@ -32,6 +33,8 @@
         "minimist": "^1.2.5",
         "prettier": "^2.5.1",
         "selenium-webdriver": "^4.1.1",
+        "svelte": "^3.48.0",
+        "svelte-preprocess": "^4.10.6",
         "typescript": "^4.6.2",
         "ws": "^8.5.0"
     }
diff --git a/tsconfig.json b/tsconfig.json
index 4cfe739..00393c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,13 @@
 {
     "compilerOptions": {
-        "esModuleInterop": true
-      , "module": "commonjs"
-      , "noImplicitAny": true
-      , "noUnusedParameters": true
-      , "removeComments": true
-      , "resolveJsonModule": true
-      , "target": "es6"
-      , "strict": true
-    }
+        "esModuleInterop": true,
+        "module": "commonjs",
+        "noImplicitAny": true,
+        "noUnusedParameters": true,
+        "removeComments": true,
+        "resolveJsonModule": true,
+        "target": "es6",
+        "strict": true
+    },
+    "exclude": ["node_modules/**/*", "dist/**/*"]
 }