Move some tests over to the static build (#2677)

* Move some tests over to the static build

* Fix assets tests

* Fix the assets tests

* Fix for the client:only components

* Moves asset tests to the static build

* Move postcss test over to static build

* Bring back legacy build for astro-basic test

.changeset/modern-elephants-burn.md

@@ -0,0 +1,19 @@
+---
+'astro': minor
+---
+
+New default build strategy
+
+This change marks the "static build" as the new default build strategy. If you are unfamiliar with this build strategy check out the [migration guide](https://docs.astro.build/en/migrate/#planned-deprecations) on how to change your code to be compatible with this new bulid strategy.
+
+If you'd like to keep using the old build strategy, use the flag `--legacy-build` both in your `astro dev` and `astro build` scripts, for ex:
+
+```json
+{
+  "scripts": {
+    "build": "astro build --legacy-build"
+  }
+}
+```
+
+Note that the legacy build *is* deprecated and will be removed in a future version. You should only use this flag until you have the time to migration your code.

packages/astro/package.json

@@ -56,7 +56,7 @@
     "test:match": "mocha --timeout 15000 -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.11.4",
+    "@astrojs/compiler": "^0.12.0-next.5",
     "@astrojs/language-server": "^0.8.6",
     "@astrojs/markdown-remark": "^0.6.2",
     "@astrojs/prism": "0.4.0",

packages/astro/src/@types/astro.ts

@@ -27,8 +27,10 @@ export interface CLIFlags {
 	hostname?: string;
 	port?: number;
 	config?: string;
+	/** @deprecated */
 	experimentalStaticBuild?: boolean;
 	experimentalSsr?: boolean;
+	legacyBuild?: boolean;
 	drafts?: boolean;
 }
 
@@ -129,12 +131,19 @@ export interface AstroUserConfig {
 		 */
 		drafts?: boolean;
 		/**
-		 * Experimental: Enables "static build mode" for faster builds.
+		 * Enables "legacy build mode" for compatibility with older Astro versions.
 		 * Default: false
 		 */
+		legacyBuild?: boolean;
+		/**
+		 * @deprecated
+		 * Experimental: Enables "static build mode" for faster builds.
+		 * Default: true
+		 */
 		experimentalStaticBuild?: boolean;
 		/**
 		 * Enable a build for SSR support.
+		 * Default: false
 		 */
 		experimentalSsr?: boolean;
 	};
@@ -422,7 +431,7 @@ export interface SSRElement {
 export interface SSRMetadata {
 	renderers: Renderer[];
 	pathname: string;
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 }
 
 export interface SSRResult {

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

@@ -46,7 +46,7 @@ export class App {
 		const scripts = createModuleScriptElementWithSrcSet(info.scripts, manifest.site);
 
 		return render({
-			experimentalStaticBuild: true,
+			legacyBuild: false,
 			links,
 			logging: defaultLogOptions,
 			markdownRender: manifest.markdown.render,

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

@@ -110,7 +110,7 @@ class AstroBuilder {
 		timer.buildStart = performance.now();
 
 		// Use the new faster static based build.
-		if (this.config.buildOptions.experimentalStaticBuild) {
+		if (!this.config.buildOptions.legacyBuild) {
 			await staticBuild({
 				allPages,
 				astroConfig: this.config,

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

@@ -130,6 +130,8 @@ export async function staticBuild(opts: StaticBuildOptions) {
 			const topLevelImports = new Set([
 				// Any component that gets hydrated
 				...metadata.hydratedComponentPaths(),
+				// Client-only components
+				...metadata.clientOnlyComponentPaths(),
 				// Any hydration directive like astro/client/idle.js
 				...metadata.hydrationDirectiveSpecifiers(),
 				// The client path for each renderer
@@ -181,6 +183,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 		logLevel: 'error',
 		mode: 'production',
 		build: {
+			...viteConfig.build,
 			emptyOutDir: false,
 			manifest: ssr,
 			minify: false,
@@ -364,7 +367,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
 
 	try {
 		const html = await render({
-			experimentalStaticBuild: true,
+			legacyBuild: false,
 			links,
 			logging,
 			markdownRender: astroConfig.markdownOptions.render,

packages/astro/src/core/config.ts

@@ -62,7 +62,8 @@ export const AstroConfigSchema = z.object({
 				.union([z.literal('file'), z.literal('directory')])
 				.optional()
 				.default('directory'),
-			experimentalStaticBuild: z.boolean().optional().default(false),
+			legacyBuild: z.boolean().optional().default(false),
+			experimentalStaticBuild: z.boolean().optional().default(true),
 			experimentalSsr: z.boolean().optional().default(false),
 			drafts: z.boolean().optional().default(false),
 		})
@@ -130,7 +131,8 @@ function resolveFlags(flags: Partial<Flags>): CLIFlags {
 		port: typeof flags.port === 'number' ? flags.port : undefined,
 		config: typeof flags.config === 'string' ? flags.config : undefined,
 		hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined,
-		experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : false,
+		legacyBuild: typeof flags.legacyBuild === 'boolean' ? flags.legacyBuild : false,
+		experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : true,
 		experimentalSsr: typeof flags.experimentalSsr === 'boolean' ? flags.experimentalSsr : false,
 		drafts: typeof flags.drafts === 'boolean' ? flags.drafts : false,
 	};
@@ -149,6 +151,7 @@ function mergeCLIFlags(astroConfig: AstroUserConfig, flags: CLIFlags) {
 		astroConfig.buildOptions.experimentalSsr = flags.experimentalSsr;
 		if (flags.experimentalSsr) {
 			astroConfig.buildOptions.experimentalStaticBuild = true;
+			astroConfig.buildOptions.legacyBuild = false;
 		}
 	}
 	if (typeof flags.drafts === 'boolean') astroConfig.buildOptions.drafts = flags.drafts;

packages/astro/src/core/render/core.ts

@@ -47,7 +47,7 @@ async function getParamsAndProps(opts: GetParamsAndPropsOptions): Promise<[Param
 }
 
 interface RenderOptions {
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 	logging: LogOptions;
 	links: Set<SSRElement>;
 	markdownRender: MarkdownRenderOptions;
@@ -63,7 +63,7 @@ interface RenderOptions {
 }
 
 export async function render(opts: RenderOptions): Promise<string> {
-	const { experimentalStaticBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
+	const { legacyBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
 
 	const [params, pageProps] = await getParamsAndProps({
 		logging,
@@ -84,7 +84,7 @@ export async function render(opts: RenderOptions): Promise<string> {
 	if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
 
 	const result = createResult({
-		experimentalStaticBuild,
+		legacyBuild,
 		links,
 		logging,
 		markdownRender,
@@ -100,7 +100,7 @@ export async function render(opts: RenderOptions): Promise<string> {
 	let html = await renderPage(result, Component, pageProps, null);
 
 	// inject <!doctype html> if missing (TODO: is a more robust check needed for comments, etc.?)
-	if (experimentalStaticBuild && !/<!doctype html/i.test(html)) {
+	if (!legacyBuild && !/<!doctype html/i.test(html)) {
 		html = '<!DOCTYPE html>\n' + html;
 	}
 

packages/astro/src/core/render/dev/index.ts

@@ -51,11 +51,11 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 
 	// Add hoisted script tags
 	const scripts = createModuleScriptElementWithSrcSet(
-		astroConfig.buildOptions.experimentalStaticBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
+		!astroConfig.buildOptions.legacyBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
 	);
 
 	// Inject HMR scripts
-	if (mod.hasOwnProperty('$$metadata') && mode === 'development' && astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !astroConfig.buildOptions.legacyBuild) {
 		scripts.add({
 			props: { type: 'module', src: '/@vite/client' },
 			children: '',
@@ -67,7 +67,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 	}
 
 	let content = await coreRender({
-		experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild,
+		legacyBuild: astroConfig.buildOptions.legacyBuild,
 		links: new Set(),
 		logging,
 		markdownRender: astroConfig.markdownOptions.render,
@@ -80,7 +80,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 			// The legacy build needs these to remain unresolved so that vite HTML
 			// Can do the resolution. Without this condition the build output will be
 			// broken in the legacy build. This can be removed once the legacy build is removed.
-			if (astroConfig.buildOptions.experimentalStaticBuild) {
+			if (!astroConfig.buildOptions.legacyBuild) {
 				const [, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s);
 				return resolvedPath;
 			} else {
@@ -101,7 +101,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 	const tags: vite.HtmlTagDescriptor[] = [];
 
 	// dev only: inject Astro HMR client
-	if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
 		tags.push({
 			tag: 'script',
 			attrs: { type: 'module' },
@@ -137,7 +137,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 	content = injectTags(content, tags);
 
 	// run transformIndexHtml() in dev to run Vite dev transformations
-	if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
 		const relativeURL = filePath.href.replace(astroConfig.projectRoot.href, '/');
 		content = await viteServer.transformIndexHtml(relativeURL, content, pathname);
 	}

packages/astro/src/core/render/result.ts

@@ -8,7 +8,7 @@ import { renderSlot } from '../../runtime/server/index.js';
 import { warn, LogOptions } from '../logger.js';
 
 export interface CreateResultArgs {
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 	logging: LogOptions;
 	origin: string;
 	markdownRender: MarkdownRenderOptions;
@@ -22,7 +22,7 @@ export interface CreateResultArgs {
 }
 
 export function createResult(args: CreateResultArgs): SSRResult {
-	const { experimentalStaticBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
+	const { legacyBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
 
 	// Create the result object that will be passed into the render function.
 	// This object starts here as an empty shell (not yet the result) but then
@@ -45,7 +45,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
 					url,
 				},
 				resolve(path: string) {
-					if (experimentalStaticBuild) {
+					if (!legacyBuild) {
 						let extra = `This can be replaced with a dynamic import like so: await import("${path}")`;
 						if (isCSSRequest(path)) {
 							extra = `It looks like you are resolving styles. If you are adding a link tag, replace with this:
@@ -116,7 +116,7 @@ ${extra}`
 		_metadata: {
 			renderers,
 			pathname,
-			experimentalStaticBuild,
+			legacyBuild
 		},
 	};
 

packages/astro/src/runtime/server/index.ts

@@ -435,7 +435,7 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
 	const styles = Array.from(result.styles)
 		.filter(uniqueElements)
 		.map((style) => {
-			const styleChildren = result._metadata.experimentalStaticBuild ? '' : style.children;
+			const styleChildren = !result._metadata.legacyBuild ? '' : style.children;
 
 			return renderElement('style', {
 				children: styleChildren,

packages/astro/src/runtime/server/metadata.ts

@@ -13,6 +13,7 @@ interface ComponentMetadata {
 interface CreateMetadataOptions {
 	modules: ModuleInfo[];
 	hydratedComponents: any[];
+	clientOnlyComponents: any[];
 	hydrationDirectives: Set<string>;
 	hoisted: any[];
 }
@@ -22,6 +23,7 @@ export class Metadata {
 	public modules: ModuleInfo[];
 	public hoisted: any[];
 	public hydratedComponents: any[];
+	public clientOnlyComponents: any[];
 	public hydrationDirectives: Set<string>;
 
 	private metadataCache: Map<any, ComponentMetadata | null>;
@@ -30,6 +32,7 @@ export class Metadata {
 		this.modules = opts.modules;
 		this.hoisted = opts.hoisted;
 		this.hydratedComponents = opts.hydratedComponents;
+		this.clientOnlyComponents = opts.clientOnlyComponents;
 		this.hydrationDirectives = opts.hydrationDirectives;
 		this.mockURL = new URL(filePathname, 'http://example.com');
 		this.metadataCache = new Map<any, ComponentMetadata | null>();
@@ -66,6 +69,19 @@ export class Metadata {
 		}
 	}
 
+	*clientOnlyComponentPaths() {
+		const found = new Set<string>();
+		for (const metadata of this.deepMetadata()) {
+			for (const component of metadata.clientOnlyComponents) {
+				const path = metadata.resolvePath(component);
+				if (path && !found.has(path)) {
+					found.add(path);
+					yield path;
+				}
+			}
+		}
+	}
+
 	/**
 	 * Gets all of the hydration specifiers used within this component.
 	 */

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

@@ -54,15 +54,15 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
 		sourcefile: filename,
 		sourcemap: 'both',
 		internalURL: 'astro/internal',
-		experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
+		experimentalStaticExtraction: !config.buildOptions.legacyBuild,
 		// TODO add experimental flag here
 		preprocessStyle: async (value: string, attrs: Record<string, string>) => {
 			const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
 
 			try {
 				// In the static build, grab any @import as CSS dependencies for HMR.
-				if (config.buildOptions.experimentalStaticBuild) {
-					value = value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
+				if (!config.buildOptions.legacyBuild) {
+					value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
 						rawCSSDeps.add(spec);
 						// If the language is CSS: prevent `@import` inlining to prevent scoping of imports.
 						// Otherwise: Sass, etc. need to see imports for variables, so leave in for their compiler to handle.

packages/astro/test/0-css.test.js

@@ -15,6 +15,7 @@ describe('CSS', function () {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/0-css/',
 			renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 		});
 	});
 

packages/astro/test/astro-assets.test.js

@@ -11,7 +11,14 @@ describe('Assets', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-assets/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-assets/',
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
+		});
 		await fixture.build();
 	});
 
@@ -19,7 +26,7 @@ describe('Assets', () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 		const imgPath = $('img').attr('src');
-		const data = await fixture.readFile('/' + imgPath);
+		const data = await fixture.readFile( imgPath);
 		expect(!!data).to.equal(true);
 	});
 
@@ -29,7 +36,7 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 2);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
@@ -39,14 +46,14 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 3);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
 	it('built image from an import specifier', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-no-url').attr('src');
+		const src = $('#import-no-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});
@@ -54,7 +61,7 @@ describe('Assets', () => {
 	it('built image from an import specifier using ?url', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-url').attr('src');
+		const src = $('#import-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});

packages/astro/test/astro-basic.test.js

@@ -7,7 +7,10 @@ describe('Astro basics', () => {
 	let previewServer;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-basic/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-basic/',
+			buildOptions: { legacyBuild: true }
+		});
 		await fixture.build();
 		previewServer = await fixture.preview();
 	});

packages/astro/test/astro-client-only.test.js

@@ -6,7 +6,9 @@ describe('Client only components', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-client-only/',
+		});
 		await fixture.build();
 	});
 
@@ -16,19 +18,10 @@ describe('Client only components', () => {
 
 		// test 1: <astro-root> is empty
 		expect($('astro-root').html()).to.equal('');
-		const src = $('script').attr('src');
+		const $script = $('script');
+		const script = $script.html();
 
-		const script = await fixture.readFile(src);
 		// test 2: svelte renderer is on the page
-		const exp = /import\("(.\/client.*)"\)/g;
-		let match, svelteRenderer;
-		while ((match = exp.exec(script))) {
-			svelteRenderer = match[1].replace(/^\./, '/assets/');
-		}
-		expect(svelteRenderer).to.be.ok;
-
-		// test 3: can load svelte renderer
-		const svelteClient = await fixture.readFile(svelteRenderer);
-		expect(svelteClient).to.be.ok;
+		expect(/import\(".\/PersistentCounter.*/g.test(script)).to.be.ok;
 	});
 });

packages/astro/test/astro-components.test.js

@@ -1,56 +0,0 @@
-/**
- * UNCOMMENT: add support for functional components in frontmatter
-import { expect } from 'chai';
-import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
-
-let fixture;
-
-before(async () => {
-  fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
-  await fixture.build();
-});
-
-// TODO: add support for functional components in frontmatter
-describe('Components tests', () => {
-  it('Astro components are able to render framework components', async () => {
-    const html = await fixture.readFile('/index.html');
-    const $ = cheerio.load(html);
-
-    // test 1: Renders Astro component
-    const $astro = $('#astro');
-    expect($astro.children()).to.have.lengthOf(3);
-
-    // test 2: Renders React component
-    const $react = $('#react');
-    expect($react).not.to.have.lengthOf(0);
-
-    // test 3: Renders Vue component
-    const $vue = $('#vue');
-    expect($vue).not.to.have.lengthOf(0);
-
-    // test 4: Renders Svelte component
-    const $svelte = $('#svelte');
-    expect($svelte).not.to.have.lengthOf(0);
-  });
-
-  it('Allows Components defined in frontmatter', async () => {
-    const html = await fixture.readFile('/frontmatter-component/index.html');
-    const $ = cheerio.load(html);
-
-    expect($('h1')).to.have.lengthOf(1);
-  });
-
-  it('Still throws an error for undefined components', async () => {
-    const result = await fixture.readFile('/undefined-component/index.html');
-    expect(result.status).to.equal(500);
-  });
-
-  it('Client attrs not added', async () => {
-    const html = await fixture.readFile('/client/index.html');
-    expect(html).not.to.include(`"client:load": true`);
-  });
-});
-*/
-
-it.skip('is skipped', () => {});

packages/astro/test/astro-css-bundling-import.test.js

@@ -6,7 +6,10 @@ describe('CSS Bundling (ESM import)', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-import/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-css-bundling-import/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

packages/astro/test/astro-css-bundling-nested-layouts.test.js

@@ -2,11 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-describe('nested layouts', () => {
+describe('CSS bundling - nested layouts', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-nested-layouts/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-css-bundling-nested-layouts/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

packages/astro/test/astro-css-bundling.test.js

@@ -17,7 +17,10 @@ describe('CSS Bundling', function () {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-css-bundling/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build({ mode: 'production' });
 	});
 

packages/astro/test/astro-dynamic.test.js

@@ -6,7 +6,10 @@ describe('Dynamic components', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-dynamic/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-dynamic/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

packages/astro/test/astro-envs.test.js

@@ -5,7 +5,10 @@ describe('Environment Variables', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-envs/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-envs/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 
 		await fixture.build();
 	});

packages/astro/test/astro-global.test.js

@@ -11,6 +11,7 @@ describe('Astro.*', () => {
 			buildOptions: {
 				site: 'https://mysite.dev/blog/',
 				sitemap: false,
+				legacyBuild: true
 			},
 		});
 		await fixture.build();

packages/astro/test/astro-jsx.test.js

@@ -20,6 +20,9 @@ describe('JSX', () => {
 					projectRoot: cwd,
 					renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
 					dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
+					buildOptions: {
+						legacyBuild: true
+					}
 				}).then((fixture) => {
 					fixtures[renderers.toString()] = fixture;
 					return fixture.build();

packages/astro/test/astro-pagination.test.js

@@ -11,6 +11,7 @@ describe('Pagination', () => {
 			buildOptions: {
 				site: 'https://mysite.dev/blog/',
 				sitemap: false,
+				legacyBuild: true,
 			},
 		});
 		await fixture.build();

packages/astro/test/astro-partial-html.test.js

@@ -7,7 +7,10 @@ describe('Partial HTML ', async () => {
 	let devServer;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-partial-html/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-partial-html/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		devServer = await fixture.startDevServer();
 	});
 

packages/astro/test/astro-scripts.test.js

@@ -7,7 +7,14 @@ describe('Scripts (hoisted and not)', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-scripts/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-scripts/',
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
+		});
 		await fixture.build();
 	});
 
@@ -38,8 +45,8 @@ describe('Scripts (hoisted and not)', () => {
 		// test 2: attr removed
 		expect($('script').attr('data-astro')).to.equal(undefined);
 
-		let entryURL = path.join('inline', $('script').attr('src'));
-		let inlineEntryJS = await fixture.readFile(entryURL);
+		const entryURL =  $('script').attr('src');
+		const inlineEntryJS = await fixture.readFile(entryURL);
 
 		// test 3: the JS exists
 		expect(inlineEntryJS).to.be.ok;
@@ -53,7 +60,7 @@ describe('Scripts (hoisted and not)', () => {
 		expect($('script')).to.have.lengthOf(2);
 
 		let el = $('script').get(1);
-		let entryURL = path.join('external', $(el).attr('src'));
+		let entryURL = $(el).attr('src');
 		let externalEntryJS = await fixture.readFile(entryURL);
 
 		// test 2: the JS exists

packages/astro/test/astro-sitemap-rss.test.js

@@ -10,6 +10,7 @@ describe('Sitemaps', () => {
 			buildOptions: {
 				site: 'https://astro.build/',
 				sitemap: true,
+				legacyBuild: true,
 			},
 		});
 		await fixture.build();
@@ -53,6 +54,7 @@ describe('Sitemaps served from subdirectory', () => {
 			buildOptions: {
 				site: 'https://astro.build/base-directory/',
 				sitemap: true,
+				legacyBuild: true
 			},
 		});
 		await fixture.build();

packages/astro/test/builtins.test.js

@@ -6,7 +6,10 @@ describe('Node builtins', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/builtins/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

packages/astro/test/cli.test.js

@@ -1,47 +0,0 @@
-import { expect } from 'chai';
-import { cli } from './test-utils.js';
-import { promises as fs } from 'fs';
-import { fileURLToPath } from 'url';
-
-describe('astro cli', () => {
-	it('astro', async () => {
-		const proc = await cli();
-
-		expect(proc.stdout).to.include('astro - Futuristic web development tool');
-	});
-
-	it('astro --version', async () => {
-		const pkgURL = new URL('../package.json', import.meta.url);
-		const pkgVersion = await fs.readFile(pkgURL, 'utf8').then((data) => JSON.parse(data).version);
-
-		const proc = await cli('--version');
-
-		expect(proc.stdout).to.equal(pkgVersion);
-	});
-
-	it('astro dev', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = cli('dev', '--project-root', fileURLToPath(projectRootURL));
-
-		let stdout = '';
-
-		for await (const chunk of proc.stdout) {
-			stdout += chunk;
-
-			if (chunk.includes('Local:')) break;
-		}
-
-		proc.kill();
-
-		expect(stdout).to.include('Server started');
-	});
-
-	it('astro build', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL));
-
-		expect(proc.stdout).to.include('Done');
-	});
-});

packages/astro/test/custom-elements.test.js

@@ -9,6 +9,7 @@ describe('Custom Elements', () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/custom-elements/',
 			renderers: ['@astrojs/test-custom-element-renderer'],
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 		});
 		await fixture.build();
 	});

packages/astro/test/fixtures/astro-assets/src/pages/index.astro

@@ -9,7 +9,7 @@ import p2Url from '../images/penguin2.jpg?url';
 </style>
 <body>
   <h1>Icons</h1>
-  <img src={Astro.resolve('../images/twitter.png')} srcset={`${Astro.resolve('../images/twitter.png')} 1x, ${Astro.resolve('../images/twitter@2x.png')} 2x, ${Astro.resolve('../images/twitter@3x.png')} 3x`} />
+  <img src={(await import('../images/twitter.png')).default} srcset={`${(await import('../images/twitter.png')).default} 1x, ${(await import('../images/twitter@2x.png')).default} 2x, ${(await import('../images/twitter@3x.png')).default} 3x`} />
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
   <!--

packages/astro/test/fixtures/astro-components/src/components/Component.astro

@@ -1,11 +0,0 @@
----
-import ReactComponent from './Component.jsx';
-import VueComponent from './Component.vue';
-import SvelteComponent from './Component.svelte';
----
-
-<div id="astro">
-  <ReactComponent />
-  <VueComponent />
-  <SvelteComponent />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.jsx

@@ -1,5 +0,0 @@
-import { h } from 'preact';
-
-export default function PreactComponent({ children }) {
-  return <div id="preact">{children}</div>;
-}

packages/astro/test/fixtures/astro-components/src/components/Component.svelte

@@ -1,3 +0,0 @@
-<div id="svelte">
-    <slot />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.vue

@@ -1,9 +0,0 @@
-<template>
-  <div id="vue">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {}
-</script>

packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro

@@ -1,6 +0,0 @@
----
-export interface Props {
-    test: string;
-}
----
-<h1 id="direct-props-h1">{props.test}</h1>

packages/astro/test/fixtures/astro-components/src/pages/client.astro

@@ -1,9 +0,0 @@
----
-import SvelteComponent from '../components/Component.svelte';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <SvelteComponent client:load />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/frontmatter-component.astro

@@ -1,6 +0,0 @@
----
-const { level = 1 } = Astro.props;
-const Element = `h${level}`;
----
-
-<Element>Hello world!</Element>

packages/astro/test/fixtures/astro-components/src/pages/index.astro

@@ -1,9 +0,0 @@
----
-import AstroComponent from '../components/Component.astro';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <AstroComponent />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro

@@ -1,4 +0,0 @@
----
-import PropsComponent from "../components/Props-Component.astro"
----
-<PropsComponent test="test string"/>

packages/astro/test/fixtures/astro-components/src/pages/undefined-component.astro

@@ -1,11 +0,0 @@
----
-function FnComponent() {
-  const lame = 'ugh';
-  return <h2>Hey</h2>
-}
-const Defined = 'h1'
----
-
-<FnComponent />
-<Defined>Hello world!</Defined>
-<Undefined />

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistClassic.astro

@@ -1 +1,4 @@
-<script src={Astro.resolve("../scripts/no_hoist_nonmodule.js")}></script>
+---
+import url from "../scripts/no_hoist_nonmodule.js?url"
+---
+<script src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistModule.astro

@@ -1 +1,4 @@
-<script type="module" src={Astro.resolve("../scripts/no_hoist_module.js")}></script>
+---
+import url from '../scripts/no_hoist_module.js?url';
+---
+<script type="module" src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/something.js")}></script>
+<script hoist type="module" src="../scripts/something.js"></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget2.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/another_external.js")}></script>
+<script hoist type="module" src="../scripts/another_external.js"></script>

packages/astro/test/fixtures/postcss/src/pages/index.astro

@@ -4,9 +4,12 @@ import JSX from '../components/Solid.jsx';
 import Svelte from '../components/Svelte.svelte';
 import Vue from '../components/Vue.vue';
 ---
+<html>
 <head>
   <link rel="stylesheet" type="text/css" href="/global.css">
-  <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
+	<style>
+		@import '../styles/linked.css';
+	</style>
   <style>
     .astro-page {
       appearance: none;
@@ -22,3 +25,5 @@ import Vue from '../components/Vue.vue';
     <Vue />
   </div>
 </body>
+
+</html>

packages/astro/test/lit-element.test.js

@@ -18,6 +18,9 @@ describe('LitElement test', function () {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/lit-element/',
 			renderers: ['@astrojs/renderer-lit'],
+			buildOptions: {
+				legacyBuild: true
+			}
 		});
 		await fixture.build();
 	});

packages/astro/test/postcss.test.js

@@ -18,7 +18,7 @@ describe('PostCSS', () => {
 		// get bundled CSS (will be hashed, hence DOM query)
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
+		const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
 		bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
 	});
 
@@ -30,10 +30,6 @@ describe('PostCSS', () => {
 		expect(bundledCSS).to.match(new RegExp(`.astro-component.astro-[^{]+${PREFIXED_CSS}`));
 	});
 
-	it('works in <link>', () => {
-		expect(bundledCSS).to.match(new RegExp(`.a-n${PREFIXED_CSS}`));
-	});
-
 	it('works in JSX', () => {
 		expect(bundledCSS).to.match(new RegExp(`.solid${PREFIXED_CSS}`));
 	});

packages/astro/test/preview-routing.test.js

@@ -16,6 +16,7 @@ describe('Preview Routing', () => {
 						trailingSlash: 'never',
 						port: 4000,
 					},
+					buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 				});
 				await fixture.build();
 				previewServer = await fixture.preview();
@@ -70,6 +71,7 @@ describe('Preview Routing', () => {
 						trailingSlash: 'always',
 						port: 4001,
 					},
+					buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 				});
 				await fixture.build();
 				previewServer = await fixture.preview();
@@ -128,6 +130,7 @@ describe('Preview Routing', () => {
 						trailingSlash: 'ignore',
 						port: 4002,
 					},
+					buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 				});
 				await fixture.build();
 				previewServer = await fixture.preview();
@@ -186,6 +189,7 @@ describe('Preview Routing', () => {
 					projectRoot: './fixtures/with-subpath-no-trailing-slash/',
 					buildOptions: {
 						pageUrlFormat: 'file',
+						legacyBuild: true
 					},
 					devOptions: {
 						trailingSlash: 'never',
@@ -243,6 +247,7 @@ describe('Preview Routing', () => {
 					projectRoot: './fixtures/with-subpath-no-trailing-slash/',
 					buildOptions: {
 						pageUrlFormat: 'file',
+						legacyBuild: true
 					},
 					devOptions: {
 						trailingSlash: 'always',
@@ -304,6 +309,7 @@ describe('Preview Routing', () => {
 					projectRoot: './fixtures/with-subpath-no-trailing-slash/',
 					buildOptions: {
 						pageUrlFormat: 'file',
+						legacyBuild: true
 					},
 					devOptions: {
 						trailingSlash: 'ignore',
@@ -365,6 +371,7 @@ describe('Preview Routing', () => {
 					projectRoot: './fixtures/with-subpath-no-trailing-slash/',
 					buildOptions: {
 						pageUrlFormat: 'file',
+						legacyBuild: true
 					},
 					devOptions: {
 						trailingSlash: 'ignore',

packages/astro/test/remote-css.test.js

@@ -8,6 +8,7 @@ describe('Remote CSS', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/remote-css/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 		});
 		await fixture.build();
 	});

scripts/memory/index.js

@@ -18,7 +18,7 @@ let config = await loadConfig({
 	cwd: fileURLToPath(projDir),
 });
 
-config.buildOptions.experimentalStaticBuild = true;
+config.buildOptions.legacyBuild = false;
 
 const server = await dev(config, { logging: { level: 'error' } });
 

yarn.lock

@@ -137,10 +137,10 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@astrojs/compiler@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.11.4.tgz#933853cf37ba2cbf0213a88463fd48c3a4329a07"
-  integrity sha512-T598FTCgBFjjPLPClvn+lc2SFGAJkjaF+lbxvHNjzmUpOYdz7YyH1apd3XAZvDp5r5WBBhicB6693GhQRpf3oQ==
+"@astrojs/compiler@^0.12.0-next.5":
+  version "0.12.0-next.5"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.12.0-next.5.tgz#4e6d27c74787777522395018f2497dab4a032c77"
+  integrity sha512-4YVPRrB9JJhxoNC9PWN2zpGE7SXRAXcyCouawbd24iyBl4g9aRoQN12XA0qQZkbea9/NNLe9f2yhFMubM2CrJQ==
   dependencies:
     typescript "^4.3.5"