feat: upgrade esbuild to 0.9.2 (#125)

Co-authored-by: Hiroki Osame <[email protected]>

README.md

@@ -22,8 +22,6 @@ npm i -D esbuild-loader
 In `webpack.config.js`:
 
 ```diff
-+ const { ESBuildPlugin } = require('esbuild-loader')
-
   module.exports = {
     module: {
       rules: [
@@ -43,18 +41,13 @@ In `webpack.config.js`:
         ...
       ],
     },
-    plugins: [
-+     new ESBuildPlugin()
-    ]
   }
 ```
 
 ### TypeScript & TSX
 In `webpack.config.js`:
 
 ```diff
-+ const { ESBuildPlugin } = require('esbuild-loader')
-
   module.exports = {
     module: {
       rules: [
@@ -74,9 +67,6 @@ In `webpack.config.js`:
         ...
       ]
     },
-    plugins: [
-+     new ESBuildPlugin()
-    ]
   }
 ```
 
@@ -103,10 +93,7 @@ You can replace JS minifiers like Terser or UglifyJs. Checkout the [benchmarks](
 In `webpack.config.js`:
 
 ```diff
-+ const {
-+   ESBuildPlugin,
-+   ESBuildMinifyPlugin
-+ } = require('esbuild-loader')
++ const { ESBuildMinifyPlugin } = require('esbuild-loader')
 
   module.exports = {
     ...,
@@ -119,15 +106,11 @@ In `webpack.config.js`:
 +       })
 +     ]
 +   },
-
-    plugins: [
-+     new ESBuildPlugin()
-    ]
   }
 ```
 
 #### _💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS_
-If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file. Simply set the `target` option on the minifier to specify which support level you want. 
+If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file. Simply set the `target` option on the minifier to specify which support level you want.
 
 ### Examples
 If you'd like to see working Webpack builds that use esbuild-loader for basic JS, React, TypeScript, or Next.js, check out the [examples repo](https://github.com/privatenumber/esbuild-loader-examples).

package.json

@@ -38,7 +38,7 @@
 		]
 	},
 	"dependencies": {
-		"esbuild": "^0.8.57",
+		"esbuild": "^0.9.2",
 		"joycon": "^2.2.5",
 		"json5": "^2.2.0",
 		"loader-utils": "^2.0.0",

src/interfaces.ts

@@ -1,10 +1,5 @@
-import {Service, TransformOptions} from 'esbuild';
+import {TransformOptions} from 'esbuild';
 import {Except} from 'type-fest';
-import webpack from 'webpack';
-
-type Compiler = webpack.Compiler & {
-	$esbuildService?: Service;
-};
 
 type Filter = string | RegExp;
 type FilterObject = {
@@ -16,7 +11,6 @@ type LoaderOptions = Except<TransformOptions, 'sourcemap' | 'sourcefile'>;
 type MinifyPluginOptions = Except<TransformOptions, 'sourcefile'> & FilterObject;
 
 export {
-	Compiler,
 	LoaderOptions,
 	MinifyPluginOptions,
 };

src/loader.ts

@@ -1,10 +1,11 @@
 import fs from 'fs';
 import path from 'path';
+import {transform} from 'esbuild';
 import {getOptions} from 'loader-utils';
 import webpack from 'webpack';
 import JoyCon, {LoadResult} from 'joycon';
 import JSON5 from 'json5';
-import {Compiler, LoaderOptions} from './interfaces';
+import {LoaderOptions} from './interfaces';
 
 const joycon = new JoyCon();
 
@@ -31,16 +32,6 @@ async function ESBuildLoader(
 ): Promise<void> {
 	const done = this.async()!;
 	const options: LoaderOptions = getOptions(this);
-	const service = (this._compiler as Compiler).$esbuildService;
-
-	if (!service) {
-		done(
-			new Error(
-				'[esbuild-loader] You need to add ESBuildPlugin to your webpack config first',
-			),
-		);
-		return;
-	}
 
 	const transformOptions = {
 		...options,
@@ -69,7 +60,7 @@ async function ESBuildLoader(
 	}
 
 	try {
-		const {code, map} = await service.transform(source, transformOptions);
+		const {code, map} = await transform(source, transformOptions);
 		done(null, code, map && JSON.parse(map));
 	} catch (error: unknown) {
 		done(error as Error);

src/minify-plugin.ts

@@ -1,8 +1,8 @@
-import assert from 'assert';
+import {transform} from 'esbuild';
 import {RawSource, SourceMapSource} from 'webpack-sources';
 import webpack from 'webpack';
 import {matchObject} from 'webpack/lib/ModuleFilenameHelpers';
-import {Compiler, MinifyPluginOptions} from './interfaces';
+import {MinifyPluginOptions} from './interfaces';
 
 type Asset = webpack.compilation.Asset;
 
@@ -57,10 +57,8 @@ class ESBuildMinifyPlugin {
 		}
 	}
 
-	apply(compiler: Compiler): void {
+	apply(compiler: webpack.Compiler): void {
 		compiler.hooks.compilation.tap(pluginName, compilation => {
-			assert(compiler.$esbuildService, '[esbuild-loader] You need to add ESBuildPlugin to your webpack config first');
-
 			const meta = JSON.stringify({
 				name: 'esbuild-loader',
 				version,
@@ -118,14 +116,7 @@ class ESBuildMinifyPlugin {
 		compilation: webpack.compilation.Compilation,
 		assetNames: string[],
 	): Promise<void> {
-		const {
-			options: {
-				devtool,
-			},
-			$esbuildService,
-		} = compilation.compiler as Compiler;
-
-		assert($esbuildService, '[esbuild-loader] You need to add ESBuildPlugin to your webpack config first');
+		const {options: {devtool}} = compilation.compiler;
 
 		const sourcemap = (
 			// TODO: drop support for esbuild sourcemap in future so it all goes through WP API
@@ -147,7 +138,7 @@ class ESBuildMinifyPlugin {
 				{info, source: assetSource},
 			]) => {
 				const {source, map} = assetSource.sourceAndMap();
-				const result = await $esbuildService.transform(source.toString(), {
+				const result = await transform(source.toString(), {
 					...transformOptions,
 					sourcemap,
 					sourcefile: assetName,

src/plugin.ts

@@ -1,37 +1,6 @@
-import {startService} from 'esbuild';
-import {Compiler} from './interfaces';
-
 class ESBuildPlugin {
-	apply(compiler: Compiler): void {
-		let watching = false;
-
-		const safeStartService = async () => {
-			if (!compiler.$esbuildService) {
-				compiler.$esbuildService = await startService();
-			}
-		};
-
-		compiler.hooks.thisCompilation.tap('esbuild', compilation => {
-			compilation.hooks.childCompiler.tap('esbuild', childCompiler => {
-				childCompiler.$esbuildService = compiler.$esbuildService;
-			});
-		});
-
-		compiler.hooks.run.tapPromise('esbuild', async () => {
-			await safeStartService();
-		});
-
-		compiler.hooks.watchRun.tapPromise('esbuild', async () => {
-			watching = true;
-			await safeStartService();
-		});
-
-		compiler.hooks.done.tap('esbuild', () => {
-			if (!watching && compiler.$esbuildService) {
-				compiler.$esbuildService.stop();
-				compiler.$esbuildService = undefined;
-			}
-		});
+	apply() {
+		console.warn('[esbuild-loader] ESBuildPlugin is no longer required for usage and will be removed in the next major release. Please refer to the docs and release notes for more info.');
 	}
 }
 

test/utils.ts

@@ -3,7 +3,6 @@ import fs from 'fs';
 import {ufs} from 'unionfs';
 import {Volume, DirectoryJSON} from 'memfs';
 import {runInNewContext} from 'vm';
-import {ESBuildPlugin} from '../dist/index.js';
 import {
 	Configuration as Wp4Configuration,
 	Stats,
@@ -64,7 +63,7 @@ export async function build(
 					},
 				],
 			},
-			plugins: [new ESBuildPlugin()],
+			plugins: [],
 		};
 
 		configure?.(config);