feat(desktop): prepare webpack config for desktop

- Define IS_DESKTOP global variable
- Separate the config to common and web parts
- Use cross-platform slashes on webpack rules' tests

Signed-off-by: Grigorii Shartsev <grigorii.shartsev@nextcloud.com>

6 files changed, 164 insertions, 81 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index cbbf4a6d2..bd58df109 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,13 @@ module.exports = {
 	extends: [
 		'@nextcloud',
 	],
+	globals: {
+		// @nextcloud/webpack-vue-config globals
+		appName: 'readonly',
+		appVersion: 'readonly',
+		// Desktop build globals
+		IS_DESKTOP: 'readonly',
+	},
 	rules: {
 		'import/newline-after-import': 1,
 		'import/order': [
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 000000000..9d0d3e6da
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,33 @@
+/*
+ * @copyright Copyright (c) 2023 Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ *
+ * @author Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+declare global {
+	// @nextcloud/webpack-vue-config build globals
+	const appName: string
+	const appVersion: string
+
+	/**
+	 * Build constant to divide build for web app and desktop client
+	 */
+	const IS_DESKTOP: false
+}
+
+export {}
diff --git a/src/main.js b/src/main.js
index 372fce1df..6fee9587a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,16 +52,18 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
 // eslint-disable-next-line
 import 'leaflet-defaulticon-compatibility'
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
-
-// Correct the root of the app for chunk loading
-// OC.linkTo matches the apps folders
-// OC.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__ = generateFilePath('spreed', '', 'js/')
+if (!IS_DESKTOP) {
+	// CSP config for webpack dynamic chunk loading
+	// eslint-disable-next-line
+	__webpack_nonce__ = btoa(getRequestToken())
+
+	// Correct the root of the app for chunk loading
+	// OC.linkTo matches the apps folders
+	// OC.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__ = generateFilePath('spreed', '', 'js/')
+}
 
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
diff --git a/src/test-setup.js b/src/test-setup.js
index ab00d4496..9b28877df 100644
--- a/src/test-setup.js
+++ b/src/test-setup.js
@@ -77,6 +77,7 @@ global.OCP = {
 		disableKeyboardShortcuts: () => false,
 	},
 }
+global.IS_DESKTOP = false
 
 // Work around missing "URL.createObjectURL" (which is used in the code but not
 // relevant for the tests) in jsdom: https://github.com/jsdom/jsdom/issues/1721
diff --git a/webpack.common.config.js b/webpack.common.config.js
new file mode 100644
index 000000000..3a34b0ced
--- /dev/null
+++ b/webpack.common.config.js
@@ -0,0 +1,82 @@
+/*
+ * @copyright Copyright (c) 2022 Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ *
+ * @author Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+
+const nextcloudWebpackRules = require('@nextcloud/webpack-vue-config/rules')
+
+// Edit JS rule
+nextcloudWebpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
+	'@nextcloud/event-bus',
+	'ansi-regex',
+	'color.js',
+	'fast-xml-parser',
+	'hot-patcher',
+	'nextcloud-vue-collections',
+	'semver',
+	'strip-ansi',
+	'tributejs',
+	'vue-resize',
+	'webdav',
+])
+
+module.exports = {
+	module: {
+		rules: [
+			// Reuse @nextcloud/webpack-vue-config/rules
+			...Object.values(nextcloudWebpackRules),
+
+			{
+				/**
+				 * webrtc-adapter main module does no longer provide
+				 * "module.exports", which is expected by some elements using it
+				 * (like "attachmediastream"), so it needs to be added back with
+				 * a plugin.
+				 */
+				test: /node_modules[\\/]webrtc-adapter[\\/].*\.js$/,
+				loader: 'babel-loader',
+				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' }],
+					],
+				},
+			},
+			{
+				test: /\.wasm$/i,
+				type: 'asset/resource',
+			},
+			{
+				test: /\.tflite$/i,
+				type: 'asset/resource',
+			},
+			{
+				test: /\.worker\.js$/,
+				use: { loader: 'worker-loader' },
+			},
+		],
+	},
+}
diff --git a/webpack.config.js b/webpack.config.js
index 648efa4b7..1a60631d6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,82 +1,40 @@
-const path = require('path')
-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 path = require('node:path')
 
