fix: support umd web workers loading

lib/web/JsonpChunkLoadingRuntimeModule.js

@@ -69,7 +69,7 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
 		if (options && options.baseUri) {
 			return `${RuntimeGlobals.baseURI} = ${JSON.stringify(options.baseUri)};`;
 		}
-		return `${RuntimeGlobals.baseURI} = document.baseURI || self.location.href;`;
+		return `${RuntimeGlobals.baseURI} = (document && document.baseURI) || self.location.href;`;
 	}
 
 	/**

test/configCases/css/universal/index.js

@@ -3,14 +3,21 @@ import * as styles from "./style.modules.css";
 
 it("should work", done => {
 	expect(pureStyle).toEqual({});
-	const style = getComputedStyle(document.body);
+
-	expect(style.getPropertyValue("background")).toBe(" red");
+	if (typeof document !== "undefined") {
+		const style = getComputedStyle(document.body);
+		expect(style.getPropertyValue("background")).toBe(" red");
+	}
+
   expect(styles.foo).toBe('_style_modules_css-foo');
 
 	import(/* webpackPrefetch: true */ "./style2.css").then(x => {
 		expect(x).toEqual({});
-		const style = getComputedStyle(document.body);
+
-		expect(style.getPropertyValue("color")).toBe(" blue");
+		if (typeof document !== "undefined") {
+			const style = getComputedStyle(document.body);
+			expect(style.getPropertyValue("color")).toBe(" blue");
+		}
 
 		import(/* webpackPrefetch: true */ "./style2.modules.css").then(x => {
 		  expect(x.bar).toBe("_style2_modules_css-bar");

test/configCases/css/universal/test.config.js

@@ -1,10 +1,16 @@
 "use strict";
 
 module.exports = {
-	moduleScope(scope) {
+	moduleScope(scope, options) {
-		const link = scope.window.document.createElement("link");
+		if (options.name.includes("node")) {
-		link.rel = "stylesheet";
+			delete scope.window;
-		link.href = "bundle0.css";
+			delete scope.document;
-		scope.window.document.head.appendChild(link);
+			delete scope.self;
+		} else {
+			const link = scope.window.document.createElement("link");
+			link.rel = "stylesheet";
+			link.href = "bundle0.css";
+			scope.window.document.head.appendChild(link);
+		}
 	}
 };

test/configCases/css/universal/webpack.config.js

@@ -1,11 +1,25 @@
 "use strict";
 
-/** @type {import("../../../../").Configuration} */
+/** @type {import("../../../../").Configuration[]} */
-module.exports = {
+module.exports = [
-	target: ["web", "node"],
+	{
-	mode: "development",
+		name: "web",
-	experiments: {
+		target: ["web", "node"],
-		css: true,
+		devtool: false,
-		outputModule: true
+		mode: "development",
+		experiments: {
+			css: true,
+			outputModule: true
+		}
+	},
+	{
+		name: "node",
+		target: ["web", "node"],
+		devtool: false,
+		mode: "development",
+		experiments: {
+			css: true,
+			outputModule: true
+		}
 	}
-};
+];

test/configCases/target/universal/test.config.js

@@ -1,6 +1,13 @@
 "use strict";
 
 module.exports = {
+	moduleScope(scope, options) {
+		if (options.name.includes("node")) {
+			delete scope.window;
+			delete scope.document;
+			delete scope.self;
+		}
+	},
 	findBundle() {
 		return ["./runtime.mjs", "./separate.mjs", "./main.mjs"];
 	}

test/configCases/target/universal/webpack.config.js

@@ -1,32 +1,65 @@
 "use strict";
 
-/** @type {import("../../../../").Configuration} */
+/** @type {import("../../../../").Configuration[]} */
-module.exports = {
+module.exports = [
-	output: {
+	{
-		filename: "[name].mjs",
+		name: "web",
-		library: {
+		output: {
-			type: "module"
+			filename: "[name].mjs",
-		}
+			library: {
-	},
+				type: "module"
-	target: ["web", "node"],
+			}
-	experiments: {
+		},
-		outputModule: true
+		target: ["web", "node"],
-	},
+		experiments: {
-	optimization: {
+			outputModule: true
-		minimize: true,
+		},
-		runtimeChunk: "single",
+		optimization: {
-		splitChunks: {
+			minimize: true,
-			cacheGroups: {
+			runtimeChunk: "single",
-				separate: {
+			splitChunks: {
-					test: /separate/,
+				cacheGroups: {
-					chunks: "all",
+					separate: {
-					filename: "separate.mjs",
+						test: /separate/,
-					enforce: true
+						chunks: "all",
+						filename: "separate.mjs",
+						enforce: true
+					}
 				}
 			}
+		},
+		externals: {
+			"external-self": "./main.mjs"
 		}
 	},
-	externals: {
+	{
-		"external-self": "./main.mjs"
+		name: "node",
+		output: {
+			filename: "[name].mjs",
+			library: {
+				type: "module"
+			}
+		},
+		target: ["web", "node"],
+		experiments: {
+			outputModule: true
+		},
+		optimization: {
+			minimize: true,
+			runtimeChunk: "single",
+			splitChunks: {
+				cacheGroups: {
+					separate: {
+						test: /separate/,
+						chunks: "all",
+						filename: "separate.mjs",
+						enforce: true
+					}
+				}
+			}
+		},
+		externals: {
+			"external-self": "./main.mjs"
+		}
 	}
-};
+];

test/configCases/wasm/universal/webpack.config.js

@@ -1,27 +1,7 @@
 "use strict";
 
-/** @type {import("../../../../").Configuration} */
+/** @type {import("../../../../").Configuration[]} */
 module.exports = [
-	{
-		name: "node",
-		target: ["web", "node"],
-		module: {
-			rules: [
-				{
-					test: /\.wat$/,
-					loader: "wast-loader",
-					type: "webassembly/async"
-				}
-			]
-		},
-		output: {
-			webassemblyModuleFilename: "[id].[hash].wasm"
-		},
-		experiments: {
-			outputModule: true,
-			asyncWebAssembly: true
-		}
-	},
 	{
 		name: "web",
 		target: ["web", "node"],
@@ -41,5 +21,25 @@ module.exports = [
 			outputModule: true,
 			asyncWebAssembly: true
 		}
+	},
+	{
+		name: "node",
+		target: ["web", "node"],
+		module: {
+			rules: [
+				{
+					test: /\.wat$/,
+					loader: "wast-loader",
+					type: "webassembly/async"
+				}
+			]
+		},
+		output: {
+			webassemblyModuleFilename: "[id].[hash].wasm"
+		},
+		experiments: {
+			outputModule: true,
+			asyncWebAssembly: true
+		}
 	}
 ];

test/configCases/worker/umd-worker/index.js

@@ -0,0 +1,5 @@
+import * as lib from "library";
+
+it("should work", () => {
+	expect(lib.value).toBe("data: OK, thanks")
+});

test/configCases/worker/umd-worker/library.js

@@ -0,0 +1,18 @@
+let value;
+
+it("should allow to create a WebWorker", async () => {
+	const worker = new Worker(new URL("./worker.js", import.meta.url), {
+		type: "module"
+	});
+	worker.postMessage("ok");
+	const result = await new Promise(resolve => {
+		worker.onmessage = event => {
+			value = event.data;
+			resolve(event.data);
+		};
+	});
+	expect(result).toBe("data: OK, thanks");
+	await worker.terminate();
+});
+
+export { value }

test/configCases/worker/umd-worker/module.js

@@ -0,0 +1,3 @@
+export function upper(str) {
+	return str.toUpperCase();
+}

test/configCases/worker/umd-worker/test.config.js

@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+	moduleScope(scope) {
+		delete scope.document.baseURI;
+	}
+};

test/configCases/worker/umd-worker/test.filter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const supportsWorker = require("../../../helpers/supportsWorker");
+
+module.exports = () => supportsWorker();

test/configCases/worker/umd-worker/webpack.config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+const path = require("path");
+
+/** @type {(env: Env, options: TestOptions) => import("../../../../").Configuration[]} */
+module.exports = (env, { testPath }) => [
+	{
+		name: "library",
+		entry: "./library.js",
+		target: "web",
+		output: {
+			library: {
+				name: "library",
+				type: "umd"
+			}
+		}
+	},
+	{
+		name: "build",
+		dependencies: ["library"],
+		entry: "./index.js",
+		target: "web",
+		resolve: {
+			alias: {
+				library: path.resolve(testPath, "./bundle0.js")
+			}
+		}
+	}
+];

test/configCases/worker/umd-worker/worker.js

@@ -0,0 +1,7 @@
+export function upper(str) {
+	return str.toUpperCase();
+}
+
+self.onmessage = async event => {
+	postMessage(`data: ${upper(event.data)}, thanks`);
+};

test/configCases/worker/universal/test.config.js

@@ -3,10 +3,9 @@
 module.exports = {
 	moduleScope(scope, options) {
 		if (options.name.includes("node")) {
-			delete scope.Worker;
+			delete scope.window;
+			delete scope.document;
+			delete scope.self;
 		}
-	},
-	findBundle() {
-		return ["web-main.mjs"];
 	}
 };

test/configCases/worker/universal/webpack.config.js

@@ -1,13 +1,17 @@
 "use strict";
 
-/** @type {import("../../../../").Configuration} */
+/** @type {import("../../../../").Configuration[]} */
 module.exports = [
 	{
 		name: "web",
 		target: ["web", "node"],
-		output: {
+		experiments: {
-			filename: "web-[name].mjs"
+			outputModule: true
-		},
+		}
+	},
+	{
+		name: "node",
+		target: ["web", "node"],
 		experiments: {
 			outputModule: true
 		}