From 34c2d1e8fcf391bb054e0d288adf1da6059f0a88 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 2 Mar 2022 09:39:05 -0500 Subject: [PATCH] Migrate more tests to the static build (#2693) * fix: disable HMR during build (#2684) * Migrate more tests to the static build * Only prepend links in non-legacy mode * Add the 0-css tests * Convert all CSS tests to the static build * Migrate Astro global tests * Remove .only * Fix static build tests * Migrate a few more * More tests * Move the lit test back to legacy * Increase the test timeout Co-authored-by: Nate Moore --- packages/astro/package.json | 4 +- packages/astro/src/core/build/static-build.ts | 18 +++-- packages/astro/src/core/render/dev/index.ts | 74 ++++++++++++------ packages/astro/src/core/render/sitemap.ts | 1 - packages/astro/src/runtime/server/index.ts | 18 +++-- packages/astro/test/0-css.test.js | 25 +++--- .../test/astro-css-bundling-import.test.js | 4 +- .../astro-css-bundling-nested-layouts.test.js | 41 ---------- .../astro/test/astro-css-bundling.test.js | 25 +----- packages/astro/test/astro-dynamic.test.js | 9 +-- packages/astro/test/astro-global.test.js | 10 +-- packages/astro/test/astro-jsx.test.js | 3 - packages/astro/test/astro-pagination.test.js | 1 - .../astro/test/astro-partial-html.test.js | 8 +- packages/astro/test/astro-sitemap-rss.test.js | 2 - packages/astro/test/builtins.test.js | 30 ------- packages/astro/test/custom-elements.test.js | 5 +- .../test/fixtures/0-css/src/pages/index.astro | 15 ++-- .../src/layouts/BaseLayout.astro | 27 ------- .../src/layouts/PageLayout.astro | 12 --- .../src/pages/page-1.astro | 15 ---- .../src/pages/page-2.astro | 9 --- .../src/styles/page-one.css | 3 - .../src/styles/page-two.css | 3 - .../src/styles/site.css | 7 -- .../astro-css-bundling/src/pages/index.astro | 8 +- .../astro-css-bundling/src/pages/one.astro | 6 +- .../src/pages/preload-merge.astro | 17 ---- .../src/pages/preload.astro | 14 ---- .../astro-css-bundling/src/pages/two.astro | 8 +- .../src/components/ChildResolve.astro | 5 -- .../src/components/nested/InnerChild.astro | 6 -- .../src/components/nested/images/penguin.png | Bin 77977 -> 0 bytes .../astro-global/src/pages/resolve.astro | 14 ---- .../astro/test/fixtures/builtins/package.json | 8 -- .../builtins/packages/dep/CHANGELOG.md | 8 -- .../fixtures/builtins/packages/dep/main.js | 10 --- .../builtins/packages/dep/package.json | 7 -- .../builtins/src/components/Version.astro | 9 --- .../fixtures/builtins/src/pages/bare.astro | 12 --- .../fixtures/builtins/src/pages/index.astro | 16 ---- packages/astro/test/preview-routing.test.js | 7 -- packages/astro/test/remote-css.test.js | 3 +- .../test/static-build-page-url-format.test.js | 4 +- packages/astro/test/static-build.test.js | 32 ++++---- 45 files changed, 144 insertions(+), 419 deletions(-) delete mode 100644 packages/astro/test/astro-css-bundling-nested-layouts.test.js delete mode 100644 packages/astro/test/builtins.test.js delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css delete mode 100644 packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css delete mode 100644 packages/astro/test/fixtures/astro-css-bundling/src/pages/preload-merge.astro delete mode 100644 packages/astro/test/fixtures/astro-css-bundling/src/pages/preload.astro delete mode 100644 packages/astro/test/fixtures/astro-global/src/components/ChildResolve.astro delete mode 100644 packages/astro/test/fixtures/astro-global/src/components/nested/InnerChild.astro delete mode 100644 packages/astro/test/fixtures/astro-global/src/components/nested/images/penguin.png delete mode 100644 packages/astro/test/fixtures/astro-global/src/pages/resolve.astro delete mode 100644 packages/astro/test/fixtures/builtins/package.json delete mode 100644 packages/astro/test/fixtures/builtins/packages/dep/CHANGELOG.md delete mode 100644 packages/astro/test/fixtures/builtins/packages/dep/main.js delete mode 100644 packages/astro/test/fixtures/builtins/packages/dep/package.json delete mode 100644 packages/astro/test/fixtures/builtins/src/components/Version.astro delete mode 100644 packages/astro/test/fixtures/builtins/src/pages/bare.astro delete mode 100644 packages/astro/test/fixtures/builtins/src/pages/index.astro diff --git a/packages/astro/package.json b/packages/astro/package.json index 41bd81b2f..b952cff6d 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -54,8 +54,8 @@ "dev": "astro-scripts dev \"src/**/*.ts\"", "postbuild": "astro-scripts copy \"src/**/*.astro\"", "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js", - "test": "mocha --parallel --timeout 15000 --ignore **/lit-element.test.js && mocha **/lit-element.test.js", - "test:match": "mocha --timeout 15000 -g" + "test": "mocha --parallel --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js", + "test:match": "mocha --timeout 20000 -g" }, "dependencies": { "@astrojs/compiler": "^0.12.0-next.5", diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts index e1ba741d4..c52ae6f31 100644 --- a/packages/astro/src/core/build/static-build.ts +++ b/packages/astro/src/core/build/static-build.ts @@ -38,8 +38,7 @@ export interface StaticBuildOptions { const MAX_CONCURRENT_RENDERS = 10; function addPageName(pathname: string, opts: StaticBuildOptions): void { - const pathrepl = opts.astroConfig.buildOptions.pageUrlFormat === 'directory' ? '/index.html' : pathname === '/' ? 'index.html' : '.html'; - opts.pageNames.push(pathname.replace(/\/?$/, pathrepl).replace(/^\//, '')); + opts.pageNames.push(pathname.replace(/\/?$/, '/').replace(/^\//, '')); } // Gives back a facadeId that is relative to the root. @@ -362,7 +361,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G debug('build', `Generating: ${pathname}`); const site = astroConfig.buildOptions.site; - const links = createLinkStylesheetElementSet(linkIds, site); + const links = createLinkStylesheetElementSet(linkIds.reverse(), site); const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site); try { @@ -456,8 +455,7 @@ async function generateManifest(result: RollupOutput, opts: StaticBuildOptions, } function getOutRoot(astroConfig: AstroConfig): URL { - const rootPathname = appendForwardSlash(astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/'); - return new URL('.' + rootPathname, astroConfig.dist); + return new URL('./', astroConfig.dist); } function getServerRoot(astroConfig: AstroConfig): URL { @@ -483,8 +481,10 @@ function getOutFolder(astroConfig: AstroConfig, pathname: string, routeType: Rou switch (astroConfig.buildOptions.pageUrlFormat) { case 'directory': return new URL('.' + appendForwardSlash(pathname), outRoot); - case 'file': + case 'file': { return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot); + } + } } } @@ -497,8 +497,10 @@ function getOutFile(astroConfig: AstroConfig, outFolder: URL, pathname: string, switch (astroConfig.buildOptions.pageUrlFormat) { case 'directory': return new URL('./index.html', outFolder); - case 'file': - return new URL('./' + npath.basename(pathname) + '.html', outFolder); + case 'file': { + const baseName = npath.basename(pathname); + return new URL('./' + (baseName || 'index') + '.html', outFolder); + } } } } diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts index fc15fbba5..9f792d58e 100644 --- a/packages/astro/src/core/render/dev/index.ts +++ b/packages/astro/src/core/render/dev/index.ts @@ -1,5 +1,5 @@ import type * as vite from 'vite'; -import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode } from '../../../@types/astro'; +import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode, SSRElement } from '../../../@types/astro'; import { LogOptions } from '../../logger.js'; import { fileURLToPath } from 'url'; import { getStylesForURL } from './css.js'; @@ -48,14 +48,15 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions) /** use Vite to SSR */ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise { const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts; + const legacy = astroConfig.buildOptions.legacyBuild; // Add hoisted script tags const scripts = createModuleScriptElementWithSrcSet( - !astroConfig.buildOptions.legacyBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : [] + !legacy && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : [] ); // Inject HMR scripts - if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !astroConfig.buildOptions.legacyBuild) { + if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !legacy) { scripts.add({ props: { type: 'module', src: '/@vite/client' }, children: '', @@ -66,9 +67,31 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO }); } + // Pass framework CSS in as link tags to be appended to the page. + let links = new Set(); + if(!legacy) { + [...getStylesForURL(filePath, viteServer)].forEach((href) => { + if (mode === 'development' && svelteStylesRE.test(href)) { + scripts.add({ + props: { type: 'module', src: href }, + children: '', + }); + } else { + links.add({ + props: { + rel: 'stylesheet', + href, + 'data-astro-injected': true, + }, + children: '', + }); + } + }); + } + let content = await coreRender({ legacyBuild: astroConfig.buildOptions.legacyBuild, - links: new Set(), + links, logging, markdownRender: astroConfig.markdownOptions.render, mod, @@ -101,7 +124,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.legacyBuild) { + if (mode === 'development' && legacy) { tags.push({ tag: 'script', attrs: { type: 'module' }, @@ -113,25 +136,28 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO } // inject CSS - [...getStylesForURL(filePath, viteServer)].forEach((href) => { - if (mode === 'development' && svelteStylesRE.test(href)) { - tags.push({ - tag: 'script', - attrs: { type: 'module', src: href }, - injectTo: 'head', - }); - } else { - tags.push({ - tag: 'link', - attrs: { - rel: 'stylesheet', - href, - 'data-astro-injected': true, - }, - injectTo: 'head', - }); - } - }); + if(legacy) { + [...getStylesForURL(filePath, viteServer)].forEach((href) => { + if (mode === 'development' && svelteStylesRE.test(href)) { + tags.push({ + tag: 'script', + attrs: { type: 'module', src: href }, + injectTo: 'head', + }); + } else { + tags.push({ + tag: 'link', + attrs: { + rel: 'stylesheet', + href, + 'data-astro-injected': true, + }, + injectTo: 'head', + }); + } + }); + } + // add injected tags content = injectTags(content, tags); diff --git a/packages/astro/src/core/render/sitemap.ts b/packages/astro/src/core/render/sitemap.ts index a5ef54f6a..4f695253d 100644 --- a/packages/astro/src/core/render/sitemap.ts +++ b/packages/astro/src/core/render/sitemap.ts @@ -3,7 +3,6 @@ const STATUS_CODE_PAGE_REGEXP = /\/[0-9]{3}\/?$/; /** Construct sitemap.xml given a set of URLs */ export function generateSitemap(pages: string[]): string { // TODO: find way to respect URLs here - // TODO: find way to exclude pages from sitemap // copy just in case original copy is needed diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index d88bebbe3..aa3980b15 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -337,12 +337,14 @@ export function createAstro(filePathname: string, _site: string, projectRootStr: }; } -const toAttributeString = (value: any) => String(value).replace(/&/g, '&').replace(/"/g, '"'); +const toAttributeString = (value: any, shouldEscape = true) => shouldEscape ? + String(value).replace(/&/g, '&').replace(/"/g, '"') : + value; const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']); // A helper used to turn expressions into attribute key/value -export function addAttribute(value: any, key: string) { +export function addAttribute(value: any, key: string, shouldEscape = true) { if (value == null) { return ''; } @@ -372,15 +374,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) { return unescapeHTML(` ${key}`); } else { - return unescapeHTML(` ${key}="${toAttributeString(value)}"`); + return unescapeHTML(` ${key}="${toAttributeString(value, shouldEscape)}"`); } } // Adds support for ` -export function spreadAttributes(values: Record) { +export function spreadAttributes(values: Record, shouldEscape = true) { let output = ''; for (const [key, value] of Object.entries(values)) { - output += addAttribute(value, key); + output += addAttribute(value, key, shouldEscape); } return unescapeHTML(output); } @@ -463,7 +465,7 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac const links = Array.from(result.links) .filter(uniqueElements) - .map((link) => renderElement('link', link)); + .map((link) => renderElement('link', link, false)); // inject styles & scripts at end of let headPos = template.indexOf(''); @@ -513,7 +515,7 @@ function getHTMLElementName(constructor: typeof HTMLElement) { return assignedName; } -function renderElement(name: string, { props: _props, children = '' }: SSRElement) { +function renderElement(name: string, { props: _props, children = '' }: SSRElement, shouldEscape = true) { // Do not print `hoist`, `lang`, `global` const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props; if (defineVars) { @@ -530,5 +532,5 @@ function renderElement(name: string, { props: _props, children = '' }: SSRElemen children = defineScriptVars(defineVars) + '\n' + children; } } - return `<${name}${spreadAttributes(props)}>${children}`; + return `<${name}${spreadAttributes(props, shouldEscape)}>${children}`; } diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index edd36948d..770907034 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -15,7 +15,11 @@ 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 + vite: { + build: { + assetsInlineLimit: 0 + } + } }); }); @@ -32,7 +36,7 @@ describe('CSS', function () { // get bundled CSS (will be hashed, hence DOM query) const html = await fixture.readFile('/index.html'); $ = cheerio.load(html); - const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href'); + const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href'); bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/')); }); @@ -48,7 +52,8 @@ describe('CSS', function () { expect(el2.attr('class')).to.equal(`visible ${scopedClass}`); // 2. check CSS - expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`); + const expected = `.blue.${scopedClass}{color:#b0e0e6}.color\\\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`; + expect(bundledCSS).to.include(expected); }); it('No - - - - + + +
diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro deleted file mode 100644 index 46186817c..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -import "../styles/site.css" - -const {title} = Astro.props; ---- - - - - - - - - {title} - - - - - - - - - diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro deleted file mode 100644 index b1b4514ca..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro +++ /dev/null @@ -1,12 +0,0 @@ ---- -import BaseLayout from "./BaseLayout.astro" -import "../styles/page-one.css" - -const {title} = Astro.props; ---- - - -
- -
- diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro deleted file mode 100644 index 1d2ca244a..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- - import PageLayout from "../layouts/PageLayout.astro" - - const date = new Date(); ---- - - -

Page 1

-

This page has styling in dev-server. But the built page has no styling.

-

Check dist/page-1/index.html. There are no stylesheets imported.

-

Additionally, there is an empty js file in the dist/assets folder. Thankfully the file is not required by any page.

-

Execute the build npm run build and preview it npx http-server dist/ at https://github-qoihup--8080.local.webcontainer.io/page-1/

- -

Date: {date}

- diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro deleted file mode 100644 index 5932f9444..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro +++ /dev/null @@ -1,9 +0,0 @@ ---- - import PageLayout from "../layouts/PageLayout.astro" - import "../styles/page-two.css" ---- - - -

Page 2

-

Nothing to see here. Check Page 1

- diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css deleted file mode 100644 index ce7da0463..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css +++ /dev/null @@ -1,3 +0,0 @@ -p { - color: blue; -} diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css deleted file mode 100644 index 87002430a..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css +++ /dev/null @@ -1,3 +0,0 @@ -p { - color: green; -} diff --git a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css b/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css deleted file mode 100644 index 47a8192ee..000000000 --- a/packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css +++ /dev/null @@ -1,7 +0,0 @@ -p { - color: red; -} - -h1 { - outline: 1px solid red; -} diff --git a/packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro b/packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro index f776de2e8..0187ef6ea 100644 --- a/packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro +++ b/packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro @@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro'; - - - +