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();