perf: migrate to vite

.gitignore

@@ -18,6 +18,7 @@ yarn-error.log*
 .marginalia
 
 js/
+/css/
 build/
 coverage*
 vendor/

lib/Controller/PageController.php

@@ -105,6 +105,8 @@ public function index(): TemplateResponse {
 		$this->initialStateService->provideInitialState(Application::APP_ID, 'isCirclesEnabled', $isCirclesEnabled && $isCircleVersionCompatible);
 		$this->initialStateService->provideInitialState(Application::APP_ID, 'isTalkEnabled', $isTalkEnabled && $isTalkVersionCompatible);
 
+		Util::addStyle(Application::APP_ID, 'contacts-index');
+		Util::addStyle(Application::APP_ID, 'contacts-main');
 		Util::addScript(Application::APP_ID, 'contacts-main');
 
 		return new TemplateResponse(Application::APP_ID, 'main');

lib/Listener/LoadContactsFilesActions.php

@@ -21,6 +21,9 @@ public function handle(Event $event): void {
 			return;
 		}
 
+		Util::addStyle(Application::APP_ID, 'contacts-index');
+		Util::addStyle(Application::APP_ID, 'contacts-files-action');
+
 		// only available since Nc 28
 		if (method_exists(Util::class, 'addInitScript')) {
 			Util::addInitScript(Application::APP_ID, 'contacts-files-action');

package.json

@@ -23,10 +23,11 @@
   "homepage": "https://github.com/nextcloud/contacts",
   "license": "agpl",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "webpack --node-env production --progress",
-    "dev": "webpack --node-env development --progress",
-    "watch": "webpack --node-env development --progress --watch",
+    "build": "vite build --mode production",
+    "dev": "vite build --mode development",
+    "watch": "vite build --mode development --watch",
     "lint": "eslint --ext .js,.ts,.vue src",
     "lint:fix": "eslint --ext .js,.ts,.vue src --fix",
     "stylelint": "stylelint src",
@@ -53,6 +54,7 @@
     "@nextcloud/router": "^2.2.0",
     "@nextcloud/sharing": "^0.1.0",
     "@nextcloud/vue": "^8.11.3",
+    "@shortcm/qr-image": "^9.0.4",
     "@vueuse/core": "^10.9.0",
     "b64-to-blob": "^1.2.19",
     "camelcase": "^8.0.0",
@@ -65,7 +67,6 @@
     "moment": "^2.30.1",
     "p-limit": "^5.0.0",
     "pinia": "^2.1.7",
-    "qr-image": "^3.2.0",
     "string-natural-compare": "^3.0.1",
     "uuid": "^9.0.1",
     "vue": "~2.7.15",
@@ -83,14 +84,12 @@
     "npm": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.24.6",
     "@nextcloud/babel-config": "^1.2.0",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.3.0",
     "@nextcloud/typings": "^1.7.0",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@nextcloud/vite-config": "^1.2.3",
     "@types/jest": "^29.5.12",
     "@vue/vue2-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
@@ -103,6 +102,7 @@
     "ts-jest": "^29.1.3",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
+    "vite": "^5.2.12",
     "vue-template-compiler": "~2.7"
   },
   "browserslist": [

src/admin-settings.js

@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import Vue from 'vue'
 import AdminSettings from './components/AdminSettings.vue'
 

src/components/AppNavigation/Settings/SettingsAddressbook.vue

@@ -272,15 +272,15 @@ export default {
 			}
 		},
 		confirmDeletion() {
-			OC.dialogs.confirm(
+			window.OC.dialogs.confirm(
 				t('contacts', 'This will delete the address book and every contacts within it'),
 				t('contacts', 'Delete {addressbook}?', { addressbook: this.addressbook.displayName }),
 				this.deleteAddressbook,
 				true,
 			)
 		},
 		confirmUnshare() {
-			OC.dialogs.confirm(
+			window.OC.dialogs.confirm(
 				t('contacts', 'This will unshare the address book and every contacts within it'),
 				t('contacts', 'Unshare {addressbook}?', { addressbook: this.addressbook.displayName }),
 				this.deleteAddressbook,

src/components/ContactDetails.vue

@@ -48,7 +48,7 @@
 				<!-- org, title -->
 				<template #subtitle>
 					<template v-if="isReadOnly">
 						<span v-html="formattedSubtitle" />
 					</template>
 					<template v-else>
 						<input id="contact-title"
@@ -213,7 +213,7 @@
 						<template #icon>
 							<IconMail :size="20" />
 						</template>
 						<ActionLink v-for="emailAddress in emailAddressList"
 							:key="emailAddress"
 							:href="'mailto:' + emailAddress">
 							<template #icon>
@@ -355,7 +355,7 @@
 import { showError } from '@nextcloud/dialogs'
 
 import { stringify } from 'ical.js'
-import qr from 'qr-image'
+import { getSVG } from '@shortcm/qr-image/lib/svg'
 import mitt from 'mitt'
 import {
 	NcActions as Actions,
@@ -681,7 +681,7 @@
 		},
 
 		enableToggleBirthdayExclusion() {
-			return parseInt(OC.config.version.split('.')[0]) >= 26
+			return parseInt(window.OC.config.version.split('.')[0]) >= 26
 				&& this.localContact?.vCard // Wait until localContact was fetched
 		},
 
@@ -732,7 +732,7 @@
 			return this.contact.addressbook.id === 'z-server-generated--system'
 		},
 		nextcloudVersionAtLeast28() {
-			return parseInt(OC.config.version.split('.')[0]) >= 28
+			return parseInt(window.OC.config.version.split('.')[0]) >= 28
 		},
 	},
 
@@ -788,14 +788,16 @@
 		/**
 		 * Generate a qrcode for the contact
 		 */
-		showQRcode() {
+		async showQRcode() {
 			const jCal = this.contact.jCal.slice(0)
 			// do not encode photo
 			jCal[1] = jCal[1].filter(props => props[0] !== 'photo')
 
 			const data = stringify(jCal)
 			if (data.length > 0) {
-				this.qrcode = btoa(qr.imageSync(data, { type: 'svg' }))
+				const svgBytes = await getSVG(data)
+				const svgString = new TextDecoder().decode(svgBytes)
+				this.qrcode = btoa(svgString)
 			}
 		},
 
@@ -954,7 +956,7 @@
 		/**
 		 *  Update this.localContact and set this.fixed
 		 *
 		 * @param {Contact} contact the contact to clone
 		 */
 		async updateLocalContact(contact) {
 			// create empty contact and copy inner data

src/components/DetailsHeader.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/ContactDetailsLayout';
+@import '../css/ContactDetailsLayout';
 
 $top-padding: 50px;
 

css/Properties/Properties.scss → src/css/Properties/Properties.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-@import '../ContactDetailsLayout.scss';
+@import '../ContactDetailsLayout';
 
 $property-label-max-width: $contact-details-label-max-width;
 $property-value-max-width: $contact-details-value-max-width;
@@ -63,8 +63,8 @@ $property-row-gap: $contact-details-row-gap;
 
 		textarea {
 			// Limit max height to make scrolling the form a bit easier
-			min-height: 2 * $grid-height-unit - 2*$grid-input-margin;
-			max-height: 5 * $grid-height-unit - 2*$grid-input-margin;
+			min-height: 2 * $grid-height-unit - 2 * $grid-input-margin;
+			max-height: 5 * $grid-height-unit - 2 * $grid-input-margin;
 		}
 
 		input,

css/SettingsSection.scss → src/css/SettingsSection.scss

@@ -5,7 +5,7 @@
 
 // contacts settings section
 .app-contacts #app-settings-content {
-    padding-left: 0px !important;
+	padding-left: 0px !important;
 }
 
 #app-settings-content {

src/files-action.js

@@ -2,6 +2,10 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import ConfirmationDialog from './components/ConfirmationDialog.vue'
 
 import { generateUrl } from '@nextcloud/router'
@@ -15,7 +19,7 @@ Vue.prototype.t = t
 
 const mime = 'text/vcard'
 const name = 'contacts-import'
-const nextcloudVersionIsGreaterThanOr28 = parseInt(OC.config.version.split('.')[0]) >= 28
+const nextcloudVersionIsGreaterThanOr28 = parseInt(window.OC.config.version.split('.')[0]) >= 28
 
 if (nextcloudVersionIsGreaterThanOr28) {
 	registerFileAction(new FileAction({
@@ -62,19 +66,19 @@ if (nextcloudVersionIsGreaterThanOr28) {
 	}))
 } else {
 	window.addEventListener('DOMContentLoaded', () => {
-		if (OCA.Files && OCA.Files.fileActions) {
-			OCA.Files.fileActions.registerAction({
+		if (window.OCA.Files && window.OCA.Files.fileActions) {
+			window.OCA.Files.fileActions.registerAction({
 				name,
 				displayName: t('contacts', 'Import'),
 				mime,
-				permissions: OC.PERMISSION_READ,
+				permissions: window.OC.PERMISSION_READ,
 				iconClass: 'icon-contacts-dark',
 				actionHandler(fileName, context) {
 					const absPath = `${context.dir === '/' ? '' : context.dir}/${fileName}`
 					window.location = generateUrl(`/apps/contacts/import?file=${absPath}`)
 				},
 			})
-			OCA.Files.fileActions.setDefault(mime, name)
+			window.OCA.Files.fileActions.setDefault(mime, name)
 			return
 		}
 		console.error('Unable to register vcf import action')

src/main.js

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-/* eslint-disable vue/match-component-file-name */
-import { generateFilePath } from '@nextcloud/router'
-import { getRequestToken } from '@nextcloud/auth'
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import { sync } from 'vuex-router-sync'
 import Vue from 'vue'
 
@@ -19,24 +19,13 @@ import ClickOutside from 'vue-click-outside'
 import { Tooltip as VTooltip } from '@nextcloud/vue'
 
 // Global scss sheets
-import '../css/contacts.scss'
+import './css/contacts.scss'
 
 // Dialogs css
 import '@nextcloud/dialogs/style.css'
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
-
-// Correct the root of the app for chunk loading
-// OC.linkTo matches the apps folders
-// OC.generateUrl ensure the index.php (or not)
-// We do not want the index.php since we're loading files
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('contacts', '', 'js/')
-
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()
 
@@ -52,12 +41,12 @@ Vue.prototype.n = n
 Vue.prototype.appName = appName
 Vue.prototype.appVersion = appVersion
 Vue.prototype.logger = logger
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
+Vue.prototype.OC = window.OC
+Vue.prototype.OCA = window.OCA
 
 // Force redirect if rewrite enabled but accessed through index.php
 if (window.location.pathname.split('/')[1] === 'index.php'
-	&& OC.config.modRewriteWorking) {
+	&& window.OC.config.modRewriteWorking) {
 	router.push({
 		name: 'group',
 		params: { selectedGroup: t('contacts', 'All contacts') },

src/mixins/CircleActionsMixin.js

@@ -53,12 +53,12 @@ export default {
 
 	methods: {
 		confirmLeaveCircle() {
-			OC.dialogs.confirmDestructive(
+			window.OC.dialogs.confirmDestructive(
 				t('contacts', 'You are about to leave {circle}.\nAre you sure?', {
 					circle: this.circle.displayName,
 				}),
 				t('contacts', 'Please confirm team leave'),
-				OC.dialogs.YES_NO_BUTTONS,
+				window.OC.dialogs.YES_NO_BUTTONS,
 				this.leaveCircle,
 				true,
 			)
@@ -110,12 +110,12 @@ export default {
 		},
 
 		confirmDeleteCircle() {
-			OC.dialogs.confirmDestructive(
+			window.OC.dialogs.confirmDestructive(
 				t('contacts', 'You are about to delete {circle}.\nAre you sure?', {
 					circle: this.circle.displayName,
 				}),
 				t('contacts', 'Please confirm team deletion'),
-				OC.dialogs.YES_NO_BUTTONS,
+				window.OC.dialogs.YES_NO_BUTTONS,
 				this.deleteCircle,
 				true,
 			)

src/services/cdav.js

@@ -26,7 +26,7 @@ function xhrProvider() {
 		}
 		return result
 	}
-	OC.registerXHRForErrorProcessing(xhr)
+	window.OC.registerXHRForErrorProcessing(xhr)
 	return xhr
 }
 

src/services/collaborationAutocompletion.js

@@ -10,7 +10,7 @@ import { SHARES_TYPES_MEMBER_MAP } from '../models/constants.ts'
 
 // generate allowed shareType from SHARES_TYPES_MEMBER_MAP
 const shareType = Object.keys(SHARES_TYPES_MEMBER_MAP)
-const maxAutocompleteResults = parseInt(OC.config['sharing.maxAutocompleteResults'], 10) || 25
+const maxAutocompleteResults = parseInt(window.OC.config['sharing.maxAutocompleteResults'], 10) || 25
 
 /**
  * Get suggestions
@@ -107,7 +107,7 @@ const formatResults = function(result) {
 		label: result.label,
 		id: `${type}-${result.value.shareWith}`,
 		// If this is a user, set as user for avatar display by UserBubble
-		user: [OC.Share.SHARE_TYPE_USER, OC.Share.SHARE_TYPE_REMOTE].indexOf(result.value.shareType) > -1
+		user: [window.OC.Share.SHARE_TYPE_USER, window.OC.Share.SHARE_TYPE_REMOTE].indexOf(result.value.shareType) > -1
 			? result.value.shareWith
 			: null,
 		type,

templates/settings/admin.php

@@ -4,6 +4,10 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+// TODO: uncomment once there are custom styles in the admin settings entrypoint
+// style('contacts', 'contacts-index');
+// style('contacts', 'contacts-admin-settings');
 script('contacts', 'contacts-admin-settings');
 ?>
 

vite.config.js

@@ -0,0 +1,15 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import path from 'path'
+import { createAppConfig } from '@nextcloud/vite-config'
+
+export default createAppConfig({
+	'main': path.join(__dirname, 'src', 'main.js'),
+	'files-action': path.join(__dirname, 'src', 'files-action.js'),
+	'admin-settings': path.join(__dirname, 'src', 'admin-settings.js'),
+}, {
+	inlineCSS: false,
+})