From 0b41650da6bf16b05f1ef380acc8651bea90b76d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 16 Jul 2021 10:58:02 +1000 Subject: [PATCH 1/6] fix: enable JSX dependencies to be optimised --- packages/vite/src/node/optimizer/index.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 262d7c8156deef..0543544a8ea710 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -15,6 +15,7 @@ import { import { esbuildDepPlugin } from './esbuildDepPlugin' import { ImportSpecifier, init, parse } from 'es-module-lexer' import { scanImports } from './scan' +import { transform } from 'esbuild' const debug = createDebugger('vite:deps') @@ -242,7 +243,16 @@ export async function optimizeDeps( const flatId = flattenId(id) flatIdDeps[flatId] = deps[id] const entryContent = fs.readFileSync(deps[id], 'utf-8') - const exportsData = parse(entryContent) as ExportsData + let exportsData: ExportsData + try { + exportsData = parse(entryContent) as ExportsData + } catch { + config.logger.warn( + `Unable to parse dependency: ${id}. Trying again with an esbuild transform.` + ) + const transformed = await transform(entryContent, config.esbuild || {}) + exportsData = parse(transformed.code) as ExportsData + } for (const { ss, se } of exportsData[0]) { const exp = entryContent.slice(ss, se) if (/export\s+\*\s+from/.test(exp)) { From 939dc27ae1edc2429e303494a451dbffb7e11a2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 16 Jul 2021 13:41:19 +1000 Subject: [PATCH 2/6] fix: switch from a warning to a debug statement --- packages/vite/src/node/optimizer/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 0543544a8ea710..7d83a8cfee7030 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -247,7 +247,7 @@ export async function optimizeDeps( try { exportsData = parse(entryContent) as ExportsData } catch { - config.logger.warn( + debug( `Unable to parse dependency: ${id}. Trying again with an esbuild transform.` ) const transformed = await transform(entryContent, config.esbuild || {}) From a88f5b434b1716e18ae34379436f04c8c3da7e15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Sat, 17 Jul 2021 08:14:14 +1000 Subject: [PATCH 3/6] fix: ensure you don't need any custom esbuild options --- packages/vite/src/node/optimizer/index.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 7d83a8cfee7030..4fa6d76784f930 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -238,6 +238,9 @@ export async function optimizeDeps( const idToExports: Record = {} const flatIdToExports: Record = {} + const { plugins = [], ...esbuildOptions } = + config.optimizeDeps?.esbuildOptions ?? {} + await init for (const id in deps) { const flatId = flattenId(id) @@ -248,9 +251,14 @@ export async function optimizeDeps( exportsData = parse(entryContent) as ExportsData } catch { debug( - `Unable to parse dependency: ${id}. Trying again with an esbuild transform.` + `Unable to parse dependency: ${id}. Trying again with a JSX transform.` ) - const transformed = await transform(entryContent, config.esbuild || {}) + const transformed = await transform(entryContent, { + loader: 'jsx' + }) + // Ensure that optimization won't fail. + esbuildOptions.loader ??= {} + esbuildOptions.loader['.js'] ??= 'jsx' exportsData = parse(transformed.code) as ExportsData } for (const { ss, se } of exportsData[0]) { @@ -273,9 +281,6 @@ export async function optimizeDeps( const start = Date.now() - const { plugins = [], ...esbuildOptions } = - config.optimizeDeps?.esbuildOptions ?? {} - const result = await build({ absWorkingDir: process.cwd(), entryPoints: Object.keys(flatIdDeps), From 370727969fdb9b535f923c978a5ef4fa2067acfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Sat, 21 Aug 2021 15:14:49 +1000 Subject: [PATCH 4/6] fix: use transformWithEsBuild() --- packages/vite/src/node/optimizer/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 4fa6d76784f930..f354f4e567d901 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -15,7 +15,7 @@ import { import { esbuildDepPlugin } from './esbuildDepPlugin' import { ImportSpecifier, init, parse } from 'es-module-lexer' import { scanImports } from './scan' -import { transform } from 'esbuild' +import { transformWithEsbuild } from '../plugins/esbuild' const debug = createDebugger('vite:deps') @@ -244,8 +244,8 @@ export async function optimizeDeps( await init for (const id in deps) { const flatId = flattenId(id) - flatIdDeps[flatId] = deps[id] - const entryContent = fs.readFileSync(deps[id], 'utf-8') + const filePath = (flatIdDeps[flatId] = deps[id]) + const entryContent = fs.readFileSync(filePath, 'utf-8') let exportsData: ExportsData try { exportsData = parse(entryContent) as ExportsData @@ -253,7 +253,7 @@ export async function optimizeDeps( debug( `Unable to parse dependency: ${id}. Trying again with a JSX transform.` ) - const transformed = await transform(entryContent, { + const transformed = await transformWithEsbuild(entryContent, filePath, { loader: 'jsx' }) // Ensure that optimization won't fail. From 45f5d5dde8d07b3a5f103c7899413667ebfb5c5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Sun, 22 Aug 2021 11:31:52 +1000 Subject: [PATCH 5/6] fix: use spread syntax to avoid mutating esbuildOptions outside the function scope --- packages/vite/src/node/optimizer/index.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index f354f4e567d901..3724aba00f66b5 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -238,7 +238,7 @@ export async function optimizeDeps( const idToExports: Record = {} const flatIdToExports: Record = {} - const { plugins = [], ...esbuildOptions } = + let { plugins = [], ...esbuildOptions } = config.optimizeDeps?.esbuildOptions ?? {} await init @@ -256,9 +256,15 @@ export async function optimizeDeps( const transformed = await transformWithEsbuild(entryContent, filePath, { loader: 'jsx' }) - // Ensure that optimization won't fail. - esbuildOptions.loader ??= {} - esbuildOptions.loader['.js'] ??= 'jsx' + // Ensure that optimization won't fail by defaulting '.js' to the JSX parser. + // This is useful for packages such as Gatsby. + esbuildOptions = { + ...esbuildOptions, + loader: { + '.js': 'jsx', + ...esbuildOptions.loader + } + } exportsData = parse(transformed.code) as ExportsData } for (const { ss, se } of exportsData[0]) { From 00e4aa646e1c79aa9e9010b64236fc1957a576c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Mon, 23 Aug 2021 08:13:25 +1000 Subject: [PATCH 6/6] fix: do not duplicate esbuildOptions --- packages/vite/src/node/optimizer/index.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 3724aba00f66b5..ac40b17a387db4 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -238,7 +238,7 @@ export async function optimizeDeps( const idToExports: Record = {} const flatIdToExports: Record = {} - let { plugins = [], ...esbuildOptions } = + const { plugins = [], ...esbuildOptions } = config.optimizeDeps?.esbuildOptions ?? {} await init @@ -258,12 +258,9 @@ export async function optimizeDeps( }) // Ensure that optimization won't fail by defaulting '.js' to the JSX parser. // This is useful for packages such as Gatsby. - esbuildOptions = { - ...esbuildOptions, - loader: { - '.js': 'jsx', - ...esbuildOptions.loader - } + esbuildOptions.loader = { + '.js': 'jsx', + ...esbuildOptions.loader } exportsData = parse(transformed.code) as ExportsData }