-webpackConfig.entry = {
-	'admin-settings': path.join(__dirname, 'src', 'mainAdminSettings.js'),
-	collections: path.join(__dirname, 'src', 'collections.js'),
-	main: path.join(__dirname, 'src', 'main.js'),
-	recording: path.join(__dirname, 'src', 'mainRecording.js'),
-	'files-sidebar': [
-		path.join(__dirname, 'src', 'mainFilesSidebar.js'),
-		path.join(__dirname, 'src', 'mainFilesSidebarLoader.js'),
-	],
-	'public-share-auth-sidebar': path.join(__dirname, 'src', 'mainPublicShareAuthSidebar.js'),
-	'public-share-sidebar': path.join(__dirname, 'src', 'mainPublicShareSidebar.js'),
-	flow: path.join(__dirname, 'src', 'flow.js'),
-	dashboard: path.join(__dirname, 'src', 'dashboard.js'),
-	deck: path.join(__dirname, 'src', 'deck.js'),
-	maps: path.join(__dirname, 'src', 'maps.js'),
-}
+const webpack = require('webpack')
+const { merge } = require('webpack-merge')
 
-webpackConfig.output.assetModuleFilename = '[name][ext]?v=[contenthash]'
+const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
 
-// Edit JS rule
-webpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
-	'@nextcloud/event-bus',
-	'ansi-regex',
-	'color.js',
-	'fast-xml-parser',
-	'hot-patcher',
-	'nextcloud-vue-collections',
-	'semver',
-	'strip-ansi',
-	'tributejs',
-	'vue-resize',
-	'webdav',
-])
+const commonWebpackConfig = require('./webpack.common.config.js')
 
-// Replaces rules array
-webpackConfig.module.rules = Object.values(webpackRules)
+// Rules from @nextcloud/webpack-vue-config/rules already added by commonWebpackConfig
+nextcloudWebpackConfig.module.rules = []
 
-webpackConfig.module.rules.push({
-	/**
-	 * webrtc-adapter main module does no longer provide
-	 * "module.exports", which is expected by some elements using it
-	 * (like "attachmediastream"), so it needs to be added back with
-	 * a plugin.
-	 */
-	test: /node_modules\/webrtc-adapter\/.*\.js$/,
-	loader: 'babel-loader',
-	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' }],
+module.exports = merge(nextcloudWebpackConfig, commonWebpackConfig, {
+	entry: {
+		'admin-settings': path.join(__dirname, 'src', 'mainAdminSettings.js'),
+		collections: path.join(__dirname, 'src', 'collections.js'),
+		main: path.join(__dirname, 'src', 'main.js'),
+		recording: path.join(__dirname, 'src', 'mainRecording.js'),
+		'files-sidebar': [
+			path.join(__dirname, 'src', 'mainFilesSidebar.js'),
+			path.join(__dirname, 'src', 'mainFilesSidebarLoader.js'),
 		],
+		'public-share-auth-sidebar': path.join(__dirname, 'src', 'mainPublicShareAuthSidebar.js'),
+		'public-share-sidebar': path.join(__dirname, 'src', 'mainPublicShareSidebar.js'),
+		flow: path.join(__dirname, 'src', 'flow.js'),
+		dashboard: path.join(__dirname, 'src', 'dashboard.js'),
+		deck: path.join(__dirname, 'src', 'deck.js'),
+		maps: path.join(__dirname, 'src', 'maps.js'),
 	},
-})
 
-webpackConfig.module.rules.push({
-	test: /\.wasm$/i,
-	type: 'asset/resource',
-})
+	output: {
+		assetModuleFilename: '[name][ext]?v=[contenthash]',
+	},
 
-webpackConfig.module.rules.push({
-	test: /\.tflite$/i,
-	type: 'asset/resource',
-})
+	plugins: [
+		new webpack.DefinePlugin({ IS_DESKTOP: false }),
+	],
 
-webpackConfig.module.rules.push({
-	test: /\.worker\.js$/,
-	use: { loader: 'worker-loader' },
+	cache: true,
 })
-
-webpackConfig.cache = true
-
-module.exports = webpackConfig