diff --git a/.changeset/ninety-zoos-search.md b/.changeset/ninety-zoos-search.md new file mode 100644 index 000000000..e5f8d7512 --- /dev/null +++ b/.changeset/ninety-zoos-search.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Rolls back a feature flag feature that was breaking the docs site diff --git a/examples/fast-build/package.json b/examples/fast-build/package.json index a3fcff421..848a01997 100644 --- a/examples/fast-build/package.json +++ b/examples/fast-build/package.json @@ -6,7 +6,6 @@ "dev": "astro dev --experimental-static-build", "start": "astro dev", "build": "astro build --experimental-static-build", - "scan-build": "astro build", "preview": "astro preview" }, "devDependencies": { diff --git a/examples/fast-build/src/components/Counter.vue b/examples/fast-build/src/components/Counter.vue deleted file mode 100644 index 599bcf615..000000000 --- a/examples/fast-build/src/components/Counter.vue +++ /dev/null @@ -1,24 +0,0 @@ - - - diff --git a/examples/fast-build/src/pages/[pokemon].astro b/examples/fast-build/src/pages/[pokemon].astro deleted file mode 100644 index ea01cc4f7..000000000 --- a/examples/fast-build/src/pages/[pokemon].astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import Greeting from '../components/Greeting.vue'; - -export async function getStaticPaths() { - const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=2000`); - const result = await response.json(); - const allPokemon = result.results; - return allPokemon.map(pokemon => ({params: {pokemon: pokemon.name}, props: {pokemon}})); -} ---- - - - Hello - - - -

{Astro.props.pokemon.name}

- - - \ No newline at end of file diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro index ee228aa19..2bdadbf5b 100644 --- a/examples/fast-build/src/pages/index.astro +++ b/examples/fast-build/src/pages/index.astro @@ -2,7 +2,6 @@ import imgUrl from '../images/penguin.jpg'; import grayscaleUrl from '../images/random.jpg?grayscale=true'; import Greeting from '../components/Greeting.vue'; -import Counter from '../components/Counter.vue'; --- @@ -27,14 +26,9 @@ import Counter from '../components/Counter.vue'; -
-

ImageTools

- -
- -
-

Hydrated component

- -
- - \ No newline at end of file +
+

ImageTools

+ +
+ + diff --git a/packages/astro/package.json b/packages/astro/package.json index 6b6b521d1..eda3c7bef 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -56,7 +56,7 @@ "test": "mocha --parallel --timeout 15000" }, "dependencies": { - "@astrojs/compiler": "^0.7.0", + "@astrojs/compiler": "^0.6.0", "@astrojs/language-server": "^0.8.2", "@astrojs/markdown-remark": "^0.6.0", "@astrojs/prism": "0.4.0", diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 2e60da3b7..f6f47cd98 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -371,6 +371,5 @@ export interface SSRResult { scripts: Set; links: Set; createAstro(Astro: AstroGlobalPartial, props: Record, slots: Record | null): AstroGlobal; - resolve: (s: string) => Promise; _metadata: SSRMetadata; } diff --git a/packages/astro/src/core/build/internal.ts b/packages/astro/src/core/build/internal.ts index ee379f4e3..b30ea7ddf 100644 --- a/packages/astro/src/core/build/internal.ts +++ b/packages/astro/src/core/build/internal.ts @@ -14,10 +14,6 @@ export interface BuildInternals { // A mapping to entrypoints (facadeId) to assets (styles) that are added. facadeIdToAssetsMap: Map; - - // A mapping of specifiers like astro/client/idle.js to the hashed bundled name. - // Used to render pages with the correct specifiers. - entrySpecifierToBundleMap: Map; } /** @@ -45,6 +41,5 @@ export function createBuildInternals(): BuildInternals { astroStyleMap, astroPageStyleMap, facadeIdToAssetsMap, - entrySpecifierToBundleMap: new Map(), }; } diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts index 07e97c7ca..191cdb987 100644 --- a/packages/astro/src/core/build/static-build.ts +++ b/packages/astro/src/core/build/static-build.ts @@ -1,6 +1,6 @@ import type { OutputChunk, PreRenderedChunk, RollupOutput } from 'rollup'; import type { Plugin as VitePlugin } from '../vite'; -import type { AstroConfig, RouteCache, SSRElement } from '../../@types/astro'; +import type { AstroConfig, RouteCache } from '../../@types/astro'; import type { AllPagesData } from './types'; import type { LogOptions } from '../logger'; import type { ViteConfigWithSSR } from '../create-vite'; @@ -9,16 +9,12 @@ import type { BuildInternals } from '../../core/build/internal.js'; import type { AstroComponentFactory } from '../../runtime/server'; import fs from 'fs'; -import npath from 'path'; import { fileURLToPath } from 'url'; -import glob from 'fast-glob'; 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 { getParamsAndProps } from '../ssr/index.js'; -import { createResult } from '../ssr/result.js'; -import { renderPage } from '../../runtime/server/index.js'; +import { renderComponent, getParamsAndProps } from '../ssr/index.js'; export interface StaticBuildOptions { allPages: AllPagesData; @@ -32,11 +28,8 @@ export interface StaticBuildOptions { export async function staticBuild(opts: StaticBuildOptions) { const { allPages, astroConfig } = opts; - // The pages to be built for rendering purposes. - const pageInput = new Set(); - // The JavaScript entrypoints. - const jsInput = new Set(); + const jsInput: Set = new Set(); // A map of each page .astro file, to the PageBuildData which contains information // about that page, such as its paths. @@ -44,35 +37,26 @@ export async function staticBuild(opts: StaticBuildOptions) { for (const [component, pageData] of Object.entries(allPages)) { const [renderers, mod] = pageData.preload; - const metadata = mod.$$metadata; - const topLevelImports = new Set([ - // Any component that gets hydrated - ...metadata.hydratedComponentPaths(), - // Any hydration directive like astro/client/idle.js - ...metadata.hydrationDirectiveSpecifiers(), - // The client path for each renderer - ...renderers.filter((renderer) => !!renderer.source).map((renderer) => renderer.source!), - ]); - - for (const specifier of topLevelImports) { - jsInput.add(specifier); + // 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; - pageInput.add(astroModuleId); + jsInput.add(astroModuleId); facadeIdToPageDataMap.set(astroModuleId, pageData); } // Build internals needed by the CSS plugin const internals = createBuildInternals(); - // Run the SSR build and client build in parallel - const [ssrResult] = (await Promise.all([ssrBuild(opts, internals, pageInput), clientBuild(opts, internals, jsInput)])) as RollupOutput[]; + // Perform the SSR build + const result = (await ssrBuild(opts, internals, jsInput)) as RollupOutput; // Generate each of the pages. - await generatePages(ssrResult, opts, internals, facadeIdToPageDataMap); - await cleanSsrOutput(opts); + await generatePages(result, opts, internals, facadeIdToPageDataMap); } async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, input: Set) { @@ -83,7 +67,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp mode: 'production', build: { emptyOutDir: true, - minify: false, + minify: false, // 'esbuild', // significantly faster than "terser" but may produce slightly-bigger bundles outDir: fileURLToPath(astroConfig.dist), ssr: true, rollupOptions: { @@ -95,41 +79,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp target: 'es2020', // must match an esbuild target }, plugins: [ - vitePluginNewBuild(input, internals, 'mjs'), - 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 clientBuild(opts: StaticBuildOptions, internals: BuildInternals, input: Set) { - const { astroConfig, viteConfig } = opts; - - return await vite.build({ - logLevel: 'error', - mode: 'production', - build: { - emptyOutDir: false, - minify: 'esbuild', - outDir: fileURLToPath(astroConfig.dist), - rollupOptions: { - input: Array.from(input), - output: { - format: 'esm', - }, - preserveEntrySignatures: 'exports-only', - }, - target: 'es2020', // must match an esbuild target - }, - plugins: [ - vitePluginNewBuild(input, internals, 'js'), + vitePluginNewBuild(), rollupPluginAstroBuildCSS({ internals, }), @@ -174,7 +124,6 @@ async function generatePage(output: OutputChunk, opts: StaticBuildOptions, inter const generationOptions: Readonly = { pageData, - internals, linkIds, Component, }; @@ -187,14 +136,13 @@ async function generatePage(output: OutputChunk, opts: StaticBuildOptions, inter interface GeneratePathOptions { pageData: PageBuildData; - internals: BuildInternals; linkIds: string[]; Component: AstroComponentFactory; } -async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: GeneratePathOptions) { +async function generatePath(path: string, opts: StaticBuildOptions, gopts: GeneratePathOptions) { const { astroConfig, logging, origin, routeCache } = opts; - const { Component, internals, linkIds, pageData } = gopts; + const { Component, linkIds, pageData } = gopts; const [renderers, mod] = pageData.preload; @@ -203,36 +151,14 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G route: pageData.route, routeCache, logging, - pathname, + pathname: path, mod, }); - debug(logging, 'generate', `Generating: ${pathname}`); + info(logging, 'generate', `Generating: ${path}`); - const result = createResult({ astroConfig, origin, params, pathname, renderers }); - result.links = new Set( - linkIds.map((href) => ({ - props: { - rel: 'stylesheet', - href, - }, - children: '', - })) - ); - // Override the `resolve` method so that hydrated components are given the - // hashed filepath to the component. - result.resolve = async (specifier: string) => { - const hashedFilePath = internals.entrySpecifierToBundleMap.get(specifier); - if (typeof hashedFilePath !== 'string') { - throw new Error(`Cannot find the built path for ${specifier}`); - } - const relPath = npath.posix.relative(pathname, '/' + hashedFilePath); - const fullyRelativePath = relPath[0] === '.' ? relPath : './' + relPath; - return fullyRelativePath; - }; - - let html = await renderPage(result, Component, pageProps, null); - const outFolder = new URL('.' + pathname + '/', astroConfig.dist); + 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'); @@ -241,20 +167,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G } } -async function cleanSsrOutput(opts: StaticBuildOptions) { - // The SSR output is all .mjs files, the client output is not. - const files = await glob('**/*.mjs', { - cwd: opts.astroConfig.dist.pathname, - }); - await Promise.all( - files.map(async (filename) => { - const url = new URL(filename, opts.astroConfig.dist); - await fs.promises.rm(url); - }) - ); -} - -export function vitePluginNewBuild(input: Set, internals: BuildInternals, ext: 'js' | 'mjs'): VitePlugin { +export function vitePluginNewBuild(): VitePlugin { return { name: '@astro/rollup-plugin-new-build', @@ -270,34 +183,13 @@ export function vitePluginNewBuild(input: Set, internals: BuildInternals outputOptions(outputOptions) { Object.assign(outputOptions, { entryFileNames(_chunk: PreRenderedChunk) { - return 'assets/[name].[hash].' + ext; + return 'assets/[name].[hash].mjs'; }, chunkFileNames(_chunk: PreRenderedChunk) { - return 'assets/[name].[hash].' + ext; + return 'assets/[name].[hash].mjs'; }, }); return outputOptions; }, - - async generateBundle(_options, bundle) { - const promises = []; - const mapping = new Map(); - for (const specifier of input) { - promises.push( - this.resolve(specifier).then((result) => { - if (result) { - mapping.set(result.id, specifier); - } - }) - ); - } - await Promise.all(promises); - for (const [, chunk] of Object.entries(bundle)) { - if (chunk.type === 'chunk' && chunk.facadeModuleId && mapping.has(chunk.facadeModuleId)) { - const specifier = mapping.get(chunk.facadeModuleId)!; - internals.entrySpecifierToBundleMap.set(specifier, chunk.fileName); - } - } - }, }; } diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts index d9b56b270..b53411b91 100644 --- a/packages/astro/src/core/ssr/index.ts +++ b/packages/astro/src/core/ssr/index.ts @@ -1,19 +1,34 @@ import type { BuildResult } from 'esbuild'; import type vite from '../vite'; -import type { AstroConfig, ComponentInstance, GetStaticPathsResult, Params, Props, Renderer, RouteCache, RouteData, RuntimeMode, SSRElement, SSRError } from '../../@types/astro'; +import type { + AstroConfig, + AstroGlobal, + AstroGlobalPartial, + ComponentInstance, + GetStaticPathsResult, + Params, + Props, + Renderer, + RouteCache, + RouteData, + RuntimeMode, + SSRElement, + SSRError, + SSRResult, +} from '../../@types/astro'; import type { LogOptions } from '../logger'; +import type { AstroComponentFactory } from '../../runtime/server/index'; import eol from 'eol'; import fs from 'fs'; import path from 'path'; import { fileURLToPath } from 'url'; -import { renderPage } from '../../runtime/server/index.js'; -import { codeFrame, resolveDependency } from '../util.js'; +import { renderPage, renderSlot } from '../../runtime/server/index.js'; +import { canonicalURL as getCanonicalURL, codeFrame, resolveDependency } from '../util.js'; import { getStylesForURL } from './css.js'; import { injectTags } from './html.js'; import { generatePaginateFunction } from './paginate.js'; import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js'; -import { createResult } from './result.js'; const svelteStylesRE = /svelte\?svelte&type=style/; @@ -124,6 +139,75 @@ 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 { + const _links = new Set( + links.map((href) => ({ + props: { + rel: 'stylesheet', + href, + }, + children: '', + })) + ); + const result: SSRResult = { + styles: new Set(), + scripts: new Set(), + links: _links, + /** This function returns the `Astro` faux-global */ + createAstro(astroGlobal: AstroGlobalPartial, props: Record, slots: Record | 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 but shouldn't be used publicly + privateRenderSlotDoNotUse(slotName: string) { + return renderSlot(result, slots ? slots[slotName] : null); + }, + // 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, @@ -208,10 +292,57 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO if (!Component) throw new Error(`Expected an exported Astro component but received typeof ${typeof Component}`); if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`); - const result = createResult({ astroConfig, origin, params, pathname, renderers }); - result.resolve = async (s: string) => { - const [, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s); - return resolvedPath; + // 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 + // calling the render() function will populate the object with scripts, styles, etc. + const result: SSRResult = { + styles: new Set(), + scripts: new Set(), + links: new Set(), + /** This function returns the `Astro` faux-global */ + createAstro(astroGlobal: AstroGlobalPartial, props: Record, slots: Record | 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 but shouldn't be used publicly + privateRenderSlotDoNotUse(slotName: string) { + return renderSlot(result, slots ? slots[slotName] : null); + }, + // 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]; + } + // ['rehype-toc', opts] + if (typeof mdRender === 'string') { + ({ default: mdRender } = await import(mdRender)); + } + // [import('rehype-toc'), opts] + else if (mdRender instanceof Promise) { + ({ default: mdRender } = await 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); @@ -256,7 +387,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO html = injectTags(html, tags); // run transformIndexHtml() in dev to run Vite dev transformations - if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) { + if (mode === 'development') { const relativeURL = filePath.href.replace(astroConfig.projectRoot.href, '/'); html = await viteServer.transformIndexHtml(relativeURL, html, pathname); } diff --git a/packages/astro/src/core/ssr/result.ts b/packages/astro/src/core/ssr/result.ts deleted file mode 100644 index 32694dd05..000000000 --- a/packages/astro/src/core/ssr/result.ts +++ /dev/null @@ -1,75 +0,0 @@ -import type { AstroConfig, AstroGlobal, AstroGlobalPartial, Params, Renderer, SSRElement, SSRResult } from '../../@types/astro'; - -import { canonicalURL as getCanonicalURL } from '../util.js'; -import { renderSlot } from '../../runtime/server/index.js'; - -export interface CreateResultArgs { - astroConfig: AstroConfig; - origin: string; - params: Params; - pathname: string; - renderers: Renderer[]; -} - -export function createResult(args: CreateResultArgs): SSRResult { - const { astroConfig, origin, params, pathname, renderers } = 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 - // calling the render() function will populate the object with scripts, styles, etc. - const result: SSRResult = { - styles: new Set(), - scripts: new Set(), - links: new Set(), - /** This function returns the `Astro` faux-global */ - createAstro(astroGlobal: AstroGlobalPartial, props: Record, slots: Record | 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 but shouldn't be used publicly - privateRenderSlotDoNotUse(slotName: string) { - return renderSlot(result, slots ? slots[slotName] : null); - }, - // 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]; - } - // ['rehype-toc', opts] - if (typeof mdRender === 'string') { - ({ default: mdRender } = await import(mdRender)); - } - // [import('rehype-toc'), opts] - else if (mdRender instanceof Promise) { - ({ default: mdRender } = await mdRender); - } - const { code } = await mdRender(content, { ...renderOpts, ...(opts ?? {}) }); - return code; - }, - } as unknown as AstroGlobal; - }, - // This is a stub and will be implemented by dev and build. - async resolve(s: string): Promise { - return ''; - }, - _metadata: { - renderers, - pathname, - experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild, - }, - }; - - return result; -} diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index f83632bdd..fd71287dd 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -1,8 +1,8 @@ import type { AstroComponentMetadata } from '../../@types/astro'; -import type { SSRElement, SSRResult } from '../../@types/astro'; +import type { SSRElement } from '../../@types/astro'; import { valueToEstree } from 'estree-util-value-to-estree'; import * as astring from 'astring'; -import { hydrationSpecifier, serializeListValue } from './util.js'; +import { serializeListValue } from './util.js'; const { generate, GENERATOR } = astring; @@ -69,11 +69,6 @@ export function extractDirectives(inputProps: Record): Ext extracted.hydration.componentExport.value = value; break; } - // This is a special prop added to prove that the client hydration method - // was added statically. - case 'client:component-hydration': { - break; - } default: { extracted.hydration.directive = key.split(':')[1]; extracted.hydration.value = value; @@ -98,20 +93,18 @@ export function extractDirectives(inputProps: Record): Ext extracted.props[key] = value; } } - return extracted; } interface HydrateScriptOptions { renderer: any; - result: SSRResult; astroId: string; props: Record; } /** For hydrated components, generate a