refactor: esbuild to auto-detect which loader to use (#304)

BREAKING CHANGE: Default value of loader now auto-detects which loader to use based on the extension of the file
privatenumber · Feb 8, 2023 · 378c74e · 378c74e
1 parent 43f1154
commit 378c74e
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,6 @@ In `webpack.config.js`:
 +         test: /\.js$/,
 +         loader: 'esbuild-loader',
 +         options: {
-+           loader: 'jsx',  // Remove this if you're not using JSX
 +           target: 'es2015'  // Syntax to compile to (see options below for possible values)
 +         }
 +       },
@@ -68,7 +67,6 @@ In `webpack.config.js`:
 +         test: /\.tsx?$/,
 +         loader: 'esbuild-loader',
 +         options: {
-+           loader: 'tsx',  // Or 'ts' if you don't need tsx
 +           target: 'es2015'
 +         }
 +       },
@@ -88,8 +86,6 @@ Alternatively, you can also pass it in directly via the [`tsconfigRaw` option](h
       test: /\.tsx?$/,
       loader: 'esbuild-loader',
       options: {
-          loader: 'tsx',
-          target: 'es2015',
 +         tsconfigRaw: require('./tsconfig.json')
       }
   }
@@ -194,7 +190,6 @@ In `webpack.config.js`:
 +           {
 +             loader: 'esbuild-loader',
 +             options: {
-+               loader: 'css',
 +               minify: true
 +             }
 +           }
@@ -267,10 +262,11 @@ Read more about it in the [esbuild docs](https://esbuild.github.io/api/#target).
 #### loader
 Type: `'js' | 'jsx' | 'ts' | 'tsx' | 'css' | 'json' | 'text' | 'base64' | 'file' | 'dataurl' | 'binary' | 'default'`
 
-Default: `'js'`
+Default: `'default'`
 
 The loader to use to handle the file. See the type for [possible values](https://github.com/evanw/esbuild/blob/88821b7e7d46737f633120f91c65f662eace0bcf/lib/shared/types.ts#L3).
 
+By default, it automatically detects the loader based on the file extension.
 
 Read more about it in the [esbuild docs](https://esbuild.github.io/api/#loader).
 

diff --git a/src/loader.ts b/src/loader.ts
@@ -23,7 +23,6 @@ joycon.addLoader({
 	},
 });
 
-const isTsExtensionPtrn = /\.ts$/i;
 let tsConfig: LoadResult;
 
 async function ESBuildLoader(
@@ -51,7 +50,7 @@ async function ESBuildLoader(
 	const transformOptions = {
 		...esbuildTransformOptions,
 		target: options.target ?? 'es2015',
-		loader: options.loader ?? 'js',
+		loader: options.loader ?? 'default',
 		sourcemap: this.sourceMap,
 		sourcefile: this.resourcePath,
 	};
@@ -66,14 +65,6 @@ async function ESBuildLoader(
 		}
 	}
 
-	// https://github.com/privatenumber/esbuild-loader/pull/107
-	if (
-		transformOptions.loader === 'tsx'
-		&& isTsExtensionPtrn.test(this.resourcePath)
-	) {
-		transformOptions.loader = 'ts';
-	}
-
 	try {
 		const { code, map } = await transform(source, transformOptions);
 		done(null, code, map && JSON.parse(map));

diff --git a/tests/specs/loader.ts b/tests/specs/loader.ts
@@ -72,9 +72,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 				(config) => {
 					configureEsbuildLoader(config, {
 						test: /\.ts$/,
-						options: {
-							loader: 'ts',
-						},
 					});
 				},
 				webpack,
@@ -96,7 +93,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					configureEsbuildLoader(config, {
 						test: /\.tsx$/,
 						options: {
-							loader: 'tsx',
 							jsxFactory: 'Array',
 							jsxFragment: '"Fragment"',
 						},
@@ -129,7 +125,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					configureEsbuildLoader(config, {
 						test: /\.tsx$/,
 						options: {
-							loader: 'tsx',
 							tsconfigRaw: {
 								compilerOptions: {
 									jsxFactory: 'Array',
@@ -213,9 +208,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					(config) => {
 						configureEsbuildLoader(config, {
 							test: /\.tsx?$/,
-							options: {
-								loader: 'tsx',
-							},
 						});
 					},
 					webpack,
@@ -242,9 +234,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					(config) => {
 						configureEsbuildLoader(config, {
 							test: /\.tsx?$/,
-							options: {
-								loader: 'tsx',
-							},
 						});
 					},
 					webpack,
@@ -265,9 +254,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					(config) => {
 						configureEsbuildLoader(config, {
 							test: /\.tsx?$/,
-							options: {
-								loader: 'tsx',
-							},
 						});
 					},
 					webpack,
@@ -289,9 +275,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					(config) => {
 						configureEsbuildLoader(config, {
 							test: /\.tsx?$/,
-							options: {
-								loader: 'tsx',
-							},
 						});
 					},
 					webpack,
@@ -410,7 +393,6 @@ export default testSuite(({ describe }, webpack: typeof webpack4 | typeof webpac
 					cssRule.use.push({
 						loader: 'esbuild-loader',
 						options: {
-							loader: 'css',
 							minify: true,
 						},
 					});