Refactor and remove esbuild dependency

.changeset/sixty-donuts-chew.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Refactor and remove esbuild dependency

packages/astro/package.json

@@ -124,7 +124,6 @@
     "deepmerge-ts": "^4.2.2",
     "diff": "^5.1.0",
     "es-module-lexer": "^0.10.5",
-    "esbuild": "^0.14.43",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.11",
     "github-slugger": "^1.4.0",
@@ -157,7 +156,7 @@
     "typescript": "*",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2",
-    "vite": "~3.2.4",
+    "vite": "~3.2.5",
     "vitefu": "^0.2.1",
     "yargs-parser": "^21.0.1",
     "zod": "^3.17.3"

packages/astro/src/core/build/vite-plugin-css.ts

@@ -2,8 +2,7 @@ import type { GetModuleInfo } from 'rollup';
 import type { BuildInternals } from './internal';
 import type { PageBuildData, StaticBuildOptions } from './types';
 
-import esbuild from 'esbuild';
-import { Plugin as VitePlugin, ResolvedConfig } from 'vite';
+import { Plugin as VitePlugin, ResolvedConfig, transformWithEsbuild } from 'vite';
 import { isCSSRequest } from '../render/util.js';
 
 import * as assetName from './css-asset-name.js';
@@ -207,11 +206,16 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 							if (output.name?.endsWith('.css') && typeof output.source === 'string') {
 								const cssTarget = settings.config.vite.build?.cssTarget;
 								const minify = settings.config.vite.build?.minify !== false;
-								const { code: minifiedCSS } = await esbuild.transform(output.source, {
-									loader: 'css',
-									minify,
-									...(cssTarget ? { target: cssTarget } : {}),
-								});
+								const { code: minifiedCSS } = await transformWithEsbuild(
+									output.source,
+									output.name,
+									{
+										loader: 'css',
+										minify,
+										target: cssTarget || undefined,
+										sourcemap: false,
+									}
+								);
 								output.source = minifiedCSS;
 							}
 						}

packages/astro/src/core/errors/dev/utils.ts

@@ -1,13 +1,15 @@
-import type { BuildResult } from 'esbuild';
 import * as fs from 'node:fs';
 import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import stripAnsi from 'strip-ansi';
+import type { ESBuildTransformResult } from 'vite';
 import type { SSRError } from '../../../@types/astro.js';
 import { AggregateError, ErrorWithMetadata } from '../errors.js';
 import { codeFrame } from '../printer.js';
 import { normalizeLF } from '../utils.js';
 
+type EsbuildMessage = ESBuildTransformResult['warnings'][number];
+
 export const incompatiblePackages = {
 	'react-spectrum': `@adobe/react-spectrum is not compatible with Vite's server-side rendering mode at the moment. You can still use React Spectrum from the client. Create an island React component and use the client:only directive. From there you can use React Spectrum.`,
 };
@@ -44,7 +46,7 @@ export function collectErrorMetadata(e: any, rootFolder?: URL | undefined): Erro
 
 	// If we received an array of errors and it's not from us, it should be from ESBuild, try to extract info for Vite to display
 	if (!AggregateError.is(e) && Array.isArray((e as any).errors)) {
-		(e as BuildResult).errors.forEach((buildError, i) => {
+		(e.errors as EsbuildMessage[]).forEach((buildError, i) => {
 			const { location, pluginName, text } = buildError;
 
 			// ESBuild can give us a slightly better error message than the one in the error, so let's use it

packages/astro/src/vite-plugin-jsx/index.ts

@@ -1,11 +1,10 @@
 import type { TransformResult } from 'rollup';
-import type { Plugin, ResolvedConfig } from 'vite';
+import { EsbuildTransformOptions, Plugin, ResolvedConfig, transformWithEsbuild } from 'vite';
 import type { AstroRenderer, AstroSettings } from '../@types/astro';
 import type { LogOptions } from '../core/logger/core.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types';
 
 import babel from '@babel/core';
-import esbuild from 'esbuild';
 import * as colors from 'kleur/colors';
 import path from 'path';
 import { error } from '../core/logger/core.js';
@@ -21,12 +20,10 @@ const IMPORT_STATEMENTS: Record<string, string> = {
 	astro: "import 'astro/jsx-runtime'",
 };
 
-// A fast check regex for the import keyword. False positives are okay.
-const IMPORT_KEYWORD_REGEX = /import/;
-
-function getEsbuildLoader(fileExt: string): string {
+function getEsbuildLoader(filePath: string): EsbuildTransformOptions['loader'] {
+	const fileExt = path.extname(filePath);
 	if (fileExt === '.mdx') return 'jsx';
-	return fileExt.slice(1);
+	return fileExt.slice(1) as EsbuildTransformOptions['loader'];
 }
 
 function collectJSXRenderers(renderers: AstroRenderer[]): Map<string, AstroRenderer> {
@@ -139,10 +136,9 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi
 			const { mode } = viteConfig;
 			// Shortcut: only use Astro renderer for MD and MDX files
 			if (id.endsWith('.mdx')) {
-				const { code: jsxCode } = await esbuild.transform(code, {
-					loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
+				const { code: jsxCode } = await transformWithEsbuild(code, id, {
+					loader: getEsbuildLoader(id),
 					jsx: 'preserve',
-					sourcefile: id,
 					sourcemap: 'inline',
 				});
 				return transformJSX({
@@ -156,10 +152,9 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi
 			}
 			if (defaultJSXRendererEntry && jsxRenderersIntegrationOnly.size === 1) {
 				// downlevel any non-standard syntax, but preserve JSX
-				const { code: jsxCode } = await esbuild.transform(code, {
-					loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
+				const { code: jsxCode } = await transformWithEsbuild(code, id, {
+					loader: getEsbuildLoader(id),
 					jsx: 'preserve',
-					sourcefile: id,
 					sourcemap: 'inline',
 				});
 				return transformJSX({
@@ -214,10 +209,9 @@ https://docs.astro.build/en/core-concepts/framework-components/#installing-integ
 			}
 
 			// downlevel any non-standard syntax, but preserve JSX
-			const { code: jsxCode } = await esbuild.transform(code, {
-				loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
+			const { code: jsxCode } = await transformWithEsbuild(code, id, {
+				loader: getEsbuildLoader(id),
 				jsx: 'preserve',
-				sourcefile: id,
 				sourcemap: 'inline',
 			});
 			return await transformJSX({

packages/astro/src/vite-plugin-markdown-legacy/index.ts

@@ -1,9 +1,8 @@
 import { renderMarkdown } from '@astrojs/markdown-remark';
-import esbuild from 'esbuild';
 import fs from 'fs';
 import matter from 'gray-matter';
 import { fileURLToPath } from 'url';
-import type { Plugin, ResolvedConfig } from 'vite';
+import { Plugin, ResolvedConfig, transformWithEsbuild } from 'vite';
 import type { AstroSettings } from '../@types/astro';
 import { pagesVirtualModuleId } from '../core/app/index.js';
 import { cachedCompilation, CompileProps } from '../core/compile/index.js';
@@ -224,10 +223,9 @@ export function compiledContent() {
 ${tsResult}`;
 
 				// Compile from `.ts` to `.js`
-				const { code } = await esbuild.transform(tsResult, {
+				const { code } = await transformWithEsbuild(tsResult, id, {
 					loader: 'ts',
 					sourcemap: false,
-					sourcefile: id,
 				});
 
 				const astroMetadata: AstroPluginMetadata['astro'] = {