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
This commit is contained in:
Matthew Phillips 2022-02-25 17:05:57 -05:00 committed by Nate Moore
parent ede96b1b10
commit d75a56cf87
35 changed files with 134 additions and 39 deletions

View file

@ -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.

View file

@ -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 {

View file

@ -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,

View file

@ -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,

View file

@ -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,

View file

@ -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;

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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
},
};

View file

@ -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,

View file

@ -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.

View file

@ -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
});
});

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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' });
});

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -40,7 +40,8 @@ describe('astro cli', () => {
it('astro build', async () => {
const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL));
const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL),
'--legacy-build');
expect(proc.stdout).to.include('Done');
});

View file

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

View file

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

View file

@ -12,6 +12,7 @@ describe('PostCSS', () => {
fixture = await loadFixture({
projectRoot: './fixtures/postcss',
renderers: ['@astrojs/renderer-solid', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();

View file

@ -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',

View file

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

View file

@ -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' } });

View file

@ -7104,6 +7104,15 @@ sass@^1.49.0, sass@^1.49.8:
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
sass@^1.49.8:
version "1.49.9"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
scheduler@^0.20.2:
version "0.20.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"