Upgrade TypeScript and Svelte Versions (#995)

#### Description This PR upgrades the TypeScript and Svelte versions used in the Warpgate project. The specific changes include: 1. **TypeScript Upgrade** - Upgraded TypeScript version from `4.9.4` to `5.0.0` in `package.json`. - Updated related TypeScript dependencies in `package.json`. 2. **Svelte Upgrade** - Upgraded Svelte version from `3.58.0` to `4.0.0` in `package.json`. - Updated `svelte-eslint-parser` settings in `.eslintrc.yaml`. - Replaced `sveltestrap` imports with `@sveltestrap/sveltestrap` across various Svelte components. 3. **ESLint Configuration** - Added `plugin:svelte/recommended` to `.eslintrc.yaml`. - Updated `eslint` and related plugins to compatible versions. 4. **Other Dependencies** - Updated several other dependencies in `package.json` and `yarn.lock` to their latest versions to ensure compatibility with TypeScript 5 and Svelte 4. #### Changes Summary - `.eslintrc.yaml`: Adjusted ESLint configurations for the new Svelte parser and updated TypeScript rules. - `openapitools.json`: Upgraded `openapi-generator-cli` version to `7.7.0`. - `package.json`: Updated versions of TypeScript, Svelte, ESLint, and other dependencies. - Various `.svelte` files: Replaced `sveltestrap` imports with `@sveltestrap/sveltestrap` and made minor type adjustments for TypeScript 5 compatibility. - `tsconfig.json`: Minor configuration adjustment to support new TypeScript features.
2024-09-20 06:46:17 +08:00 · 2024-07-17 00:54:07 +08:00 · 2024-07-17 00:54:07 +08:00 · b65a1899ca
parent f07b9246a8
commit b65a1899ca
34 changed files with 1699 additions and 964 deletions
--- a/warpgate-web/.eslintrc.yaml
+++ b/warpgate-web/.eslintrc.yaml
@ -12,12 +12,11 @@ extends:
  - 'plugin:import/recommended'
  - 'plugin:import/typescript'
  - 'plugin:@typescript-eslint/all'
+  - 'plugin:svelte/recommended'
 plugins:
  - import
-  - svelte3
  - '@typescript-eslint/eslint-plugin'
 settings:
-  svelte3/typescript: true
  import/resolver:
    typescript: {}
 rules:
@ -118,6 +117,7 @@ rules:
  '@typescript-eslint/naming-convention': 'off'
  '@typescript-eslint/lines-between-class-members':
    - error
+    - always
    - exceptAfterSingleLine: true
  '@typescript-eslint/dot-notation': 'off'
  '@typescript-eslint/no-implicit-any-catch': 'off'
@ -141,7 +141,12 @@ rules:

 overrides:
  - files: '*.svelte'
-    processor: svelte3/svelte3
+    parser: 'svelte-eslint-parser'
+    parserOptions:
+      parser:
+        ts: '@typescript-eslint/parser'
+        js: 'espree'
+        typescript: '@typescript-eslint/parser'
    rules:
        # To allow prop definitions
        '@typescript-eslint/init-declarations': off
--- a/warpgate-web/openapitools.json
+++ b/warpgate-web/openapitools.json
@ -2,6 +2,6 @@
  "$schema": "node_modules/@openapitools/openapi-generator-cli/config.schema.json",
  "spaces": 2,
  "generator-cli": {
-    "version": "5.4.0"
+    "version": "7.7.0"
  }
 }
--- a/warpgate-web/package.json
+++ b/warpgate-web/package.json
@ -8,13 +8,13 @@
    "build": "vite build",
    "watch": "vite build -w --mode development --minify false",
    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-check --compiler-warnings 'a11y-no-noninteractive-element-interactions:ignore,a11y-click-events-have-key-events:ignore,a11y-no-static-element-interactions:ignore' --tsconfig ./tsconfig.json",
    "lint": "eslint src && svelte-check",
    "postinstall": "yarn run openapi:client:gateway && yarn run openapi:client:admin",
    "openapi:schema:gateway": "cargo run -p warpgate-protocol-http > src/gateway/lib/openapi-schema.json",
    "openapi:schema:admin": "cargo run -p warpgate-admin > src/admin/lib/openapi-schema.json",
