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.
warp-tech · Jul 16, 2024 · b65a189 · b65a189
1 parent f07b924
commit b65a189
Show file tree

Hide file tree

Showing 34 changed files with 1,712 additions and 977 deletions.
diff --git 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

diff --git 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"
   }
 }
diff --git a/warpgate-web/package.json b/warpgate-web/package.json
@@ -8,60 +8,60 @@
     "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": {
     "@fontsource/work-sans": "^4.5.12",
     "@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"
   }
-}
+}
diff --git 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>

diff --git 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
     }
 }
 

diff --git 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
     }
 }
 

diff --git 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}

diff --git 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
     }
 }
 

diff --git 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)

diff --git 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'

diff --git 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'
 

diff --git 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
     }
 }
 

diff --git 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

diff --git 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'
 

diff --git 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>

diff --git 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'