Merge pull request #10055 from nextcloud/chore/esbuild

danxuliu · web-flow · commit bd997d34a2cb · 2023-08-18T18:31:31.000+02:00
Migrate to ESBuild in Webpack
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "@vue/test-utils": "^1.3.6",
     "@vue/vue2-jest": "^29.2.5",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
-    "babel-plugin-add-module-exports": "^1.0.4",
+    "esbuild-loader": "^3.0.1",
     "flush-promises": "^1.0.2",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
diff --git a/src/__mocks__/attachmediastream.js b/src/__mocks__/attachmediastream.js
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import attachMediaStream from 'attachmediastream'
+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 
diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import attachMediaStream from 'attachmediastream'
+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -95,7 +95,7 @@
 </template>
 
 <script>
-import attachMediaStream from 'attachmediastream'
+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 
diff --git a/src/mixins/devices.js b/src/mixins/devices.js
@@ -20,7 +20,7 @@
  *
  */
 
-import attachMediaStream from 'attachmediastream'
+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'
 import hark from 'hark'
 
 import TrackToStream from '../utils/media/pipeline/TrackToStream.js'
diff --git a/src/utils/media/effects/virtual-background/index.js b/src/utils/media/effects/virtual-background/index.js
@@ -1,4 +1,4 @@
-// @flow
+import * as wasmCheck from 'wasm-check'
 
 import JitsiStreamBackgroundEffect from './JitsiStreamBackgroundEffect.js'
 import createTFLiteSIMDModule from './vendor/tflite/tflite-simd.js'
@@ -29,14 +29,11 @@ export async function createVirtualBackgroundEffect(virtualBackground, dispatch)
 		throw new Error('JitsiStreamBackgroundEffect not supported!')
 	}
 	let tflite
-	let wasmCheck
 
 	// Checks if WebAssembly feature is supported or enabled by/in the browser.
 	// Conditional import of wasm-check package is done to prevent
 	// the browser from crashing when the user opens the app.
