feat: add worker support

packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap

@@ -65,6 +65,19 @@ exports[`angular configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -333,6 +346,19 @@ exports[`angular configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap

@@ -82,6 +82,19 @@ exports[`base configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -338,6 +351,19 @@ exports[`base configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap

@@ -82,6 +82,19 @@ exports[`javascript configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -359,6 +372,19 @@ exports[`javascript configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap

@@ -97,6 +97,19 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -370,6 +383,19 @@ exports[`react configuration > android > base config 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -643,6 +669,19 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -917,6 +956,19 @@ exports[`react configuration > ios > base config 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap

@@ -84,6 +84,19 @@ exports[`svelte configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -365,6 +378,19 @@ exports[`svelte configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap

@@ -82,6 +82,19 @@ exports[`typescript configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -359,6 +372,19 @@ exports[`typescript configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -88,6 +88,19 @@ exports[`vue configuration for android 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
@@ -376,6 +389,19 @@ exports[`vue configuration for ios 1`] = `
           }
         ]
       },
+      /* config.module.rule('workers') */
+      {
+        test: /\\\\.(js|ts)$/,
+        exclude: [
+          /node_modules/
+        ],
+        use: [
+          /* config.module.rule('workers').use('nativescript-worker-loader') */
+          {
+            loader: 'nativescript-worker-loader'
+          }
+        ]
+      },
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,

packages/webpack5/src/configuration/base.ts

@@ -182,6 +182,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			},
 		});
 
+	config.module
+		.rule('workers')
+		.test(/\.(js|ts)$/)
+		.exclude.add(/node_modules/)
+		.end()
+		.use('nativescript-worker-loader')
+		.loader('nativescript-worker-loader')
+
 	// default PostCSS options to use
 	// projects can change settings
 	// via postcss.config.js

packages/webpack5/src/loaders/nativescript-worker-loader/index.ts

@@ -0,0 +1,57 @@
+const WorkerDependency = require('webpack/lib/dependencies/WorkerDependency');
+const RuntimeGlobals = require("webpack/lib/RuntimeGlobals");
+
+/**
+ * Patch WorkerDependency to change:
+ *
+ * new Worker(new URL(workerPath, baseUrl))
+ *            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * to.
+ *
+ * new Worker('~/' + workerPath)
+ *
+ * Note: we are changing source **outside** of the dependency range, and this may
+ * break when the dependency range changes, for example if this PR is merged:
+ *  - https://github.com/webpack/webpack/pull/12750
+ */
+WorkerDependency.Template.prototype.apply = function apply(dependency, source, templateContext) {
+	const { chunkGraph, moduleGraph, runtimeRequirements } = templateContext;
+	const dep = /** @type {WorkerDependency} */ (dependency);
+	const block = /** @type {AsyncDependenciesBlock} */ (moduleGraph.getParentBlock(
+		dependency
+	));
+	const entrypoint = /** @type {Entrypoint} */ (chunkGraph.getBlockChunkGroup(
+		block
+	));
+	const chunk = entrypoint.getEntrypointChunk();
+
+	// runtimeRequirements.add(RuntimeGlobals.publicPath);
+	// runtimeRequirements.add(RuntimeGlobals.baseURI);
+	runtimeRequirements.add(RuntimeGlobals.getChunkScriptFilename);
+
+	/**
+	 * new URL(
+	 * ^^^^^^^^ = 8 characters, we subtract it from the dep.range[0]
+	 */
+	source.replace(
+		dep.range[0] - 8,
+		dep.range[1],
+		`/* worker import */ /* patched by nativescript-worker-loader */ '~/' + ${
+			RuntimeGlobals.getChunkScriptFilename
+		}(${JSON.stringify(chunk.id)})`
+	);
+}
+
+const NEW_WORKER_WITH_STRING_RE = /new\s+Worker\((['"`].+['"`])\)/
+
+/**
+ * Replaces
+ * new Worker('./somePath')
+ * with
+ * new Worker(new URL('./somePath', import.meta.url))
+ */
+export default function loader(content: string, map: any) {
+	const source = content.replace(NEW_WORKER_WITH_STRING_RE, 'new Worker(new URL($1, import.meta.url))')
+	this.callback(null, source, map)
+}
+