Migrate to babel config and updgrade webpack-vue-config

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
 	extends: [
-		'@nextcloud'
+		'@nextcloud',
 	],
 	rules: {
 		'valid-jsdoc': ['off'],
-	}
+	},
 }

babel.config.js

@@ -1,11 +1,3 @@
-module.exports = {
+const babelConfig = require('@nextcloud/babel-config')
-	plugins: ['@babel/plugin-syntax-dynamic-import'],
+
-	presets: [
+module.exports = babelConfig
-		[
-			'@babel/preset-env',
-			{
-				modules: false
-			}
-		]
-	]
-}

lib/AppInfo/Application.php

@@ -207,7 +207,7 @@ class Application extends App implements IBootstrap {
 				// Talk integration has its own entrypoint which already includes collections handling
 				return;
 			}
-			Util::addScript('deck', 'collections');
+			Util::addScript('deck', 'deck-collections');
 		});
 	}
 }

lib/Dashboard/DeckWidget.php

@@ -79,6 +79,6 @@ class DeckWidget implements IWidget {
 	 * @inheritDoc
 	 */
 	public function load(): void {
-		\OCP\Util::addScript('deck', 'dashboard');
+		\OCP\Util::addScript('deck', 'deck-dashboard');
 	}
 }

lib/Listeners/BeforeTemplateRenderedListener.php

@@ -51,11 +51,11 @@ class BeforeTemplateRenderedListener implements IEventListener {
 
 		$pathInfo = $this->request->getPathInfo();
 		if (strpos($pathInfo, '/apps/calendar') === 0) {
-			Util::addScript('deck', 'calendar');
+			Util::addScript('deck', 'deck-calendar');
 		}
 
 		if (strpos($pathInfo, '/call/') === 0 || strpos($pathInfo, '/apps/spreed') === 0) {
-			Util::addScript('deck', 'talk');
+			Util::addScript('deck', 'deck-talk');
 		}
 	}
 }

package.json

@@ -69,12 +69,14 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.13.15",
+		"@babel/eslint-parser": "^7.13.14",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/preset-env": "^7.13.15",
+		"@nextcloud/babel-config": "^1.0.0-beta.1",
 		"@nextcloud/browserslist-config": "^2.1.0",
-		"@nextcloud/eslint-config": "^2.2.0",
+		"@nextcloud/eslint-config": "^5.0.0",
-		"@nextcloud/eslint-plugin": "^1.5.0",
+		"@nextcloud/eslint-plugin": "^2.0.0",
-		"@nextcloud/webpack-vue-config": "^1.4.1",
+		"@nextcloud/webpack-vue-config": "^4.0.3",
 		"@relative-ci/agent": "^1.5.0",
 		"@vue/test-utils": "^1.1.4",
 		"acorn": "^8.1.1",
@@ -82,23 +84,25 @@
 		"babel-jest": "^26.6.3",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^4.3.0",
-		"eslint": "^6.8.0",
+		"eslint": "^7.25.0",
-		"eslint-config-standard": "^14.1.1",
+		"eslint-config-standard": "^16.0.2",
 		"eslint-friendly-formatter": "^4.0.1",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.3.1",
 		"eslint-plugin-standard": "^4.1.0",
-		"eslint-plugin-vue": "^6.2.2",
+		"eslint-plugin-vue": "^7.9.0",
+		"eslint-webpack-plugin": "^2.5.4",
 		"file-loader": "^6.2.0",
 		"jest": "^26.6.3",
 		"jest-serializer-vue": "^2.0.2",
 		"minimist": "^1.2.5",
-		"node-sass": "^4.14.1",
+		"node-polyfill-webpack-plugin": "^1.1.0",
 		"raw-loader": "^4.0.2",
+		"sass": "^1.32.11",
 		"sass-loader": "^10.1.1",
-		"style-loader": "^1.3.0",
+		"style-loader": "^2.0.0",
 		"stylelint": "^13.12.0",
 		"stylelint-config-recommended": "^4.0.0",
 		"stylelint-config-recommended-scss": "^4.2.0",
@@ -108,8 +112,8 @@
 		"vue-jest": "^3.0.7",
 		"vue-loader": "^15.9.6",
 		"vue-template-compiler": "^2.6.12",
-		"webpack": "^4.46.0",
+		"webpack": "^5.35.1",
-		"webpack-cli": "^3.3.12",
+		"webpack-cli": "^4.6.0",
 		"webpack-dev-server": "^3.11.2",
 		"webpack-merge": "^5.7.3"
 	},

templates/main.php

@@ -23,6 +23,6 @@
 
 
 style('deck', 'globalstyles');
-script('deck', 'main');
+script('deck', 'deck-main');
 
 \OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');

webpack.js

@@ -1,33 +1,20 @@
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const path = require('path')
-const { merge } = require('webpack-merge')
 
-const config = {
+webpackConfig.entry = {
-	entry: {
+	...webpackConfig.entry,
-		collections: path.join(__dirname, 'src', 'init-collections.js'),
+	collections: path.join(__dirname, 'src', 'init-collections.js'),
-		dashboard: path.join(__dirname, 'src', 'init-dashboard.js'),
+	dashboard: path.join(__dirname, 'src', 'init-dashboard.js'),
-		calendar: path.join(__dirname, 'src', 'init-calendar.js'),
+	calendar: path.join(__dirname, 'src', 'init-calendar.js'),
-		talk: path.join(__dirname, 'src', 'init-talk.js'),
+	talk: path.join(__dirname, 'src', 'init-talk.js'),
-	},
-	output: {
-		filename: '[name].js',
-		jsonpFunction: 'webpackJsonpOCADeck',
-		chunkFilename: '[name].js?v=[contenthash]',
-	},
-	resolve: {
-		extensions: ['*', '.js', '.vue', '.json'],
-		modules: [
-			path.resolve(__dirname, 'node_modules'),
-			'node_modules',
-		],
-	},
-	stats: {
-		context: path.resolve(__dirname, 'src'),
-		assets: true,
-		entrypoints: true,
-		chunks: true,
-		modules: true
-	}
 }
 
-module.exports = merge(webpackConfig, config)
+webpackConfig.stats = {
+	context: path.resolve(__dirname, 'src'),
+	assets: true,
+	entrypoints: true,
+	chunks: true,
+	modules: true,
+}
+
+module.exports = webpackConfig