chore: begin migration to TypeScript

package.json

@@ -59,6 +59,7 @@
     "@nextcloud/stylelint-config": "^3.2.1",
     "@nextcloud/vite-config": "^2.5.1",
     "@playwright/test": "^1.59.1",
+    "@types/node": "^25.6.1",
     "@vue/tsconfig": "^0.9.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",

src/Forms.vue

@@ -168,8 +168,8 @@ import FormsIcon from './components/Icons/FormsIcon.vue'
 import Sidebar from './views/Sidebar.vue'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import { FormState } from './models/Constants.ts'
-import logger from './utils/Logger.js'
-import OcsResponse2Data from './utils/OcsResponse2Data.js'
+import logger from './utils/Logger.ts'
+import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
 const appName = 'forms'
 

src/FormsSettings.vue

@@ -105,7 +105,7 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import logger from './utils/Logger.js'
+import logger from './utils/Logger.ts'
 
 export default {
 	name: 'FormsSettings',

src/components/AppNavigationForm.vue

@@ -115,7 +115,7 @@ import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 import FormsIcon from './Icons/FormsIcon.vue'
 import PermissionTypes from '../mixins/PermissionTypes.js'
 import { FormState } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'AppNavigationForm',

src/components/QRDialog.vue

@@ -26,7 +26,7 @@
 <script>
 import QRCode from 'qrcode'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'QRDialog',

src/components/Questions/AnswerInput.vue

@@ -98,8 +98,8 @@ import IconTableRow from 'vue-material-design-icons/TableRow.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 import IconDragIndicator from '../Icons/IconDragIndicator.vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	name: 'AnswerInput',

src/components/Questions/QuestionFile.vue

@@ -166,8 +166,8 @@ import IconUploadMultiple from 'vue-material-design-icons/UploadMultipleOutline.
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import fileTypes from '../../models/FileTypes.js'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 /**
  * A constant object representing file size units in bytes.

src/components/Questions/QuestionShort.vue

@@ -79,7 +79,7 @@ import IconRegex from 'vue-material-design-icons/Regex.vue'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import validationTypes from '../../models/ValidationTypes.js'
-import { splitRegex, validateExpression } from '../../utils/RegularExpression.js'
+import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
 
 export default {
 	name: 'QuestionShort',

src/components/SidebarTabs/SharingSidebarTab.vue

@@ -227,8 +227,8 @@ import SharingShareDiv from './SharingShareDiv.vue'
 import PermissionTypes from '../../mixins/PermissionTypes.js'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
 import ShareTypes from '../../mixins/ShareTypes.js'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	components: {

src/components/SidebarTabs/TransferOwnership.vue

@@ -101,7 +101,7 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import UserSearchMixin from '../../mixins/UserSearchMixin.js'
-import logger from '../../utils/Logger.js'
+import logger from '../../utils/Logger.ts'
 
 export default {
 	components: {

src/components/TopBar.vue

@@ -38,7 +38,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
 import PillMenu from './PillMenu.vue'
 import PermissionTypes from '../mixins/PermissionTypes.js'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 const submitView = {
 	ariaLabel: t('forms', 'View form'),

src/emptyContent.js → src/emptyContent.ts

@@ -12,3 +12,5 @@ const app = createApp(FormsEmptyContent)
 app.config.globalProperties.t = translate
 app.config.globalProperties.n = translatePlural
 app.mount('#content')
+
+export default app

src/main.js → src/main.ts

@@ -6,7 +6,7 @@
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { createApp } from 'vue'
 import Forms from './Forms.vue'
-import router from './router.js'
+import router from './router.ts'
 
 import 'vite/modulepreload-polyfill'
 import '@nextcloud/dialogs/style.css'

src/mixins/QuestionMixin.js

@@ -9,8 +9,8 @@ import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import Question from '../components/Questions/Question.vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 
 export default {
 	inheritAttrs: false,

src/mixins/QuestionMultipleMixin.ts

@@ -13,41 +13,62 @@ import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
+
+// Temporary augmentation to allow using `this.<prop>` in mixin methods
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		options: FormsOption[]
+		values: unknown[]
+		answerType: { validate: (ctx: unknown) => boolean }
+		readOnly: boolean
+		extraSettings?: unknown
+		formId: number
+		id: number
+		shuffleArray: <T>(arr: T[]) => T[]
+		$refs: Record<string, unknown>
+	}
+}
 
 export default defineComponent({
 	emits: ['update:options'],
 
 	data() {
 		return {
-			dirtyOptionsType: null,
+			dirtyOptionsType: null as string | null,
 		}
 	},
 
 	computed: {
-		areNoneChecked() {
+		areNoneChecked(): boolean {
 			return this.values.length === 0
 		},
 
-		contentValid() {
+		contentValid(): boolean {
 			return this.answerType.validate(this)
 		},
 
-		isLastEmpty() {
-			const value = this.options[this.options.length - 1]
+		isLastEmpty(): boolean {
+			const value = this.options[this.options.length - 1] as
+				| FormsOption
+				| undefined
 			return value?.text?.trim?.().length === 0
 		},
 
-		expectedOptionTypes() {
+		expectedOptionTypes(): OptionType[] {
 			return [OptionType.Choice, OptionType.Row, OptionType.Column]
 		},
 
 		sortedOptionsPerType(): { [key: string]: FormsOption[] } {
-			const optionsPerType = Object.fromEntries(
-				this.expectedOptionTypes.map((optionType) => [optionType, []]),
-			)
+			const optionsPerType: { [key: string]: FormsOption[] } =
+				Object.fromEntries(
+					this.expectedOptionTypes.map((optionType) => [
+						optionType,
+						[] as FormsOption[],
+					]),
+				)
 
-			this.options.forEach((option) => {
+			this.options.forEach((option: FormsOption) => {
 				optionsPerType[option.optionType].push(option)
 			})
 
@@ -69,14 +90,15 @@ export default defineComponent({
 					})
 
 					if (!this.readOnly) {
-						// In edit mode append an empty option
+						// In edit mode append an empty option (cast as FormsOption temporarily)
 						optionsPerType[optionType].push({
+							id: 0,
 							local: true,
 							questionId: this.id,
 							text: '',
 							optionType,
 							order: optionsPerType[optionType].length,
-						})
+						} as FormsOption)
 					}
 				}
 			}
@@ -104,7 +126,7 @@ export default defineComponent({
 		 */
 		focusIndex(index: number, optionType: string) {
 			// refs are not guaranteed to be in correct order - we need to find the correct item
-			const item = this.$refs.input.find((instance) => {
+			const item = this.$refs.input.find((instance: unknown) => {
 				return (
 					instance.$props.optionType === optionType
 					&& instance.$props.index === index
@@ -143,12 +165,13 @@ export default defineComponent({
 				return [
 					...options,
 					{
+						id: 0,
 						local: true,
 						questionId: this.id,
 						text: '',
 						optionType,
 						order: options.length,
-					},
+					} as FormsOption,
 				]
 			}
 			return options
@@ -386,7 +409,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		dirtyOptionsType: debounce(function () {
+		dirtyOptionsType: debounce(function (this: unknown) {
 			if (!this.dirtyOptionsType) {
 				return
 			}

src/mixins/ShareLinkMixin.js

@@ -4,7 +4,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { generateUrl } from '@nextcloud/router'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	methods: {

src/mixins/UserSearchMixin.js

@@ -7,8 +7,8 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import ShareTypes from './ShareTypes.js'
 
 export default {
@@ -73,7 +73,7 @@
 		/**
 		 * Debounce getSuggestions
 		 *
 		 * @param {...*} args arguments to pass
 		 */
 		debounceGetSuggestions: debounce(function (...args) {
 			this.getSuggestions(...args)

src/mixins/ViewsMixin.js

@@ -10,9 +10,9 @@ import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import MarkdownIt from 'markdown-it'
-import CancelableRequest from '../utils/CancelableRequest.js'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import CancelableRequest from '../utils/CancelableRequest.ts'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 
 export default {
 	provide() {