-    "openapi:client:gateway": "openapi-generator-cli generate -g typescript-fetch -i src/gateway/lib/openapi-schema.json -o src/gateway/lib/api-client -p npmName=warpgate-gateway-api-client -p useSingleRequestParameter=true && cd src/gateway/lib/api-client && npm i typescript@3.5 && npm i && yarn tsc --target esnext --module esnext && rm -rf src tsconfig.json",
-    "openapi:client:admin": "openapi-generator-cli generate -g typescript-fetch -i src/admin/lib/openapi-schema.json -o src/admin/lib/api-client -p npmName=warpgate-admin-api-client -p useSingleRequestParameter=true && cd src/admin/lib/api-client && npm i typescript@3.5 && npm i && yarn tsc --target esnext --module esnext && rm -rf src tsconfig.json",
+    "openapi:client:gateway": "openapi-generator-cli generate -g typescript-fetch -i src/gateway/lib/openapi-schema.json -o src/gateway/lib/api-client -p npmName=warpgate-gateway-api-client -p useSingleRequestParameter=true && cd src/gateway/lib/api-client && npm i typescript@5 && npm i && yarn tsc --target esnext --module esnext && rm -rf src tsconfig.json",
+    "openapi:client:admin": "openapi-generator-cli generate -g typescript-fetch -i src/admin/lib/openapi-schema.json -o src/admin/lib/api-client -p npmName=warpgate-admin-api-client -p useSingleRequestParameter=true && cd src/admin/lib/api-client && npm i typescript@5 && npm i && yarn tsc --target esnext --module esnext && rm -rf src tsconfig.json",
    "openapi": "yarn run openapi:schema:admin && yarn run openapi:schema:gateway && yarn run openapi:client:admin && yarn run openapi:client:gateway"
  },
  "devDependencies": {
@ -22,46 +22,46 @@
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@openapitools/openapi-generator-cli": "^2.5.1",
+    "@openapitools/openapi-generator-cli": "^2.13.4",
    "@otplib/plugin-base32-enc-dec": "^12.0.1",
    "@otplib/plugin-crypto-js": "^12.0.1",
    "@otplib/preset-browser": "^12.0.1",
-    "@sveltejs/vite-plugin-svelte": "^1.4.0",
-    "@tsconfig/svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tsconfig/svelte": "^5.0.0",
    "@types/qrcode": "^1.5.0",
    "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.58.0",
-    "bootstrap": "^5.2.0-beta1",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "bootstrap": "^5.3.3",
    "copy-text-to-clipboard": "^3.0.1",
-    "eslint": "^8.38.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-svelte": "^2.39.4",
    "format-duration": "^3.0.2",
    "moment": "^2.29.4",
    "otplib": "^12.0.1",
    "qrcode": "^1.5.1",
-    "sass": "^1.61.0",
-    "svelte": "^3.58.0",
-    "svelte-check": "^2.9.2",
-    "svelte-fa": "^3.0.1",
-    "svelte-intersection-observer": "^0.10.0",
+    "sass": "^1.77.6",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
+    "svelte-fa": "^4.0.2",
+    "svelte-intersection-observer": "^1.0.0",
    "svelte-observable": "^0.4.0",
-    "svelte-preprocess": "^4.10.7",
-    "svelte-spa-router": "^3.3.0",
-    "sveltestrap": "^5.9.0",
+    "svelte-preprocess": "^5.0.3",
+    "svelte-spa-router": "^4.0.1",
+    "@sveltestrap/sveltestrap": "^6.2.7",
    "thenby": "^1.3.4",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.0.0",
    "ua-parser-js": "^1.0.35",
-    "vite": "^3.2.4",
-    "vite-plugin-checker": "^0.5.3",
-    "vite-tsconfig-paths": "^4.0.9",
+    "vite": "^5.3.1",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-tsconfig-paths": "^4.3.2",
    "xterm": "^4.18.0",
    "xterm-addon-serialize": "^0.7.0"
  }
-}
+}
--- a/warpgate-web/src/admin/AuthPolicyEditor.svelte
+++ b/warpgate-web/src/admin/AuthPolicyEditor.svelte
@ -1,12 +1,12 @@
 <script lang="ts">
