From a68ab6128f25fe817cfc4e93c4f0c287457142bb Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dschmidt@owncloud.com>
Date: Mon, 23 Jan 2023 09:39:26 +0100
Subject: [PATCH] [full-ci] TypeScript almost everything (#8289)

* Rename .js files to .ts

This renames most of the actively used .js files to .ts.
Notable exceptions: acceptance tests, docs, a few legacy (config) files for design system or web-app-skeleton

* Fix imports

* Fix global variables usage

* fixup! Fix imports

* Fix exports

* Fix non-isolated modules

* Fix types in clientRegistration

* Fix breadcrumbs unit test

* Fix jest config

* Fix remaining type issues

* Fix textUtils.naturalSortCompare
---
 .../src/components/OcAvatars/OcAvatars.vue    |  2 +-
 .../src/composables/{index.js => index.ts}    |  0
 .../{index.spec.js => index.spec.ts}          |  2 +-
 .../useIsVisible/{index.js => index.ts}       |  0
 packages/design-system/src/index.ts           |  4 +-
 .../src/mixins/{sort.js => sort.ts}           |  0
 .../src/utils/{logger.js => logger.ts}        |  0
 .../src/utils/{shareType.js => shareType.ts}  |  0
 .../utils/{sizeClasses.js => sizeClasses.ts}  |  0
 .../{uniqueId.spec.js => uniqueId.spec.ts}    |  0
 .../src/utils/{uniqueId.js => uniqueId.ts}    |  2 +-
 .../{webFontLoader.js => webFontLoader.ts}    |  0
 .../src/{index.js => index.ts}                |  4 +-
 .../src/{index.js => index.ts}                |  2 +-
 .../src/{index.js => index.ts}                |  2 +-
 packages/web-app-files/src/fileSideBars.ts    |  6 +--
 ...textualHelpers.js => contextualHelpers.ts} |  0
 .../src/helpers/{path.js => path.ts}          |  0
 .../{permissions.js => permissions.ts}        |  0
 .../helpers/{textUtils.js => textUtils.ts}    |  2 +-
 .../web-app-files/src/{index.js => index.ts}  |  0
 ...eBreadcrumb.js => accessibleBreadcrumb.ts} |  0
 .../{clearSelection.js => clearSelection.ts}  |  0
 .../src/mixins/actions/{copy.js => copy.ts}   |  0
 .../mixins/actions/{delete.js => delete.ts}   |  0
 ...{downloadArchive.js => downloadArchive.ts} |  4 +-
 .../{downloadFile.js => downloadFile.ts}      |  0
 .../{emptyTrashBin.js => emptyTrashBin.ts}    |  0
 .../actions/{favorite.js => favorite.ts}      |  0
 .../src/mixins/actions/{move.js => move.ts}   |  0
 .../src/mixins/actions/{paste.js => paste.ts} |  0
 .../{showActions.js => showActions.ts}        |  0
 .../{showEditTags.js => showEditTags.ts}      |  0
 .../{uploadImage.js => uploadImage.ts}        |  3 +-
 packages/web-app-files/src/router/router.ts   | 25 +++++-----
 .../{fileActions.js => fileActions.ts}        |  8 ++-
 .../{mimeTypes.js => mimeTypes.ts}            |  0
 .../SideBar/Actions/FileActions.spec.ts       |  2 +-
 ...readcrumbs.spec.js => breadcrumbs.spec.ts} | 19 ++++---
 .../helpers/{path.spec.js => path.spec.ts}    |  0
 ...ermissions.spec.js => permissions.spec.ts} |  2 +-
 ...icator.spec.js => statusIndicator.spec.ts} |  2 +
 .../tests/unit/helpers/textUtils.spec.js      | 34 -------------
 .../tests/unit/helpers/textUtils.spec.ts      | 49 +++++++++++++++++++
 .../mixins/actions/clearSelection.spec.ts     |  2 +-
 .../tests/unit/mixins/actions/delete.spec.ts  |  2 +-
 .../unit/mixins/actions/emptyTrashBin.spec.ts |  2 +-
 .../unit/mixins/spaces/uploadImage.spec.ts    |  2 +-
 .../src/{index.js => index.ts}                |  2 +-
 .../src/{index.js => index.ts}                |  5 +-
 .../src/{index.js => index.ts}                | 11 +++--
 .../components/sideBar/{index.js => index.ts} |  0
 .../web-pkg/src/components/sideBar/types.ts   |  8 +--
 .../src/defaults/{json.js => json.ts}         |  0
 .../src/defaults/{vue.js => vue.ts}           |  2 -
 .../src/helpers/{config.js => config.ts}      |  0
 packages/web-runtime/src/index.ts             | 10 +---
 .../mixins/{focusMixin.js => focusMixin.ts}   |  0
 .../{lifecycleMixin.js => lifecycleMixin.ts}  |  0
 ...{navigationMixin.js => navigationMixin.ts} |  2 +-
 .../src/plugins/{web.js => web.ts}            |  2 +-
 ...tRegistration.js => clientRegistration.ts} |  2 +-
 .../web-runtime/src/store/{app.js => app.ts}  |  0
 .../src/store/{apps.js => apps.ts}            |  0
 .../src/store/{config.js => config.ts}        |  0
 .../src/store/{modal.js => modal.ts}          |  2 +-
 .../store/{navigation.js => navigation.ts}    |  0
 .../src/store/{settings.js => settings.ts}    |  0
 .../{config.spec.js => config.spec.ts}        | 11 +++--
 .../helpers/{theme.spec.js => theme.spec.ts}  | 18 +++----
 tests/unit/config/jest.config.ts              |  4 +-
 .../config/{jest.init.js => jest.init.ts}     |  6 +--
 .../{jest.overrides.js => jest.overrides.ts}  |  2 +
 web.d.ts                                      |  5 +-
 74 files changed, 148 insertions(+), 126 deletions(-)
 rename packages/design-system/src/composables/{index.js => index.ts} (100%)
 rename packages/design-system/src/composables/useIsVisible/{index.spec.js => index.spec.ts} (97%)
 rename packages/design-system/src/composables/useIsVisible/{index.js => index.ts} (100%)
 rename packages/design-system/src/mixins/{sort.js => sort.ts} (100%)
 rename packages/design-system/src/utils/{logger.js => logger.ts} (100%)
 rename packages/design-system/src/utils/{shareType.js => shareType.ts} (100%)
 rename packages/design-system/src/utils/{sizeClasses.js => sizeClasses.ts} (100%)
 rename packages/design-system/src/utils/{uniqueId.spec.js => uniqueId.spec.ts} (100%)
 rename packages/design-system/src/utils/{uniqueId.js => uniqueId.ts} (62%)
 rename packages/design-system/src/utils/{webFontLoader.js => webFontLoader.ts} (100%)
 rename packages/web-app-admin-settings/src/{index.js => index.ts} (93%)
 rename packages/web-app-draw-io/src/{index.js => index.ts} (92%)
 rename packages/web-app-external/src/{index.js => index.ts} (89%)
 rename packages/web-app-files/src/helpers/{contextualHelpers.js => contextualHelpers.ts} (100%)
 rename packages/web-app-files/src/helpers/{path.js => path.ts} (100%)
 rename packages/web-app-files/src/helpers/{permissions.js => permissions.ts} (100%)
 rename packages/web-app-files/src/helpers/{textUtils.js => textUtils.ts} (98%)
 rename packages/web-app-files/src/{index.js => index.ts} (100%)
 rename packages/web-app-files/src/mixins/{accessibleBreadcrumb.js => accessibleBreadcrumb.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{clearSelection.js => clearSelection.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{copy.js => copy.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{delete.js => delete.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{downloadArchive.js => downloadArchive.ts} (95%)
 rename packages/web-app-files/src/mixins/actions/{downloadFile.js => downloadFile.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{emptyTrashBin.js => emptyTrashBin.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{favorite.js => favorite.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{move.js => move.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{paste.js => paste.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{showActions.js => showActions.ts} (100%)
 rename packages/web-app-files/src/mixins/actions/{showEditTags.js => showEditTags.ts} (100%)
 rename packages/web-app-files/src/mixins/spaces/actions/{uploadImage.js => uploadImage.ts} (97%)
 rename packages/web-app-files/tests/__fixtures__/{fileActions.js => fileActions.ts} (96%)
 rename packages/web-app-files/tests/__fixtures__/{mimeTypes.js => mimeTypes.ts} (100%)
 rename packages/web-app-files/tests/unit/helpers/{breadcrumbs.spec.js => breadcrumbs.spec.ts} (58%)
 rename packages/web-app-files/tests/unit/helpers/{path.spec.js => path.spec.ts} (100%)
 rename packages/web-app-files/tests/unit/helpers/{permissions.spec.js => permissions.spec.ts} (99%)
 rename packages/web-app-files/tests/unit/helpers/{statusIndicator.spec.js => statusIndicator.spec.ts} (97%)
 delete mode 100644 packages/web-app-files/tests/unit/helpers/textUtils.spec.js
 create mode 100644 packages/web-app-files/tests/unit/helpers/textUtils.spec.ts
 rename packages/web-app-pdf-viewer/src/{index.js => index.ts} (92%)
 rename packages/web-app-preview/src/{index.js => index.ts} (81%)
 rename packages/web-app-text-editor/src/{index.js => index.ts} (88%)
 rename packages/web-pkg/src/components/sideBar/{index.js => index.ts} (100%)
 rename packages/web-runtime/src/defaults/{json.js => json.ts} (100%)
 rename packages/web-runtime/src/defaults/{vue.js => vue.ts} (91%)
 rename packages/web-runtime/src/helpers/{config.js => config.ts} (100%)
 rename packages/web-runtime/src/mixins/{focusMixin.js => focusMixin.ts} (100%)
 rename packages/web-runtime/src/mixins/{lifecycleMixin.js => lifecycleMixin.ts} (100%)
 rename packages/web-runtime/src/mixins/{navigationMixin.js => navigationMixin.ts} (98%)
 rename packages/web-runtime/src/plugins/{web.js => web.ts} (97%)
 rename packages/web-runtime/src/services/{clientRegistration.js => clientRegistration.ts} (94%)
 rename packages/web-runtime/src/store/{app.js => app.ts} (100%)
 rename packages/web-runtime/src/store/{apps.js => apps.ts} (100%)
 rename packages/web-runtime/src/store/{config.js => config.ts} (100%)
 rename packages/web-runtime/src/store/{modal.js => modal.ts} (98%)
 rename packages/web-runtime/src/store/{navigation.js => navigation.ts} (100%)
 rename packages/web-runtime/src/store/{settings.js => settings.ts} (100%)
 rename packages/web-runtime/tests/unit/helpers/{config.spec.js => config.spec.ts} (87%)
 rename packages/web-runtime/tests/unit/helpers/{theme.spec.js => theme.spec.ts} (82%)
 rename tests/unit/config/{jest.init.js => jest.init.ts} (90%)
 rename tests/unit/config/{jest.overrides.js => jest.overrides.ts} (98%)

diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index 8dffa62a8db..2d76221817b 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { shareType } from '../../utils/shareType.js'
+import { shareType } from '../../utils/shareType'
 import OcAvatar from '../OcAvatar/OcAvatar.vue'
 import OcAvatarCount from '../OcAvatarCount/OcAvatarCount.vue'
 import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue'
diff --git a/packages/design-system/src/composables/index.js b/packages/design-system/src/composables/index.ts
similarity index 100%
rename from packages/design-system/src/composables/index.js
rename to packages/design-system/src/composables/index.ts
diff --git a/packages/design-system/src/composables/useIsVisible/index.spec.js b/packages/design-system/src/composables/useIsVisible/index.spec.ts
similarity index 97%
rename from packages/design-system/src/composables/useIsVisible/index.spec.js
rename to packages/design-system/src/composables/useIsVisible/index.spec.ts
index 8d68944f48d..f318fe4771c 100644
--- a/packages/design-system/src/composables/useIsVisible/index.spec.js
+++ b/packages/design-system/src/composables/useIsVisible/index.spec.ts
@@ -17,7 +17,7 @@ const mockIntersectionObserver = () => {
     return {
       mock,
       callback: (args, fastForward = 0) => {
-        window.IntersectionObserver.mock.calls[0][0](args)
+        ;(window.IntersectionObserver as any).mock.calls[0][0](args)
         jest.advanceTimersByTime(fastForward)
       }
     }
diff --git a/packages/design-system/src/composables/useIsVisible/index.js b/packages/design-system/src/composables/useIsVisible/index.ts
similarity index 100%
rename from packages/design-system/src/composables/useIsVisible/index.js
rename to packages/design-system/src/composables/useIsVisible/index.ts
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 3ac1f20b67f..2065f43d71f 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -1,5 +1,5 @@
-import { getSizeClass } from './utils/sizeClasses.js'
-import './utils/webFontLoader.js'
+import { getSizeClass } from './utils/sizeClasses'
+import './utils/webFontLoader'
 
 import * as components from './components'
 import * as directives from './directives'
diff --git a/packages/design-system/src/mixins/sort.js b/packages/design-system/src/mixins/sort.ts
similarity index 100%
rename from packages/design-system/src/mixins/sort.js
rename to packages/design-system/src/mixins/sort.ts
diff --git a/packages/design-system/src/utils/logger.js b/packages/design-system/src/utils/logger.ts
similarity index 100%
rename from packages/design-system/src/utils/logger.js
rename to packages/design-system/src/utils/logger.ts
diff --git a/packages/design-system/src/utils/shareType.js b/packages/design-system/src/utils/shareType.ts
similarity index 100%
rename from packages/design-system/src/utils/shareType.js
rename to packages/design-system/src/utils/shareType.ts
diff --git a/packages/design-system/src/utils/sizeClasses.js b/packages/design-system/src/utils/sizeClasses.ts
similarity index 100%
rename from packages/design-system/src/utils/sizeClasses.js
rename to packages/design-system/src/utils/sizeClasses.ts
diff --git a/packages/design-system/src/utils/uniqueId.spec.js b/packages/design-system/src/utils/uniqueId.spec.ts
similarity index 100%
rename from packages/design-system/src/utils/uniqueId.spec.js
rename to packages/design-system/src/utils/uniqueId.spec.ts
diff --git a/packages/design-system/src/utils/uniqueId.js b/packages/design-system/src/utils/uniqueId.ts
similarity index 62%
rename from packages/design-system/src/utils/uniqueId.js
rename to packages/design-system/src/utils/uniqueId.ts
index 0cf06901699..58ea6f7df0e 100644
--- a/packages/design-system/src/utils/uniqueId.js
+++ b/packages/design-system/src/utils/uniqueId.ts
@@ -1,6 +1,6 @@
 let num = 0
 
-export default function uniqueId(prefix) {
+export default function uniqueId(prefix?) {
   prefix = prefix || ''
   num += 1
   return prefix + num
diff --git a/packages/design-system/src/utils/webFontLoader.js b/packages/design-system/src/utils/webFontLoader.ts
similarity index 100%
rename from packages/design-system/src/utils/webFontLoader.js
rename to packages/design-system/src/utils/webFontLoader.ts
diff --git a/packages/web-app-admin-settings/src/index.js b/packages/web-app-admin-settings/src/index.ts
similarity index 93%
rename from packages/web-app-admin-settings/src/index.js
rename to packages/web-app-admin-settings/src/index.ts
index fc74bdf51b6..7cf8fbe2d20 100644
--- a/packages/web-app-admin-settings/src/index.js
+++ b/packages/web-app-admin-settings/src/index.ts
@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import Users from './views/Users.vue'
 import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
@@ -15,7 +15,7 @@ const appInfo = {
 }
 
 // FIXME: a better way to access this is needed
-const permissionManager = () => window.__$permissionManager
+const permissionManager = () => (window as any).__$permissionManager
 
 const routes = [
   {
diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.ts
similarity index 92%
rename from packages/web-app-draw-io/src/index.js
rename to packages/web-app-draw-io/src/index.ts
index 25b1a682f40..95c47f4274e 100644
--- a/packages/web-app-draw-io/src/index.js
+++ b/packages/web-app-draw-io/src/index.ts
@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 
 const routes = [
diff --git a/packages/web-app-external/src/index.js b/packages/web-app-external/src/index.ts
similarity index 89%
rename from packages/web-app-external/src/index.js
rename to packages/web-app-external/src/index.ts
index f8e7c287e83..8d1a1fcaa27 100644
--- a/packages/web-app-external/src/index.js
+++ b/packages/web-app-external/src/index.ts
@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 import store from './store'
 
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index 83e6e701040..a3524400f3e 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -75,7 +75,7 @@ const panelGenerators: (({
     component: FileDetails,
     default: !isLocationTrashActive(router, 'files-trash-generic'),
     get enabled() {
-      return (
+      return !!(
         !isLocationTrashActive(router, 'files-trash-generic') &&
         !multipleSelection &&
         !rootFolder &&
@@ -119,7 +119,7 @@ const panelGenerators: (({
     component: FileActions,
     default: isLocationTrashActive(router, 'files-trash-generic'),
     get enabled() {
-      return !multipleSelection && !rootFolder && highlightedFile
+      return !!(!multipleSelection && !rootFolder && highlightedFile)
     }
   }),
   ({ multipleSelection, highlightedFile, user }) => ({
@@ -134,7 +134,7 @@ const panelGenerators: (({
       if (highlightedFile?.type !== 'space') {
         return false
       }
-      return [
+      return !![
         ...highlightedFile.spaceRoles[spaceRoleManager.name],
         ...highlightedFile.spaceRoles[spaceRoleEditor.name]
       ].find((role) => role.id === user.uuid)
diff --git a/packages/web-app-files/src/helpers/contextualHelpers.js b/packages/web-app-files/src/helpers/contextualHelpers.ts
similarity index 100%
rename from packages/web-app-files/src/helpers/contextualHelpers.js
rename to packages/web-app-files/src/helpers/contextualHelpers.ts
diff --git a/packages/web-app-files/src/helpers/path.js b/packages/web-app-files/src/helpers/path.ts
similarity index 100%
rename from packages/web-app-files/src/helpers/path.js
rename to packages/web-app-files/src/helpers/path.ts
diff --git a/packages/web-app-files/src/helpers/permissions.js b/packages/web-app-files/src/helpers/permissions.ts
similarity index 100%
rename from packages/web-app-files/src/helpers/permissions.js
rename to packages/web-app-files/src/helpers/permissions.ts
diff --git a/packages/web-app-files/src/helpers/textUtils.js b/packages/web-app-files/src/helpers/textUtils.ts
similarity index 98%
rename from packages/web-app-files/src/helpers/textUtils.js
rename to packages/web-app-files/src/helpers/textUtils.ts
index d24e55b2701..17a64535b42 100644
--- a/packages/web-app-files/src/helpers/textUtils.js
+++ b/packages/web-app-files/src/helpers/textUtils.ts
@@ -3,7 +3,7 @@ function _chunkify(t) {
   const tz = []
   let x = 0
   let y = -1
-  let n = 0
+  let n: number | boolean = 0
   let c
 
   while (x < t.length) {
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.ts
similarity index 100%
rename from packages/web-app-files/src/index.js
rename to packages/web-app-files/src/index.ts
diff --git a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js b/packages/web-app-files/src/mixins/accessibleBreadcrumb.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/accessibleBreadcrumb.js
rename to packages/web-app-files/src/mixins/accessibleBreadcrumb.ts
diff --git a/packages/web-app-files/src/mixins/actions/clearSelection.js b/packages/web-app-files/src/mixins/actions/clearSelection.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/clearSelection.js
rename to packages/web-app-files/src/mixins/actions/clearSelection.ts
diff --git a/packages/web-app-files/src/mixins/actions/copy.js b/packages/web-app-files/src/mixins/actions/copy.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/copy.js
rename to packages/web-app-files/src/mixins/actions/copy.ts
diff --git a/packages/web-app-files/src/mixins/actions/delete.js b/packages/web-app-files/src/mixins/actions/delete.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/delete.js
rename to packages/web-app-files/src/mixins/actions/delete.ts
diff --git a/packages/web-app-files/src/mixins/actions/downloadArchive.js b/packages/web-app-files/src/mixins/actions/downloadArchive.ts
similarity index 95%
rename from packages/web-app-files/src/mixins/actions/downloadArchive.js
rename to packages/web-app-files/src/mixins/actions/downloadArchive.ts
index 04a4ee5d93b..3acbbc304ec 100644
--- a/packages/web-app-files/src/mixins/actions/downloadArchive.js
+++ b/packages/web-app-files/src/mixins/actions/downloadArchive.ts
@@ -8,7 +8,7 @@ import isFilesAppActive from './helpers/isFilesAppActive'
 import path from 'path'
 import first from 'lodash-es/first'
 import { archiverService } from '../../services'
-import { isPublicSpaceResource } from 'web-client/src/helpers'
+import { isPublicSpaceResource, Resource } from 'web-client/src/helpers'
 
 export default {
   mixins: [isFilesAppActive],
@@ -69,7 +69,7 @@ export default {
             fileIds: resources.map((resource) => resource.fileId)
           }
         : {
-            dir: path.dirname(first(resources).path) || '/',
+            dir: path.dirname(first<Resource>(resources).path) || '/',
             files: resources.map((resource) => resource.name)
           }
       await archiverService
diff --git a/packages/web-app-files/src/mixins/actions/downloadFile.js b/packages/web-app-files/src/mixins/actions/downloadFile.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/downloadFile.js
rename to packages/web-app-files/src/mixins/actions/downloadFile.ts
diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js b/packages/web-app-files/src/mixins/actions/emptyTrashBin.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/emptyTrashBin.js
rename to packages/web-app-files/src/mixins/actions/emptyTrashBin.ts
diff --git a/packages/web-app-files/src/mixins/actions/favorite.js b/packages/web-app-files/src/mixins/actions/favorite.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/favorite.js
rename to packages/web-app-files/src/mixins/actions/favorite.ts
diff --git a/packages/web-app-files/src/mixins/actions/move.js b/packages/web-app-files/src/mixins/actions/move.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/move.js
rename to packages/web-app-files/src/mixins/actions/move.ts
diff --git a/packages/web-app-files/src/mixins/actions/paste.js b/packages/web-app-files/src/mixins/actions/paste.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/paste.js
rename to packages/web-app-files/src/mixins/actions/paste.ts
diff --git a/packages/web-app-files/src/mixins/actions/showActions.js b/packages/web-app-files/src/mixins/actions/showActions.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/showActions.js
rename to packages/web-app-files/src/mixins/actions/showActions.ts
diff --git a/packages/web-app-files/src/mixins/actions/showEditTags.js b/packages/web-app-files/src/mixins/actions/showEditTags.ts
similarity index 100%
rename from packages/web-app-files/src/mixins/actions/showEditTags.js
rename to packages/web-app-files/src/mixins/actions/showEditTags.ts
diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.ts
similarity index 97%
rename from packages/web-app-files/src/mixins/spaces/actions/uploadImage.js
rename to packages/web-app-files/src/mixins/spaces/actions/uploadImage.ts
index 5cd20a6a1a9..2fbf680bc21 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.ts
@@ -1,4 +1,5 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
+import { Drive } from 'web-client/src/generated'
 import { clientService } from 'web-pkg/src/services'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { thumbnailService } from '../../../services'
@@ -90,7 +91,7 @@ export default {
                     id: image['OC-FileId']
                   }
                 ]
-              },
+              } as Drive,
               {}
             )
             .then(({ data }) => {
diff --git a/packages/web-app-files/src/router/router.ts b/packages/web-app-files/src/router/router.ts
index e5a03877463..aa76c51b2d2 100644
--- a/packages/web-app-files/src/router/router.ts
+++ b/packages/web-app-files/src/router/router.ts
@@ -1,4 +1,4 @@
-import Vue, { ComponentOptions } from 'vue'
+import { defineComponent } from 'vue'
 
 /**
  * we need to inject the vue files into the route builders,
@@ -6,20 +6,21 @@ import Vue, { ComponentOptions } from 'vue'
  * like mixins, rollup seems to have a problem to import files which contain vue file imports
  * into js files which then again get imported by other vue files...
  */
+
+type Component = ReturnType<typeof defineComponent>
+
 export interface RouteComponents {
-  App: ComponentOptions<typeof Vue>
-  Favorites: ComponentOptions<typeof Vue>
-  FilesDrop: ComponentOptions<typeof Vue>
-  PrivateLink: ComponentOptions<typeof Vue>
-  SearchResults: ComponentOptions<typeof Vue>
-  PublicLink: ComponentOptions<typeof Vue>
+  App: Component
+  Favorites: Component
+  FilesDrop: Component
+  SearchResults: Component
   Shares: {
-    SharedWithMe: ComponentOptions<typeof Vue>
-    SharedWithOthers: ComponentOptions<typeof Vue>
-    SharedViaLink: ComponentOptions<typeof Vue>
+    SharedWithMe: Component
+    SharedWithOthers: Component
+    SharedViaLink: Component
   }
   Spaces: {
-    DriveResolver: ComponentOptions<typeof Vue>
-    Projects: ComponentOptions<typeof Vue>
+    DriveResolver: Component
+    Projects: Component
   }
 }
diff --git a/packages/web-app-files/tests/__fixtures__/fileActions.js b/packages/web-app-files/tests/__fixtures__/fileActions.ts
similarity index 96%
rename from packages/web-app-files/tests/__fixtures__/fileActions.js
rename to packages/web-app-files/tests/__fixtures__/fileActions.ts
index 20074399d3c..9300c67df12 100644
--- a/packages/web-app-files/tests/__fixtures__/fileActions.js
+++ b/packages/web-app-files/tests/__fixtures__/fileActions.ts
@@ -84,7 +84,7 @@ export const apps = {
   meta
 }
 
-const fileActions = {
+export const fileActions = {
   download: {
     name: 'download-file',
     icon: 'file-download',
@@ -165,9 +165,7 @@ const fileActions = {
   }
 }
 
-exports.fileActions = fileActions
-
-exports.getActions = function (actions = []) {
+export const getActions = function (actions = []) {
   const defaultActions = ['download', 'text-editor', 'draw-io', 'preview', 'navigate']
 
   const res = []
@@ -190,4 +188,4 @@ exports.getActions = function (actions = []) {
   return res
 }
 
-exports.filesPersonalRoute = { name: 'files-personal' }
+export const filesPersonalRoute = { name: 'files-personal' }
diff --git a/packages/web-app-files/tests/__fixtures__/mimeTypes.js b/packages/web-app-files/tests/__fixtures__/mimeTypes.ts
similarity index 100%
rename from packages/web-app-files/tests/__fixtures__/mimeTypes.js
rename to packages/web-app-files/tests/__fixtures__/mimeTypes.ts
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts
index 8b076a58486..5ca36b11087 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts
@@ -1,5 +1,5 @@
 import FileActions from 'web-app-files/src/components/SideBar/Actions/FileActions.vue'
-import { getActions, fileActions } from 'web-app-files/tests/__fixtures__/fileActions.js'
+import { getActions, fileActions } from 'web-app-files/tests/__fixtures__/fileActions'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { mock } from 'jest-mock-extended'
 import {
diff --git a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.js b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
similarity index 58%
rename from packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.js
rename to packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
index 9d0bde2677f..8da6cde8090 100644
--- a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.js
+++ b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
@@ -1,8 +1,12 @@
+import { RouteLocation } from 'web-test-helpers/src'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../../src/helpers/breadcrumbs'
 
 describe('builds an array of breadcrumbitems', () => {
   it('from a path', () => {
-    const breadCrumbs = breadcrumbsFromPath({ path: '/files/spaces/personal/home/test' }, '/test')
+    const breadCrumbs = breadcrumbsFromPath(
+      { path: '/files/spaces/personal/home/test' } as RouteLocation,
+      '/test'
+    )
     expect(breadCrumbs).toEqual([
       {
         allowContextActions: true,
@@ -14,15 +18,18 @@ describe('builds an array of breadcrumbitems', () => {
 
   it('from an array of breadcrumbitems', () => {
     const initialBreadCrumbs = [{ text: 'Foo' }, { text: 'Bar' }]
-    const breadCrumbsFromPath = breadcrumbsFromPath({ path: '/app/foo/bar?all=500' }, '/bar')
-    const result = concatBreadcrumbs(...initialBreadCrumbs, breadCrumbsFromPath)
+    const breadCrumbsFromPath = breadcrumbsFromPath(
+      { path: '/app/foo/bar?all=500' } as RouteLocation,
+      '/bar'
+    )
+    const result = concatBreadcrumbs(...initialBreadCrumbs, ...breadCrumbsFromPath)
     expect(result[0]).toMatchObject({ text: 'Foo' })
     expect(result[1]).toMatchObject({ text: 'Bar' })
     expect(JSON.stringify(result[2])).toEqual(
       JSON.stringify({
-        allowContextActions: undefined,
-        onClick: () => jest.fn(() => {}),
-        text: undefined
+        allowContextActions: true,
+        text: 'bar',
+        onClick: () => undefined
       })
     )
   })
diff --git a/packages/web-app-files/tests/unit/helpers/path.spec.js b/packages/web-app-files/tests/unit/helpers/path.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/helpers/path.spec.js
rename to packages/web-app-files/tests/unit/helpers/path.spec.ts
diff --git a/packages/web-app-files/tests/unit/helpers/permissions.spec.js b/packages/web-app-files/tests/unit/helpers/permissions.spec.ts
similarity index 99%
rename from packages/web-app-files/tests/unit/helpers/permissions.spec.js
rename to packages/web-app-files/tests/unit/helpers/permissions.spec.ts
index fca48005e4c..1228868e6f2 100644
--- a/packages/web-app-files/tests/unit/helpers/permissions.spec.js
+++ b/packages/web-app-files/tests/unit/helpers/permissions.spec.ts
@@ -1,4 +1,4 @@
-import { canBeMoved } from 'web-app-files/src/helpers/permissions.js'
+import { canBeMoved } from 'web-app-files/src/helpers/permissions'
 
 describe('permissions helper', () => {
   describe('canBeMoved function', () => {
diff --git a/packages/web-app-files/tests/unit/helpers/statusIndicator.spec.js b/packages/web-app-files/tests/unit/helpers/statusIndicator.spec.ts
similarity index 97%
rename from packages/web-app-files/tests/unit/helpers/statusIndicator.spec.js
rename to packages/web-app-files/tests/unit/helpers/statusIndicator.spec.ts
index e8ad9df34d4..28acbd4f8a0 100644
--- a/packages/web-app-files/tests/unit/helpers/statusIndicator.spec.js
+++ b/packages/web-app-files/tests/unit/helpers/statusIndicator.spec.ts
@@ -1,3 +1,5 @@
+import { describe, it } from '@jest/globals'
+
 describe('statusIndicator', () => {
   describe('getIndicators', () => {
     it.todo(
diff --git a/packages/web-app-files/tests/unit/helpers/textUtils.spec.js b/packages/web-app-files/tests/unit/helpers/textUtils.spec.js
deleted file mode 100644
index 18b03e8f462..00000000000
--- a/packages/web-app-files/tests/unit/helpers/textUtils.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-describe('textUtils', () => {
-  // textUtils compares two strings to provide a natural sort
-
-  /**
-   * variations
-   * [
-       { firstString: 'b', secondString: 'a' },
-       { firstString: 'bb', secondString: 'ba' },
-       { firstString: '1', secondString: '0' }
-     ]
-   */
-  it.todo('should return negative integer if "b" comes before "a"')
-
-  /**
-   * variations
-   * [
-       { firstString: 'a', secondString: 'b' },
-       { firstString: 'aa', secondString: 'ab' },
-       { firstString: '0', secondString: '1' }
-     ]
-   */
-  it.todo('should return positive integer if "a" comes before "b"')
-
-  /**
-   * variations
-   [
-     { firstString: '0', secondString: '0' },
-     { firstString: 'a', secondString: 'a' },
-     { firstString: 'aa', secondString: 'aa' },
-     { firstString: 'ab', secondString: 'ab' }
-   ]
-   */
-  it.todo('should return 0 if the provided strings are identical')
-})
diff --git a/packages/web-app-files/tests/unit/helpers/textUtils.spec.ts b/packages/web-app-files/tests/unit/helpers/textUtils.spec.ts
new file mode 100644
index 00000000000..717dd0d2c3e
--- /dev/null
+++ b/packages/web-app-files/tests/unit/helpers/textUtils.spec.ts
@@ -0,0 +1,49 @@
+import { describe, it } from '@jest/globals'
+import { textUtils } from '../../../src/helpers/textUtils'
+
+describe('textUtils', () => {
+  // textUtils compares two strings to provide a natural sort
+  describe('naturalSortCompare', () => {
+    it('sorts a list naturally', () => {
+      const actual = ['Brian Murphy', 'Alice Hansen', 'grp1', 'grp11']
+
+      actual.sort(textUtils.naturalSortCompare)
+
+      expect(actual.join(',')).toBe('Alice Hansen,Brian Murphy,grp1,grp11')
+    })
+
+    /**
+     * variations
+     *
+     [
+       { firstString: 'b', secondString: 'a' },
+       { firstString: 'bb', secondString: 'ba' },
+       { firstString: '1', secondString: '0' }
+     ]
+     */
+    it.todo('should return negative integer if "b" comes before "a"')
+
+    /**
+     * variations
+     *
+     [
+       { firstString: 'a', secondString: 'b' },
+       { firstString: 'aa', secondString: 'ab' },
+       { firstString: '0', secondString: '1' }
+     ]
+     */
+    it.todo('should return positive integer if "a" comes before "b"')
+
+    /**
+     * variations
+     *
+     [
+       { firstString: '0', secondString: '0' },
+       { firstString: 'a', secondString: 'a' },
+       { firstString: 'aa', secondString: 'aa' },
+       { firstString: 'ab', secondString: 'ab' }
+     ]
+     */
+    it.todo('should return 0 if the provided strings are identical')
+  })
+})
diff --git a/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.ts
index 63d65f6b253..471f1c32063 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.ts
@@ -1,4 +1,4 @@
-import clearSelection from 'web-app-files/src/mixins/actions/clearSelection.js'
+import clearSelection from 'web-app-files/src/mixins/actions/clearSelection'
 import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
 
 const Component = {
diff --git a/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
index 2dbd04dba10..60bf7ba557d 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
@@ -1,5 +1,5 @@
 import { mock } from 'jest-mock-extended'
-import Delete from 'web-app-files/src/mixins/actions/delete.js'
+import Delete from 'web-app-files/src/mixins/actions/delete'
 
 import {
   createStore,
diff --git a/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
index c3b4fb72fbd..5160c3c8a83 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
@@ -1,4 +1,4 @@
-import EmptyTrashBin from 'web-app-files/src/mixins/actions/emptyTrashBin.js'
+import EmptyTrashBin from 'web-app-files/src/mixins/actions/emptyTrashBin'
 import { createLocationTrash, createLocationSpaces } from '../../../../src/router'
 import { mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
index d23a676c47e..45823cd94b6 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
@@ -1,4 +1,4 @@
-import uploadImage from 'web-app-files/src/mixins/spaces/actions/uploadImage.js'
+import uploadImage from 'web-app-files/src/mixins/spaces/actions/uploadImage'
 import { thumbnailService } from '../../../../src/services'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
diff --git a/packages/web-app-pdf-viewer/src/index.js b/packages/web-app-pdf-viewer/src/index.ts
similarity index 92%
rename from packages/web-app-pdf-viewer/src/index.js
rename to packages/web-app-pdf-viewer/src/index.ts
index 86a8a5523a3..396a836274c 100644
--- a/packages/web-app-pdf-viewer/src/index.js
+++ b/packages/web-app-pdf-viewer/src/index.ts
@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 
 // just a dummy function to trick gettext tools
diff --git a/packages/web-app-preview/src/index.js b/packages/web-app-preview/src/index.ts
similarity index 81%
rename from packages/web-app-preview/src/index.js
rename to packages/web-app-preview/src/index.ts
index 15d35f68ef4..03f57f5d1a0 100644
--- a/packages/web-app-preview/src/index.js
+++ b/packages/web-app-preview/src/index.ts
@@ -1,5 +1,6 @@
-import translations from '../l10n/translations'
-import App, { mimeTypes, appId } from './App.vue'
+import translations from '../l10n/translations.json'
+import * as app from './App.vue'
+const { default: App, mimeTypes, appId } = app as any
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
diff --git a/packages/web-app-text-editor/src/index.js b/packages/web-app-text-editor/src/index.ts
similarity index 88%
rename from packages/web-app-text-editor/src/index.js
rename to packages/web-app-text-editor/src/index.ts
index ed0b2aa94f3..feed0917128 100644
--- a/packages/web-app-text-editor/src/index.js
+++ b/packages/web-app-text-editor/src/index.ts
@@ -1,5 +1,5 @@
 import App from './App.vue'
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -22,7 +22,12 @@ const routes = [
 ]
 
 const fileExtensions = () => {
-  const extensions = [
+  const extensions: {
+    extension: string
+    label: string
+    canBeDefault?: boolean
+    newFileMenu?: any
+  }[] = [
     {
       extension: 'txt',
       label: $gettext('Plain text file')
@@ -57,7 +62,7 @@ const fileExtensions = () => {
     }
   ]
 
-  let primaryExtensions = window.__$store.getters.extensionConfigByAppId(appId)
+  let primaryExtensions = (window as any).__$store.getters.extensionConfigByAppId(appId)
     .primaryExtensions || ['txt', 'md']
   if (typeof primaryExtensions === 'string') {
     primaryExtensions = [primaryExtensions]
diff --git a/packages/web-pkg/src/components/sideBar/index.js b/packages/web-pkg/src/components/sideBar/index.ts
similarity index 100%
rename from packages/web-pkg/src/components/sideBar/index.js
rename to packages/web-pkg/src/components/sideBar/index.ts
diff --git a/packages/web-pkg/src/components/sideBar/types.ts b/packages/web-pkg/src/components/sideBar/types.ts
index 599c0086702..e5306bcbe55 100644
--- a/packages/web-pkg/src/components/sideBar/types.ts
+++ b/packages/web-pkg/src/components/sideBar/types.ts
@@ -1,13 +1,13 @@
-import { Component } from 'vue'
+import { defineComponent } from 'vue'
 import { IconFillType } from 'design-system/src/helpers'
 
 export interface Panel {
   app: string
   icon: string
   title: string
-  component: Component
-  componentAttrs: any
-  componentListeners: any
+  component: ReturnType<typeof defineComponent>
+  componentAttrs?: any
+  componentListeners?: any
   default?: (() => boolean) | boolean
   enabled: boolean
   iconFillType?: IconFillType
diff --git a/packages/web-runtime/src/defaults/json.js b/packages/web-runtime/src/defaults/json.ts
similarity index 100%
rename from packages/web-runtime/src/defaults/json.js
rename to packages/web-runtime/src/defaults/json.ts
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.ts
similarity index 91%
rename from packages/web-runtime/src/defaults/vue.js
rename to packages/web-runtime/src/defaults/vue.ts
index eb4c240e204..d477e4a27b3 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.ts
@@ -3,9 +3,7 @@ import WebPlugin from '../plugins/web'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
-import Vuex from 'vuex'
 
-Vue.use(Vuex)
 Vue.use(WebPlugin)
 
 Vue.component('AvatarImage', Avatar)
diff --git a/packages/web-runtime/src/helpers/config.js b/packages/web-runtime/src/helpers/config.ts
similarity index 100%
rename from packages/web-runtime/src/helpers/config.js
rename to packages/web-runtime/src/helpers/config.ts
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 9ae043cfd03..726f833f24a 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -1,10 +1,4 @@
-import {
-  DesignSystem as designSystem,
-  pages,
-  translations,
-  supportedLanguages,
-  Vue
-} from './defaults'
+import { DesignSystem as designSystem, pages, translations, supportedLanguages } from './defaults'
 
 import { router } from './router'
 import { configurationManager } from 'web-pkg/src/configuration'
@@ -46,7 +40,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
   const app = createApp(pages.success)
 
   const runtimeConfiguration = await announceConfiguration(configurationPath)
-  startSentry(runtimeConfiguration, Vue)
+  startSentry(runtimeConfiguration, app)
 
   const store = await announceStore({ runtimeConfiguration })
   announcePermissionManager({ app, store })
diff --git a/packages/web-runtime/src/mixins/focusMixin.js b/packages/web-runtime/src/mixins/focusMixin.ts
similarity index 100%
rename from packages/web-runtime/src/mixins/focusMixin.js
rename to packages/web-runtime/src/mixins/focusMixin.ts
diff --git a/packages/web-runtime/src/mixins/lifecycleMixin.js b/packages/web-runtime/src/mixins/lifecycleMixin.ts
similarity index 100%
rename from packages/web-runtime/src/mixins/lifecycleMixin.js
rename to packages/web-runtime/src/mixins/lifecycleMixin.ts
diff --git a/packages/web-runtime/src/mixins/navigationMixin.js b/packages/web-runtime/src/mixins/navigationMixin.ts
similarity index 98%
rename from packages/web-runtime/src/mixins/navigationMixin.js
rename to packages/web-runtime/src/mixins/navigationMixin.ts
index 398b69927b8..d7585fe834e 100644
--- a/packages/web-runtime/src/mixins/navigationMixin.js
+++ b/packages/web-runtime/src/mixins/navigationMixin.ts
@@ -48,7 +48,7 @@ export default {
             iconUrl = item.icon
           }
 
-          const app = {
+          const app: any = {
             icon: icon,
             iconUrl: iconUrl,
             title: title
diff --git a/packages/web-runtime/src/plugins/web.js b/packages/web-runtime/src/plugins/web.ts
similarity index 97%
rename from packages/web-runtime/src/plugins/web.js
rename to packages/web-runtime/src/plugins/web.ts
index 6737fb7f71b..9ceb6056e32 100644
--- a/packages/web-runtime/src/plugins/web.js
+++ b/packages/web-runtime/src/plugins/web.ts
@@ -22,7 +22,7 @@ export default {
 
           // construct the url and headers
           let url = null
-          let headers = { 'X-Request-ID': uuidV4() }
+          let headers: Record<string, string> = { 'X-Request-ID': uuidV4() }
           if (isPublicLinkContext) {
             url = file.downloadURL
           } else {
diff --git a/packages/web-runtime/src/services/clientRegistration.js b/packages/web-runtime/src/services/clientRegistration.ts
similarity index 94%
rename from packages/web-runtime/src/services/clientRegistration.js
rename to packages/web-runtime/src/services/clientRegistration.ts
index de815124222..ba4d5b88160 100644
--- a/packages/web-runtime/src/services/clientRegistration.js
+++ b/packages/web-runtime/src/services/clientRegistration.ts
@@ -29,7 +29,7 @@ async function post(url, data) {
 }
 
 export async function registerClient(openIdConfig) {
-  const clientData = sessionStorage.getItem('dynamicClientData')
+  const clientData = JSON.parse(sessionStorage.getItem('dynamicClientData'))
   if (clientData !== null) {
     // eslint-disable-next-line camelcase
     const client_secret_expires_at = clientData.client_secret_expires_at || 0
diff --git a/packages/web-runtime/src/store/app.js b/packages/web-runtime/src/store/app.ts
similarity index 100%
rename from packages/web-runtime/src/store/app.js
rename to packages/web-runtime/src/store/app.ts
diff --git a/packages/web-runtime/src/store/apps.js b/packages/web-runtime/src/store/apps.ts
similarity index 100%
rename from packages/web-runtime/src/store/apps.js
rename to packages/web-runtime/src/store/apps.ts
diff --git a/packages/web-runtime/src/store/config.js b/packages/web-runtime/src/store/config.ts
similarity index 100%
rename from packages/web-runtime/src/store/config.js
rename to packages/web-runtime/src/store/config.ts
diff --git a/packages/web-runtime/src/store/modal.js b/packages/web-runtime/src/store/modal.ts
similarity index 98%
rename from packages/web-runtime/src/store/modal.js
rename to packages/web-runtime/src/store/modal.ts
index 78d7dfaf64b..79918d2c5a7 100644
--- a/packages/web-runtime/src/store/modal.js
+++ b/packages/web-runtime/src/store/modal.ts
@@ -1,4 +1,4 @@
-const emptyReturn = () => {}
+const emptyReturn = () => undefined
 
 const state = {
   displayed: false,
diff --git a/packages/web-runtime/src/store/navigation.js b/packages/web-runtime/src/store/navigation.ts
similarity index 100%
rename from packages/web-runtime/src/store/navigation.js
rename to packages/web-runtime/src/store/navigation.ts
diff --git a/packages/web-runtime/src/store/settings.js b/packages/web-runtime/src/store/settings.ts
similarity index 100%
rename from packages/web-runtime/src/store/settings.js
rename to packages/web-runtime/src/store/settings.ts
diff --git a/packages/web-runtime/tests/unit/helpers/config.spec.js b/packages/web-runtime/tests/unit/helpers/config.spec.ts
similarity index 87%
rename from packages/web-runtime/tests/unit/helpers/config.spec.js
rename to packages/web-runtime/tests/unit/helpers/config.spec.ts
index de8c86de39c..444b139e726 100644
--- a/packages/web-runtime/tests/unit/helpers/config.spec.js
+++ b/packages/web-runtime/tests/unit/helpers/config.spec.ts
@@ -1,3 +1,4 @@
+import { FetchMock } from 'jest-fetch-mock/types'
 import { loadConfig } from 'web-runtime/src/helpers/config'
 
 const validConfig = `{
@@ -28,14 +29,14 @@ const validConfig = `{
 
 describe('config file loading and error reporting', () => {
   it('should load and parse a valid config', function () {
-    fetch.mockResponseOnce(validConfig)
+    ;(fetch as FetchMock).mockResponseOnce(validConfig)
     return loadConfig().then(async (result) => {
       expect(await result).toMatchObject(JSON.parse(validConfig))
     })
   })
   describe('empty config', () => {
     it('should throw an exception', function () {
-      fetch.mockResponseOnce('')
+      ;(fetch as FetchMock).mockResponseOnce('')
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -45,7 +46,9 @@ describe('config file loading and error reporting', () => {
   })
   describe('config with an trailing comma', () => {
     it('should throw an exception', function () {
-      fetch.mockResponseOnce('"title": { "en": "Classic Design", "de": "Dateien", },')
+      ;(fetch as FetchMock).mockResponseOnce(
+        '"title": { "en": "Classic Design", "de": "Dateien", },'
+      )
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -56,7 +59,7 @@ describe('config file loading and error reporting', () => {
 })
 describe('missing config', () => {
   it('should throw an exception', function () {
-    fetch.mockResponseOnce(
+    ;(fetch as FetchMock).mockResponseOnce(
       '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">\n' +
         '<html><head>\n' +
         '<title>404 Not Found</title>\n' +
diff --git a/packages/web-runtime/tests/unit/helpers/theme.spec.js b/packages/web-runtime/tests/unit/helpers/theme.spec.ts
similarity index 82%
rename from packages/web-runtime/tests/unit/helpers/theme.spec.js
rename to packages/web-runtime/tests/unit/helpers/theme.spec.ts
index fa15aa1ff85..f4f282a4df3 100644
--- a/packages/web-runtime/tests/unit/helpers/theme.spec.js
+++ b/packages/web-runtime/tests/unit/helpers/theme.spec.ts
@@ -1,15 +1,11 @@
 import { loadTheme } from 'web-runtime/src/helpers/theme'
 import defaultTheme from 'web-runtime/themes/owncloud/theme.json'
 import merge from 'lodash-es/merge'
+import { FetchMock } from 'jest-fetch-mock'
 
-describe('theme loading and error reporting', () => {
-  beforeEach(() => {
-    global.console = { error: jest.fn() }
-  })
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
+jest.spyOn(console, 'error').mockImplementation(() => undefined)
 
+describe('theme loading and error reporting', () => {
   it('should load the default theme if location is empty', async () => {
     const { theme } = await loadTheme()
     expect(theme).toMatchObject(defaultTheme.web)
@@ -21,20 +17,20 @@ describe('theme loading and error reporting', () => {
   })
 
   it('should load the default theme if location is not found', async () => {
-    fetch.mockResponse(new Error(), { status: 404 })
+    ;(fetch as FetchMock).mockResponse(new Error() as any, { status: 404 })
     const { theme } = await loadTheme('http://www.owncloud.com/unknown.json')
     expect(theme).toMatchObject(defaultTheme.web)
   })
 
   it('should load the default theme if location is not a valid json file', async () => {
     const customTheme = merge({}, defaultTheme, { default: { logo: { login: 'custom.svg' } } })
-    fetch.mockResponse(JSON.stringify(customTheme) + '-invalid')
+    ;(fetch as FetchMock).mockResponse(JSON.stringify(customTheme) + '-invalid')
     const { theme } = await loadTheme('http://www.owncloud.com/invalid.json')
     expect(theme).toMatchObject(defaultTheme.web)
   })
 
   it('should load the default theme if server errors', async () => {
-    fetch.mockReject(new Error())
+    ;(fetch as FetchMock).mockReject(new Error())
     const { theme } = await loadTheme('http://www.owncloud.com')
     expect(theme).toMatchObject(defaultTheme.web)
   })
@@ -42,7 +38,7 @@ describe('theme loading and error reporting', () => {
   it('should load the custom theme if a custom location is given', async () => {
     const customTheme = merge({}, defaultTheme.web, { default: { logo: { login: 'custom.svg' } } })
 
-    fetch.mockResponse(JSON.stringify(customTheme))
+    ;(fetch as FetchMock).mockResponse(JSON.stringify(customTheme))
 
     const { theme: theme1 } = await loadTheme('http://www.owncloud.com/custom.json')
     const { theme: theme2 } = await loadTheme('/custom.json')
diff --git a/tests/unit/config/jest.config.ts b/tests/unit/config/jest.config.ts
index 6b97e2ef691..dfeb9b64dac 100644
--- a/tests/unit/config/jest.config.ts
+++ b/tests/unit/config/jest.config.ts
@@ -42,8 +42,8 @@ module.exports = {
   },
   transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esmModules.join('|')})`],
   setupFiles: [
-    '<rootDir>/tests/unit/config/jest.init.js',
-    '<rootDir>/tests/unit/config/jest.overrides.js',
+    '<rootDir>/tests/unit/config/jest.init.ts',
+    '<rootDir>/tests/unit/config/jest.overrides.ts',
     'core-js'
   ],
   snapshotSerializers: ['jest-serializer-vue-tjw'],
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.ts
similarity index 90%
rename from tests/unit/config/jest.init.js
rename to tests/unit/config/jest.init.ts
index 79255fe96a1..e10ae0a9382 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.ts
@@ -4,10 +4,8 @@ import fetchMock from 'jest-fetch-mock'
 import { compatConfig } from '../../../packages/web-runtime/src/compatConfig'
 
 configureCompat(compatConfig)
-
-window.define = jest.fn()
-
-window.IntersectionObserver = jest.fn(() => ({
+;(window as any).define = jest.fn()
+;(window as any).IntersectionObserver = jest.fn(() => ({
   observe: jest.fn(),
   unobserve: jest.fn()
 }))
diff --git a/tests/unit/config/jest.overrides.js b/tests/unit/config/jest.overrides.ts
similarity index 98%
rename from tests/unit/config/jest.overrides.js
rename to tests/unit/config/jest.overrides.ts
index 9b8e83148d6..3a8725da630 100644
--- a/tests/unit/config/jest.overrides.js
+++ b/tests/unit/config/jest.overrides.ts
@@ -16,3 +16,5 @@ console.error = function (message) {
     throw message instanceof Error ? message : new Error(message)
   }
 }
+
+export {}
diff --git a/web.d.ts b/web.d.ts
index 72f253d842a..11448e6fe4b 100644
--- a/web.d.ts
+++ b/web.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
   }
 }
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
 }