Upgrade to Vite 4 (#5685)

* Upgrade Vite 4 * Simplify Svelte preprocess setup * Upgrade rollup * Fix tests * Fix wrong changeset target * Fix error tests * Set NODE_ENV default
author: Bjorn Lu <bjornlu.dev@gmail.com> 2023-01-04 02:24:49 +0800
committer: GitHub <noreply@github.com> 2023-01-03 13:24:49 -0500
commit: f6cf92b48317a19a3840ad781b77d6d3cae143bb (patch)
tree: c22d07726672c36ba35a69285c1ad98e8d62e28c /packages
parent: 5007bc78815ce81e91c9b1482c1b84e1214de4b0 (diff)
download: astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.tar.gz
astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.tar.zst
astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.zip
18 files changed, 53 insertions, 155 deletions
diff --git a/packages/astro/e2e/error-react-spectrum.test.js b/packages/astro/e2e/error-react-spectrum.test.js
deleted file mode 100644
index 05b1cf2a2..000000000
--- a/packages/astro/e2e/error-react-spectrum.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { expect } from '@playwright/test';
-import { testFactory, getErrorOverlayContent } from './test-utils.js';
-
-const test = testFactory({
-	experimental: { errorOverlay: true },
-	root: './fixtures/error-react-spectrum/',
-});
-
-let devServer;
-
-test.beforeAll(async ({ astro }) => {
-	devServer = await astro.startDevServer();
-});
-
-test.afterAll(async ({ astro }) => {
-	await devServer.stop();
-});
-
-test.describe('Error: React Spectrum', () => {
-	test('overlay', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-
-		const message = (await getErrorOverlayContent(page)).hint;
-		expect(message).toMatch('@adobe/react-spectrum is not compatible');
-	});
-});
diff --git a/packages/astro/e2e/fixtures/error-react-spectrum/astro.config.mjs b/packages/astro/e2e/fixtures/error-react-spectrum/astro.config.mjs
deleted file mode 100644
index 8a6f1951c..000000000
--- a/packages/astro/e2e/fixtures/error-react-spectrum/astro.config.mjs
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-
-// https://astro.build/config
-export default defineConfig({
-	integrations: [react()],
-});
diff --git a/packages/astro/e2e/fixtures/error-react-spectrum/package.json b/packages/astro/e2e/fixtures/error-react-spectrum/package.json
deleted file mode 100644
index f52e71585..000000000
--- a/packages/astro/e2e/fixtures/error-react-spectrum/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "@e2e/error-react-spectrum",
-  "version": "0.0.0",
-  "private": true,
-  "dependencies": {
-    "@adobe/react-spectrum": "^3.18.0",
-    "@astrojs/react": "workspace:*",
-    "astro": "workspace:*",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
-  }
-}
diff --git a/packages/astro/e2e/fixtures/error-react-spectrum/src/pages/index.astro b/packages/astro/e2e/fixtures/error-react-spectrum/src/pages/index.astro
deleted file mode 100644
index 848b291a0..000000000
--- a/packages/astro/e2e/fixtures/error-react-spectrum/src/pages/index.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-// Just importing causes a failure
-import '@adobe/react-spectrum';
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-		<style>
-		</style>
-	</head>
-	<body>
-		<main>
-			testing
-		</main>
-	</body>
-</html>
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 946c4f277..cc6313823 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -156,7 +156,6 @@
     "recast": "^0.20.5",
     "rehype": "^12.0.1",
     "resolve": "^1.22.0",
-    "rollup": "^2.79.1",
     "semver": "^7.3.7",
     "shiki": "^0.11.1",
     "sirv": "^2.0.2",
@@ -168,8 +167,8 @@
     "typescript": "*",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2",
-    "vite": "~3.2.5",
-    "vitefu": "^0.2.1",
+    "vite": "^4.0.3",
+    "vitefu": "^0.2.4",
     "yargs-parser": "^21.0.1",
     "zod": "^3.17.3"
   },
@@ -207,6 +206,7 @@
     "rehype-slug": "^5.0.1",
     "rehype-toc": "^3.0.2",
     "remark-code-titles": "^0.1.2",
+    "rollup": "^3.9.0",
     "sass": "^1.52.2",
     "srcset-parse": "^1.1.0",
     "unified": "^10.1.2"
diff --git a/packages/astro/src/cli/index.ts b/packages/astro/src/cli/index.ts
index 02a9075ec..d44421e06 100644
--- a/packages/astro/src/cli/index.ts
+++ b/packages/astro/src/cli/index.ts
@@ -156,6 +156,11 @@ async function runCommand(cmd: string, flags: yargs.Arguments) {
 		}
 	}
 
