Merge pull request #829 from nextcloud/enh/webpack5

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: [
+		'add-module-exports',
 		'@babel/plugin-syntax-dynamic-import',
 		['@babel/plugin-proposal-class-properties', { loose: true }],
 	],
@@ -9,6 +10,7 @@ module.exports = {
 			{
 				corejs: 3,
 				useBuiltIns: 'entry',
+				modules: 'commonjs',
 			},
 		],
 	],

package.json

@@ -25,7 +25,7 @@
   "license": "agpl",
   "private": true,
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.js",
+    "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",
     "lint": "eslint --ext .js,.vue src",
@@ -43,6 +43,7 @@
     "@nextcloud/paths": "^1.1.2",
     "@nextcloud/router": "^1.2.0",
     "@nextcloud/vue": "^3.7.2",
+    "@skjnldsv/vue-plyr": "^7.0.1-alpha.0",
     "camelcase": "^6.2.0",
     "core-js": "^3.9.1",
     "debounce": "^1.2.1",
@@ -51,22 +52,22 @@
     "regenerator-runtime": "^0.13.7",
     "vue": "^2.6.12",
     "vue-async-computed": "^3.9.0",
-    "vue-plyr": "^7.0.0",
     "webdav": "^3.6.1"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
   "devDependencies": {
     "@babel/core": "^7.13.13",
+    "@babel/eslint-parser": "^7.13.10",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.13.12",
     "@cypress/browserify-preprocessor": "^3.0.1",
     "@nextcloud/browserslist-config": "^2.1.0",
-    "@nextcloud/eslint-config": "^3.0.0",
+    "@nextcloud/eslint-config": "^5.0.0",
     "@nextcloud/eslint-plugin": "^2.0.0",
-    "@nextcloud/webpack-vue-config": "^2.0.0",
+    "@nextcloud/webpack-vue-config": "^4.0.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-loader-exclude-node-modules-except": "^1.1.2",
@@ -86,7 +87,8 @@
     "eslint-webpack-plugin": "^2.5.3",
     "file-loader": "^6.2.0",
     "jest": "^26.6.3",
-    "node-sass": "^5.0.0",
+    "node-polyfill-webpack-plugin": "^1.1.0",
+    "sass": "^1.32.8",
     "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "stylelint": "^13.12.0",
@@ -97,8 +99,8 @@
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
     "wait-on": "^5.3.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
     "webpack-merge": "^5.7.3"
   }
 }

src/components/Audios.vue

@@ -49,8 +49,8 @@
 
 <script>
 import Vue from 'vue'
-import VuePlyr from 'vue-plyr'
-import 'vue-plyr/dist/vue-plyr.css'
+import VuePlyr from '@skjnldsv/vue-plyr'
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 
 Vue.use(VuePlyr)
 

src/components/Videos.vue

@@ -56,8 +56,8 @@
 
 <script>
 import Vue from 'vue'
-import VuePlyr from 'vue-plyr'
-import 'vue-plyr/dist/vue-plyr.css'
+import VuePlyr from '@skjnldsv/vue-plyr'
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')

src/views/Viewer.vue