-import { Input } from 'sveltestrap'
+import { Input } from '@sveltestrap/sveltestrap'

 import { CredentialKind, User, UserRequireCredentialsPolicy } from './lib/api'

 export let user: User
 export let value: UserRequireCredentialsPolicy
 export let possibleCredentials: Set<CredentialKind>
-export let protocolId: string
+export let protocolId: "http" | "ssh" | "mysql"

 const labels = {
    Password: 'Password',
@ -29,24 +29,22 @@ $: {
 }

 function updateAny () {
-    setTimeout(() => {
-        if (isAny) {
-            value[protocolId] = undefined
-        } else {
-            value[protocolId] = []
-            let oneCred = Array.from(validCredentials).filter(x => possibleCredentials.has(x))[0]
-            if (oneCred) {
-                value[protocolId] = [oneCred]
-            }
+    if (isAny) {
+        value[protocolId] = undefined
+    } else {
+        value[protocolId] = []
+        let oneCred = Array.from(validCredentials).filter(x => possibleCredentials.has(x))[0]
+        if (oneCred) {
+            value[protocolId] = [oneCred]
        }
-    })
+    }
 }

-function toggle (type: string) {
-    if (value[protocolId].includes(type)) {
-        value[protocolId] = value[protocolId].filter((x: CredentialKind) => x !== type)
+function toggle (type: CredentialKind) {
+    if (value[protocolId]!.includes(type)) {
+        value[protocolId] = value[protocolId]!.filter((x: CredentialKind) => x !== type)
    } else {
-        value[protocolId].push(type)
+        value[protocolId]!.push(type)
    }
 }
 </script>
--- a/warpgate-web/src/admin/CreateRole.svelte
+++ b/warpgate-web/src/admin/CreateRole.svelte
@ -2,7 +2,7 @@
 import { api } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import { replace } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'

 let error: Error|null = null
 let name = ''
@ -19,7 +19,7 @@ async function create () {
        })
        replace(`/roles/${role.id}`)
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

--- a/warpgate-web/src/admin/CreateTarget.svelte
+++ b/warpgate-web/src/admin/CreateTarget.svelte
@ -2,7 +2,7 @@
 import { api, TargetOptions, TlsMode } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import { replace } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'

 let error: Error|null = null
 let name = ''
@ -54,7 +54,7 @@ async function create () {
        })
        replace(`/targets/${target.id}`)
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

--- a/warpgate-web/src/admin/CreateTicket.svelte
+++ b/warpgate-web/src/admin/CreateTicket.svelte
@ -1,10 +1,10 @@
 <script lang="ts">
-import { api, User, Target, TicketAndSecret } from 'admin/lib/api'
+import { api, User, Target, TargetOptions, TicketAndSecret } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
 import { TargetKind } from 'gateway/lib/api'
 import { link } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'
 import { firstBy } from 'thenby'

 let error: Error|null = null
@ -44,7 +44,7 @@ async function create () {
            },
        })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

@ -68,7 +68,7 @@ async function create () {
        targetName={selectedTarget.name}
        targetKind={TargetKind[selectedTarget.options.kind]}
        username={selectedUser.username}
-        targetExternalHost={selectedTarget.options['externalHost']}
+        targetExternalHost={selectedTarget.options.kind == "Http" ? selectedTarget.options.externalHost : undefined}
        ticketSecret={result.secret}
    />
    {/if}
--- a/warpgate-web/src/admin/CreateUser.svelte
+++ b/warpgate-web/src/admin/CreateUser.svelte
@ -2,7 +2,7 @@
 import { api } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import { replace } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'

 let error: Error|null = null
 let username = ''
@ -21,7 +21,7 @@ async function create () {
        })
        replace(`/users/${user.id}`)
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

--- a/warpgate-web/src/admin/Home.svelte
+++ b/warpgate-web/src/admin/Home.svelte
@ -9,7 +9,7 @@
    import RelativeDate from './RelativeDate.svelte'
    import AsyncButton from 'common/AsyncButton.svelte'
    import ItemList, { LoadOptions, PaginatedResponse } from 'common/ItemList.svelte'