+	// Start with a default NODE_ENV so Vite doesn't set an incorrect default when loading the Astro config
+	if (!process.env.NODE_ENV) {
+		process.env.NODE_ENV = cmd === 'dev' ? 'development' : 'production';
+	}
+
 	let { astroConfig: initialAstroConfig, userConfig: initialUserConfig } = await openConfig({
 		cwd: root,
 		flags,
diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts
index 942566c88..85b720d13 100644
--- a/packages/astro/src/core/create-vite.ts
+++ b/packages/astro/src/core/create-vite.ts
@@ -25,7 +25,6 @@ import markdownVitePlugin from '../vite-plugin-markdown/index.js';
 import astroScannerPlugin from '../vite-plugin-scanner/index.js';
 import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
 import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js';
-import { createCustomViteLogger } from './errors/dev/index.js';
 import { resolveDependency } from './util.js';
 
 interface CreateViteOptions {
@@ -197,7 +196,7 @@ export async function createVite(
 		sortPlugins(result.plugins);
 	}
 
-	result.customLogger = createCustomViteLogger(result.logLevel ?? 'warn');
+	result.customLogger = vite.createLogger(result.logLevel ?? 'warn');
 
 	return result;
 }
diff --git a/packages/astro/src/core/errors/dev/index.ts b/packages/astro/src/core/errors/dev/index.ts
index 93cd41385..12e07a9fa 100644
--- a/packages/astro/src/core/errors/dev/index.ts
+++ b/packages/astro/src/core/errors/dev/index.ts
@@ -1,2 +1,2 @@
 export { collectErrorMetadata } from './utils.js';
-export { createCustomViteLogger, enhanceViteSSRError, getViteErrorPayload } from './vite.js';
+export { enhanceViteSSRError, getViteErrorPayload } from './vite.js';
diff --git a/packages/astro/src/core/errors/dev/utils.ts b/packages/astro/src/core/errors/dev/utils.ts
index 3d11e58bb..c54e53451 100644
--- a/packages/astro/src/core/errors/dev/utils.ts
+++ b/packages/astro/src/core/errors/dev/utils.ts
@@ -12,11 +12,6 @@ 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.`,
-};
-export const incompatPackageExp = new RegExp(`(${Object.keys(incompatiblePackages).join('|')})`);
-
 /**
  * Takes any error-like object and returns a standardized Error + metadata object.
  * Useful for consistent reporting regardless of where the error surfaced from.
@@ -135,12 +130,6 @@ ${
 See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
 		`;
 		return hint;
-	} else {
-		const res = incompatPackageExp.exec(err.stack);
-		if (res) {
-			const key = res[0] as keyof typeof incompatiblePackages;
-			return incompatiblePackages[key];
-		}
 	}
 	return err.hint;
 }
diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
index d0dcb1ea7..ffe3979c3 100644
--- a/packages/astro/src/core/errors/dev/vite.ts
+++ b/packages/astro/src/core/errors/dev/vite.ts
@@ -1,28 +1,12 @@
 import * as fs from 'fs';
 import { getHighlighter } from 'shiki';
 import { fileURLToPath } from 'url';
-import { createLogger, type ErrorPayload, type Logger, type LogLevel } from 'vite';
+import type { ErrorPayload } from 'vite';
 import type { ModuleLoader } from '../../module-loader/index.js';
 import { AstroErrorData } from '../errors-data.js';
-import { type ErrorWithMetadata } from '../errors.js';
+import type { ErrorWithMetadata } from '../errors.js';
 import { createSafeError } from '../utils.js';
