Use AuthTokenSection in App (build fails with TS errors)

* package.json: add Nextcloud, Vue, typescipt dependencies
  (from Nextcloud)
* remove .ts suffix from import paths (causes build error otherwise)
* add declare global to define Nextcloud types. This should be changed
  to @nextcloud/typings.
* annotated import of Nextcloud components (JS) with @ts-expect-error
  to solve tsc errors. This is most likely due to missing type
  definitions. Unclear how Nextcloud core made this working.
* tsconfig: extend from @vue/tsconfig/tsconfig.json as documented
  elsewhere and as done in Nextcloud's core tsconfig.json

Build fails with errors like

   ERROR in /app/src/components/AuthTokenSetup.vue.ts
   47:9-14
   [tsl] ERROR in /app/src/components/AuthTokenSetup.vue.ts(47,10)
         TS2339: Property 'reset' does not exist on type 'CreateComponentPublicInstance<{}, { authTokenStore: Store<"auth-token", { tokens: IToken[]; }, {}, { updateToken(token: IToken): Promise<any>; addToken(name: string): Promise<ITokenResponse | null>; deleteToken(token: IToken): Promise<...>; wipeToken(token: IToken): Promise<...>; renameToken(token: IToken, newName: ...'.

This hints at Typescript not being able to infer types from the
component definition.

Related issues:

* vuejs/vue#9873
* vuejs/vue#12628
* vuejs/vue#8721

Unsuccessfully attempted proposed solutions:

* Declaring return types on methods like:

  reset(): void {
  async submit(): Promise<void> {

* Using arrow functions

  Did not work and would introduce new errors anyway

* Defining interfaces for the returned component

  Caused another rabbit hole of more and more required type
  definitions, that should be infered by the Vue typings anyway

Author: tholewebgods

package-lock.json

@@ -17,25 +17,30 @@
     "extends @nextcloud/browserslist-config"
   ],
   "dependencies": {
-    "@nextcloud/axios": "^2.0.0",
-    "@nextcloud/dialogs": "^5.0.3",
-    "@nextcloud/event-bus": "^3.1.0",
-    "@nextcloud/moment": "^1.2.2",
-    "@nextcloud/router": "^2.2.0",
-    "@nextcloud/vue": "^8.3.0",
+    "@chenfengyuan/vue-qrcode": "^1.0.2",
+    "@mdi/js": "^7.4.47",
+    "@nextcloud/dialogs": "^5.2.0",
+    "@nextcloud/initial-state": "^2.0.0",
+    "@nextcloud/l10n": "^2.1.0",
+    "@nextcloud/logger": "^2.5.0",
+    "@nextcloud/password-confirmation": "^5.0.1",
+    "@nextcloud/router": "^3.0.0",
+    "@nextcloud/vue": "^8.11.2",
     "caret-pos": "^2.0.0",
     "fuse.js": "^7.0.0",
     "linkifyjs": "^4.1.1",
     "lozad": "^1.16.0",
     "mitt": "^3.0.1",
+    "pinia": "^2.1.7",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "vue": "^2.7.15",
+    "vue": "^2.7.16",
     "vue-i18n": "^8.17.1",
     "vue-material-design-icons": "^5.2.0",
     "vue-modal-dialogs": "3.0.0",
     "vue-router": "^3.6.5",
     "vue-showdown": "^2.4.1",
+    "vue-tsc": "^2.0.19",
     "vuejs-logger": "^1.5.5",
     "vuex": "^3.6.2"
   },
@@ -44,10 +49,12 @@
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.3.1",
+    "@nextcloud/typings": "^1.8.0",
     "@nextcloud/webpack-vue-config": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",
     "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/tsconfig": "^0.5.1",
     "@vue/vue2-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
     "check-peer-dependencies": "^4.3.0",

package.json

@@ -1,12 +1,17 @@
 <template>
-	<div>dummy</div>
+	<AuthTokenSection />
 </template>
 
 <script lang="ts">
+import AuthTokenSection from './components/AuthTokenSection.vue'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
 	name: 'App',
-}
+	components: {
+		AuthTokenSection,
+	},
+})
 </script>
 
 <style scoped lang="scss">

src/App.vue

@@ -100,16 +100,41 @@ import type { IToken } from '../store/authtoken'
 import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKey, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js'
 import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
-import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
+import { TokenType, useAuthTokenStore } from '../store/authtoken'
 
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+declare global {
+	interface Window {
+		oc_defaults: {
+			baseUrl: string;
+			docBaseUrl: string;
+			docPlaceholderUrl: string;
+			entity: string;
+			folder: string;
+			logoClaim: string;
+			name: string;
+			productName: string;
+			slogan: string;
+			syncClientUrl: string;
+			title: string;
+		};
+	}
+}
+
 // When using capture groups the following parts are extracted the first is used as the version number, the second as the OS
 const userAgentMap = {
 	ie: /(?:MSIE|Trident|Trident\/7.0; rv)[ :](\d+)/,

src/components/AuthToken.vue

@@ -48,7 +48,9 @@ import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import { useAuthTokenStore, type ITokenResponse } from '../store/authtoken'
 
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'

src/components/AuthTokenSetup.vue

@@ -70,9 +70,13 @@ import { getRootUrl } from '@nextcloud/router'
 import { defineComponent, type PropType } from 'vue'
 
 import QR from '@chenfengyuan/vue-qrcode'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import logger from '../logger'

src/components/AuthTokenSetupDialog.vue

@@ -29,6 +29,11 @@ import { defineStore } from 'pinia'
 import axios from '@nextcloud/axios'
 import logger from '../logger'
 
+declare global {
+	// TODO find matching typedef in the @nextcloud/dialogs package
+	interface Window { OC: any; }
+}
+
 const BASE_URL = generateUrl('/simplesettings/authtokens')
 
 const confirm = () => {

src/store/authtoken.ts

@@ -1,5 +1,6 @@
 {
-	"include": ["./src/**/*.ts", "./src/**/*.vue"],
+	"extends": "@vue/tsconfig/tsconfig.json",
+	"include": ["./src/**/*.ts", "./src/**/*.vue", "./src/**/*.d.ts"],
 	"compilerOptions": {
 		"types": ["node", "vue", "vue-router"],
 		"outDir": "./dist/",
@@ -17,5 +18,6 @@
 		"noImplicitAny": false,
 		"resolveJsonModule": true,
 		"strict": true,
+		"skipLibCheck": true,
 	}
 }