@@ -145,41 +145,43 @@ export default {
 
 	mixins: [isMobile, isFullscreen],
 
-	data: () => ({
-		// Reactivity bindings
-		Viewer: OCA.Viewer.state,
-		Sidebar: null,
-		handlers: OCA.Viewer.availableHandlers,
-
-		// Viewer variables
-		components: {},
-		mimeGroups: {},
-		registeredHandlers: [],
-
-		// Files variables
-		currentIndex: 0,
-		previousFile: {},
-		currentFile: {},
-		nextFile: {},
-		fileList: [],
-
-		// States
-		isLoaded: false,
-		initiated: false,
-
-		// cancellable requests
-		cancelRequestFile: () => {},
-		cancelRequestFolder: () => {},
-
-		// Flags
-		sidebarWidth: 0,
-		isSidebarShown: false,
-		canSwipe: true,
-		isStandalone: !(OCA && OCA.Files && 'fileActions' in OCA.Files),
-		isTesting,
-
-		root: getRootPath(),
-	}),
+	data() {
+		return {
+			// Reactivity bindings
+			Viewer: OCA.Viewer.state,
+			Sidebar: null,
+			handlers: OCA.Viewer.availableHandlers,
+
+			// Viewer variables
+			components: {},
+			mimeGroups: {},
+			registeredHandlers: [],
+
+			// Files variables
+			currentIndex: 0,
+			previousFile: {},
+			currentFile: {},
+			nextFile: {},
+			fileList: [],
+
+			// States
+			isLoaded: false,
+			initiated: false,
+
+			// cancellable requests
+			cancelRequestFile: () => {},
+			cancelRequestFolder: () => {},
+
+			// Flags
+			sidebarWidth: 0,
+			isSidebarShown: false,
+			canSwipe: true,
+			isStandalone: !(OCA && OCA.Files && 'fileActions' in OCA.Files),
+			isTesting,
+
+			root: getRootPath(),
+		}
+	},
 
 	computed: {
 		hasPrevious() {
@@ -696,7 +698,7 @@ export default {
 			// Open the sidebar sharing tab
 			// TODO: also hide figure, needs a proper method for it in server Sidebar
 			await OCA.Files.Sidebar.open(this.currentFile.filename)
-			setTimeout(this.showAppsSidebar, 50) // we have to wait the animation of the sidebar
+			setTimeout(this.showAppsSidebar, 100) // we have to wait the animation of the sidebar
 		},
 
 		showAppsSidebar() {

webpack.js

@@ -1,8 +1,10 @@
 const fs = require('fs')
 const path = require('path')
-const { merge } = require('webpack-merge')
 const webpack = require('webpack')
+
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const webpackRules = require('@nextcloud/webpack-vue-config/rules')
+
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 
 const isTesting = !!process.env.TESTING
@@ -12,51 +14,29 @@ if (isTesting) {
 	console.debug('TESTING MODE ENABLED')
 }
 
-const config = {
-	module: {
-		rules: [
-			{
-				// vue-plyr uses .mjs file
-				test: /\.m?js$/,
-				loader: 'babel-loader',
-				exclude: BabelLoaderExcludeNodeModulesExcept([
-					'@nextcloud/dialogs',
-					'@nextcloud/event-bus',
-					'camelcase',
-					'fast-xml-parser',
-					'hot-patcher',
-					'semver',
-					'vue-plyr',
-					'webdav',
-					'toastify-js',
-				]),
-				options: {
-					plugins: ['add-module-exports'],
-					presets: [
-						/**
-						 * From "add-module-exports" documentation:
-						 * "webpack doesn't perform commonjs transformation for
-						 * codesplitting. Need to set commonjs conversion."
-						 */
-						['@babel/env', { modules: 'commonjs' }],
-					],
-				},
-			},
-		],
-	},
-	plugins: [
-		new webpack.DefinePlugin({
-			isTesting,
-			PLYR_ICONS: JSON.stringify(plyrIcons),
-		}),
-	],
-}
+// vue-plyr uses .mjs file
+webpackRules.RULE_JS.test = /\.m?js$/
+webpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
+	'@nextcloud/dialogs',
+	'@nextcloud/event-bus',
+	'camelcase',
+	'fast-xml-parser',
+	'hot-patcher',
+	'semver',
+	'vue-plyr',
+	'webdav',
+	'toastify-js',
+])
 
-const mergedConfigs = merge(config, webpackConfig)
+// Replaces rules array
+webpackConfig.module.rules = Object.values(webpackRules)
 
-// Remove default js rule
-const jsRuleIndex = mergedConfigs.module.rules.findIndex(rule => rule.test.toString() === '/\\.js$/')
-mergedConfigs.module.rules.splice(jsRuleIndex, 1)
+// Add custom plugins
+webpackConfig.plugins.push(...[
+	new webpack.DefinePlugin({
+		isTesting,
+		PLYR_ICONS: JSON.stringify(plyrIcons),
+	}),
+])
 
-// Merge rules by replacing existing tests
-module.exports = mergedConfigs
+module.exports = webpackConfig