switch to vite

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

package.json

@@ -6,10 +6,11 @@
 	"directories": {
 		"test": "tests"
 	},
+	"type": "module",
 	"scripts": {
-		"build": "NODE_ENV=production webpack --progress --config webpack.js",
-		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"build": "NODE_ENV=production vite --mode production build",
+		"dev": "NODE_ENV=development vite --mode development build",
+		"watch": "NODE_ENV=development vite --mode development build --watch",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
@@ -32,8 +33,8 @@
 		"extends @nextcloud/browserslist-config"
 	],
 	"engines": {
-		"node": "^16 || ^17 || ^18 || ^19 || ^20",
-		"npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
+		"node": "^20",
+		"npm": "^10"
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.1.1",
@@ -81,8 +82,10 @@
 		"@nextcloud/browserslist-config": "^3.0.0",
 		"@nextcloud/eslint-config": "^8.0.0",
 		"@nextcloud/stylelint-config": "^3.0.1",
-		"@nextcloud/webpack-vue-config": "^6.0.0",
+		"@nextcloud/vite-config": "^1.4.2",
 		"eslint-webpack-plugin": "^4.0.0",
-		"stylelint-webpack-plugin": "^5.0.0"
+		"stylelint-webpack-plugin": "^5.0.0",
+		"vite-plugin-eslint": "^1.8.1",
+		"vite-plugin-stylelint": "^5.3.1"
 	}
 }

src/adminSettings.js

@@ -9,16 +9,10 @@
  * @copyright Julien Veyssier 2022
  */
 
-import { linkTo } from '@nextcloud/router'
-import { getRequestToken } from '@nextcloud/auth'
-
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
-__webpack_public_path__ = linkTo('gpxpod', 'js/') // eslint-disable-line
-
 document.addEventListener('DOMContentLoaded', async (event) => {
-	const { default: Vue } = await import(/* webpackChunkName: "admin-settings-lazy" */'vue')
+	const { default: Vue } = await import('vue')
 	Vue.mixin({ methods: { t, n } })
-	const { default: AdminSettings } = await import(/* webpackChunkName: "admin-settings-lazy" */'./components/AdminSettings.vue')
+	const { default: AdminSettings } = await import('./components/AdminSettings.vue')
 	const View = Vue.extend(AdminSettings)
 	new View().$mount('#gpxpod_prefs')
 })

src/components/Navigation.vue

@@ -44,13 +44,6 @@
 		<template #footer>
 			<div id="app-settings">
 				<div id="app-settings-header">
-					<NcAppNavigationItem v-if="!isPublicPage"
-						:name="t('gpxpod', 'Old interface')"
-						:href="oldInterfaceUrl">
-						<template #icon>
-							<RewindIcon class="icon" :size="20" />
-						</template>
-					</NcAppNavigationItem>
 					<NcAppNavigationItem
 						:name="t('gpxpod', 'GpxPod settings')"
 						@click="showSettings">
@@ -69,7 +62,6 @@
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
-import RewindIcon from 'vue-material-design-icons/Rewind.vue'
 
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
@@ -80,7 +72,6 @@ import NavigationDirectoryItem from './NavigationDirectoryItem.vue'
 import { getFilePickerBuilder, FilePickerType } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { dirname } from '@nextcloud/paths'
-import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'Navigation',
@@ -92,7 +83,6 @@ export default {
 		NcActionButton,
 		PlusIcon,
 		CogIcon,
-		RewindIcon,
 	},
 
 	inject: ['isPublicPage'],
@@ -120,7 +110,6 @@ export default {
 		return {
 			addMenuOpen: false,
 			lastBrowsePath: null,
-			oldInterfaceUrl: generateUrl('/apps/gpxpod/old-ui'),
 		}
 	},
 

src/components/map/MaplibreMap.vue

@@ -722,9 +722,11 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-@import '~maplibre-gl/dist/maplibre-gl.css';
+<style lang="scss">
+@import 'maplibre-gl/dist/maplibre-gl.css';
+</style>
 
+<style scoped lang="scss">
 .map-wrapper {
 	position: relative;
 	width: 100%;

src/filesPlugin.js

@@ -12,7 +12,7 @@ import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import { registerFileAction, Permission, FileType, FileAction, DefaultType } from '@nextcloud/files'
 // import MapMarkerOutline from '@mdi/svg/svg/map-marker-outline.svg?raw'
-import GpxPodIcon from '../img/app_black.svg'
+import GpxPodIcon from '../img/app_black.svg?raw'
 
 const state = loadState('gpxpod', 'gpxpod-files', {})
 if (!OCA.GpxPod) {

src/vueGpxComparison.js

@@ -1,12 +1,8 @@
 import Vue from 'vue'
 import ComparisonContent from './ComparisonContent.vue'
-import './bootstrap.js'
 import '../css/maplibre.scss'
-import { getRequestToken } from '@nextcloud/auth'
-import { generateFilePath } from '@nextcloud/router'
 
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
-__webpack_public_path__ = generateFilePath('gpxpod', '', 'js/') // eslint-disable-line
+Vue.mixin({ methods: { t, n } })
 
 const View = Vue.extend(ComparisonContent)
 new View().$mount('#content')

src/vueGpxpod.js

@@ -1,18 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
-import './bootstrap.js'
 import '../css/maplibre.scss'
 import '@nextcloud/dialogs/style.css'
-import { getRequestToken } from '@nextcloud/auth'
-import { generateFilePath } from '@nextcloud/router'
 
 import VueClipboard from 'vue-clipboard2'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 Vue.directive('tooltip', Tooltip)
 Vue.use(VueClipboard)
-
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
-__webpack_public_path__ = generateFilePath('gpxpod', '', 'js/') // eslint-disable-line
+Vue.mixin({ methods: { t, n } })
 
 const View = Vue.extend(App)
 new View().$mount('#content')

vite.config.ts

@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { createAppConfig } from '@nextcloud/vite-config'
+import eslint from 'vite-plugin-eslint'
+import stylelint from 'vite-plugin-stylelint'
+
+console.error('process.env.NODE_ENV', process.env.NODE_ENV)
+const isProduction = process.env.NODE_ENV === 'production'
+
+export default createAppConfig({
+	vueGpxpod: 'src/vueGpxpod.js',
+	vueGpxComparison: 'src/vueGpxComparison.js',
+	filesPlugin: 'src/filesPlugin.js',
+	adminSettings: 'src/adminSettings.js',
+	// gpxpod: 'src/gpxpod.js',
+	// gpxvcomp: 'src/gpxvcomp.js'
+}, {
+	config: {
+		css: {
+			modules: {
+				localsConvention: 'camelCase',
+			},
+		},
+		//plugins: [eslint(), stylelint()],
+	},
+	inlineCSS: { relativeCSSInjection: true },
+	minify: isProduction,
+})