Refactor and remove esbuild dependency (#5533)

.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'] = {