perf: bundle with vite

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

.gitignore

@@ -81,6 +81,7 @@ composer.phar
 
 build/
 js/
+/css
 node_modules/
 src/fonts
 *.clover

lib/Listener/CalendarReferenceListener.php

@@ -36,7 +36,7 @@ class CalendarReferenceListener implements IEventListener {
 
 	/** @var IConfig */
 	private $config;
-	
+
 	/** @var CompareVersion */
 	private $compareVersion;
 
@@ -109,5 +109,6 @@ public function handle(Event $event): void {
 		$this->initialStateService->provideInitialState('publicCalendars', $publicCalendars);
 
 		Util::addScript(Application::APP_ID, 'calendar-reference');
+		Util::addStyle(Application::APP_ID, 'calendar-style');
 	}
 }

package.json

@@ -23,14 +23,15 @@
   "homepage": "https://github.com/nextcloud/calendar",
   "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,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
-    "stylelint": "stylelint src css",
-    "stylelint:fix": "stylelint src css --fix",
+    "stylelint": "stylelint src",
+    "stylelint:fix": "stylelint src --fix",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"
@@ -62,7 +63,6 @@
     "autosize": "^6.0.1",
     "color-convert": "^2.0.1",
     "color-string": "^1.9.1",
-    "core-js": "^3.37.1",
     "css-color-names": "^1.0.1",
     "debounce": "^2.1.0",
     "jstz": "^2.1.1",
@@ -91,20 +91,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.4.0",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@nextcloud/vite-config": "^1.2.5",
     "@vue/test-utils": "^2.4.5",
     "@vue/vue2-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
-    "babel-loader-exclude-node-modules-except": "^1.2.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-serializer-vue": "^3.1.0",
-    "resolve-url-loader": "^5.0.0",
+    "vite": "^5.3.1",
     "vue-template-compiler": "^2.7.16"
   },
   "optionalDependencies": {

src/appointments/main-booking.js

@@ -3,25 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getRequestToken } from '@nextcloud/auth'
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import { loadState } from '@nextcloud/initial-state'
-import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import Booking from '../views/Appointments/Booking.vue'
 
-// 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__ = linkTo('calendar', 'js/')
-
 Vue.prototype.$t = translate
 Vue.prototype.$n = translatePlural
 

src/appointments/main-confirmation.js

@@ -3,25 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getRequestToken } from '@nextcloud/auth'
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import { loadState } from '@nextcloud/initial-state'
-import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import Confirmation from '../views/Appointments/Confirmation.vue'
 
-// 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__ = linkTo('calendar', 'js/')
-
 Vue.prototype.$t = translate
 Vue.prototype.$n = translatePlural
 

src/appointments/main-conflict.js

@@ -3,25 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getRequestToken } from '@nextcloud/auth'
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import { loadState } from '@nextcloud/initial-state'
-import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import Conflict from '../views/Appointments/Conflict.vue'
 
-// 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__ = linkTo('calendar', 'js/')
-
 Vue.prototype.$t = translate
 Vue.prototype.$n = translatePlural
 

src/appointments/main-overview.js

@@ -3,25 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getRequestToken } from '@nextcloud/auth'
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import { loadState } from '@nextcloud/initial-state'
-import { linkTo } from '@nextcloud/router'
 import Vue from 'vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import Overview from '../views/Appointments/Overview.vue'
 
-// 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__ = linkTo('calendar', 'js/')
-
 const configs = loadState('calendar', 'appointmentConfigs')
 const userInfo = loadState('calendar', 'userInfo')
 

src/components/AppNavigation/Settings/ShortcutOverview.vue

@@ -18,8 +18,9 @@
 				class="shortcut-section-item">
 				<span class="shortcut-section-item__keys">
 					<template v-for="(keyCombination, index2) of shortcut.keys">
-						<template v-for="(key, index3) in keyCombination">
-							<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
+						<template v-for="(key, index3) in keyCombination"
+							:key="`${category.categoryId}-${index}-${index2}-${index3}`">
+							<kbd>{{ key }}</kbd>
 							<span v-if="index3 !== (keyCombination.length - 1)"
 								:key="`${category.categoryId}-${index}-${index2}-${index3}`"
 								class="shortcut-section-item__spacer">

src/main.js

@@ -2,17 +2,19 @@
  * SPDX-FileCopyrightText: 2019 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 'core-js/stable/index.js'
 
-import '../css/calendar.scss'
+import './css/calendar.scss'
 
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router.js'
 import store from './store/index.js'
 import { sync } from 'vuex-router-sync'
-import { getRequestToken } from '@nextcloud/auth'
-import { linkTo } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import AppointmentConfig from './models/appointmentConfig.js'
@@ -31,17 +33,6 @@ Vue.directive('ClickOutside', ClickOutside)
 Vue.use(VTooltip)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea'] })
 
-// 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__ = linkTo('calendar', 'js/')
-
 sync(store, router)
 
 Vue.prototype.$t = translate

src/reference.js

@@ -2,14 +2,13 @@
  * SPDX-FileCopyrightText: 2024 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 { registerWidget, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
-import { linkTo } from '@nextcloud/router'
-import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
-import '../css/calendar.scss'
-
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
-__webpack_public_path__ = linkTo('calendar', 'js/') // eslint-disable-line
+import './css/calendar.scss'
 
 registerWidget('calendar_widget', async (el, { richObjectType, richObject, accessible, interactive }) => {
 	const { default: Vue } = await import('vue')

templates/appointments/booking-conflict.php

@@ -6,6 +6,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 script(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-appointments-conflict');
+style(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-style');
 
 ?>
 

templates/appointments/booking.php

@@ -8,6 +8,7 @@
  */
 
 script(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-appointments-booking');
+style(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-style');
 
 ?>
 

templates/appointments/confirmation.php

@@ -6,6 +6,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 script(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-appointments-confirmation');
+style(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-style');
 
 ?>
 

templates/appointments/index.php

@@ -8,6 +8,7 @@
  */
 
 script(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-appointments-overview');
+style(\OCA\Calendar\AppInfo\Application::APP_ID, 'calendar-style');
 
 ?>
 

templates/main.php

@@ -4,3 +4,4 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 script('calendar', 'calendar-main');
+style('calendar', 'calendar-style');

vite.config.js

@@ -0,0 +1,25 @@
+/**
+ * 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'),
+	dashboard: path.join(__dirname, 'src', 'dashboard.js'),
+	reference: path.join(__dirname, 'src', 'reference.js'),
+	'appointments-booking': path.join(__dirname, 'src', 'appointments/main-booking.js'),
+	'appointments-confirmation': path.join(__dirname, 'src', 'appointments/main-confirmation.js'),
+	'appointments-conflict': path.join(__dirname, 'src', 'appointments/main-conflict.js'),
+	'appointments-overview': path.join(__dirname, 'src', 'appointments/main-overview.js'),
+}, {
+	// Move all css to a single chunk (calendar-style.css)
+	inlineCSS: false,
+	config: {
+		build: {
+			cssCodeSplit: false,
+		},
+	},
+})