From 4ac45137b84277d3404547e95275f8530e8dedf9 Mon Sep 17 00:00:00 2001
From: Thomas Lehmann <t.lehmann@strato-rz.de>
Date: Thu, 16 May 2024 17:15:21 +0200
Subject: [PATCH] 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
* the eslint rule set @nextcloud/eslint-config/typescript was added to
prevent:

     ERROR in [eslint]
     /app/src/components/AuthTokenSection.vue
       35:27  error  "@nextcloud/initial-state" is not published  n/no-unpublished-import
       36:32  error  "@nextcloud/l10n" is not published           n/no-unpublished-import

  I can only assume that that rule is disabled in the rule set we
  extend from or that the module resolution "node" can not find the
  files.

  The error actually complains about the module not being part of
  "dependencies" in package.json, which is the case, however.

  The internet calls for allowing such modules, which IMO defeats the
  purpose.

   The rule is also present in Nextcloud's core config.

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:

* https://github.com/vuejs/vue/issues/9873
* https://github.com/vuejs/vue/issues/12628
* https://github.com/vuejs/vue/issues/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
---
 .eslintrc.js                            |  1 +
 src/App.vue                             | 15 ++++++--------
 src/components/AuthToken.vue            | 27 ++++++++++++++++++++++++-
 src/components/AuthTokenSetup.vue       |  2 ++
 src/components/AuthTokenSetupDialog.vue |  4 ++++
 src/store/authtoken.ts                  |  5 +++++
 tsconfig.json                           |  8 ++++----
 7 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 9175db9..f71e55f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
 	extends: [
 		'@nextcloud',
+		'@nextcloud/eslint-config/typescript',
 	],
 	rules: {
 		'jsdoc/require-jsdoc': 'off',
diff --git a/src/App.vue b/src/App.vue
index 69a1206..e4d80ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,17 @@
 <template>
-	<NcAppContent>
-		<div id="simplesettings">
-			<h1>Hello world!</h1>
-		</div>
-	</NcAppContent>
+	<AuthTokenSection />
 </template>
 
 <script lang="ts">
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import AuthTokenSection from './components/AuthTokenSection.vue'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
 	name: 'App',
 	components: {
-		NcAppContent,
+		AuthTokenSection,
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/AuthToken.vue b/src/components/AuthToken.vue
index 73dfe81..a54af0e 100644
--- a/src/components/AuthToken.vue
+++ b/src/components/AuthToken.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+)/,
diff --git a/src/components/AuthTokenSetup.vue b/src/components/AuthTokenSetup.vue
index 81974ca..d13403b 100644
--- a/src/components/AuthTokenSetup.vue
+++ b/src/components/AuthTokenSetup.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'
diff --git a/src/components/AuthTokenSetupDialog.vue b/src/components/AuthTokenSetupDialog.vue
index ae39831..6655c83 100644
--- a/src/components/AuthTokenSetupDialog.vue
+++ b/src/components/AuthTokenSetupDialog.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'
diff --git a/src/store/authtoken.ts b/src/store/authtoken.ts
index dbaab5e..0a62a9b 100644
--- a/src/store/authtoken.ts
+++ b/src/store/authtoken.ts
@@ -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 = () => {
diff --git a/tsconfig.json b/tsconfig.json
index d3d5bf2..439865e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,15 +2,15 @@
 	// Mostly based on Nextcloud's tsconfig.json with some modifications
 	// (includes, allowImportingTsExtensions, noEmit)
 	"extends": "@vue/tsconfig/tsconfig.json",
-	"include": ["./src/**/*.ts", "./src/**/*.vue"],
+	"include": ["./src/**/*.ts", "./src/**/*.vue", "./src/**/*.d.ts"],
 	"compilerOptions": {
 		"types": ["node", "vue", "vue-router"],
 		"outDir": "./dist/",
 		"target": "ESNext",
 		"module": "esnext",
-		// Set module resolution to bundler and `noEmit` to be able to set `allowImportingTsExtensions`, so we can import Typescript with .ts extension
-		"moduleResolution": "Bundler",
-		"allowImportingTsExtensions": true,
+		"moduleResolution": "node",
+		// Must be false because noEmit is false (reason see below)
+		"allowImportingTsExtensions": false,
 		// noEmit shall be false to prevent the error
 		// "Error: TypeScript emitted no output for /app/src/main.ts."
 		"noEmit": false,