chore(vite): Migrate from webpack to vite

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

.gitignore

@@ -253,3 +253,6 @@ coverage
 .phpunit.result.cache
 
 .php_cs.cache
+
+css/*
+!css/tasks-icon.css

Makefile

@@ -88,15 +88,8 @@ update-composer: composer.phar
 # Removes the build directory and the compiled files
 .PHONY: clean
 clean:
-	rm -f ./js/tasks-main.js
-	rm -f ./js/tasks-main.js.map
-	rm -f ./js/tasks-main.js.LICENSE.txt
-	rm -f ./js/tasks-dashboard.js
-	rm -f ./js/tasks-dashboard.js.map
-	rm -f ./js/tasks-dashboard.js.LICENSE.txt
-	rm -f ./js/tasks-talk.js
-	rm -f ./js/tasks-talk.js.map
-	rm -f ./js/tasks-talk.js.LICENSE.txt
+	rm -rf ./js/*
+	ls -d ./css/* | grep -P '^((?!tasks-icon.css).)*$$' | xargs -r -d'\n' rm
 	rm -rf $(build_directory)
 
 # Same as clean but also removes dependencies installed by npm
@@ -115,7 +108,7 @@ appstore: clean build-js-production
 	--exclude=/.babelrc.js \
 	--exclude=/.codecov.yml \
 	--exclude=/.editorconfig \
-	--exclude=/.eslintrc.js \
+	--exclude=/.eslintrc.cjs \
 	--exclude=/.gitattributes \
 	--exclude=/.gitignore \
 	--exclude=/.phpunit.result.cache \
@@ -129,7 +122,7 @@ appstore: clean build-js-production
 	--exclude=/.travis.yml \
 	--exclude=/.tx \
 	--exclude=/.v8flags*.json \
-	--exclude=/babel.config.js \
+	--exclude=/babel.config.cjs \
 	--exclude=/build.xml \
 	--exclude=/clover.integration.xml \
 	--exclude=/clover.unit.xml \
@@ -146,7 +139,7 @@ appstore: clean build-js-production
 	--exclude=/phpunit.integration.xml \
 	--exclude=/README.md \
 	--exclude=/stylelint.config.js \
-	--exclude=/webpack.config.js \
+	--exclude=/vite.config.mjs \
 	--exclude=/build \
 	--exclude=/coverage \
 	--exclude=/img/src \

img/color_picker.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="15" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-		<path d="m91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727c-1.959-1.959-5.134-1.959-7.093 0s-1.959 5.134 0 7.093l3.727 3.727-41.51 41.508c-2.039 2.039-3.149 4.656-3.329 7.324-0.073 1.087-0.347 3.105-0.675 5.292-0.053 0.359-0.212 0.706-0.487 0.983l-3.105 3.106c-0.994 0.994-0.994 2.606 0 3.6l3.493 3.493c0.994 0.994 2.606 0.994 3.6 0l3.106-3.105c0.277-0.275 0.622-0.433 0.981-0.486 2.187-0.329 4.205-0.602 5.293-0.675 2.668-0.18 5.285-1.29 7.325-3.33l41.508-41.508 3.727 3.727c1.959 1.959 5.134 1.959 7.093 0s1.959-5.134 0-7.093l-12.365-12.366 9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726 1e-3 -16.2zm-26.594 34.394-20.53 20.53c-0.994 0.994-2.606 0.994-3.6 0l-3.27-3.27c-0.994-0.993-2.605-0.993-3.599 1e-3l-0.616 0.616-2e-3 -2e-3 -14.728 14.727c-0.337 0.337-0.819 0.401-1.076 0.143s-0.194-0.74 0.143-1.076l23.841-23.841 4e-3 4e-3 15.633-15.633c0.994-0.994 2.606-0.994 3.6 0l4.2 4.201c0.994 0.994 0.994 2.606 0 3.6z" fill="#fff"/>
-</svg>

lib/Dashboard/TasksWidget.php

@@ -68,7 +68,7 @@ class TasksWidget implements IWidget {
 	 * @inheritDoc
 	 */
 	public function getIconClass(): string {
-		return 'app-icon-tasks';
+		return 'icon-tasks';
 	}
 
 	/**
@@ -83,5 +83,9 @@ class TasksWidget implements IWidget {
 	 */
 	public function load(): void {
 		\OCP\Util::addScript('tasks', 'tasks-dashboard');
+		\OCP\Util::addStyle('tasks', 'tasks-dashboard');
+		\OCP\Util::addStyle('tasks', 'tasks-store');
+		\OCP\Util::addStyle('tasks', 'tasks-icon');
+		\OCP\Util::addStyle('tasks', 'tasks-TaskCreateDialog');
 	}
 }

lib/Listeners/BeforeTemplateRenderedListener.php

@@ -52,7 +52,9 @@ class BeforeTemplateRenderedListener implements IEventListener {
 		$pathInfo = $this->request->getPathInfo();
 		if (strpos($pathInfo, '/call/') === 0 || strpos($pathInfo, '/apps/spreed') === 0) {
 			Util::addScript('tasks', 'tasks-talk');
-			Util::addStyle('tasks', 'tasks-talk');
+			Util::addStyle('tasks', 'tasks-icon');
+			Util::addStyle('tasks', 'tasks-store');
+			Util::addStyle('tasks', 'tasks-TaskCreateDialog');
 		}
 	}
 }

package.json

@@ -10,9 +10,9 @@
   "private": true,
   "homepage": "https://github.com/nextcloud/tasks",
   "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 tests",
     "lint:fix": "eslint --ext .js,.vue src tests --fix",
     "stylelint": "stylelint 'css/**/*.scss'",
