feat: Migrate to build the frontend using vite

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+	"extends": [
+		"@nextcloud"
+	],
+	"globals": {
+		"__dirname": "readonly"
+	}
+}

.gitignore

@@ -1,3 +1,4 @@
+css/
 js/
 node_modules/
 

lib/Settings/Admin.php

@@ -65,6 +65,10 @@ public function getForm() {
 				'newUserGenerateUserID' => $this->config->isGenerateUserId(),
 			]
 		);
+
+		\OCP\Util::addScript(Application::APP_ID, 'ldap_write_suppport-admin-settings');
+		\OCP\Util::addStyle(Application::APP_ID, 'ldap_write_suppport-admin-settings');
+
 		return new TemplateResponse(Application::APP_ID, 'settings-admin');
 	}
 

package.json

@@ -5,9 +5,10 @@
   "private": true,
   "author": "Arthur Schiwon",
   "license": "AGPL-3.0",
+  "type": "module",
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --config webpack.js",
-    "dev": "NODE_ENV=development webpack --config webpack.js",
+    "build": "vite --mode production build",
+    "dev": "vite --mode development build",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
     "stylelint": "stylelint src css",
@@ -20,22 +21,20 @@
     "esversion": 6
   },
   "dependencies": {
-    "@nextcloud/dialogs": "^4.2.5",
+    "@nextcloud/dialogs": "^5.2.0",
     "@nextcloud/initial-state": "^2.1.0",
-    "@nextcloud/vue": "^8.6.2",
+    "@nextcloud/vue": "^8.9.1",
     "vue": "^2.7.16"
   },
   "engines": {
     "node": "^20.0.0",
     "npm": "^10.0.0"
   },
   "devDependencies": {
-    "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.4.0",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
-    "file-loader": "^6.2.0",
-    "url-loader": "^4.1.1"
+    "@nextcloud/vite-config": "^1.2.2",
+    "vite": "^5.1.5"
   }
 }

src/components/AdminSettings.vue

@@ -61,7 +61,7 @@ import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js
 import { showError } from '@nextcloud/dialogs'
 import i10n from '../mixins/i10n.js'
 
-import '@nextcloud/dialogs/dist/index.css'
+import '@nextcloud/dialogs/style.css'
 
 export default {
 	name: 'AdminSettings',

src/main-settings.js

@@ -19,11 +19,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
 import { loadState } from '@nextcloud/initial-state'
+import Vue from 'vue'
 
 import AdminSettings from './components/AdminSettings.vue'
 
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 const View = Vue.extend(AdminSettings)
 const AppID = 'ldap_write_support'
 

templates/settings-admin.php

@@ -21,10 +21,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
-use OCA\LdapWriteSupport\AppInfo\Application;
-
-script(Application::APP_ID, 'ldap_write_suppport-admin-settings');
 ?>
 <div id="ldap-write-support-admin-settings">
 </div>

vite.config.js

@@ -0,0 +1,6 @@
+import { createAppConfig } from '@nextcloud/vite-config'
+import { join } from 'node:path'
+
+export default createAppConfig({
+	'admin-settings': join(__dirname, 'src/main-settings.js'),
+})