-
 	try {
-		wasmCheck = require('wasm-check')
 		if (wasmCheck?.feature?.simd) {
 			tflite = await createTFLiteSIMDModule()
 		} else {
diff --git a/src/utils/media/pipeline/VirtualBackground.js b/src/utils/media/pipeline/VirtualBackground.js
@@ -21,6 +21,8 @@
  *
  */
 
+import * as wasmCheck from 'wasm-check'
+
 import { VIRTUAL_BACKGROUND } from '../../../constants.js'
 import JitsiStreamBackgroundEffect from '../effects/virtual-background/JitsiStreamBackgroundEffect.js'
 import TrackSinkSource from './TrackSinkSource.js'
@@ -72,8 +74,6 @@ export default class VirtualBackground extends TrackSinkSource {
 	}
 
 	static _checkWasmSupport() {
-		const wasmCheck = require('wasm-check')
-
 		if (!wasmCheck.support()) {
 			this._wasmSupported = false
 
diff --git a/src/utils/webrtc/models/CallParticipantModel.js b/src/utils/webrtc/models/CallParticipantModel.js
@@ -19,7 +19,7 @@
  *
  */
 
-import attachMediaStream from 'attachmediastream'
+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'
 
 import EmitterMixin from '../../EmitterMixin.js'
 
diff --git a/src/utils/webrtc/simplewebrtc/getscreenmedia.js b/src/utils/webrtc/simplewebrtc/getscreenmedia.js
@@ -1,4 +1,4 @@
-/* global module, chrome */
+/* global chrome */
 
 // getScreenMedia helper by @HenrikJoreteg
 const getUserMedia = function(constraints, callback) {
@@ -23,7 +23,13 @@ const getUserMedia = function(constraints, callback) {
 // cache for constraints and callback
 const cache = {}
 
-module.exports = function(mode, constraints, cb) {
+/**
+ *
+ * @param mode
+ * @param constraints
+ * @param cb
+ */
+export default function(mode, constraints, cb) {
 	const hasConstraints = arguments.length === 3
 	const callback = hasConstraints ? cb : constraints
 	let error
diff --git a/src/utils/webrtc/simplewebrtc/localmedia.js b/src/utils/webrtc/simplewebrtc/localmedia.js
@@ -1,26 +1,24 @@
-/* global module */
+import util from 'util'
 
-const util = require('util')
-
-const mockconsole = require('mockconsole')
-const WildEmitter = require('wildemitter')
+import mockconsole from 'mockconsole'
+import WildEmitter from 'wildemitter'
 
 // Only mediaDevicesManager is used, but it can not be assigned here due to not
 // being initialized yet.
-const BlackVideoEnforcer = require('../../media/pipeline/BlackVideoEnforcer.js').default
-const MediaDevicesSource = require('../../media/pipeline/MediaDevicesSource.js').default
-const SpeakingMonitor = require('../../media/pipeline/SpeakingMonitor.js').default
-const TrackConstrainer = require('../../media/pipeline/TrackConstrainer.js').default
-const TrackEnabler = require('../../media/pipeline/TrackEnabler.js').default
-const TrackToStream = require('../../media/pipeline/TrackToStream.js').default
-const VirtualBackground = require('../../media/pipeline/VirtualBackground.js').default
-const webrtcIndex = require('../index.js')
-const getScreenMedia = require('./getscreenmedia.js')
+import BlackVideoEnforcer from '../../media/pipeline/BlackVideoEnforcer.js'
+import MediaDevicesSource from '../../media/pipeline/MediaDevicesSource.js'
+import SpeakingMonitor from '../../media/pipeline/SpeakingMonitor.js'
+import TrackConstrainer from '../../media/pipeline/TrackConstrainer.js'
+import TrackEnabler from '../../media/pipeline/TrackEnabler.js'
+import TrackToStream from '../../media/pipeline/TrackToStream.js'
+import VirtualBackground from '../../media/pipeline/VirtualBackground.js'
+import { mediaDevicesManager } from '../index.js'
+import getScreenMedia from './getscreenmedia.js'
 
 /**
  * @param {object} opts the options object.
  */
-function LocalMedia(opts) {
+export default function LocalMedia(opts) {
 	WildEmitter.call(this)
 
 	const config = this.config = {
@@ -45,7 +43,7 @@ function LocalMedia(opts) {
 	this.sentStreams = []
 	this.localScreens = []
 
-	if (!webrtcIndex.mediaDevicesManager.isSupported()) {
+	if (!mediaDevicesManager.isSupported()) {
 		this._logerror('Your browser does not support local media capture.')
 	}
 
@@ -164,7 +162,7 @@ LocalMedia.prototype.start = function(mediaConstraints, cb, context) {
 		return
 	}
 
-	if (!webrtcIndex.mediaDevicesManager.isSupported()) {
+	if (!mediaDevicesManager.isSupported()) {
 		const error = new Error('MediaStreamError')
 		error.name = 'NotSupportedError'
 
@@ -511,5 +509,3 @@ Object.defineProperty(LocalMedia.prototype, 'localScreen', {
 		return this.localScreens.length > 0 ? this.localScreens[0] : null
 	},
 })
-
-module.exports = LocalMedia
diff --git a/src/utils/webrtc/simplewebrtc/peer.js b/src/utils/webrtc/simplewebrtc/peer.js
@@ -1,10 +1,8 @@
-/* global module */
+import util from 'util'
 
-const util = require('util')
-
-const adapter = require('webrtc-adapter')
-const webrtcSupport = require('webrtcsupport')
-const WildEmitter = require('wildemitter')
+import adapter from 'webrtc-adapter'
+import webrtcSupport from 'webrtcsupport'
+import WildEmitter from 'wildemitter'
 
 /**
  * @param {object} stream the stream object.
@@ -953,4 +951,4 @@ Peer.prototype.handleDataChannelAdded = function(event) {
 	this._observeDataChannel(channel)
 }
 
-module.exports = Peer
+export default Peer
diff --git a/src/utils/webrtc/simplewebrtc/simplewebrtc.js b/src/utils/webrtc/simplewebrtc/simplewebrtc.js
@@ -1,15 +1,13 @@
-/* global module */
+import mockconsole from 'mockconsole'
+import webrtcSupport from 'webrtcsupport'
+import WildEmitter from 'wildemitter'
 
-const mockconsole = require('mockconsole')
-const webrtcSupport = require('webrtcsupport')
-const WildEmitter = require('wildemitter')
-
-const WebRTC = require('./webrtc.js')
+import WebRTC from './webrtc.js'
 
 /**
  * @param {object} opts the options object.
  */
-function SimpleWebRTC(opts) {
+export default function SimpleWebRTC(opts) {
 	const self = this
 	const options = opts || {}
 	const config = this.config = {
@@ -294,5 +292,3 @@ SimpleWebRTC.prototype.stopScreenShare = function() {
 		}
 	})
 }
-
-module.exports = SimpleWebRTC
diff --git a/src/utils/webrtc/simplewebrtc/webrtc.js b/src/utils/webrtc/simplewebrtc/webrtc.js
@@ -1,17 +1,15 @@
-/* global module */
+import util from 'util'
 
-const util = require('util')
+import mockconsole from 'mockconsole'
+import webrtcSupport from 'webrtcsupport'
 
-const mockconsole = require('mockconsole')
-const webrtcSupport = require('webrtcsupport')
-
-const localMedia = require('./localmedia.js')
-const Peer = require('./peer.js')
+import localMedia from './localmedia.js'
+import Peer from './peer.js'
 
 /**
  * @param {object} opts the options object.
  */
-function WebRTC(opts) {
+export default function WebRTC(opts) {
 	const self = this
 	const options = opts || {}
 	this.config = {
@@ -132,5 +130,3 @@ WebRTC.prototype.sendDirectlyToAll = function(channel, message, payload) {
 		}
 	})
 }
-
-module.exports = WebRTC
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"include": ["./src/**/*.ts"],
+	"exclude": ["node_modules", "vendor"],
+	"compilerOptions": {
+		"outDir": "./js",
+		"allowJs": true,
+		"module": "CommonJS",
+		"moduleResolution": "bundler",
+		"verbatimModuleSyntax": true,
+		"target": "ES2020",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+	}
+}
diff --git a/webpack.common.config.js b/webpack.common.config.js
@@ -1,9 +1,9 @@
 /*
- * @copyright Copyright (c) 2022 Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ * @copyright Copyright (c) 2022 Grigorii Shartsev <me@shgk.me>
  *
- * @author Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
+ * @author Grigorii Shartsev <me@shgk.me>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -20,48 +20,47 @@
  */
 
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const { mergeWithRules } = require('webpack-merge')
 
 const nextcloudWebpackRules = require('@nextcloud/webpack-vue-config/rules')
 
-// Edit JS rule
-nextcloudWebpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
-	'@nextcloud/event-bus',
-	'ansi-regex',
-	'fast-xml-parser',
-	'hot-patcher',
-	'nextcloud-vue-collections',
-	'semver',
-	'strip-ansi',
-	'tributejs',
-	'webdav',
-])
-
-module.exports = {
+// Replace rules with the same modules
+module.exports = mergeWithRules({
+	module: {
+		rules: {
+			test: 'match',
+			loader: 'replace',
+			options: 'replace',
+		},
+	},
+})({
+	module: {
+		// Reuse @nextcloud/webpack-vue-config/rules
+		rules: Object.values(nextcloudWebpackRules),
+	},
+},
+{
 	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',
+				test: /\.js$/,
+				loader: 'esbuild-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' }],
-					],
+					// Implicitly set as JS loader for only JS parts of Vue SFCs will be transpiled
+					loader: 'js',
+					target: 'es2020',
 				},
+				exclude: BabelLoaderExcludeNodeModulesExcept([
+					'@nextcloud/event-bus',
+					'ansi-regex',
+					'fast-xml-parser',
+					'hot-patcher',
+					'nextcloud-vue-collections',
+					'semver',
+					'strip-ansi',
+					'tributejs',
+					'webdav',
+				]),
 			},
 			{
 				test: /\.wasm$/i,
@@ -77,4 +76,4 @@ module.exports = {
 			},
 		],
 	},
-}
+})
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`*`
`21`	`21`	`*/`
`22`	`22`
`23`		`-import attachMediaStream from 'attachmediastream'`
	`23`	`+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'`
`24`	`24`	`import hark from 'hark'`
`25`	`25`
`26`	`26`	`import TrackToStream from '../utils/media/pipeline/TrackToStream.js'`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@`
`21`	`21`	`*`
`22`	`22`	`*/`
`23`	`23`
	`24`	`+import * as wasmCheck from 'wasm-check'`
	`25`	`+`
`24`	`26`	`import { VIRTUAL_BACKGROUND } from '../../../constants.js'`
`25`	`27`	`import JitsiStreamBackgroundEffect from '../effects/virtual-background/JitsiStreamBackgroundEffect.js'`
`26`	`28`	`import TrackSinkSource from './TrackSinkSource.js'`
`@@ -72,8 +74,6 @@ export default class VirtualBackground extends TrackSinkSource {`
`72`	`74`	`}`
`73`	`75`
`74`	`76`	`static _checkWasmSupport() {`
`75`		`- const wasmCheck = require('wasm-check')`
`76`		`-`
`77`	`77`	`if (!wasmCheck.support()) {`
`78`	`78`	`this._wasmSupported = false`
`79`	`79`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`*`
`20`	`20`	`*/`
`21`	`21`
`22`		`-import attachMediaStream from 'attachmediastream'`
	`22`	`+import attachMediaStream from 'attachmediastream/attachmediastream.bundle.js'`
`23`	`23`
`24`	`24`	`import EmitterMixin from '../../EmitterMixin.js'`
`25`	`25`