From 58188e053672562dfe4b7703c3e25bb47d71567d Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Tue, 6 Dec 2022 17:00:36 +0800 Subject: [PATCH] Refactor and remove esbuild dependency (#5533) --- .changeset/sixty-donuts-chew.md | 5 ++++ packages/astro/package.json | 3 +-- .../astro/src/core/build/vite-plugin-css.ts | 18 ++++++++----- packages/astro/src/core/errors/dev/utils.ts | 6 +++-- packages/astro/src/vite-plugin-jsx/index.ts | 26 +++++++------------ .../src/vite-plugin-markdown-legacy/index.ts | 6 ++--- pnpm-lock.yaml | 22 +++++++--------- 7 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 .changeset/sixty-donuts-chew.md diff --git a/.changeset/sixty-donuts-chew.md b/.changeset/sixty-donuts-chew.md new file mode 100644 index 000000000..004e37c2d --- /dev/null +++ b/.changeset/sixty-donuts-chew.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Refactor and remove esbuild dependency diff --git a/packages/astro/package.json b/packages/astro/package.json index b070cdcf4..1a0c718d2 100644 --- a/packages/astro/package.json +++ b/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" diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts index eb4f6f3ac..8183ff1dd 100644 --- a/packages/astro/src/core/build/vite-plugin-css.ts +++ b/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; } } diff --git a/packages/astro/src/core/errors/dev/utils.ts b/packages/astro/src/core/errors/dev/utils.ts index 54f1868bc..a36ffc8d8 100644 --- a/packages/astro/src/core/errors/dev/utils.ts +++ b/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 diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts index 2f0a290e0..b4d90c79d 100644 --- a/packages/astro/src/vite-plugin-jsx/index.ts +++ b/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 = { 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 { @@ -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({ diff --git a/packages/astro/src/vite-plugin-markdown-legacy/index.ts b/packages/astro/src/vite-plugin-markdown-legacy/index.ts index 4e866b54a..a224a3193 100644 --- a/packages/astro/src/vite-plugin-markdown-legacy/index.ts +++ b/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'] = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33a430fb2..704bee4e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -423,7 +423,6 @@ importers: diff: ^5.1.0 eol: ^0.9.1 es-module-lexer: ^0.10.5 - esbuild: ^0.14.43 execa: ^6.1.0 fast-glob: ^3.2.11 github-slugger: ^1.4.0 @@ -467,7 +466,7 @@ importers: unified: ^10.1.2 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 @@ -496,7 +495,6 @@ importers: deepmerge-ts: 4.2.2 diff: 5.1.0 es-module-lexer: 0.10.5 - esbuild: 0.14.54 execa: 6.1.0 fast-glob: 3.2.12 github-slugger: 1.5.0 @@ -529,8 +527,8 @@ importers: typescript: 4.8.4 unist-util-visit: 4.1.1 vfile: 5.3.5 - vite: 3.2.4_sass@1.56.1 - vitefu: 0.2.1_vite@3.2.4 + vite: 3.2.5_sass@1.56.1 + vitefu: 0.2.1_vite@3.2.5 yargs-parser: 21.1.1 zod: 3.19.1 devDependencies: @@ -18150,8 +18148,8 @@ packages: fsevents: 2.3.2 dev: true - /vite/3.2.3_@types+node@18.11.9: - resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==} + /vite/3.2.5_@types+node@18.11.9: + resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -18184,8 +18182,8 @@ packages: fsevents: 2.3.2 dev: false - /vite/3.2.4_sass@1.56.1: - resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==} + /vite/3.2.5_sass@1.56.1: + resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -18238,7 +18236,7 @@ packages: vite: 3.2.3 dev: false - /vitefu/0.2.1_vite@3.2.4: + /vitefu/0.2.1_vite@3.2.5: resolution: {integrity: sha512-clkvXTAeUf+XQKm3bhWUhT4pye+3acm6YCTGaWhxxIvZZ/QjnA3JA8Zud+z/mO5y5XYvJJhevs5Sjkv/FI8nRw==} peerDependencies: vite: ^3.0.0 @@ -18246,7 +18244,7 @@ packages: vite: optional: true dependencies: - vite: 3.2.4_sass@1.56.1 + vite: 3.2.5_sass@1.56.1 dev: false /vitest/0.20.3: @@ -18282,7 +18280,7 @@ packages: local-pkg: 0.4.2 tinypool: 0.2.4 tinyspy: 1.0.2 - vite: 3.2.3_@types+node@18.11.9 + vite: 3.2.5_@types+node@18.11.9 transitivePeerDependencies: - less - sass