@@ -23,6 +23,7 @@
     "type": "git",
     "url": "git@github.com:nextcloud/tasks.git"
   },
+	"type": "module",
   "bugs": "https://github.com/nextcloud/tasks/issues",
   "contributors": [],
   "dependencies": {
@@ -63,7 +64,7 @@
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.3.1",
-    "@nextcloud/webpack-vue-config": "^6.0.0",
+    "@nextcloud/vite-config": "^1.1.0",
     "@vue/test-utils": "^1.3.6",
     "@vue/vue2-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",

src/components/AppNavigation/Colorpicker.vue

@@ -41,6 +41,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<label v-if="supportsColorPicker"
 				:style="{'background-color': selectedColor}"
 				class="color-selector">
+				<Eyedropper class="color-selector__icon" />
 				<input :value="selectedColor"
 					type="color"
 					class="color-selector__input"
@@ -51,8 +52,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import Eyedropper from 'vue-material-design-icons/Eyedropper.vue'
+
 export default {
 	name: 'Colorpicker',
+	components: {
+		Eyedropper,
+	},
 	props: {
 		selectedColor: {
 			type: String,
@@ -194,9 +200,6 @@ export default {
 			display: block;
 			height: 24px;
 			width: calc(100% / 9) !important;
-			background-image: url('../../../img/color_picker.svg');
-			background-repeat: no-repeat;
-			background-position: center center;
 
 			&__input {
 				visibility: hidden;

src/css/dashboard.scss

@@ -1,4 +0,0 @@
-.app-icon-tasks {
-	background-image: url(./../../img/tasks-dark.svg);
-	filter: var(--background-invert-if-dark);
-}

src/dashboard.js

@@ -25,10 +25,6 @@
 import Dashboard from './views/Dashboard.vue'
 import store from './store/store.js'
 
-import './css/dashboard.scss'
-
-import { generateFilePath } from '@nextcloud/router'
-import { getRequestToken } from '@nextcloud/auth'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import Vue from 'vue'
@@ -36,12 +32,6 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
-
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('tasks', '', 'js/')
-
 Vue.prototype.t = t
 Vue.prototype.n = n
 Vue.prototype.$OC = OC

src/main.js

@@ -25,8 +25,6 @@ import App from './App.vue'
 import router from './router.js'
 import store from './store/store.js'
 
-import { linkTo } from '@nextcloud/router'
-
 import AlertBoxOutline from 'vue-material-design-icons/AlertBoxOutline.vue'
 import CalendarRemove from 'vue-material-design-icons/CalendarRemove.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
@@ -45,17 +43,6 @@ import { sync } from 'vuex-router-sync'
 Vue.config.devtools = true
 Vue.config.performance = true
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(OC.requestToken)
-
-// Correct the root of the app for chunk loading
-// linkTo matches the apps folders
-// 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('tasks', 'js/')
-
 sync(store, router)
 
 /**

src/talk.js

@@ -31,18 +31,11 @@
 import TaskCreateDialog from './components/TaskCreateDialog.vue'
 import { buildSelector } from './helpers/selector.js'
 
-import { getRequestToken } from '@nextcloud/auth'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import { generateUrl, generateFilePath } from '@nextcloud/router'
+import { generateUrl } from '@nextcloud/router'
 
 import Vue from 'vue'
 
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
-
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('tasks', '', 'js/')
-
 Vue.prototype.t = t
 Vue.prototype.n = n
 Vue.prototype.$OC = OC

src/views/AppSidebar.vue

@@ -906,7 +906,7 @@ export default {
 <style lang="scss" scoped>
 .app-sidebar :deep(.app-sidebar-header__description) {
 	flex-wrap: wrap;
-	margin: 0;
+	margin: 0 !important;
 }
 
 .app-sidebar  :deep(.app-sidebar-tabs) {
@@ -914,6 +914,6 @@ export default {
 }
 
 .app-sidebar__tab {
-	padding: 0;
+	padding: 0 !important;
 }
 </style>

templates/main.php

@@ -1,3 +1,4 @@
 <?php
 
 script('tasks', 'tasks-main');
+style('tasks', 'tasks-main');

tests/assets/loadAsset.js

@@ -22,7 +22,7 @@
  *
  */
 
-const fs = require('fs')
+import fs from 'fs'
 
 /**
  * global helper function to load an ics asset by name

vite.config.mjs

@@ -0,0 +1,7 @@
+import { createAppConfig } from '@nextcloud/vite-config'
+
+export default createAppConfig({
+	main: 'src/main.js',
+	dashboard: 'src/dashboard.js',
+	talk: 'src/talk.js',
+})

webpack.config.js

@@ -1,21 +0,0 @@
-const webpackConfig = require('@nextcloud/webpack-vue-config')
-const path = require('path')
-const webpack = require('webpack')
-
-webpackConfig.entry = {
-	...webpackConfig.entry,
-	dashboard: path.join(__dirname, 'src', 'dashboard.js'),
-	talk: path.join(__dirname, 'src', 'talk.js'),
-}
-
-webpackConfig.plugins.push(
-	new webpack.ProvidePlugin({
-		// Shim ICAL to prevent using the global object (window.ICAL).
-		// The library ical.js heavily depends on instanceof checks which will
-		// break if two separate versions of the library are used (e.g. bundled one
-		// and global one).
-		ICAL: 'ical.js',
-	}),
-)
-
-module.exports = webpackConfig