-    import { Input } from 'sveltestrap'
+    import { Input } from '@sveltestrap/sveltestrap'
    import { autosave } from 'common/autosave'

    let [showActiveOnly, showActiveOnly$] = autosave('sessions-list:show-active-only', false)
--- a/warpgate-web/src/admin/LogViewer.svelte
+++ b/warpgate-web/src/admin/LogViewer.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import { api, LogEntry } from 'admin/lib/api'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'
 import { firstBy } from 'thenby'
 import IntersectionObserver from 'svelte-intersection-observer'
 import { link } from 'svelte-spa-router'
--- a/warpgate-web/src/admin/Recording.svelte
+++ b/warpgate-web/src/admin/Recording.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import { api, Recording } from 'admin/lib/api'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'
 import TerminalRecordingPlayer from 'admin/player/TerminalRecordingPlayer.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'

--- a/warpgate-web/src/admin/Role.svelte
+++ b/warpgate-web/src/admin/Role.svelte
@ -3,7 +3,7 @@ import { api, Role } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
 import { replace } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'

 export let params: { id: string }

@ -14,7 +14,7 @@ async function load () {
    try {
        role = await api.getRole({ id: params.id })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

@ -25,7 +25,7 @@ async function update () {
            roleDataRequest: role,
        })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

--- a/warpgate-web/src/admin/SSH.svelte
+++ b/warpgate-web/src/admin/SSH.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import { api, SSHKey, SSHKnownHost } from 'admin/lib/api'
 import CopyButton from 'common/CopyButton.svelte'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'

 let error: Error|undefined
 let knownHosts: SSHKnownHost[]|undefined
--- a/warpgate-web/src/admin/Session.svelte
+++ b/warpgate-web/src/admin/Session.svelte
@ -6,7 +6,7 @@ import DelayedSpinner from 'common/DelayedSpinner.svelte'
 import moment from 'moment'
 import { onDestroy } from 'svelte'
 import { link } from 'svelte-spa-router'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'
 import LogViewer from './LogViewer.svelte'
 import RelativeDate from './RelativeDate.svelte'

--- a/warpgate-web/src/admin/Target.svelte
+++ b/warpgate-web/src/admin/Target.svelte
@ -8,7 +8,7 @@ import { TargetKind } from 'gateway/lib/api'
 import { serverInfo } from 'gateway/lib/store'
 import Fa from 'svelte-fa'
 import { replace } from 'svelte-spa-router'
-import { Alert, FormGroup, Input } from 'sveltestrap'
+import { Alert, FormGroup, Input } from '@sveltestrap/sveltestrap'
 import TlsConfiguration from './TlsConfiguration.svelte'

 export let params: { id: string }
@ -17,13 +17,13 @@ let error: Error|undefined
 let selectedUser: User|undefined
 let target: Target
 let allRoles: Role[] = []
-let roleIsAllowed = {}
+let roleIsAllowed: { [id: string] : any; } = {}

 async function load () {
    try {
        target = await api.getTarget({ id: params.id })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

@ -44,7 +44,7 @@ async function update () {
            targetDataRequest: target,
        })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

@ -124,7 +124,7 @@ async function toggleRole (role: Role) {
            Http: TargetKind.Http,
            MySql: TargetKind.MySql,
        }[target.options.kind ?? '']}
-        targetExternalHost={target.options['externalHost']}
+        targetExternalHost={target.options.kind == "Http" ? target.options.externalHost : undefined}
    />

    <h4 class="mt-4">Configuration</h4>
--- a/warpgate-web/src/admin/Tickets.svelte
+++ b/warpgate-web/src/admin/Tickets.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import { api, Ticket } from 'admin/lib/api'
 import { link } from 'svelte-spa-router'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'
 import RelativeDate from './RelativeDate.svelte'
 import Fa from 'svelte-fa'
 import { faCalendarXmark, faCalendarCheck, faSquareXmark, faSquareCheck } from '@fortawesome/free-solid-svg-icons'
--- a/warpgate-web/src/admin/TlsConfiguration.svelte
+++ b/warpgate-web/src/admin/TlsConfiguration.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import { Tls, TlsMode } from 'admin/lib/api'
-import { FormGroup, Input } from 'sveltestrap'
+import { FormGroup, Input } from '@sveltestrap/sveltestrap'

 export let value: Tls

--- a/warpgate-web/src/admin/User.svelte
+++ b/warpgate-web/src/admin/User.svelte
@ -5,7 +5,7 @@ import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
 import Fa from 'svelte-fa'
 import { replace } from 'svelte-spa-router'
-import { Alert, Button, FormGroup, Input } from 'sveltestrap'
+import { Alert, Button, FormGroup, Input } from '@sveltestrap/sveltestrap'
 import AuthPolicyEditor from './AuthPolicyEditor.svelte'
 import UserCredentialModal from './UserCredentialModal.svelte'

@ -16,9 +16,9 @@ let user: User
 let editingCredential: UserAuthCredential|undefined
 let policy: UserRequireCredentialsPolicy
 let allRoles: Role[] = []
-let roleIsAllowed = {}
+let roleIsAllowed: { [id: string] : any; } = {}

-const policyProtocols = [
+const policyProtocols: {id: 'ssh' | 'http' | 'mysql', name: string}[] = [
    { id: 'ssh', name: 'SSH' },
    { id: 'http', name: 'HTTP' },
    { id: 'mysql', name: 'MySQL' },
@ -40,7 +40,7 @@ async function load () {
        const allowedRoles = await api.getUserRoles(user)
        roleIsAllowed = Object.fromEntries(allowedRoles.map(r => [r.id, true]))
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

@ -59,7 +59,7 @@ async function update () {
            userDataRequest: user,
        })
    } catch (err) {
-        error = err
+        error = err as Error
    }
 }

--- a/warpgate-web/src/admin/UserCredentialModal.svelte
+++ b/warpgate-web/src/admin/UserCredentialModal.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte'
-import { Alert, Button, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader } from 'sveltestrap'
+import { Alert, Button, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader } from '@sveltestrap/sveltestrap'
 import QRCode from 'qrcode'
 import { TOTP, TOTPOptions } from '@otplib/core'
 import { createDigest } from '@otplib/plugin-crypto-js'
@ -66,7 +66,7 @@ $: {

        const uri = totp.keyuri(username, 'Warpgate', base32Encode(new Uint8Array(credential.key), 'RFC4648'))

-        QRCode.toDataURL(uri, (err: Error, imageUrl: string) => {
+        QRCode.toDataURL(uri, (err: Error | null | undefined, imageUrl: string) => {
            if (err) {
                return
            }
--- a/warpgate-web/src/admin/player/TerminalRecordingPlayer.svelte
+++ b/warpgate-web/src/admin/player/TerminalRecordingPlayer.svelte
@ -4,7 +4,7 @@
    import { Terminal } from 'xterm'
    import { SerializeAddon } from 'xterm-addon-serialize'
    import { faPlay, faPause, faExpand } from '@fortawesome/free-solid-svg-icons'
-    import { Spinner } from 'sveltestrap'
+    import { Spinner } from '@sveltestrap/sveltestrap'
    import formatDuration from 'format-duration'
    import type { Recording } from 'admin/lib/api'

@ -32,7 +32,7 @@
        'brightBlack', 'brightRed', 'brightGreen', 'brightYellow', 'brightBlue', 'brightMagenta', 'brightCyan', 'brightWhite',
    ]

-    const theme = {
+    const theme: { [key: string]: string } = {
        foreground: '#ffcb83',
        background: '#262626',
        cursor: '#fc531d',
@ -74,7 +74,11 @@
    }

    function isAsciiCastData (data: AsciiCastItem): data is AsciiCastData {
-        return data[1] === 'o' || data[1] === 'e'
+        if (data instanceof Array) {
+            return data[1] === 'o' || data[1] === 'e'
+        } else {
+            return false
+        }
    }

    interface SizeEvent { time: number, cols: number, rows: number }
@ -399,6 +403,7 @@
    }

    input[type="range"] {
+        appearance: none;
        -webkit-appearance: none;
        margin: 18px 10px 0;
        height: 2px;
--- a/warpgate-web/src/common/AsyncButton.svelte
+++ b/warpgate-web/src/common/AsyncButton.svelte
@ -1,8 +1,7 @@
 <script lang="ts">
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import Fa from 'svelte-fa'
-import { Button, Spinner } from 'sveltestrap'
-import type { ButtonColor } from 'sveltestrap/src/Button'
+import { Button, Spinner, Color } from '@sveltestrap/sveltestrap'

 enum State {
    Normal = 'n',
@ -12,7 +11,7 @@ enum State {
 }

 export let click: CallableFunction
-export let color: ButtonColor = 'secondary'
+export let color: Color | 'link' = 'secondary'
 export let disabled = false
 export let outline = false
 export let type = 'submit'
--- a/warpgate-web/src/common/ConnectionInstructions.svelte
+++ b/warpgate-web/src/common/ConnectionInstructions.svelte
@ -1,5 +1,5 @@
-<script type="ts">
-    import { Alert, FormGroup } from 'sveltestrap'
+<script lang="ts">
+    import { Alert, FormGroup } from '@sveltestrap/sveltestrap'
    import { TargetKind } from 'gateway/lib/api'
    import { serverInfo } from 'gateway/lib/store'
    import { makeExampleSSHCommand, makeSSHUsername, makeExampleMySQLCommand, makeExampleMySQLURI, makeMySQLUsername, makeTargetURL } from 'common/protocols'
--- a/warpgate-web/src/common/CopyButton.svelte
+++ b/warpgate-web/src/common/CopyButton.svelte
@ -1,19 +1,19 @@
 <script lang="ts">
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
 import Fa from 'svelte-fa'
-import { Button } from 'sveltestrap'
+import { Button, Color } from '@sveltestrap/sveltestrap'
 import copyTextToClipboard from 'copy-text-to-clipboard'
-import type { ButtonColor } from 'sveltestrap/src/Button'

 export let text: string
 export let disabled = false
 export let outline = false
 export let link = false
-export let color: ButtonColor = 'link'
+export let color: Color | 'link' = 'link'
 let successVisible = false
 let button: HTMLElement

 async function _click () {
+    if (disabled) return
    successVisible = true
    copyTextToClipboard(text)
    setTimeout(() => {
@ -28,8 +28,8 @@ async function _click () {
    <a
        href="#"
        class={$$props.class}
+        class:disabled={disabled}
        on:click|preventDefault={_click}
-        disabled={disabled}
        bind:this={button}
    >
        <slot>
--- a/warpgate-web/src/common/DelayedSpinner.svelte
+++ b/warpgate-web/src/common/DelayedSpinner.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-import { Spinner } from 'sveltestrap'
+import { Spinner } from '@sveltestrap/sveltestrap'

 let visible = false

--- a/warpgate-web/src/common/ItemList.svelte
+++ b/warpgate-web/src/common/ItemList.svelte
@ -17,7 +17,7 @@
    import { Subject, switchMap, map, Observable, distinctUntilChanged, share, combineLatest, tap, debounceTime } from 'rxjs'
    import Pagination from './Pagination.svelte'
    import { observe } from 'svelte-observable'
-    import { Input } from 'sveltestrap'
+    import { Input } from '@sveltestrap/sveltestrap'
    import DelayedSpinner from './DelayedSpinner.svelte'

    // eslint-disable-next-line @typescript-eslint/no-type-alias
--- a/warpgate-web/src/common/Logo.svelte
+++ b/warpgate-web/src/common/Logo.svelte
@ -1,4 +1,4 @@
-<script type="ts">
+<script lang="ts">
 import { onDestroy, onMount } from 'svelte'
 import { get } from 'svelte/store'
 import { currentThemeFile } from 'theme'
--- a/warpgate-web/src/common/Pagination.svelte
+++ b/warpgate-web/src/common/Pagination.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import Fa from 'svelte-fa'
-import { Pagination, PaginationItem, PaginationLink } from 'sveltestrap'
+import { Pagination, PaginationItem, PaginationLink } from '@sveltestrap/sveltestrap'

 export let page = 0
 export let pageSize = 1
--- a/warpgate-web/src/common/ThemeSwitcher.svelte
+++ b/warpgate-web/src/common/ThemeSwitcher.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import Fa from 'svelte-fa'
 import { faCloudSun, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
-import { Button, Tooltip } from 'sveltestrap'
+import { Button, Tooltip } from '@sveltestrap/sveltestrap'
 import { get } from 'svelte/store'

 import { currentTheme, setCurrentTheme } from 'theme'
@ -17,7 +17,7 @@ function toggle () {
 }
 </script>

-<Button color="link" on:click={toggle} id="button" alt="Switch theme">
+<Button color="link" on:click={toggle} id="button" title="Switch theme">
    {#if $currentTheme === 'dark'}
        <Fa fw icon={faMoon} />
    {:else if $currentTheme === 'light'}
--- a/warpgate-web/src/gateway/App.svelte
+++ b/warpgate-web/src/gateway/App.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import { faSignOut } from '@fortawesome/free-solid-svg-icons'
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'
 import Fa from 'svelte-fa'
 import Router, { push, RouteDetail } from 'svelte-spa-router'
 import { wrap } from 'svelte-spa-router/wrap'
--- a/warpgate-web/src/gateway/Login.svelte
+++ b/warpgate-web/src/gateway/Login.svelte
@ -1,12 +1,12 @@
 <script lang="ts">
 import { get } from 'svelte/store'
 import { querystring, replace } from 'svelte-spa-router'
-import { Alert, FormGroup } from 'sveltestrap'
+import { Alert, FormGroup } from '@sveltestrap/sveltestrap'
 import Fa from 'svelte-fa'
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { faGoogle, faMicrosoft, faApple } from '@fortawesome/free-brands-svg-icons'

-import { api, ApiAuthState, LoginFailureResponseFromJSON, SsoProviderDescription, SsoProviderKind } from 'gateway/lib/api'
+import { api, ApiAuthState, LoginFailureResponseFromJSON, SsoProviderDescription, SsoProviderKind, ResponseError } from 'gateway/lib/api'
 import { reloadServerInfo } from 'gateway/lib/store'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
@ -29,9 +29,8 @@ async function init () {
    try {
        authState = (await api.getDefaultAuthState()).state
    } catch (err) {
-        if (err.status) {
-            const response = err as Response
-            if (response.status === 404) {
+        if (err instanceof ResponseError) {
+            if (err.response.status === 404) {
                authState = ApiAuthState.NotStarted
            }
        }
@ -96,18 +95,17 @@ async function _login () {
        await reloadServerInfo()
        success()
    } catch (err) {
-        if (err.status) {
-            const response = err as Response
-            if (response.status === 401) {
-                const failure = LoginFailureResponseFromJSON(await response.json())
+        if (err instanceof ResponseError) {
+            if (err.response.status === 401) {
+                const failure = LoginFailureResponseFromJSON(await err.response.json())
                authState = failure.state

                continueWithState()
            } else {
-                error = new Error(await response.text())
+                error = new Error(await err.response.text())
            }
        } else {
-            error = err
+            error = err as Error
        }
    }
 }
--- a/warpgate-web/src/gateway/OutOfBandAuth.svelte
+++ b/warpgate-web/src/gateway/OutOfBandAuth.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-import { Alert } from 'sveltestrap'
+import { Alert } from '@sveltestrap/sveltestrap'

 import { api, ApiAuthState, AuthStateResponseInternal } from 'gateway/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
--- a/warpgate-web/src/gateway/TargetList.svelte
+++ b/warpgate-web/src/gateway/TargetList.svelte
@ -6,7 +6,7 @@ import ItemList, { LoadOptions, PaginatedResponse } from 'common/ItemList.svelte
 import { api, TargetSnapshot, TargetKind } from 'gateway/lib/api'
 import { createEventDispatcher } from 'svelte'
 import Fa from 'svelte-fa'
-import { Modal, ModalBody, ModalHeader } from 'sveltestrap'
+import { Modal, ModalBody, ModalHeader } from '@sveltestrap/sveltestrap'
 import { serverInfo } from './lib/store'
 import { firstBy } from 'thenby'

--- a/warpgate-web/tsconfig.json
+++ b/warpgate-web/tsconfig.json
@ -22,7 +22,8 @@
            "*": [
                "src/*"
            ]
-        }
+        },
+        "verbatimModuleSyntax": false,
    },
    "include": [
        "src/**/*.d.ts",
--- a/warpgate-web/yarn.lock
+++ b/warpgate-web/yarn.lock