Build to a single file (#2873)

* Build to a single file

* Updates based on initial code review

* Adds a changeset

* Use the default export for cjs module

* Await generatePages

* Prevent timing from causing module to not import

* Fix shared CSS

* Properly handle windows ids

* Dont shadow

* Fix ts errors

* Remove console.log

.changeset/small-horses-protect.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/node': patch
+---
+
+Improves the build by building to a single file for rendering

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

@@ -1,31 +1,30 @@
-import type { ComponentInstance, ManifestData, RouteData, SSRLoadedRenderer } from '../../@types/astro';
+import type { ComponentInstance, EndpointHandler, ManifestData, RouteData } from '../../@types/astro';
 import type { SSRManifest as Manifest, RouteInfo } from './types';
 
+import mime from 'mime';
 import { defaultLogOptions } from '../logger.js';
 export { deserializeManifest } from './common.js';
 import { matchRoute } from '../routing/match.js';
 import { render } from '../render/core.js';
+import { call as callEndpoint } from '../endpoint/index.js';
 import { RouteCache } from '../render/route-cache.js';
 import { createLinkStylesheetElementSet, createModuleScriptElementWithSrcSet } from '../render/ssr-element.js';
 import { prependForwardSlash } from '../path.js';
 
 export class App {
  #manifest: Manifest;
  #manifestData: ManifestData;
- #rootFolder: URL;
  #routeDataToRouteInfo: Map<RouteData, RouteInfo>;
  #routeCache: RouteCache;
- #renderersPromise: Promise<SSRLoadedRenderer[]>;
+ #encoder = new TextEncoder();
 
- constructor(manifest: Manifest, rootFolder: URL) {
+ constructor(manifest: Manifest) {
  this.#manifest = manifest;
  this.#manifestData = {
  routes: manifest.routes.map((route) => route.routeData),
  };
- this.#rootFolder = rootFolder;
  this.#routeDataToRouteInfo = new Map(manifest.routes.map((route) => [route.routeData, route]));
  this.#routeCache = new RouteCache(defaultLogOptions);
- this.#renderersPromise = this.#loadRenderers();
  }
  match(request: Request): RouteData | undefined {
  const url = new URL(request.url);
@@ -42,11 +41,22 @@ export class App {
  }
  }
 
- const manifest = this.#manifest;
- const info = this.#routeDataToRouteInfo.get(routeData!)!;
- const [mod, renderers] = await Promise.all([this.#loadModule(info.file), this.#renderersPromise]);
+ const mod = this.#manifest.pageMap.get(routeData.component)!;
+
+ if(routeData.type === 'page') {
+ return this.#renderPage(request, routeData, mod);
+ } else if(routeData.type === 'endpoint') {
+ return this.#callEndpoint(request, routeData, mod);
+ } else {
+ throw new Error(`Unsupported route type [${routeData.type}].`);
+ }
+ }
 
+ async #renderPage(request: Request, routeData: RouteData, mod: ComponentInstance): Promise<Response> {
  const url = new URL(request.url);
+ const manifest = this.#manifest;
+ const renderers = manifest.renderers;
+ const info = this.#routeDataToRouteInfo.get(routeData!)!;
  const links = createLinkStylesheetElementSet(info.links, manifest.site);
  const scripts = createModuleScriptElementWithSrcSet(info.scripts, manifest.site);
 
@@ -80,26 +90,44 @@ export class App {
  }
 
  let html = result.html;
- return new Response(html, {
+ let bytes = this.#encoder.encode(html);
+ return new Response(bytes, {
  status: 200,
+ headers: {
+ 'Content-Type': 'text/html',
+ 'Content-Length': bytes.byteLength.toString()
+ }
  });
  }
- async #loadRenderers(): Promise<SSRLoadedRenderer[]> {
- return await Promise.all(
- this.#manifest.renderers.map(async (renderer) => {
- const mod = (await import(renderer.serverEntrypoint)) as { default: SSRLoadedRenderer['ssr'] };
- return { ...renderer, ssr: mod.default };
- })
- );
- }
- async #loadModule(rootRelativePath: string): Promise<ComponentInstance> {
- let modUrl = new URL(rootRelativePath, this.#rootFolder).toString();
- let mod: ComponentInstance;
- try {
- mod = await import(modUrl);
- return mod;
- } catch (err) {
- throw new Error(`Unable to import ${modUrl}. Does this file exist?`);
+
+ async #callEndpoint(request: Request, routeData: RouteData, mod: ComponentInstance): Promise<Response> {
+ const url = new URL(request.url);
+ const handler = mod as unknown as EndpointHandler;
+ const result = await callEndpoint(handler, {
+ headers: request.headers,
+ logging: defaultLogOptions,
+ method: request.method,
+ origin: url.origin,
+ pathname: url.pathname,
+ routeCache: this.#routeCache,
+ ssr: true,
+ });
+
+ if(result.type === 'response') {
+ return result.response;
+ } else {
+ const body = result.body;
+ const headers = new Headers();
+ const mimeType = mime.getType(url.pathname);
+ if(mimeType) {
+ headers.set('Content-Type', mimeType);
+ }
+ const bytes = this.#encoder.encode(body);
+ headers.set('Content-Length', bytes.byteLength.toString());
+ return new Response(bytes, {
+ status: 200,
+ headers
+ });
  }
  }
 }

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

@@ -33,5 +33,5 @@ export async function loadManifest(rootFolder: URL): Promise<SSRManifest> {
 
 export async function loadApp(rootFolder: URL): Promise<NodeApp> {
  const manifest = await loadManifest(rootFolder);
- return new NodeApp(manifest, rootFolder);
+ return new NodeApp(manifest);
 }

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

@@ -1,4 +1,6 @@
-import type { RouteData, SerializedRouteData, MarkdownRenderOptions, AstroRenderer } from '../../@types/astro';
+import type { RouteData, SerializedRouteData, MarkdownRenderOptions, ComponentInstance, SSRLoadedRenderer } from '../../@types/astro';
+
+export type ComponentPath = string;
 
 export interface RouteInfo {
  routeData: RouteData;
@@ -17,7 +19,8 @@ export interface SSRManifest {
  markdown: {
  render: MarkdownRenderOptions;
  };
- renderers: AstroRenderer[];
+ pageMap: Map<ComponentPath, ComponentInstance>;
+ renderers: SSRLoadedRenderer[];
  entryModules: Record<string, string>;
 }
 

packages/astro/src/core/build/add-rollup-input.ts

@@ -0,0 +1,43 @@
+import { InputOptions } from 'rollup';
+
+function fromEntries<V>(entries: [string, V][]) {
+ const obj: Record<string, V> = {};
+ for (const [k, v] of entries) {
+ obj[k] = v;
+ }
+ return obj;
+}
+
+export function addRollupInput(inputOptions: InputOptions, newInputs: string[]): InputOptions {
+ // Add input module ids to existing input option, whether it's a string, array or object
+ // this way you can use multiple html plugins all adding their own inputs
+ if (!inputOptions.input) {
+ return { ...inputOptions, input: newInputs };
+ }
+
+ if (typeof inputOptions.input === 'string') {
+ return {
+ ...inputOptions,
+ input: [inputOptions.input, ...newInputs],
+ };
+ }
+
+ if (Array.isArray(inputOptions.input)) {
+ return {
+ ...inputOptions,
+ input: [...inputOptions.input, ...newInputs],
+ };
+ }
+
+ if (typeof inputOptions.input === 'object') {
+ return {
+ ...inputOptions,
+ input: {
+ ...inputOptions.input,
+ ...fromEntries(newInputs.map((i) => [i.split('/').slice(-1)[0].split('.')[0], i])),
+ },
+ };
+ }
+
+ throw new Error(`Unknown rollup input type. Supported inputs are string, array and object.`);
+}

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

@@ -1,4 +1,5 @@
 import type { AstroConfig, RouteType } from '../../@types/astro';
+import type { StaticBuildOptions } from './types';
 import npath from 'path';
 import { appendForwardSlash } from '../../core/path.js';
 

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

@@ -1,20 +1,21 @@
+import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup';
+import type { AstroConfig, ComponentInstance, EndpointHandler, SSRLoadedRenderer } from '../../@types/astro';
+import type { PageBuildData, StaticBuildOptions, SingleFileBuiltModule } from './types';
+import type { BuildInternals } from '../../core/build/internal.js';
+import type { RenderOptions } from '../../core/render/core';
+
 import fs from 'fs';
-import { bgMagenta, black, cyan, dim, magenta } from 'kleur/colors';
 import npath from 'path';
-import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup';
 import { fileURLToPath } from 'url';
-import type { AstroConfig, AstroRenderer, ComponentInstance, EndpointHandler, SSRLoadedRenderer } from '../../@types/astro';
-import type { BuildInternals } from '../../core/build/internal.js';
 import { debug, error, info } from '../../core/logger.js';
 import { prependForwardSlash } from '../../core/path.js';
-import type { RenderOptions } from '../../core/render/core';
-import { resolveDependency } from '../../core/util.js';
 import { BEFORE_HYDRATION_SCRIPT_ID } from '../../vite-plugin-scripts/index.js';
 import { call as callEndpoint } from '../endpoint/index.js';
 import { render } from '../render/core.js';
 import { createLinkStylesheetElementSet, createModuleScriptElementWithSrcSet } from '../render/ssr-element.js';
-import { getOutFile, getOutFolder, getOutRoot } from './common.js';
-import type { PageBuildData, StaticBuildOptions } from './types';
+import { getOutFile, getOutRoot, getOutFolder, getServerRoot } from './common.js';
+import { getPageDataByComponent, eachPageData } from './internal.js';
+import { bgMagenta, black, cyan, dim, magenta } from 'kleur/colors';
 import { getTimeStat } from './util.js';
 
 // Render is usually compute, which Node.js can't parallelize well.
@@ -23,24 +24,6 @@ import { getTimeStat } from './util.js';
 // system, possibly one that parallelizes if async IO is detected.
 const MAX_CONCURRENT_RENDERS = 1;
 
-// Utility functions
-async function loadRenderer(renderer: AstroRenderer, config: AstroConfig): Promise<SSRLoadedRenderer> {
- const mod = (await import(resolveDependency(renderer.serverEntrypoint, config))) as { default: SSRLoadedRenderer['ssr'] };
- return { ...renderer, ssr: mod.default };
-}
-
-async function loadRenderers(config: AstroConfig): Promise<SSRLoadedRenderer[]> {
- return Promise.all(config._ctx.renderers.map((r) => loadRenderer(r, config)));
-}
-
-export function getByFacadeId<T>(facadeId: string, map: Map<string, T>): T | undefined {
- return (
- map.get(facadeId) ||
- // Windows the facadeId has forward slashes, no idea why
- map.get(facadeId.replace(/\//g, '\\'))
- );
-}
-
 // Throttle the rendering a paths to prevents creating too many Promises on the microtask queue.
 function* throttle(max: number, inPaths: string[]) {
  let tmp = [];
@@ -86,45 +69,42 @@ export function chunkIsPage(astroConfig: AstroConfig, output: OutputAsset | Outp
 export async function generatePages(result: RollupOutput, opts: StaticBuildOptions, internals: BuildInternals, facadeIdToPageDataMap: Map<string, PageBuildData>) {
  info(opts.logging, null, `\n${bgMagenta(black(' generating static routes '))}\n`);
 
- // Get renderers to be shared for each page generation.
- const renderers = await loadRenderers(opts.astroConfig);
+ const ssr = !!opts.astroConfig._ctx.adapter?.serverEntrypoint;
+ const outFolder = ssr ? getServerRoot(opts.astroConfig) : getOutRoot(opts.astroConfig);
+ const ssrEntryURL = new URL(`./entry.mjs?time=${Date.now()}`, outFolder);
+ const ssrEntry = await import(ssrEntryURL.toString());
 
- for (let output of result.output) {
- if (chunkIsPage(opts.astroConfig, output, internals)) {
- await generatePage(output as OutputChunk, opts, internals, facadeIdToPageDataMap, renderers);
- }
+ for(const pageData of eachPageData(internals)) {
+ await generatePage(opts, internals, pageData, ssrEntry);
  }
 }
 
 async function generatePage(
- output: OutputChunk,
+ //output: OutputChunk,
  opts: StaticBuildOptions,
  internals: BuildInternals,
- facadeIdToPageDataMap: Map<string, PageBuildData>,
- renderers: SSRLoadedRenderer[]
+ pageData: PageBuildData,
+ ssrEntry: SingleFileBuiltModule
 ) {
- let timeStart = performance.now();
- const { astroConfig } = opts;
-
- let url = new URL('./' + output.fileName, getOutRoot(astroConfig));
- const facadeId: string = output.facadeModuleId as string;
- let pageData = getByFacadeId<PageBuildData>(facadeId, facadeIdToPageDataMap);
+ let timeStart = performance.now();
+ const renderers = ssrEntry.renderers;
 
- if (!pageData) {
-  throw new Error(`Unable to find a PageBuildData for the Astro page: ${facadeId}. There are the PageBuildDatas we have ${Array.from(facadeIdToPageDataMap.keys()).join(', ')}`);
- }
+ const pageInfo = getPageDataByComponent(internals, pageData.route.component);
+ const linkIds: string[] = Array.from(pageInfo?.css ?? []);
+ const hoistedId = pageInfo?.hoistedScript ?? null;
 
- const linkIds = getByFacadeId<string[]>(facadeId, internals.facadeIdToAssetsMap) || [];
- const hoistedId = getByFacadeId<string>(facadeId, internals.facadeIdToHoistedEntryMap) || null;
+ const pageModule = ssrEntry.pageMap.get(pageData.component);
 
- let compiledModule = await import(url.toString());
+ if(!pageModule) {
+ throw new Error(`Unable to find the module for ${pageData.component}. This is unexpected and likely a bug in Astro, please report.`);
+ }
 
  const generationOptions: Readonly<GeneratePathOptions> = {
  pageData,
  internals,
  linkIds,
  hoistedId,
- mod: compiledModule,
+ mod: pageModule,
  renderers,
  };