-import { incompatPackageExp, renderErrorMarkdown } from './utils.js';
-
-/**
- * Custom logger with better error reporting for incompatible packages
- */
-export function createCustomViteLogger(logLevel: LogLevel): Logger {
-	const viteLogger = createLogger(logLevel);
-	const logger: Logger = {
-		...viteLogger,
-		error(msg, options?) {
-			// Silence warnings from incompatible packages (we log better errors for these)
-			if (incompatPackageExp.test(msg)) return;
-			return viteLogger.error(msg, options);
-		},
-	};
-	return logger;
-}
+import { renderErrorMarkdown } from './utils.js';
 
 export function enhanceViteSSRError(error: unknown, filePath?: URL, loader?: ModuleLoader): Error {
 	// NOTE: We don't know where the error that's coming here comes from, so we need to be defensive regarding what we do
@@ -44,25 +28,23 @@ export function enhanceViteSSRError(error: unknown, filePath?: URL, loader?: Mod
 
 		// Vite has a fairly generic error message when it fails to load a module, let's try to enhance it a bit
 		// https://github.com/vitejs/vite/blob/ee7c28a46a6563d54b828af42570c55f16b15d2c/packages/vite/src/node/ssr/ssrModuleLoader.ts#L91
-		if (/failed to load module for ssr:/.test(safeError.message)) {
-			const importName = safeError.message.split('for ssr:').at(1)?.trim();
-			if (importName) {
-				safeError.title = AstroErrorData.FailedToLoadModuleSSR.title;
-				safeError.name = 'FailedToLoadModuleSSR';
-				safeError.message = AstroErrorData.FailedToLoadModuleSSR.message(importName);
-				safeError.hint = AstroErrorData.FailedToLoadModuleSSR.hint;
-				safeError.code = AstroErrorData.FailedToLoadModuleSSR.code;
-				const line = lns.findIndex((ln) => ln.includes(importName));
-
-				if (line !== -1) {
-					const column = lns[line]?.indexOf(importName);
-
-					safeError.loc = {
-						file: path,
-						line: line + 1,
-						column,
-					};
-				}
+		let importName: string | undefined;
+		if ((importName = safeError.message.match(/Failed to load url (.*?) \(resolved id:/)?.[1])) {
+			safeError.title = AstroErrorData.FailedToLoadModuleSSR.title;
+			safeError.name = 'FailedToLoadModuleSSR';
+			safeError.message = AstroErrorData.FailedToLoadModuleSSR.message(importName);
+			safeError.hint = AstroErrorData.FailedToLoadModuleSSR.hint;
+			safeError.code = AstroErrorData.FailedToLoadModuleSSR.code;
+			const line = lns.findIndex((ln) => ln.includes(importName!));
+
+			if (line !== -1) {
+				const column = lns[line]?.indexOf(importName);
+
+				safeError.loc = {
+					file: path,
+					line: line + 1,
+					column,
+				};
 			}
 		}
 
diff --git a/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte b/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte
index 031146443..5bd019213 100644
--- a/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte
+++ b/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte
@@ -1,4 +1,4 @@
-<style>
+<style lang="postcss">
 .svelte {
 	&.nested {
 		color: red;
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 3e370e647..47e753a0a 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -139,9 +139,13 @@ export async function loadFixture(inlineConfig) {
 	let devServer;
 
 	return {
-		build: (opts = {}) => build(settings, { logging, telemetry, ...opts }),
+		build: (opts = {}) => {
+			process.env.NODE_ENV = 'production';
+			return build(settings, { logging, telemetry, ...opts });
+		},
 		sync: (opts) => sync(settings, { logging, fs, ...opts }),
 		startDevServer: async (opts = {}) => {
+			process.env.NODE_ENV = 'development';
 			devServer = await dev(settings, { logging, telemetry, ...opts });
 			config.server.host = parseAddressToHost(devServer.address.address); // update host
 			config.server.port = devServer.address.port; // update port
@@ -151,6 +155,7 @@ export async function loadFixture(inlineConfig) {
 		resolveUrl,
 		fetch: (url, init) => fetch(resolveUrl(url), init),
 		preview: async (opts = {}) => {
+			process.env.NODE_ENV = 'production';
 			const previewServer = await preview(settings, { logging, telemetry, ...opts });
 			config.server.host = parseAddressToHost(previewServer.host); // update host
 			config.server.port = previewServer.port; // update port
diff --git a/packages/integrations/image/package.json b/packages/integrations/image/package.json
index ceb01bb4a..b57b80001 100644
--- a/packages/integrations/image/package.json
+++ b/packages/integrations/image/package.json
@@ -62,7 +62,7 @@
     "mocha": "^9.2.2",
     "rollup-plugin-copy": "^3.4.0",
     "sharp": "^0.31.0",
-    "vite": "^3.0.0"
+    "vite": "^4.0.3"
   },
   "peerDependencies": {
     "sharp": ">=0.31.0"
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index 351d1ddb4..820b61775 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -68,7 +68,7 @@
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
-    "vite": "^3.0.0"
+    "vite": "^4.0.3"
   },
   "engines": {
     "node": "^14.18.0 || >=16.12.0"
diff --git a/packages/integrations/netlify/package.json b/packages/integrations/netlify/package.json
index eec8cdd5a..f73102fea 100644
--- a/packages/integrations/netlify/package.json
+++ b/packages/integrations/netlify/package.json
@@ -46,6 +46,6 @@
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "mocha": "^9.2.2",
-    "vite": "^3.0.0"
+    "vite": "^4.0.3"
   }
 }
diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json
index a4ad25e54..fdde735ef 100644
--- a/packages/integrations/svelte/package.json
+++ b/packages/integrations/svelte/package.json
@@ -33,19 +33,17 @@
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.1",
-    "postcss-load-config": "^3.1.4",
-    "svelte-preprocess": "^4.10.7",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "svelte2tsx": "^0.5.11"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "svelte": "^3.48.0",
-    "vite": "^3.0.0"
+    "svelte": "^3.54.0",
+    "vite": "^4.0.3"
   },
   "peerDependencies": {
-    "svelte": "^3.46.4"
+    "svelte": "^3.54.0"
   },
   "engines": {
     "node": "^14.18.0 || >=16.12.0"
diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
index f162437c0..6bf5bcc4e 100644
--- a/packages/integrations/svelte/src/index.ts
+++ b/packages/integrations/svelte/src/index.ts
@@ -1,7 +1,6 @@
 import type { Options } from '@sveltejs/vite-plugin-svelte';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-import type { AstroConfig, AstroIntegration, AstroRenderer } from 'astro';
-import preprocess from 'svelte-preprocess';
+import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import type { AstroIntegration, AstroRenderer } from 'astro';
 import type { UserConfig } from 'vite';
 
 function getRenderer(): AstroRenderer {
@@ -15,27 +14,13 @@ function getRenderer(): AstroRenderer {
 type ViteConfigurationArgs = {
 	isDev: boolean;
 	options?: Options | OptionsCallback;
-	postcssConfig: AstroConfig['style']['postcss'];
 };
 
-function getViteConfiguration({
-	options,
-	postcssConfig,
-	isDev,
-}: ViteConfigurationArgs): UserConfig {
+function getViteConfiguration({ options, isDev }: ViteConfigurationArgs): UserConfig {
 	const defaultOptions: Partial<Options> = {
 		emitCss: true,
 		compilerOptions: { dev: isDev, hydratable: true },
-		preprocess: [
-			preprocess({
-				less: true,
-				postcss: postcssConfig,
-				sass: { renderSync: true },
-				scss: { renderSync: true },
-				stylus: true,
-				typescript: true,
-			}),
-		],
+		preprocess: [vitePreprocess()],
 	};
 
 	// Disable hot mode during the build
@@ -65,7 +50,7 @@ function getViteConfiguration({
 
 	return {
 		optimizeDeps: {
-			include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'],
+			include: ['@astrojs/svelte/client.js'],
 			exclude: ['@astrojs/svelte/server.js'],
 		},
 		plugins: [svelte(resolvedOptions)],
@@ -78,13 +63,12 @@ export default function (options?: Options | OptionsCallback): AstroIntegration
 		name: '@astrojs/svelte',
 		hooks: {
 			// Anything that gets returned here is merged into Astro Config
-			'astro:config:setup': ({ command, updateConfig, addRenderer, config }) => {
+			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
 				addRenderer(getRenderer());
 				updateConfig({
 					vite: getViteConfiguration({
 						options,
 						isDev: command === 'dev',
-						postcssConfig: config.style.postcss,
 					}),
 				});
 			},
diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json
index 1f1cbe3dc..2df134a8f 100644
--- a/packages/integrations/vue/package.json
+++ b/packages/integrations/vue/package.json
@@ -34,8 +34,8 @@
     "test": "mocha --timeout 20000"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^3.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/compiler-sfc": "^3.2.39"
   },
@@ -46,7 +46,7 @@
     "chai": "^4.3.6",
     "linkedom": "^0.14.17",
     "mocha": "^9.2.2",
-    "vite": "^3.0.0",
+    "vite": "^4.0.3",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
author	Bjorn Lu <bjornlu.dev@gmail.com>	2023-01-04 02:24:49 +0800
committer	GitHub <noreply@github.com>	2023-01-03 13:24:49 -0500
commit	f6cf92b48317a19a3840ad781b77d6d3cae143bb (patch)
tree	c22d07726672c36ba35a69285c1ad98e8d62e28c /packages
parent	5007bc78815ce81e91c9b1482c1b84e1214de4b0 (diff)
download	astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.tar.gz astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.tar.zst astro-f6cf92b48317a19a3840ad781b77d6d3cae143bb.zip