Skip to content

Commit f6a53ec

Browse files
thlehmann-ionosthlehmann-ionos
committed
Use AuthTokenSection in App (fails with two kinds of TS errors)
* package.json: add Nextcloud dependencies (from Nextcloud) * main.ts: register pinia Otherwise the following error would be thrown: TypeError: Cannot read properties of undefined (reading '_s') at i (pinia.mjs:1714:20) at setup (AuthTokenList.vue:11:32) at mn (vue.runtime.esm.js:3033:30) at vue.runtime.esm.js:2457:27 ... * 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. * the eslint rule set @nextcloud/eslint-config/typescript was added to prevent import path errors The 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 Signed-off-by: Thomas Lehmann <[email protected]>
1 parent 6667578 commit f6a53ec

9 files changed

+89
-12
lines changed

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
22
extends: [
33
'@nextcloud',
4+
'@nextcloud/eslint-config/typescript',
45
],
56
rules: {
67
'jsdoc/require-jsdoc': 'off',

‎package-lock.json

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@nextcloud/browserslist-config": "^3.0.1",
3636
"@nextcloud/eslint-config": "^8.3.0",
3737
"@nextcloud/eslint-plugin": "^2.2.1",
38+
"@nextcloud/typings": "^1.8.0",
3839
"@nextcloud/webpack-vue-config": "^6.0.1",
3940
"@typescript-eslint/parser": "^6.18.0",
4041
"@vue/eslint-config-typescript": "^12.0.0",

‎src/App.vue

+24-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1+
<!--
2+
SPDX-FileLicenseText: 2024 Thomas Lehmann <t.lehmann@strato.de>
3+
SPDX-License-Identifier: AGPL-3.0-or-later
4+
5+
This program is free software: you can redistribute it and/or modify
6+
it under the terms of the GNU Affero General Public License as
7+
published by the Free Software Foundation, either version 3 of the
8+
License, or (at your option) any later version.
9+
10+
This program is distributed in the hope that it will be useful,
11+
but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
GNU Affero General Public License for more details.
14+
15+
You should have received a copy of the GNU Affero General Public License
16+
along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
-->
18+
119
<template>
2-
<NcAppContent>
3-
<div id="simplesettings">
4-
<h1>Hello world!</h1>
5-
</div>
6-
</NcAppContent>
20+
<AuthTokenSection />
721
</template>
822

923
<script lang="ts">
10-
// @ts-expect-error: Cannot find module or its corresponding type declarations.
11-
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
24+
import AuthTokenSection from './components/AuthTokenSection.vue'
25+
import { defineComponent } from 'vue'
1226

13-
export default {
27+
export default defineComponent({
1428
name: 'App',
1529
components: {
16-
NcAppContent,
30+
AuthTokenSection,
1731
},
18-
}
32+
})
1933
</script>
2034

2135
<style scoped lang="scss">

‎src/components/AuthToken.vue

+26-1
Original file line numberDiff line numberDiff line change
@@ -100,16 +100,41 @@ import type { IToken } from '../store/authtoken'
100100
import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKey, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js'
101101
import { translate as t } from '@nextcloud/l10n'
102102
import { defineComponent } from 'vue'
103-
import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
103+
import { TokenType, useAuthTokenStore } from '../store/authtoken'
104104

105+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
105106
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
107+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
106108
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
109+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
107110
import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
111+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
108112
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
113+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
109114
import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
115+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
110116
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
117+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
111118
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
112119

120+
declare global {
121+
interface Window {
122+
oc_defaults: {
123+
baseUrl: string;
124+
docBaseUrl: string;
125+
docPlaceholderUrl: string;
126+
entity: string;
127+
folder: string;
128+
logoClaim: string;
129+
name: string;
130+
productName: string;
131+
slogan: string;
132+
syncClientUrl: string;
133+
title: string;
134+
};
135+
}
136+
}
137+
113138
// When using capture groups the following parts are extracted the first is used as the version number, the second as the OS
114139
const userAgentMap = {
115140
ie: /(?:MSIE|Trident|Trident\/7.0; rv)[ :](\d+)/,

‎src/components/AuthTokenSetup.vue

+2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ import { translate as t } from '@nextcloud/l10n'
4848
import { defineComponent } from 'vue'
4949
import { useAuthTokenStore, type ITokenResponse } from '../store/authtoken'
5050

51+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
5152
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
53+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
5254
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
5355

5456
import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'

‎src/components/AuthTokenSetupDialog.vue

+4
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,13 @@ import { getRootUrl } from '@nextcloud/router'
7070
import { defineComponent, type PropType } from 'vue'
7171

7272
import QR from '@chenfengyuan/vue-qrcode'
73+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
7374
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
75+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
7476
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
77+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
7578
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
79+
// @ts-expect-error: Cannot find module or its corresponding type declarations.
7680
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
7781

7882
import logger from '../logger'

‎src/main.ts

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1+
/*
2+
* SPDX-FileLicenseText: 2024 Thomas Lehmann <[email protected]>
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU Affero General Public License as
7+
* published by the Free Software Foundation, either version 3 of the
8+
* License, or (at your option) any later version.
9+
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU Affero General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU Affero General Public License
16+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
*/
18+
119
import Vue from 'vue'
220
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
21+
import { PiniaVuePlugin, createPinia } from 'pinia'
322
import App from './App.vue'
423

24+
const pinia = createPinia()
25+
26+
Vue.use(PiniaVuePlugin)
27+
528
Vue.mixin({ methods: { t, n } })
629

730
const View = Vue.extend(App)
8-
new View().$mount('#simplesettings')
31+
new View({ pinia }).$mount('#simplesettings')

‎src/store/authtoken.ts

+6
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ import { defineStore } from 'pinia'
2929
import axios from '@nextcloud/axios'
3030
import logger from '../logger'
3131

32+
declare global {
33+
// TODO find matching typedef in the @nextcloud/dialogs package
34+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
35+
interface Window { OC: any; }
36+
}
37+
3238
const BASE_URL = generateUrl('/simplesettings/authtokens')
3339

3440
const confirm = () => {

0 commit comments

Comments
 (0)