fix: interpolation [name] for the filename option (#277)

* fix: interpolation `[name]` for the `filename` option

Author: evilebottnawi

src/index.js

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
@@ -99,9 +101,11 @@ export function pitch(request) {
     ).apply(workerContext.compiler);
   }
 
-  new SingleEntryPlugin(this.context, `!!${request}`, 'main').apply(
-    workerContext.compiler
-  );
+  new SingleEntryPlugin(
+    this.context,
+    `!!${request}`,
+    path.parse(this.resourcePath).name
+  ).apply(workerContext.compiler);
 
   workerContext.request = request;
 

test/__snapshots__/chunkFilename-option.test.js.snap

@@ -17,7 +17,7 @@ exports[`"name" option should work and respect the "output.chunkFilename" defaul
 
 exports[`"name" option should work and respect the "output.chunkFilename" default value option: module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.worker.js\\");
 }
 "
 `;
@@ -30,7 +30,7 @@ exports[`"name" option should work and respect the "output.chunkFilename" option
 
 exports[`"name" option should work and respect the "output.chunkFilename" option ("string"): module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.worker.js\\");
 }
 "
 `;

test/__snapshots__/filename-options.test.js.snap

@@ -4,7 +4,7 @@ exports[`"filename" option should work ("function"): errors 1`] = `Array []`;
 
 exports[`"filename" option should work ("function"): module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.custom.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.custom.worker.js\\");
 }
 "
 `;
@@ -17,7 +17,7 @@ exports[`"filename" option should work ("string"): errors 1`] = `Array []`;
 
 exports[`"filename" option should work ("string"): module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.custom.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.custom.worker.js\\");
 }
 "
 `;
@@ -30,7 +30,7 @@ exports[`"filename" option should work and respect the "output.filename" default
 
 exports[`"filename" option should work and respect the "output.filename" default value option: module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.worker.js\\");
 }
 "
 `;
@@ -43,7 +43,7 @@ exports[`"filename" option should work and respect the "output.filename" option
 
 exports[`"filename" option should work and respect the "output.filename" option ("function"): module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.custom.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.custom.worker.js\\");
 }
 "
 `;
@@ -56,7 +56,7 @@ exports[`"filename" option should work and respect the "output.filename" option
 
 exports[`"filename" option should work and respect the "output.filename" option ("string"): module 1`] = `
 "export default function() {
-  return new Worker(__webpack_public_path__ + \\"main.custom.worker.js\\");
+  return new Worker(__webpack_public_path__ + \\"worker.custom.worker.js\\");
 }
 "
 `;

test/__snapshots__/loader.test.js.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`worker-loader should work and have the same base file name as the source files: errors 1`] = `Array []`;
+
+exports[`worker-loader should work and have the same base file name as the source files: module 1`] = `
+"export default function() {
+  return new Worker(__webpack_public_path__ + \\"TypeDetection.worker.js\\");
+}
+"
+`;
+
+exports[`worker-loader should work and have the same base file name as the source files: result 1`] = `"{\\"postMessage\\":true,\\"onmessage\\":true}"`;
+
+exports[`worker-loader should work and have the same base file name as the source files: warnings 1`] = `Array []`;
+
 exports[`worker-loader should work and respect the "devtool" option ("false" value): errors 1`] = `Array []`;
 
 exports[`worker-loader should work and respect the "devtool" option ("false" value): module 1`] = `

test/fixtures/name/TypeDetection.js

@@ -0,0 +1,7 @@
+onmessage = function(event) {
+  const workerResult = event.data;
+
+  workerResult.onmessage = true;
+
+  postMessage(workerResult);
+};

test/fixtures/name/entry.js

@@ -0,0 +1,22 @@
+import Worker from './TypeDetection.js';
+
+const worker = new Worker();
+
+let result;
+
+worker.onmessage = function (event) {
+  if (!result) {
+    result = document.createElement("div");
+    result.setAttribute('id', 'result');
+
+    document.body.append(result);
+  }
+
+  result.innerText = JSON.stringify(event.data)
+};
+
+const button = document.getElementById('button');
+
+button.addEventListener('click', () => {
+  worker.postMessage({ postMessage: true })
+});

test/fixtures/name/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Webpack App</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+<body>
+
+<button id="button">Run Action</button>
+
+</body>
+</html>

test/helpers/getCompiler.js

@@ -20,7 +20,7 @@ export default (fixture, loaderOptions = {}, config = {}) => {
     module: {
       rules: [
         {
-          test: /worker\.js$/i,
+          test: /(worker|TypeDetection)\.js$/i,
           rules: [
             {
               loader: path.resolve(__dirname, '../../src'),
@@ -48,8 +48,6 @@ export default (fixture, loaderOptions = {}, config = {}) => {
       fullConfig.experiments = {};
     }
 
-    fullConfig.experiments.importAsync = true;
-    fullConfig.experiments.importAwait = true;
     fullConfig.experiments.asyncWebAssembly = true;
   }
 

test/loader.test.js

@@ -113,4 +113,19 @@ describe('worker-loader', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should work and have the same base file name as the source files', async () => {
+    const compiler = getCompiler('./name/entry.js', {
+      filename: '[name].worker.js',
+    });
+    const stats = await compile(compiler);
+    const result = await getResultFromBrowser(stats);
+
+    expect(getModuleSource('./name/TypeDetection.js', stats)).toMatchSnapshot(
+      'module'
+    );
+    expect(result).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });