michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Flagged static (performance optimized) build (#2168)

Browse source 
* Progress on build demo

* Go back to ESM

* Some more progress on the new build

* More progress here

* Add support for hot reload

* Almost done

* Remove debugging stuff

* chore(lint): Prettier fix

* Pass through the origin

* Do not use ssr mode

* Use the logger

* chore(lint): Prettier fix

* Update yarn lock

* Fix types

* Only build chunks that are astro pages

* Debugging windows

* Prevent compilation race condition

* Read the file if not found in the cache

* Give a better error message when we can't find a page

* chore(lint): Prettier fix

* Fix windows maybe

* chore(lint): Prettier fix

* Some more windows debugging

* chore(lint): Prettier fix

* Remove console logs

* More debugging

* chore(lint): Prettier fix

* More debugging info

* chore(lint): Prettier fix

* Remove logging again

* Try to prevent port conflicts

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2021-12-21 11:57:50 -05:00 committed by GitHub
parent 83053bcae9
commit 9aff6eee71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 1531 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
examples/fast-build/astro.config.mjs Normal file
View file

@ -0,0 +1,11 @@
import { imagetools } from 'vite-imagetools';
// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
renderers: [
"@astrojs/renderer-vue"
],
vite: {
plugins: [imagetools()]
}
});

16
examples/fast-build/package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "@example/fast-build",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev --experimental-static-build",
"start": "astro dev",
"build": "astro build --experimental-static-build",
"preview": "astro preview"
},
"devDependencies": {
"astro": "^0.21.6",
"unocss": "^0.15.5",
"vite-imagetools": "^4.0.1"
}
}

20
examples/fast-build/src/components/Greeting.vue Normal file
View file

@ -0,0 +1,20 @@
<script>
export default {
data() {
return {
greeting: 'Hello World!',
};
},
};
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>

BIN
examples/fast-build/src/images/penguin.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
examples/fast-build/src/images/random.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

32
examples/fast-build/src/pages/index.astro Normal file
View file

@ -0,0 +1,32 @@
---
import imgUrl from '../images/penguin.jpg';
import grayscaleUrl from '../images/random.jpg?grayscale=true';
import Greeting from '../components/Greeting.vue';
---
<html>
<head>
<title>Demo app</title>
<style>
h1 { color: salmon; }
</style>
</head>
<body>
<section>
<h1>Images</h1>
<h2>Imported in JS</h2>
<img src={imgUrl} />
</section>
<section>
<h1>Component CSS</h1>
<Greeting />
</section>
<section>
<h1>ImageTools</h1>
<img src={grayscaleUrl} />
</section>
</body>
</html>

3
examples/fast-build/src/styles/global.css Normal file
View file

@ -0,0 +1,3 @@
body {
background: lightcoral;
}

2
packages/astro/package.json
View file

@ -56,7 +56,7 @@
"test": "mocha --parallel --timeout 15000"
},
"dependencies": {
"@astrojs/compiler": "^0.5.4",
"@astrojs/compiler": "^0.6.0",
"@astrojs/language-server": "^0.8.2",
"@astrojs/markdown-remark": "^0.5.0",
"@astrojs/prism": "0.3.0",

2
packages/astro/src/@types/astro.ts
View file

@ -363,11 +363,13 @@ export interface SSRElement {
export interface SSRMetadata {
renderers: Renderer[];
pathname: string;
experimentalStaticBuild: boolean;
}
export interface SSRResult {
styles: Set<SSRElement>;
scripts: Set<SSRElement>;
links: Set<SSRElement>;
createAstro(Astro: AstroGlobalPartial, props: Record<string, any>, slots: Record<string, any> | null): AstroGlobal;
_metadata: SSRMetadata;
}

4
packages/astro/src/cli/index.ts
View file

@ -25,6 +25,7 @@ interface CLIState {
hostname?: string;
port?: number;
config?: string;
experimentalStaticBuild?: boolean;
};
}
@ -37,6 +38,7 @@ function resolveArgs(flags: Arguments): CLIState {
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,
};
if (flags.version) {
@ -73,6 +75,7 @@ function printHelp() {
--config <path> Specify the path to the Astro config file.
--project-root <path> Specify the path to the project root folder.
--no-sitemap Disable sitemap generation (build only).
--experimental-static-build A more performant build that expects assets to be define statically.
--verbose Enable verbose logging
--silent Disable logging
--version Show the version number and exit.
@ -92,6 +95,7 @@ function mergeCLIFlags(astroConfig: AstroConfig, flags: CLIState['options']) {
if (typeof flags.site === 'string') astroConfig.buildOptions.site = flags.site;
if (typeof flags.port === 'number') astroConfig.devOptions.port = flags.port;
if (typeof flags.hostname === 'string') astroConfig.devOptions.hostname = flags.hostname;
if (typeof flags.experimentalStaticBuild === 'boolean') astroConfig.buildOptions.experimentalStaticBuild = flags.experimentalStaticBuild;
}
/** The primary CLI action */

187
packages/astro/src/core/build/index.ts
View file

@ -1,23 +1,18 @@
import type { AstroConfig, ComponentInstance, GetStaticPathsResult, ManifestData, RouteCache, RouteData, RSSResult } from '../../@types/astro';
import type { AstroConfig, ManifestData, RouteCache } from '../../@types/astro';
import type { LogOptions } from '../logger';
import type { AllPagesData } from './types';
import type { RenderedChunk } from 'rollup';
import { rollupPluginAstroBuildHTML } from '../../vite-plugin-build-html/index.js';
import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js';
import fs from 'fs';
import * as colors from 'kleur/colors';
import { polyfill } from '@astropub/webapi';
import { performance } from 'perf_hooks';
import vite, { ViteDevServer } from '../vite.js';
import { fileURLToPath } from 'url';
import { createVite, ViteConfigWithSSR } from '../create-vite.js';
import { debug, defaultLogOptions, info, levels, timerMessage, warn } from '../logger.js';
import { preload as ssrPreload } from '../ssr/index.js';
import { generatePaginateFunction } from '../ssr/paginate.js';
import { createRouteManifest, validateGetStaticPathsModule, validateGetStaticPathsResult } from '../ssr/routing.js';
import { generateRssFunction } from '../ssr/rss.js';
import { createRouteManifest } from '../ssr/routing.js';
import { generateSitemap } from '../ssr/sitemap.js';
import { collectPagesData } from './page-data.js';
import { build as scanBasedBuild } from './scan-based-build.js';
import { staticBuild } from './static-build.js';
export interface BuildOptions {
mode?: string;
@ -82,137 +77,45 @@ class AstroBuilder {
debug(logging, 'build', timerMessage('Vite started', timer.viteStart));
timer.loadStart = performance.now();
const assets: Record<string, string> = {};
const allPages: AllPagesData = {};
// Collect all routes ahead-of-time, before we start the build.
// NOTE: This enforces that `getStaticPaths()` is only called once per route,
// and is then cached across all future SSR builds. In the past, we've had trouble
// with parallelized builds without guaranteeing that this is called first.
await Promise.all(
this.manifest.routes.map(async (route) => {
// static route:
if (route.pathname) {
allPages[route.component] = {
route,
paths: [route.pathname],
preload: await ssrPreload({
astroConfig: this.config,
filePath: new URL(`./${route.component}`, this.config.projectRoot),
logging,
mode: 'production',
origin,
pathname: route.pathname,
route,
routeCache: this.routeCache,
viteServer,
})
.then((routes) => {
const html = `${route.pathname}`.replace(/\/?$/, '/index.html');
debug(logging, 'build', `├── ${colors.bold(colors.green('✔'))} ${route.component} → ${colors.yellow(html)}`);
return routes;
})
.catch((err) => {
debug(logging, 'build', `├── ${colors.bold(colors.red('✘'))} ${route.component}`);
throw err;
}),
};
return;
}
// dynamic route:
const result = await this.getStaticPathsForRoute(route)
.then((routes) => {
const label = routes.paths.length === 1 ? 'page' : 'pages';
debug(logging, 'build', `├── ${colors.bold(colors.green('✔'))} ${route.component} → ${colors.magenta(`[${routes.paths.length} ${label}]`)}`);
return routes;
})
.catch((err) => {
debug(logging, 'build', `├── ${colors.bold(colors.red('✗'))} ${route.component}`);
throw err;
});
if (result.rss?.xml) {
const rssFile = new URL(result.rss.url.replace(/^\/?/, './'), this.config.dist);
if (assets[fileURLToPath(rssFile)]) {
throw new Error(`[getStaticPaths] RSS feed ${result.rss.url} already exists.\nUse \`rss(data, {url: '...'})\` to choose a unique, custom URL. (${route.component})`);
}
assets[fileURLToPath(rssFile)] = result.rss.xml;
}
allPages[route.component] = {
route,
paths: result.paths,
preload: await ssrPreload({
astroConfig: this.config,
filePath: new URL(`./${route.component}`, this.config.projectRoot),
logging,
mode: 'production',
origin,
pathname: result.paths[0],
route,
routeCache: this.routeCache,
viteServer,
}),
};
})
);
const { assets, allPages } = await collectPagesData({
astroConfig: this.config,
logging: this.logging,
manifest: this.manifest,
origin,
routeCache: this.routeCache,
viteServer: this.viteServer,
});
debug(logging, 'build', timerMessage('All pages loaded', timer.loadStart));
// Pure CSS chunks are chunks that only contain CSS.
// This is all of them, and chunkToReferenceIdMap maps them to a hash id used to find the final file.
const pureCSSChunks = new Set<RenderedChunk>();
const chunkToReferenceIdMap = new Map<string, string>();
// This is a mapping of pathname to the string source of all collected
// inline <style> for a page.
const astroStyleMap = new Map<string, string>();
// This is a virtual JS module that imports all dependent styles for a page.
const astroPageStyleMap = new Map<string, string>();
// The names of each pages
const pageNames: string[] = [];
// Bundle the assets in your final build: This currently takes the HTML output
// of every page (stored in memory) and bundles the assets pointed to on those pages.
timer.buildStart = performance.now();
await vite.build({
logLevel: 'error',
mode: 'production',
build: {
emptyOutDir: true,
minify: 'esbuild', // significantly faster than "terser" but may produce slightly-bigger bundles
outDir: fileURLToPath(this.config.dist),
rollupOptions: {
// The `input` will be populated in the build rollup plugin.
input: [],
output: { format: 'esm' },
},
target: 'es2020', // must match an esbuild target
},
plugins: [
rollupPluginAstroBuildHTML({
astroConfig: this.config,
astroPageStyleMap,
astroStyleMap,
chunkToReferenceIdMap,
pureCSSChunks,
logging,
origin,
allPages,
pageNames,
routeCache: this.routeCache,
viteServer,
}),
rollupPluginAstroBuildCSS({
astroPageStyleMap,
astroStyleMap,
chunkToReferenceIdMap,
pureCSSChunks,
}),
...(viteConfig.plugins || []),
],
publicDir: viteConfig.publicDir,
root: viteConfig.root,
envPrefix: 'PUBLIC_',
server: viteConfig.server,
base: this.config.buildOptions.site ? new URL(this.config.buildOptions.site).pathname : '/',
});
// Use the new faster static based build.
if (this.config.buildOptions.experimentalStaticBuild) {
await staticBuild({
allPages,
astroConfig: this.config,
logging: this.logging,
origin: this.origin,
routeCache: this.routeCache,
viteConfig: this.viteConfig,
});
} else {
await scanBasedBuild({
allPages,
astroConfig: this.config,
logging: this.logging,
origin: this.origin,
pageNames,
routeCache: this.routeCache,
viteConfig: this.viteConfig,
viteServer: this.viteServer,
});
}
debug(logging, 'build', timerMessage('Vite build finished', timer.buildStart));
// Write any additionally generated assets to disk.
@ -243,22 +146,6 @@ class AstroBuilder {
}
}
/** Extract all static paths from a dynamic route */
private async getStaticPathsForRoute(route: RouteData): Promise<{ paths: string[]; rss?: RSSResult }> {
if (!this.viteServer) throw new Error(`vite.createServer() not called!`);
const filePath = new URL(`./${route.component}`, this.config.projectRoot);
const mod = (await this.viteServer.ssrLoadModule(fileURLToPath(filePath))) as ComponentInstance;
validateGetStaticPathsModule(mod);
const rss = generateRssFunction(this.config.buildOptions.site, route);
const staticPaths: GetStaticPathsResult = (await mod.getStaticPaths!({ paginate: generatePaginateFunction(route), rss: rss.generator })).flat();
this.routeCache[route.component] = staticPaths;
validateGetStaticPathsResult(staticPaths, this.logging);
return {
paths: staticPaths.map((staticPath) => staticPath.params && route.generate(staticPath.params)).filter(Boolean),
rss: rss.rss,
};
}
/** Stats */
private async printStats({ logging, timeStart, pageCount }: { logging: LogOptions; timeStart: number; pageCount: number }) {
/* eslint-disable no-console */

45
packages/astro/src/core/build/internal.ts Normal file
View file

@ -0,0 +1,45 @@
import type { RenderedChunk } from 'rollup';
export interface BuildInternals {
// Pure CSS chunks are chunks that only contain CSS.
pureCSSChunks: Set<RenderedChunk>;
// chunkToReferenceIdMap maps them to a hash id used to find the final file.
chunkToReferenceIdMap: Map<string, string>;
// This is a mapping of pathname to the string source of all collected
// inline <style> for a page.
astroStyleMap: Map<string, string>;
// This is a virtual JS module that imports all dependent styles for a page.
astroPageStyleMap: Map<string, string>;
// A mapping to entrypoints (facadeId) to assets (styles) that are added.
facadeIdToAssetsMap: Map<string, string[]>;
}
/**
* Creates internal maps used to coordinate the CSS and HTML plugins.
* @returns {BuildInternals}
*/
export function createBuildInternals(): BuildInternals {
// Pure CSS chunks are chunks that only contain CSS.
// This is all of them, and chunkToReferenceIdMap maps them to a hash id used to find the final file.
const pureCSSChunks = new Set<RenderedChunk>();
const chunkToReferenceIdMap = new Map<string, string>();
// This is a mapping of pathname to the string source of all collected
// inline <style> for a page.
const astroStyleMap = new Map<string, string>();
// This is a virtual JS module that imports all dependent styles for a page.
const astroPageStyleMap = new Map<string, string>();
// A mapping to entrypoints (facadeId) to assets (styles) that are added.
const facadeIdToAssetsMap = new Map<string, string[]>();
return {
pureCSSChunks,
chunkToReferenceIdMap,
astroStyleMap,
astroPageStyleMap,
facadeIdToAssetsMap,
};
}

122
packages/astro/src/core/build/page-data.ts Normal file
View file

@ -0,0 +1,122 @@
import type { AstroConfig, ComponentInstance, GetStaticPathsResult, ManifestData, RouteCache, RouteData, RSSResult } from '../../@types/astro';
import type { AllPagesData } from './types';
import type { LogOptions } from '../logger';
import type { ViteDevServer } from '../vite.js';
import { fileURLToPath } from 'url';
import * as colors from 'kleur/colors';
import { debug } from '../logger.js';
import { preload as ssrPreload } from '../ssr/index.js';
import { validateGetStaticPathsModule, validateGetStaticPathsResult } from '../ssr/routing.js';
import { generatePaginateFunction } from '../ssr/paginate.js';
import { generateRssFunction } from '../ssr/rss.js';
export interface CollectPagesDataOptions {
astroConfig: AstroConfig;
logging: LogOptions;
manifest: ManifestData;
origin: string;
routeCache: RouteCache;
viteServer: ViteDevServer;
}
export interface CollectPagesDataResult {
assets: Record<string, string>;
allPages: AllPagesData;
}
// Examines the routes and returns a collection of information about each page.
export async function collectPagesData(opts: CollectPagesDataOptions): Promise<CollectPagesDataResult> {
const { astroConfig, logging, manifest, origin, routeCache, viteServer } = opts;
const assets: Record<string, string> = {};
const allPages: AllPagesData = {};
// Collect all routes ahead-of-time, before we start the build.
// NOTE: This enforces that `getStaticPaths()` is only called once per route,
// and is then cached across all future SSR builds. In the past, we've had trouble
// with parallelized builds without guaranteeing that this is called first.
await Promise.all(
manifest.routes.map(async (route) => {
// static route:
if (route.pathname) {
allPages[route.component] = {
route,
paths: [route.pathname],
preload: await ssrPreload({
astroConfig,
filePath: new URL(`./${route.component}`, astroConfig.projectRoot),
logging,
mode: 'production',
origin,
pathname: route.pathname,
route,
routeCache,
viteServer,
})
.then((routes) => {
const html = `${route.pathname}`.replace(/\/?$/, '/index.html');
debug(logging, 'build', `├── ${colors.bold(colors.green('✔'))} ${route.component} → ${colors.yellow(html)}`);
return routes;
})
.catch((err) => {
debug(logging, 'build', `├── ${colors.bold(colors.red('✘'))} ${route.component}`);
throw err;
}),
};
return;
}
// dynamic route:
const result = await getStaticPathsForRoute(opts, route)
.then((routes) => {
const label = routes.paths.length === 1 ? 'page' : 'pages';
debug(logging, 'build', `├── ${colors.bold(colors.green('✔'))} ${route.component} → ${colors.magenta(`[${routes.paths.length} ${label}]`)}`);
return routes;
})
.catch((err) => {
debug(logging, 'build', `├── ${colors.bold(colors.red('✗'))} ${route.component}`);
throw err;
});
if (result.rss?.xml) {
const rssFile = new URL(result.rss.url.replace(/^\/?/, './'), astroConfig.dist);
if (assets[fileURLToPath(rssFile)]) {
throw new Error(`[getStaticPaths] RSS feed ${result.rss.url} already exists.\nUse \`rss(data, {url: '...'})\` to choose a unique, custom URL. (${route.component})`);
}
assets[fileURLToPath(rssFile)] = result.rss.xml;
}
allPages[route.component] = {
route,
paths: result.paths,
preload: await ssrPreload({
astroConfig,
filePath: new URL(`./${route.component}`, astroConfig.projectRoot),
logging,
mode: 'production',
origin,
pathname: result.paths[0],
route,
routeCache,
viteServer,
}),
};
})
);
return { assets, allPages };
}
async function getStaticPathsForRoute(opts: CollectPagesDataOptions, route: RouteData): Promise<{ paths: string[]; rss?: RSSResult }> {
const { astroConfig, logging, routeCache, viteServer } = opts;
if (!viteServer) throw new Error(`vite.createServer() not called!`);
const filePath = new URL(`./${route.component}`, astroConfig.projectRoot);
const mod = (await viteServer.ssrLoadModule(fileURLToPath(filePath))) as ComponentInstance;
validateGetStaticPathsModule(mod);
const rss = generateRssFunction(astroConfig.buildOptions.site, route);
const staticPaths: GetStaticPathsResult = (await mod.getStaticPaths!({ paginate: generatePaginateFunction(route), rss: rss.generator })).flat();
routeCache[route.component] = staticPaths;
validateGetStaticPathsResult(staticPaths, logging);
return {
paths: staticPaths.map((staticPath) => staticPath.params && route.generate(staticPath.params)).filter(Boolean),
rss: rss.rss,
};
}

68
packages/astro/src/core/build/scan-based-build.ts Normal file
View file

@ -0,0 +1,68 @@
import type { ViteDevServer } from '../vite.js';
import type { AstroConfig, RouteCache } from '../../@types/astro';
import type { AllPagesData } from './types';
import type { LogOptions } from '../logger';
import type { ViteConfigWithSSR } from '../create-vite.js';
import { fileURLToPath } from 'url';
import vite from '../vite.js';
import { createBuildInternals } from '../../core/build/internal.js';
import { rollupPluginAstroBuildHTML } from '../../vite-plugin-build-html/index.js';
import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js';
export interface ScanBasedBuildOptions {
allPages: AllPagesData;
astroConfig: AstroConfig;
logging: LogOptions;
origin: string;
pageNames: string[];
routeCache: RouteCache;
viteConfig: ViteConfigWithSSR;
viteServer: ViteDevServer;
}
export async function build(opts: ScanBasedBuildOptions) {
const { allPages, astroConfig, logging, origin, pageNames, routeCache, viteConfig, viteServer } = opts;
// Internal maps used to coordinate the HTML and CSS plugins.
const internals = createBuildInternals();
return await vite.build({
logLevel: 'error',
mode: 'production',
build: {
emptyOutDir: true,
minify: 'esbuild', // significantly faster than "terser" but may produce slightly-bigger bundles
outDir: fileURLToPath(astroConfig.dist),
rollupOptions: {
// The `input` will be populated in the build rollup plugin.
input: [],
output: {
format: 'esm',
},
},
target: 'es2020', // must match an esbuild target
},
plugins: [
rollupPluginAstroBuildHTML({
astroConfig,
internals,
logging,
origin,
allPages,
pageNames,
routeCache,
viteServer,
}),
rollupPluginAstroBuildCSS({
internals,
}),
...(viteConfig.plugins || []),
],
publicDir: viteConfig.publicDir,
root: viteConfig.root,
envPrefix: 'PUBLIC_',
server: viteConfig.server,
base: astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/',
});
}

195
packages/astro/src/core/build/static-build.ts Normal file
View file

@ -0,0 +1,195 @@
import type { OutputChunk, PreRenderedChunk, RollupOutput } from 'rollup';
import type { Plugin as VitePlugin } from '../vite';
import type { AstroConfig, RouteCache } from '../../@types/astro';
import type { AllPagesData } from './types';
import type { LogOptions } from '../logger';
import type { ViteConfigWithSSR } from '../create-vite';
import type { PageBuildData } from './types';
import type { BuildInternals } from '../../core/build/internal.js';
import type { AstroComponentFactory } from '../../runtime/server';
import fs from 'fs';
import { fileURLToPath } from 'url';
import vite from '../vite.js';
import { debug, info, error } from '../../core/logger.js';
import { createBuildInternals } from '../../core/build/internal.js';
import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js';
import { renderComponent, getParamsAndProps } from '../ssr/index.js';
export interface StaticBuildOptions {
allPages: AllPagesData;
astroConfig: AstroConfig;
logging: LogOptions;
origin: string;
routeCache: RouteCache;
viteConfig: ViteConfigWithSSR;
}
export async function staticBuild(opts: StaticBuildOptions) {
const { allPages, astroConfig } = opts;
// The JavaScript entrypoints.
const jsInput: Set<string> = new Set();
// A map of each page .astro file, to the PageBuildData which contains information
// about that page, such as its paths.
const facadeIdToPageDataMap = new Map<string, PageBuildData>();
for (const [component, pageData] of Object.entries(allPages)) {
const [renderers, mod] = pageData.preload;
// Hydrated components are statically identified.
for (const path of mod.$$metadata.getAllHydratedComponentPaths()) {
// Note that this part is not yet implemented in the static build.
//jsInput.add(path);
}
let astroModuleId = new URL('./' + component, astroConfig.projectRoot).pathname;
jsInput.add(astroModuleId);
facadeIdToPageDataMap.set(astroModuleId, pageData);
}
// Build internals needed by the CSS plugin
const internals = createBuildInternals();
// Perform the SSR build
const result = (await ssrBuild(opts, internals, jsInput)) as RollupOutput;
// Generate each of the pages.
await generatePages(result, opts, internals, facadeIdToPageDataMap);
}
async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, input: Set<string>) {
const { astroConfig, viteConfig } = opts;
return await vite.build({
logLevel: 'error',
mode: 'production',
build: {
emptyOutDir: true,
minify: false, // 'esbuild', // significantly faster than "terser" but may produce slightly-bigger bundles
outDir: fileURLToPath(astroConfig.dist),
ssr: true,
rollupOptions: {
input: Array.from(input),
output: {
format: 'esm',
},
},
target: 'es2020', // must match an esbuild target
},
plugins: [
vitePluginNewBuild(),
rollupPluginAstroBuildCSS({
internals,
}),
...(viteConfig.plugins || []),
],
publicDir: viteConfig.publicDir,
root: viteConfig.root,
envPrefix: 'PUBLIC_',
server: viteConfig.server,
base: astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/',
});
}
async function generatePages(result: RollupOutput, opts: StaticBuildOptions, internals: BuildInternals, facadeIdToPageDataMap: Map<string, PageBuildData>) {
debug(opts.logging, 'generate', 'End build step, now generating');
const generationPromises = [];
for (let output of result.output) {
if (output.type === 'chunk' && output.facadeModuleId && output.facadeModuleId.endsWith('.astro')) {
generationPromises.push(generatePage(output, opts, internals, facadeIdToPageDataMap));
}
}
await Promise.all(generationPromises);
}
async function generatePage(output: OutputChunk, opts: StaticBuildOptions, internals: BuildInternals, facadeIdToPageDataMap: Map<string, PageBuildData>) {
const { astroConfig } = opts;
let url = new URL('./' + output.fileName, astroConfig.dist);
const facadeId: string = output.facadeModuleId as string;
let pageData =
facadeIdToPageDataMap.get(facadeId) ||
// Check with a leading `/` because on Windows it doesn't have one.
facadeIdToPageDataMap.get('/' + facadeId);
if (!pageData) {
throw new Error(`Unable to find a PageBuildData for the Astro page: ${facadeId}. There are the PageBuilDatas we have ${Array.from(facadeIdToPageDataMap.keys()).join(', ')}`);
}
let linkIds = internals.facadeIdToAssetsMap.get(facadeId) || [];
let compiledModule = await import(url.toString());
let Component = compiledModule.default;
const generationOptions: Readonly<GeneratePathOptions> = {
pageData,
linkIds,
Component,
};
const renderPromises = pageData.paths.map((path) => {
return generatePath(path, opts, generationOptions);
});
return await Promise.all(renderPromises);
}
interface GeneratePathOptions {
pageData: PageBuildData;
linkIds: string[];
Component: AstroComponentFactory;
}
async function generatePath(path: string, opts: StaticBuildOptions, gopts: GeneratePathOptions) {
const { astroConfig, logging, origin, routeCache } = opts;
const { Component, linkIds, pageData } = gopts;
const [renderers, mod] = pageData.preload;
try {
const [params, pageProps] = await getParamsAndProps({
route: pageData.route,
routeCache,
logging,
pathname: path,
mod,
});
info(logging, 'generate', `Generating: ${path}`);
const html = await renderComponent(renderers, Component, astroConfig, path, origin, params, pageProps, linkIds);
const outFolder = new URL('.' + path + '/', astroConfig.dist);
const outFile = new URL('./index.html', outFolder);
await fs.promises.mkdir(outFolder, { recursive: true });
await fs.promises.writeFile(outFile, html, 'utf-8');
} catch (err) {
error(opts.logging, 'build', `Error rendering:`, err);
}
}
export function vitePluginNewBuild(): VitePlugin {
return {
name: '@astro/rollup-plugin-new-build',
configResolved(resolvedConfig) {
// Delete this hook because it causes assets not to be built
const plugins = resolvedConfig.plugins as VitePlugin[];
const viteAsset = plugins.find((p) => p.name === 'vite:asset');
if (viteAsset) {
delete viteAsset.generateBundle;
}
},
outputOptions(outputOptions) {
Object.assign(outputOptions, {
entryFileNames(_chunk: PreRenderedChunk) {
return 'assets/[name].[hash].mjs';
},
chunkFileNames(_chunk: PreRenderedChunk) {
return 'assets/[name].[hash].mjs';
},
});
return outputOptions;
},
};
}

1
packages/astro/src/core/config.ts
View file

@ -58,6 +58,7 @@ export const AstroConfigSchema = z.object({
.union([z.literal('file'), z.literal('directory')])
.optional()
.default('directory'),
experimentalStaticBuild: z.boolean().optional().default(false),
})
.optional()
.default({}),

117
packages/astro/src/core/ssr/index.ts
View file

@ -17,6 +17,7 @@ import type {
SSRResult,
} from '../../@types/astro';
import type { LogOptions } from '../logger';
import type { AstroComponentFactory } from '../../runtime/server/index';
import eol from 'eol';
import fs from 'fs';
@ -138,6 +139,120 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions)
return [renderers, mod];
}
export async function renderComponent(
renderers: Renderer[],
Component: AstroComponentFactory,
astroConfig: AstroConfig,
pathname: string,
origin: string,
params: Params,
pageProps: Props,
links: string[] = []
): Promise<string> {
const _links = new Set<SSRElement>(
links.map((href) => ({
props: {
rel: 'stylesheet',
href,
},
children: '',
}))
);
const result: SSRResult = {
styles: new Set<SSRElement>(),
scripts: new Set<SSRElement>(),
links: _links,
/** This function returns the `Astro` faux-global */
createAstro(astroGlobal: AstroGlobalPartial, props: Record<string, any>, slots: Record<string, any> | null) {
const site = new URL(origin);
const url = new URL('.' + pathname, site);
const canonicalURL = getCanonicalURL('.' + pathname, astroConfig.buildOptions.site || origin);
return {
__proto__: astroGlobal,
props,
request: {
canonicalURL,
params,
url,
},
slots: Object.fromEntries(Object.entries(slots || {}).map(([slotName]) => [slotName, true])),
// This is used for <Markdown> but shouldn't be used publicly
privateRenderSlotDoNotUse(slotName: string) {
return renderSlot(result, slots ? slots[slotName] : null);
},
// <Markdown> also needs the same `astroConfig.markdownOptions.render` as `.md` pages
async privateRenderMarkdownDoNotUse(content: string, opts: any) {
let mdRender = astroConfig.markdownOptions.render;
let renderOpts = {};
if (Array.isArray(mdRender)) {
renderOpts = mdRender[1];
mdRender = mdRender[0];
}
if (typeof mdRender === 'string') {
({ default: mdRender } = await import(mdRender));
}
const { code } = await mdRender(content, { ...renderOpts, ...(opts ?? {}) });
return code;
},
} as unknown as AstroGlobal;
},
_metadata: {
renderers,
pathname,
experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild,
},
};
let html = await renderPage(result, Component, pageProps, null);
return html;
}
export async function getParamsAndProps({
route,
routeCache,
logging,
pathname,
mod,
}: {
route: RouteData | undefined;
routeCache: RouteCache;
pathname: string;
mod: ComponentInstance;
logging: LogOptions;
}): Promise<[Params, Props]> {
// Handle dynamic routes
let params: Params = {};
let pageProps: Props = {};
if (route && !route.pathname) {
if (route.params.length) {
const paramsMatch = route.pattern.exec(pathname);
if (paramsMatch) {
params = getParams(route.params)(paramsMatch);
}
}
validateGetStaticPathsModule(mod);
if (!routeCache[route.component]) {
routeCache[route.component] = await (
await mod.getStaticPaths!({
paginate: generatePaginateFunction(route),
rss: () => {
/* noop */
},
})
).flat();
}
validateGetStaticPathsResult(routeCache[route.component], logging);
const routePathParams: GetStaticPathsResult = routeCache[route.component];
const matchedStaticPath = routePathParams.find(({ params: _params }) => JSON.stringify(_params) === JSON.stringify(params));
if (!matchedStaticPath) {
throw new Error(`[getStaticPaths] route pattern matched, but no matching static path found. (${pathname})`);
}
pageProps = { ...matchedStaticPath.props } || {};
}
return [params, pageProps];
}
/** use Vite to SSR */
export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
@ -183,6 +298,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
const result: SSRResult = {
styles: new Set<SSRElement>(),
scripts: new Set<SSRElement>(),
links: new Set<SSRElement>(),
/** This function returns the `Astro` faux-global */
createAstro(astroGlobal: AstroGlobalPartial, props: Record<string, any>, slots: Record<string, any> | null) {
const site = new URL(origin);
@ -225,6 +341,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
_metadata: {
renderers,
pathname,
experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild,
},
};

26
packages/astro/src/runtime/server/index.ts
View file

@ -372,14 +372,16 @@ const uniqueElements = (item: any, index: number, all: any[]) => {
// styles and scripts into the head.
export async function renderPage(result: SSRResult, Component: AstroComponentFactory, props: any, children: any) {
const template = await renderToString(result, Component, props, children);
const styles = Array.from(result.styles)
.filter(uniqueElements)
.map((style) =>
renderElement('style', {
...style,
props: { ...style.props, 'astro-style': true },
})
);
const styles = result._metadata.experimentalStaticBuild
? []
: Array.from(result.styles)
.filter(uniqueElements)
.map((style) =>
renderElement('style', {
...style,
props: { ...style.props, 'astro-style': true },
})
);
let needsHydrationStyles = false;
const scripts = Array.from(result.scripts)
.filter(uniqueElements)
@ -396,12 +398,16 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
styles.push(renderElement('style', { props: { 'astro-style': true }, children: 'astro-root, astro-fragment { display: contents; }' }));
}
const links = Array.from(result.links)
.filter(uniqueElements)
.map((link) => renderElement('link', link));
// inject styles & scripts at end of <head>
let headPos = template.indexOf('</head>');
if (headPos === -1) {
return styles.join('\n') + scripts.join('\n') + template; // if no </head>, prepend styles & scripts
return links.join('\n') + styles.join('\n') + scripts.join('\n') + template; // if no </head>, prepend styles & scripts
}
return template.substring(0, headPos) + styles.join('\n') + scripts.join('\n') + template.substring(headPos);
return template.substring(0, headPos) + links.join('\n') + styles.join('\n') + scripts.join('\n') + template.substring(headPos);
}
export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {

110
packages/astro/src/vite-plugin-astro/compile.ts Normal file
View file

@ -0,0 +1,110 @@
import type { AstroConfig } from '../@types/astro';
import type { TransformResult } from '@astrojs/compiler';
import type { SourceMapInput } from 'rollup';
import type { TransformHook } from './styles';
import fs from 'fs';
import { fileURLToPath } from 'url';
import { transform } from '@astrojs/compiler';
import { transformWithVite } from './styles.js';
type CompilationCache = Map<string, TransformResult>;
const configCache = new WeakMap<AstroConfig, CompilationCache>();
// https://github.com/vitejs/vite/discussions/5109#discussioncomment-1450726
function isSSR(options: undefined | boolean | { ssr: boolean }): boolean {
if (options === undefined) {
return false;
}
if (typeof options === 'boolean') {
return options;
}
if (typeof options == 'object') {
return !!options.ssr;
}
return false;
}
async function compile(config: AstroConfig, filename: string, source: string, viteTransform: TransformHook, opts: boolean | undefined) {
// pages and layouts should be transformed as full documents (implicit <head> <body> etc)
// everything else is treated as a fragment
const normalizedID = fileURLToPath(new URL(`file://${filename}`));
const isPage = normalizedID.startsWith(fileURLToPath(config.pages)) || normalizedID.startsWith(fileURLToPath(config.layouts));
let cssTransformError: Error | undefined;
// Transform from `.astro` to valid `.ts`
// use `sourcemap: "both"` so that sourcemap is included in the code
// result passed to esbuild, but also available in the catch handler.
const transformResult = await transform(source, {
as: isPage ? 'document' : 'fragment',
projectRoot: config.projectRoot.toString(),
site: config.buildOptions.site,
sourcefile: filename,
sourcemap: 'both',
internalURL: 'astro/internal',
experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
// TODO add experimental flag here
preprocessStyle: async (value: string, attrs: Record<string, string>) => {
const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
try {
const result = await transformWithVite({
value,
lang,
id: filename,
transformHook: viteTransform,
ssr: isSSR(opts),
});
let map: SourceMapInput | undefined;
if (!result) return null as any; // TODO: add type in compiler to fix "any"
if (result.map) {
if (typeof result.map === 'string') {
map = result.map;
} else if (result.map.mappings) {
map = result.map.toString();
}
}
return { code: result.code, map };
} catch (err) {
// save error to throw in plugin context
cssTransformError = err as any;
return null;
}
},
});
// throw CSS transform errors here if encountered
if (cssTransformError) throw cssTransformError;
return transformResult;
}
export function invalidateCompilation(config: AstroConfig, filename: string) {
if (configCache.has(config)) {
const cache = configCache.get(config)!;
cache.delete(filename);
}
}
export async function cachedCompilation(config: AstroConfig, filename: string, source: string | null, viteTransform: TransformHook, opts: boolean | undefined) {
let cache: CompilationCache;
if (!configCache.has(config)) {
cache = new Map();
configCache.set(config, cache);
} else {
cache = configCache.get(config)!;
}
if (cache.has(filename)) {
return cache.get(filename)!;
}
if (source === null) {
const fileUrl = new URL(`file://${filename}`);
source = await fs.promises.readFile(fileUrl, 'utf-8');
}
const transformResult = await compile(config, filename, source, viteTransform, opts);
cache.set(filename, transformResult);
return transformResult;
}

141
packages/astro/src/vite-plugin-astro/index.ts
View file

@ -1,14 +1,12 @@
import type { TransformResult } from '@astrojs/compiler';
import type { SourceMapInput } from 'rollup';
import type vite from '../core/vite';
import type { AstroConfig } from '../@types/astro';
import esbuild from 'esbuild';
import fs from 'fs';
import { fileURLToPath } from 'url';
import { transform } from '@astrojs/compiler';
import { AstroDevServer } from '../core/dev/index.js';
import { getViteTransform, TransformHook, transformWithVite } from './styles.js';
import { getViteTransform, TransformHook } from './styles.js';
import { parseAstroRequest } from './query.js';
import { cachedCompilation, invalidateCompilation } from './compile.js';
const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
interface AstroPluginOptions {
@ -16,22 +14,8 @@ interface AstroPluginOptions {
devServer?: AstroDevServer;
}
// https://github.com/vitejs/vite/discussions/5109#discussioncomment-1450726
function isSSR(options: undefined | boolean | { ssr: boolean }): boolean {
if (options === undefined) {
return false;
}
if (typeof options === 'boolean') {
return options;
}
if (typeof options == 'object') {
return !!options.ssr;
}
return false;
}
/** Transform .astro files for Vite */
export default function astro({ config, devServer }: AstroPluginOptions): vite.Plugin {
export default function astro({ config }: AstroPluginOptions): vite.Plugin {
let viteTransform: TransformHook;
return {
name: '@astrojs/vite-plugin-astro',
@ -40,57 +24,51 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
viteTransform = getViteTransform(resolvedConfig);
},
// note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
async load(id, opts) {
if (!id.endsWith('.astro')) {
return null;
async resolveId(id) {
// serve sub-part requests (*?astro) as virtual modules
if (parseAstroRequest(id).query.astro) {
return id;
}
},
async load(id, opts) {
let { filename, query } = parseAstroRequest(id);
if (query.astro) {
if (query.type === 'style') {
if (filename.startsWith('/') && !filename.startsWith(config.projectRoot.pathname)) {
filename = new URL('.' + filename, config.projectRoot).pathname;
}
const transformResult = await cachedCompilation(config, filename, null, viteTransform, opts);
if (typeof query.index === 'undefined') {
throw new Error(`Requests for Astro CSS must include an index.`);
}
const csses = transformResult.css;
const code = csses[query.index];
return {
code,
};
}
}
return null;
},
async transform(source, id, opts) {
if (!id.endsWith('.astro')) {
return;
}
// pages and layouts should be transformed as full documents (implicit <head> <body> etc)
// everything else is treated as a fragment
const normalizedID = fileURLToPath(new URL(`file://${id}`));
const isPage = normalizedID.startsWith(fileURLToPath(config.pages)) || normalizedID.startsWith(fileURLToPath(config.layouts));
let source = await fs.promises.readFile(id, 'utf8');
let tsResult: TransformResult | undefined;
let cssTransformError: Error | undefined;
try {
// Transform from `.astro` to valid `.ts`
// use `sourcemap: "both"` so that sourcemap is included in the code
// result passed to esbuild, but also available in the catch handler.
tsResult = await transform(source, {
as: isPage ? 'document' : 'fragment',
projectRoot: config.projectRoot.toString(),
site: config.buildOptions.site,
sourcefile: id,
sourcemap: 'both',
internalURL: 'astro/internal',
preprocessStyle: async (value: string, attrs: Record<string, string>) => {
const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
try {
const result = await transformWithVite({ value, lang, id, transformHook: viteTransform, ssr: isSSR(opts) });
let map: SourceMapInput | undefined;
if (!result) return null as any; // TODO: add type in compiler to fix "any"
if (result.map) {
if (typeof result.map === 'string') {
map = result.map;
} else if (result.map.mappings) {
map = result.map.toString();
}
}
return { code: result.code, map };
} catch (err) {
// save error to throw in plugin context
cssTransformError = err as any;
return null;
}
},
});
// throw CSS transform errors here if encountered
if (cssTransformError) throw cssTransformError;
const transformResult = await cachedCompilation(config, id, source, viteTransform, opts);
// Compile all TypeScript to JavaScript.
// Also, catches invalid JS/TS in the compiled output before returning.
const { code, map } = await esbuild.transform(tsResult.code, { loader: 'ts', sourcemap: 'external', sourcefile: id });
const { code, map } = await esbuild.transform(transformResult.code, {
loader: 'ts',
sourcemap: 'external',
sourcefile: id,
});
return {
code,
@ -125,21 +103,21 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
labels: 'compiler',
title: '🐛 BUG: `@astrojs/compiler` panic',
body: `### Describe the Bug
\`@astrojs/compiler\` encountered an unrecoverable error when compiling the following file.
**${id.replace(fileURLToPath(config.projectRoot), '')}**
\`\`\`astro
${source}
\`\`\`
`,
\`@astrojs/compiler\` encountered an unrecoverable error when compiling the following file.
**${id.replace(fileURLToPath(config.projectRoot), '')}**
\`\`\`astro
${source}
\`\`\`
`,
});
err.url = `https://github.com/withastro/astro/issues/new?${search.toString()}`;
err.message = `Error: Uh oh, the Astro compiler encountered an unrecoverable error!
Please open
a GitHub issue using the link below:
${err.url}`;
Please open
a GitHub issue using the link below:
${err.url}`;
// TODO: remove stack replacement when compiler throws better errors
err.stack = ` at ${id}`;
}
@ -147,10 +125,9 @@ ${err.url}`;
throw err;
}
},
// async handleHotUpdate(context) {
// if (devServer) {
// return devServer.handleHotUpdate(context);
// }
// },
async handleHotUpdate(context) {
// Invalidate the compilation cache so it recompiles
invalidateCompilation(config, context.file);
},
};
}

35
packages/astro/src/vite-plugin-astro/query.ts Normal file
View file

@ -0,0 +1,35 @@
export interface AstroQuery {
astro?: boolean;
src?: boolean;
type?: 'script' | 'template' | 'style' | 'custom';
index?: number;
lang?: string;
raw?: boolean;
}
// Parses an id to check if its an Astro request.
// CSS is imported like `import '/src/pages/index.astro?astro&type=style&index=0&lang.css';
// This parses those ids and returns an object representing what it found.
export function parseAstroRequest(id: string): {
filename: string;
query: AstroQuery;
} {
const [filename, rawQuery] = id.split(`?`, 2);
const query = Object.fromEntries(new URLSearchParams(rawQuery).entries()) as AstroQuery;
if (query.astro != null) {
query.astro = true;
}
if (query.src != null) {
query.src = true;
}
if (query.index != null) {
query.index = Number(query.index);
}
if (query.raw != null) {
query.raw = true;
}
return {
filename,
query,
};
}

53
packages/astro/src/vite-plugin-build-css/index.ts
View file

@ -1,9 +1,10 @@
import type { RenderedChunk } from 'rollup';
import { Plugin as VitePlugin } from '../core/vite';
import type { BuildInternals } from '../core/build/internal';
import { STYLE_EXTENSIONS } from '../core/ssr/css.js';
import * as path from 'path';
import esbuild from 'esbuild';
import { Plugin as VitePlugin } from '../core/vite';
import { STYLE_EXTENSIONS } from '../core/ssr/css.js';
const PLUGIN_NAME = '@astrojs/rollup-plugin-build-css';
@ -45,14 +46,11 @@ function isPageStyleVirtualModule(id: string) {
}
interface PluginOptions {
astroStyleMap: Map<string, string>;
astroPageStyleMap: Map<string, string>;
chunkToReferenceIdMap: Map<string, string>;
pureCSSChunks: Set<RenderedChunk>;
internals: BuildInternals;
}
export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
const { astroPageStyleMap, astroStyleMap, chunkToReferenceIdMap, pureCSSChunks } = options;
const { internals } = options;
const styleSourceMap = new Map<string, string>();
return {
@ -94,10 +92,10 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
async load(id) {
if (isPageStyleVirtualModule(id)) {
return astroPageStyleMap.get(id) || null;
return internals.astroPageStyleMap.get(id) || null;
}
if (isStyleVirtualModule(id)) {
return astroStyleMap.get(id) || null;
return internals.astroStyleMap.get(id) || null;
}
return null;
},
@ -127,17 +125,26 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
// if (!chunkCSS) return null; // don’t output empty .css files
if (isPureCSS) {
const { code: minifiedCSS } = await esbuild.transform(chunkCSS, {
loader: 'css',
minify: true,
});
const referenceId = this.emitFile({
name: chunk.name + '.css',
type: 'asset',
source: minifiedCSS,
});
pureCSSChunks.add(chunk);
chunkToReferenceIdMap.set(chunk.fileName, referenceId);
internals.pureCSSChunks.add(chunk);
}
const { code: minifiedCSS } = await esbuild.transform(chunkCSS, {
loader: 'css',
minify: true,
});
const referenceId = this.emitFile({
name: chunk.name + '.css',
type: 'asset',
source: minifiedCSS,
});
internals.chunkToReferenceIdMap.set(chunk.fileName, referenceId);
if (chunk.type === 'chunk') {
const facadeId = chunk.facadeModuleId!;
if (!internals.facadeIdToAssetsMap.has(facadeId)) {
internals.facadeIdToAssetsMap.set(facadeId, []);
}
internals.facadeIdToAssetsMap.get(facadeId)!.push(this.getFileName(referenceId));
}
return null;
@ -145,8 +152,8 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
// Delete CSS chunks so JS is not produced for them.
generateBundle(opts, bundle) {
if (pureCSSChunks.size) {
const pureChunkFilenames = new Set([...pureCSSChunks].map((chunk) => chunk.fileName));
if (internals.pureCSSChunks.size) {
const pureChunkFilenames = new Set([...internals.pureCSSChunks].map((chunk) => chunk.fileName));
const emptyChunkFiles = [...pureChunkFilenames]
.map((file) => path.basename(file))
.join('|')
@ -155,7 +162,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
for (const [chunkId, chunk] of Object.entries(bundle)) {
if (chunk.type === 'chunk') {
if (pureCSSChunks.has(chunk)) {
if (internals.pureCSSChunks.has(chunk)) {
// Delete pure CSS chunks, these are JavaScript chunks that only import
// other CSS files, so are empty at the end of bundling.
delete bundle[chunkId];

18
packages/astro/src/vite-plugin-build-html/index.ts
View file

@ -1,8 +1,9 @@
import type { AstroConfig, RouteCache } from '../@types/astro';
import type { LogOptions } from '../core/logger';
import type { ViteDevServer, Plugin as VitePlugin } from '../core/vite';
import type { OutputChunk, PreRenderedChunk, RenderedChunk } from 'rollup';
import type { OutputChunk, PreRenderedChunk } from 'rollup';
import type { AllPagesData } from '../core/build/types';
import type { BuildInternals } from '../core/build/internal';
import parse5 from 'parse5';
import srcsetParse from 'srcset-parse';
import * as npath from 'path';
@ -26,20 +27,17 @@ const STATUS_CODE_RE = /^404$/;
interface PluginOptions {
astroConfig: AstroConfig;
astroStyleMap: Map<string, string>;
astroPageStyleMap: Map<string, string>;
chunkToReferenceIdMap: Map<string, string>;
internals: BuildInternals;
logging: LogOptions;
allPages: AllPagesData;
pageNames: string[];
pureCSSChunks: Set<RenderedChunk>;
origin: string;
routeCache: RouteCache;
viteServer: ViteDevServer;
}
export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
const { astroConfig, astroStyleMap, astroPageStyleMap, chunkToReferenceIdMap, pureCSSChunks, logging, origin, allPages, routeCache, viteServer, pageNames } = options;
const { astroConfig, internals, logging, origin, allPages, routeCache, viteServer, pageNames } = options;
// The filepath root of the src folder
const srcRoot = astroConfig.src.pathname;
@ -161,7 +159,7 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
if (styles) {
const styleId = getAstroStyleId(pathname);
astroStyleMap.set(styleId, styles);
internals.astroStyleMap.set(styleId, styles);
// Put this at the front of imports
assetImports.unshift(styleId);
}
@ -175,7 +173,7 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
if (assetImports.length) {
const pageStyleId = getAstroPageStyleId(pathname);
const jsSource = assetImports.map((sid) => `import '${sid}';`).join('\n');
astroPageStyleMap.set(pageStyleId, jsSource);
internals.astroPageStyleMap.set(pageStyleId, jsSource);
assetInput.add(pageStyleId);
// preserve asset order in the order we encounter them
@ -268,7 +266,7 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
// Sort CSS in order of appearance in HTML (pageStyleImportOrder)
// This is the “global ordering” used below
const sortedCSSChunks = [...pureCSSChunks];
const sortedCSSChunks = [...internals.pureCSSChunks];
sortedCSSChunks.sort((a, b) => {
let aIndex = Math.min(
...Object.keys(a.modules).map((id) => {
@ -298,7 +296,7 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
const referenceIDs: string[] = [];
for (const chunkID of chunkModules) {
const referenceID = chunkToReferenceIdMap.get(chunkID);
const referenceID = internals.chunkToReferenceIdMap.get(chunkID);
if (referenceID) referenceIDs.push(referenceID);
}
for (const id of Object.keys(chunk.modules)) {

3
packages/astro/test/preact-component.test.js
View file

@ -6,6 +6,9 @@ let fixture;
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3009,
},
projectRoot: './fixtures/preact-component/',
renderers: ['@astrojs/renderer-preact'],
});

3
packages/astro/test/react-component.test.js
View file

@ -7,6 +7,9 @@ let fixture;
describe('React Components', () => {
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3008,
},
projectRoot: './fixtures/react-component/',
renderers: ['@astrojs/renderer-react', '@astrojs/renderer-vue'],
});

3
packages/astro/test/solid-component.test.js
View file

@ -7,6 +7,9 @@ describe('Solid component', () => {
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3006,
},
projectRoot: './fixtures/solid-component/',
renderers: ['@astrojs/renderer-solid'],
});

3
packages/astro/test/svelte-component.test.js
View file

@ -7,6 +7,9 @@ describe('Svelte component', () => {
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3007,
},
projectRoot: './fixtures/svelte-component/',
renderers: ['@astrojs/renderer-svelte'],
});

3
packages/astro/test/test-utils.js
View file

@ -9,6 +9,7 @@ import preview from '../dist/core/preview/index.js';
/**
* @typedef {import('node-fetch').Response} Response
* @typedef {import('../src/core/dev/index').DevServer} DevServer
* @typedef {import('../src/@types/astro').AstroConfig AstroConfig}
*
*
* @typedef {Object} Fixture
@ -21,7 +22,7 @@ import preview from '../dist/core/preview/index.js';
/**
* Load Astro fixture
* @param {Object} inlineConfig Astro config partial (note: must specify projectRoot)
* @param {AstroConfig} inlineConfig Astro config partial (note: must specify projectRoot)
* @returns {Fixture} The fixture. Has the following properties:
* .config - Returns the final config. Will be automatically passed to the methods below:
*

3
packages/astro/test/vue-component.test.js
View file

@ -7,6 +7,9 @@ describe('Vue component', () => {
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3005,
},
projectRoot: './fixtures/vue-component/',
renderers: ['@astrojs/renderer-vue'],
});

606
yarn.lock
View file

File diff suppressed because it is too large Load diff