Migrate to Vite 3 ⚡️

.changeset/thirty-beans-poke.md

@@ -0,0 +1,8 @@
+---
+'astro': minor
+'@astrojs/image': minor
+'@astrojs/svelte': minor
+'@astrojs/vue': minor
+---
+
+Bump to Vite 3!

examples/component/demo/astro.config.mjs

@@ -1,4 +1,10 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+	vite: {
+		ssr: {
+			noExternal: ['@example/my-component']
+		},
+	},
+});

packages/astro/package.json

@@ -136,7 +136,7 @@
     "strip-ansi": "^7.0.1",
     "supports-esm": "^1.0.0",
     "tsconfig-resolver": "^3.0.1",
-    "vite": "^2.9.14",
+    "vite": "3.0.0",
     "yargs-parser": "^21.0.1",
     "zod": "^3.17.3"
   },

packages/astro/src/core/build/index.ts

@@ -73,8 +73,9 @@ class AstroBuilder {
 				mode: this.mode,
 				server: {
 					hmr: false,
-					middlewareMode: 'ssr',
+					middlewareMode: true,
 				},
+				appType: 'custom',
 			},
 			{ astroConfig: this.config, logging, mode: 'build' }
 		);

packages/astro/src/core/build/page-data.ts

@@ -57,7 +57,7 @@ export async function collectPagesData(
 					'build',
 					`${colors.bold(
 						route.component
-					)} is taking a bit longer to import. This is common for larger "Astro.glob(...)" or "import.meta.globEager(...)" calls, for instance. Hang tight!`
+					)} is taking a bit longer to import. This is common for larger "Astro.glob(...)" or "import.meta.glob(...)" calls, for instance. Hang tight!`
 				);
 				clearInterval(routeCollectionLogTimeout);
 			}, 10000);

packages/astro/src/core/build/static-build.ts

@@ -6,7 +6,7 @@ import { fileURLToPath } from 'url';
 import * as vite from 'vite';
 import { BuildInternals, createBuildInternals } from '../../core/build/internal.js';
 import { prependForwardSlash } from '../../core/path.js';
-import { emptyDir, removeDir } from '../../core/util.js';
+import { emptyDir, removeDir, resolveDependency } from '../../core/util.js';
 import { runHookBuildSetup } from '../../integrations/index.js';
 import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js';
 import type { ViteConfigWithSSR } from '../create-vite';
@@ -67,10 +67,12 @@ export async function staticBuild(opts: StaticBuildOptions) {
 	const ssrResult = (await ssrBuild(opts, internals, pageInput)) as RollupOutput;
 	info(opts.logging, 'build', dim(`Completed in ${getTimeStat(timer.ssr, performance.now())}.`));
 
-	const clientInput = new Set<string>([
+	const rendererClientEntrypoints = opts.astroConfig._ctx.renderers.map((r) => r.clientEntrypoint).filter(a => typeof a === 'string') as string[]
+
+	const clientInput = new Set([
 		...internals.discoveredHydratedComponents,
 		...internals.discoveredClientOnlyComponents,
-		...(astroConfig._ctx.renderers.map((r) => r.clientEntrypoint).filter((a) => a) as string[]),
+		...rendererClientEntrypoints,
 		...internals.discoveredScripts,
 	]);
 
@@ -167,7 +169,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 async function clientBuild(
 	opts: StaticBuildOptions,
 	internals: BuildInternals,
-	input: Set<string>
+	input: Set<string>,
 ) {
 	const { astroConfig, viteConfig } = opts;
 	const timer = performance.now();

packages/astro/src/core/create-vite.ts

@@ -14,45 +14,46 @@ import astroIntegrationsContainerPlugin from '../vite-plugin-integrations-contai
 import jsxVitePlugin from '../vite-plugin-jsx/index.js';
 import markdownVitePlugin from '../vite-plugin-markdown/index.js';
 import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
+import { resolveDependency } from './util.js';
+
+// note: ssr is still an experimental API hence the type omission from `vite`
+export type ViteConfigWithSSR = vite.InlineConfig & { ssr?: vite.SSROptions };
+
+interface CreateViteOptions {
+	astroConfig: AstroConfig;
+	logging: LogOptions;
+	mode: 'dev' | 'build';
+}
 
-// Some packages are just external, and that’s the way it goes.
-const ALWAYS_EXTERNAL = new Set([
-	...builtinModules.map((name) => `node:${name}`),
-	'@sveltejs/vite-plugin-svelte',
-	'micromark-util-events-to-acorn',
-	'@astrojs/markdown-remark',
-	// in-lined for markdown modules
-	'github-slugger',
-	'node-fetch',
-	'prismjs',
-	'shiki',
-	'unified',
-	'whatwg-url',
-]);
 const ALWAYS_NOEXTERNAL = new Set([
 	// This is only because Vite's native ESM doesn't resolve "exports" correctly.
 	'astro',
+	// Vite fails on nested `.astro` imports without bundling
+	'astro/components',
 	// Handle recommended nanostores. Only @nanostores/preact is required from our testing!
 	// Full explanation and related bug report: https://github.com/withastro/astro/pull/3667
 	'@nanostores/preact',
 ]);
 
-// note: ssr is still an experimental API hence the type omission from `vite`
-export type ViteConfigWithSSR = vite.InlineConfig & { ssr?: vite.SSROptions };
-
-interface CreateViteOptions {
-	astroConfig: AstroConfig;
-	logging: LogOptions;
-	mode: 'dev' | 'build';
+function getSsrNoExternalDeps(projectRoot: URL): string[] {
+	let noExternalDeps = []
+	for (const dep of ALWAYS_NOEXTERNAL) {
+		try {
+			resolveDependency(dep, projectRoot)
+			noExternalDeps.push(dep)
+		} catch {
+			// ignore dependency if *not* installed / present in your project
+			// prevents hard error from Vite!
+		}
+	}
+	return noExternalDeps
 }
 
 /** Return a common starting point for all Vite actions */
 export async function createVite(
 	commandConfig: ViteConfigWithSSR,
 	{ astroConfig, logging, mode }: CreateViteOptions
 ): Promise<ViteConfigWithSSR> {
-	// Scan for any third-party Astro packages. Vite needs these to be passed to `ssr.noExternal`.
-	const astroPackages = await getAstroPackages(astroConfig);
 	// Start with the Vite configuration that Astro core needs
 	const commonConfig: ViteConfigWithSSR = {
 		cacheDir: fileURLToPath(new URL('./node_modules/.vite/', astroConfig.root)), // using local caches allows Astro to be used in monorepos, etc.
@@ -82,7 +83,6 @@ export async function createVite(
 			'import.meta.env.SITE': astroConfig.site ? `'${astroConfig.site}'` : 'undefined',
 		},
 		server: {
-			force: true, // force dependency rebuild (TODO: enabled only while next is unstable; eventually only call in "production" mode?)
 			hmr:
 				process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'production'
 					? false
@@ -115,11 +115,9 @@ export async function createVite(
 			],
 			conditions: ['astro'],
 		},
-		// Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html)
 		ssr: {
-			external: [...ALWAYS_EXTERNAL],
-			noExternal: [...ALWAYS_NOEXTERNAL, ...astroPackages],
-		},
+			noExternal: getSsrNoExternalDeps(astroConfig.root),
+		}
 	};
 
 	// Merge configs: we merge vite configuration objects together in the following order,
@@ -131,111 +129,31 @@ export async function createVite(
 	let result = commonConfig;
 	result = vite.mergeConfig(result, astroConfig.vite || {});
 	result = vite.mergeConfig(result, commandConfig);
-	sortPlugins(result);
+	if (result.plugins) {
+		sortPlugins(result.plugins);
+	}
 
 	return result;
 }
 
-function getPluginName(plugin: vite.PluginOption) {
-	if (plugin && typeof plugin === 'object' && !Array.isArray(plugin)) {
-		return plugin.name;
-	}
+function isVitePlugin(plugin: vite.PluginOption): plugin is vite.Plugin {
+	return Boolean(plugin?.hasOwnProperty('name'));
 }
 
-function sortPlugins(result: ViteConfigWithSSR) {
-	// HACK: move mdxPlugin to top because it needs to run before internal JSX plugin
-	const mdxPluginIndex =
-		result.plugins?.findIndex((plugin) => getPluginName(plugin) === '@mdx-js/rollup') ?? -1;
-	if (mdxPluginIndex === -1) return;
-	const jsxPluginIndex =
-		result.plugins?.findIndex((plugin) => getPluginName(plugin) === 'astro:jsx') ?? -1;
-	const mdxPlugin = result.plugins?.[mdxPluginIndex];
-	result.plugins?.splice(mdxPluginIndex, 1);
-	result.plugins?.splice(jsxPluginIndex, 0, mdxPlugin);
+function findPluginIndexByName(pluginOptions: vite.PluginOption[], name: string): number {
+	return pluginOptions.findIndex(function (pluginOption) {
+		// Use isVitePlugin to ignore nulls, booleans, promises, and arrays
+		// CAUTION: could be a problem if a plugin we're searching for becomes async!
+		return isVitePlugin(pluginOption) && pluginOption.name === name
+	})
 }
 
-// Scans `projectRoot` for third-party Astro packages that could export an `.astro` file
-// `.astro` files need to be built by Vite, so these should use `noExternal`
-async function getAstroPackages({ root }: AstroConfig): Promise<string[]> {
-	const pkgUrl = new URL('./package.json', root);
-	const pkgPath = fileURLToPath(pkgUrl);
-	if (!fs.existsSync(pkgPath)) return [];
-
-	const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-
-	const deps = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {})];
-
-	return deps.filter((dep) => {
-		// Attempt: package is common and not Astro. ❌ Skip these for perf
-		if (isCommonNotAstro(dep)) return false;
-		// Attempt: package is named `astro-something`. ✅ Likely a community package
-		if (/^astro\-/.test(dep)) return true;
-		const depPkgUrl = new URL(`./node_modules/${dep}/package.json`, root);
-		const depPkgPath = fileURLToPath(depPkgUrl);
-		if (!fs.existsSync(depPkgPath)) return false;
-
-		const {
-			dependencies = {},
-			peerDependencies = {},
-			keywords = [],
-		} = JSON.parse(fs.readFileSync(depPkgPath, 'utf-8'));
-		// Attempt: package relies on `astro`. ✅ Definitely an Astro package
-		if (peerDependencies.astro || dependencies.astro) return true;
-		// Attempt: package is tagged with `astro` or `astro-component`. ✅ Likely a community package
-		if (keywords.includes('astro') || keywords.includes('astro-component')) return true;
-		return false;
-	});
-}
-
-const COMMON_DEPENDENCIES_NOT_ASTRO = [
-	'autoprefixer',
-	'react',
-	'react-dom',
-	'preact',
-	'preact-render-to-string',
-	'vue',
-	'svelte',
-	'solid-js',
-	'lit',
-	'cookie',
-	'dotenv',
-	'esbuild',
-	'eslint',
-	'jest',
-	'postcss',
-	'prettier',
-	'astro',
-	'tslib',
-	'typescript',
-	'vite',
-];
-
-const COMMON_PREFIXES_NOT_ASTRO = [
-	'@webcomponents/',
-	'@fontsource/',
-	'@postcss-plugins/',
-	'@rollup/',
-	'@astrojs/renderer-',
-	'@types/',
-	'@typescript-eslint/',
-	'eslint-',
-	'jest-',
-	'postcss-plugin-',
-	'prettier-plugin-',
-	'remark-',
-	'rehype-',
-	'rollup-plugin-',
-	'vite-plugin-',
-];
-
-function isCommonNotAstro(dep: string): boolean {
-	return (
-		COMMON_DEPENDENCIES_NOT_ASTRO.includes(dep) ||
-		COMMON_PREFIXES_NOT_ASTRO.some(
-			(prefix) =>
-				prefix.startsWith('@')
-					? dep.startsWith(prefix)
-					: dep.substring(dep.lastIndexOf('/') + 1).startsWith(prefix) // check prefix omitting @scope/
-		)
-	);
+function sortPlugins(pluginOptions: vite.PluginOption[]) {
+	// HACK: move mdxPlugin to top because it needs to run before internal JSX plugin
+	const mdxPluginIndex = findPluginIndexByName(pluginOptions, '@mdx-js/rollup');
+	if (mdxPluginIndex === -1) return;
+	const jsxPluginIndex = findPluginIndexByName(pluginOptions, 'astro:jsx');
+	const mdxPlugin = pluginOptions[mdxPluginIndex];
+	pluginOptions.splice(mdxPluginIndex, 1);
+	pluginOptions.splice(jsxPluginIndex, 0, mdxPlugin);
 }

packages/astro/src/core/util.ts

@@ -105,9 +105,9 @@ export function codeFrame(src: string, loc: ErrorPayload['err']['loc']): string
 	return output;
 }
 
-export function resolveDependency(dep: string, astroConfig: AstroConfig) {
+export function resolveDependency(dep: string, projectRoot: URL) {
 	const resolved = resolve.sync(dep, {
-		basedir: fileURLToPath(astroConfig.root),
+		basedir: fileURLToPath(projectRoot),
 	});
 	// For Windows compat, we need a fully resolved `file://` URL string
 	return pathToFileURL(resolved).toString();

packages/astro/src/vite-plugin-astro/hmr.ts

@@ -41,7 +41,7 @@ export async function trackCSSDependencies(
 			}
 
 			// Update the module graph, telling it about our CSS deps.
-			moduleGraph.updateModuleInfo(mod, depModules, new Set(), true);
+			moduleGraph.updateModuleInfo(mod, depModules, new Map(), new Set(), new Set(), true);
 			for (const dep of cssDeps) {
 				this.addWatchFile(dep);
 			}

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

@@ -67,7 +67,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 		configureServer(server) {
 			viteDevServer = server;
 		},
-		// note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
+		// note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.glob, etc.)
 		async resolveId(id, from, opts) {
 			// If resolving from an astro subresource such as a hoisted script,
 			// we need to resolve relative paths ourselves.

packages/astro/test/fixtures/api-routes/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/api-routes",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/astro-response/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/astro-response",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/config-vite/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/config-vite",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/fontsource-package/astro.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	vite: {
+		ssr: {
+			noExternal: [
+				'@fontsource/montserrat',
+				'@fontsource/monofett',
+			]
+		}
+	}
+});

packages/astro/test/fixtures/hmr-css/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/hmr-css",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/import-ts-with-js/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/import-ts-with-js",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}