Unflag the static build (#2652)

* Unflag the static build * Only set legacyBuild to false if experimentalSSR is true * Use legacy build when we have to * Put a few more tests into legacy mode * Last two * Make astro-basic use the legacy build * Adds a changeset * Mark the lit test as legacy * Update yarn lock * Update based on feedback * Add --legacy-build flag
withastro · Mar 4, 2022 · 8ce63ee · 8ce63ee
1 parent 1a7dfb1
commit 8ce63ee
Show file tree

Hide file tree

Showing 35 changed files with 134 additions and 39 deletions.
diff --git a/.changeset/modern-elephants-burn.md b/.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.
diff --git a/packages/astro/src/@types/astro.ts b/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;
 }
 
@@ -266,12 +268,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;
 	};
@@ -634,7 +643,7 @@ export interface SSRElement {
 export interface SSRMetadata {
 	renderers: Renderer[];
 	pathname: string;
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 }
 
 export interface SSRResult {

diff --git a/packages/astro/src/core/app/index.ts b/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,

diff --git a/packages/astro/src/core/build/index.ts b/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,

diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts
@@ -364,7 +364,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,

diff --git a/packages/astro/src/core/config.ts b/packages/astro/src/core/config.ts
@@ -60,7 +60,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),
 		})
@@ -128,7 +129,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,
 	};
@@ -147,6 +149,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;

diff --git a/packages/astro/src/core/render/core.ts b/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;
 	}
 

diff --git a/packages/astro/src/core/render/dev/index.ts b/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);
 	}

diff --git a/packages/astro/src/core/render/result.ts b/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
 		},
 	};
 

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -438,7 +438,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,

diff --git a/packages/astro/src/vite-plugin-astro/compile.ts b/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.

diff --git a/packages/astro/test/0-css.test.js b/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
 		});
 	});
 

diff --git a/packages/astro/test/astro-assets.test.js b/packages/astro/test/astro-assets.test.js
@@ -11,7 +11,10 @@ describe('Assets', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-assets/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-assets/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

diff --git a/packages/astro/test/astro-basic.test.js b/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 } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 		previewServer = await fixture.preview();
 	});

diff --git a/packages/astro/test/astro-client-only.test.js b/packages/astro/test/astro-client-only.test.js
@@ -6,7 +6,10 @@ describe('Client only components', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-client-only/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 		await fixture.build();
 	});
 

diff --git a/packages/astro/test/astro-css-bundling-import.test.js b/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();
 	});
 

diff --git a/packages/astro/test/astro-css-bundling-nested-layouts.test.js b/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();
 	});
 

diff --git a/packages/astro/test/astro-css-bundling.test.js b/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' });
 	});
 

diff --git a/packages/astro/test/astro-dynamic.test.js b/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();
 	});
 

diff --git a/packages/astro/test/astro-envs.test.js b/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();
 	});

diff --git a/packages/astro/test/astro-global.test.js b/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();

diff --git a/packages/astro/test/astro-jsx.test.js b/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();