Move some tests over to the static build (#2677)

* Move some tests over to the static build

* Fix assets tests

* Fix the assets tests

* Fix for the client:only components

* Moves asset tests to the static build

* Move postcss test over to static build

* Bring back legacy build for astro-basic test

packages/astro/package.json

@@ -56,7 +56,7 @@
     "test:match": "mocha --timeout 15000 -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.11.4",
+    "@astrojs/compiler": "^0.12.0-next.5",
     "@astrojs/language-server": "^0.8.6",
     "@astrojs/markdown-remark": "^0.6.2",
     "@astrojs/prism": "0.4.0",

packages/astro/src/core/build/static-build.ts

@@ -130,6 +130,8 @@ export async function staticBuild(opts: StaticBuildOptions) {
 			const topLevelImports = new Set([
 				// Any component that gets hydrated
 				...metadata.hydratedComponentPaths(),
+				// Client-only components
+				...metadata.clientOnlyComponentPaths(),
 				// Any hydration directive like astro/client/idle.js
 				...metadata.hydrationDirectiveSpecifiers(),
 				// The client path for each renderer
@@ -181,6 +183,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 		logLevel: 'error',
 		mode: 'production',
 		build: {
+			...viteConfig.build,
 			emptyOutDir: false,
 			manifest: ssr,
 			minify: false,

packages/astro/src/runtime/server/metadata.ts

@@ -13,6 +13,7 @@ interface ComponentMetadata {
 interface CreateMetadataOptions {
 	modules: ModuleInfo[];
 	hydratedComponents: any[];
+	clientOnlyComponents: any[];
 	hydrationDirectives: Set<string>;
 	hoisted: any[];
 }
@@ -22,6 +23,7 @@ export class Metadata {
 	public modules: ModuleInfo[];
 	public hoisted: any[];
 	public hydratedComponents: any[];
+	public clientOnlyComponents: any[];
 	public hydrationDirectives: Set<string>;
 
 	private metadataCache: Map<any, ComponentMetadata | null>;
@@ -30,6 +32,7 @@ export class Metadata {
 		this.modules = opts.modules;
 		this.hoisted = opts.hoisted;
 		this.hydratedComponents = opts.hydratedComponents;
+		this.clientOnlyComponents = opts.clientOnlyComponents;
 		this.hydrationDirectives = opts.hydrationDirectives;
 		this.mockURL = new URL(filePathname, 'http://example.com');
 		this.metadataCache = new Map<any, ComponentMetadata | null>();
@@ -66,6 +69,19 @@ export class Metadata {
 		}
 	}
 
+	*clientOnlyComponentPaths() {
+		const found = new Set<string>();
+		for (const metadata of this.deepMetadata()) {
+			for (const component of metadata.clientOnlyComponents) {
+				const path = metadata.resolvePath(component);
+				if (path && !found.has(path)) {
+					found.add(path);
+					yield path;
+				}
+			}
+		}
+	}
+
 	/**
 	 * Gets all of the hydration specifiers used within this component.
 	 */

packages/astro/test/astro-assets.test.js

@@ -13,7 +13,11 @@ describe('Assets', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/astro-assets/',
-			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
 		});
 		await fixture.build();
 	});
@@ -22,7 +26,7 @@ describe('Assets', () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 		const imgPath = $('img').attr('src');
-		const data = await fixture.readFile('/' + imgPath);
+		const data = await fixture.readFile( imgPath);
 		expect(!!data).to.equal(true);
 	});
 
@@ -32,7 +36,7 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 2);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
@@ -42,14 +46,14 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 3);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
 	it('built image from an import specifier', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-no-url').attr('src');
+		const src = $('#import-no-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});
@@ -57,7 +61,7 @@ describe('Assets', () => {
 	it('built image from an import specifier using ?url', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-url').attr('src');
+		const src = $('#import-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});

packages/astro/test/astro-basic.test.js

@@ -9,7 +9,7 @@ describe('Astro basics', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/astro-basic/',
-			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+			buildOptions: { legacyBuild: true }
 		});
 		await fixture.build();
 		previewServer = await fixture.preview();

packages/astro/test/astro-client-only.test.js

@@ -8,7 +8,6 @@ describe('Client only components', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/astro-client-only/',
-			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 		});
 		await fixture.build();
 	});
@@ -19,19 +18,10 @@ describe('Client only components', () => {
 
 		// test 1: <astro-root> is empty
 		expect($('astro-root').html()).to.equal('');
-		const src = $('script').attr('src');
+		const $script = $('script');
+		const script = $script.html();
 
-		const script = await fixture.readFile(src);
 		// test 2: svelte renderer is on the page
-		const exp = /import\("(.\/client.*)"\)/g;
+		expect(/import\(".\/PersistentCounter.*/g.test(script)).to.be.ok;
-		let match, svelteRenderer;
-		while ((match = exp.exec(script))) {
-			svelteRenderer = match[1].replace(/^\./, '/assets/');
-		}
-		expect(svelteRenderer).to.be.ok;
-
-		// test 3: can load svelte renderer
-		const svelteClient = await fixture.readFile(svelteRenderer);
-		expect(svelteClient).to.be.ok;
 	});
 });

packages/astro/test/astro-components.test.js

@@ -1,56 +0,0 @@
-/**
- * UNCOMMENT: add support for functional components in frontmatter
-import { expect } from 'chai';
-import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
-
-let fixture;
-
-before(async () => {
-  fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
-  await fixture.build();
-});
-
-// TODO: add support for functional components in frontmatter
-describe('Components tests', () => {
-  it('Astro components are able to render framework components', async () => {
-    const html = await fixture.readFile('/index.html');
-    const $ = cheerio.load(html);
-
-    // test 1: Renders Astro component
-    const $astro = $('#astro');
-    expect($astro.children()).to.have.lengthOf(3);
-
-    // test 2: Renders React component
-    const $react = $('#react');
-    expect($react).not.to.have.lengthOf(0);
-
-    // test 3: Renders Vue component
-    const $vue = $('#vue');
-    expect($vue).not.to.have.lengthOf(0);
-
-    // test 4: Renders Svelte component
-    const $svelte = $('#svelte');
-    expect($svelte).not.to.have.lengthOf(0);
-  });
-
-  it('Allows Components defined in frontmatter', async () => {
-    const html = await fixture.readFile('/frontmatter-component/index.html');
-    const $ = cheerio.load(html);
-
-    expect($('h1')).to.have.lengthOf(1);
-  });
-
-  it('Still throws an error for undefined components', async () => {
-    const result = await fixture.readFile('/undefined-component/index.html');
-    expect(result.status).to.equal(500);
-  });
-
-  it('Client attrs not added', async () => {
-    const html = await fixture.readFile('/client/index.html');
-    expect(html).not.to.include(`"client:load": true`);
-  });
-});
-*/
-
-it.skip('is skipped', () => {});

packages/astro/test/astro-scripts.test.js

@@ -9,7 +9,11 @@ describe('Scripts (hoisted and not)', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/astro-scripts/',
-			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
 		});
 		await fixture.build();
 	});
@@ -41,8 +45,8 @@ describe('Scripts (hoisted and not)', () => {
 		// test 2: attr removed
 		expect($('script').attr('data-astro')).to.equal(undefined);
 
-		let entryURL = path.join('inline', $('script').attr('src'));
+		const entryURL =  $('script').attr('src');
-		let inlineEntryJS = await fixture.readFile(entryURL);
+		const inlineEntryJS = await fixture.readFile(entryURL);
 
 		// test 3: the JS exists
 		expect(inlineEntryJS).to.be.ok;
@@ -56,7 +60,7 @@ describe('Scripts (hoisted and not)', () => {
 		expect($('script')).to.have.lengthOf(2);
 
 		let el = $('script').get(1);
-		let entryURL = path.join('external', $(el).attr('src'));
+		let entryURL = $(el).attr('src');
 		let externalEntryJS = await fixture.readFile(entryURL);
 
 		// test 2: the JS exists

packages/astro/test/cli.test.js

@@ -1,48 +0,0 @@
-import { expect } from 'chai';
-import { cli } from './test-utils.js';
-import { promises as fs } from 'fs';
-import { fileURLToPath } from 'url';
-
-describe('astro cli', () => {
-	it('astro', async () => {
-		const proc = await cli();
-
-		expect(proc.stdout).to.include('astro - Futuristic web development tool');
-	});
-
-	it('astro --version', async () => {
-		const pkgURL = new URL('../package.json', import.meta.url);
-		const pkgVersion = await fs.readFile(pkgURL, 'utf8').then((data) => JSON.parse(data).version);
-
-		const proc = await cli('--version');
-
-		expect(proc.stdout).to.equal(pkgVersion);
-	});
-
-	it('astro dev', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = cli('dev', '--project-root', fileURLToPath(projectRootURL));
-
-		let stdout = '';
-
-		for await (const chunk of proc.stdout) {
-			stdout += chunk;
-
-			if (chunk.includes('Local:')) break;
-		}
-
-		proc.kill();
-
-		expect(stdout).to.include('Server started');
-	});
-
-	it('astro build', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL),
-			'--legacy-build');
-
-		expect(proc.stdout).to.include('Done');
-	});
-});

packages/astro/test/fixtures/astro-assets/src/pages/index.astro

@@ -9,7 +9,7 @@ import p2Url from '../images/penguin2.jpg?url';
 </style>
 <body>
   <h1>Icons</h1>
-  <img src={Astro.resolve('../images/twitter.png')} srcset={`${Astro.resolve('../images/twitter.png')} 1x, ${Astro.resolve('../images/twitter@2x.png')} 2x, ${Astro.resolve('../images/twitter@3x.png')} 3x`} />
+  <img src={(await import('../images/twitter.png')).default} srcset={`${(await import('../images/twitter.png')).default} 1x, ${(await import('../images/twitter@2x.png')).default} 2x, ${(await import('../images/twitter@3x.png')).default} 3x`} />
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
   <!--

packages/astro/test/fixtures/astro-components/src/components/Component.astro

@@ -1,11 +0,0 @@
----
-import ReactComponent from './Component.jsx';
-import VueComponent from './Component.vue';
-import SvelteComponent from './Component.svelte';
----
-
-<div id="astro">
-  <ReactComponent />
-  <VueComponent />
-  <SvelteComponent />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.jsx

@@ -1,5 +0,0 @@
-import { h } from 'preact';
-
-export default function PreactComponent({ children }) {
-  return <div id="preact">{children}</div>;
-}

packages/astro/test/fixtures/astro-components/src/components/Component.svelte

@@ -1,3 +0,0 @@
-<div id="svelte">
-    <slot />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.vue

@@ -1,9 +0,0 @@
-<template>
-  <div id="vue">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {}
-</script>

packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro

@@ -1,6 +0,0 @@
----
-export interface Props {
-    test: string;
-}
----
-<h1 id="direct-props-h1">{props.test}</h1>

packages/astro/test/fixtures/astro-components/src/pages/client.astro

@@ -1,9 +0,0 @@
----
-import SvelteComponent from '../components/Component.svelte';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <SvelteComponent client:load />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/frontmatter-component.astro

@@ -1,6 +0,0 @@
----
-const { level = 1 } = Astro.props;
-const Element = `h${level}`;
----
-
-<Element>Hello world!</Element>

packages/astro/test/fixtures/astro-components/src/pages/index.astro

@@ -1,9 +0,0 @@
----
-import AstroComponent from '../components/Component.astro';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <AstroComponent />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro

@@ -1,4 +0,0 @@
----
-import PropsComponent from "../components/Props-Component.astro"
----
-<PropsComponent test="test string"/>

packages/astro/test/fixtures/astro-components/src/pages/undefined-component.astro

@@ -1,11 +0,0 @@
----
-function FnComponent() {
-  const lame = 'ugh';
-  return <h2>Hey</h2>
-}
-const Defined = 'h1'
----
-
-<FnComponent />
-<Defined>Hello world!</Defined>
-<Undefined />

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistClassic.astro

@@ -1 +1,4 @@
-<script src={Astro.resolve("../scripts/no_hoist_nonmodule.js")}></script>
+---
+import url from "../scripts/no_hoist_nonmodule.js?url"
+---
+<script src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistModule.astro

@@ -1 +1,4 @@
-<script type="module" src={Astro.resolve("../scripts/no_hoist_module.js")}></script>
+---
+import url from '../scripts/no_hoist_module.js?url';
+---
+<script type="module" src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/something.js")}></script>
+<script hoist type="module" src="../scripts/something.js"></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget2.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/another_external.js")}></script>
+<script hoist type="module" src="../scripts/another_external.js"></script>

packages/astro/test/fixtures/postcss/src/pages/index.astro

@@ -4,9 +4,12 @@ import JSX from '../components/Solid.jsx';
 import Svelte from '../components/Svelte.svelte';
 import Vue from '../components/Vue.vue';
 ---
+<html>
 <head>
   <link rel="stylesheet" type="text/css" href="/global.css">
-  <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
+	<style>
+		@import '../styles/linked.css';
+	</style>
   <style>
     .astro-page {
       appearance: none;
@@ -22,3 +25,5 @@ import Vue from '../components/Vue.vue';
     <Vue />
   </div>
 </body>
+
+</html>

packages/astro/test/postcss.test.js

@@ -12,14 +12,13 @@ describe('PostCSS', () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/postcss',
 			renderers: ['@astrojs/renderer-solid', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
-			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
 		});
 		await fixture.build();
 
 		// get bundled CSS (will be hashed, hence DOM query)
 		const html = await fixture.readFile('/index.html');
 		const $ = 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(/^\/?/, '/'));
 	});
 
@@ -31,10 +30,6 @@ describe('PostCSS', () => {
 		expect(bundledCSS).to.match(new RegExp(`.astro-component.astro-[^{]+${PREFIXED_CSS}`));
 	});
 
-	it('works in <link>', () => {
-		expect(bundledCSS).to.match(new RegExp(`.a-n${PREFIXED_CSS}`));
-	});
-
 	it('works in JSX', () => {
 		expect(bundledCSS).to.match(new RegExp(`.solid${PREFIXED_CSS}`));
 	});

yarn.lock

@@ -137,10 +137,10 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@astrojs/compiler@^0.11.4":
+"@astrojs/compiler@^0.12.0-next.5":
-  version "0.11.4"
+  version "0.12.0-next.5"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.11.4.tgz#933853cf37ba2cbf0213a88463fd48c3a4329a07"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.12.0-next.5.tgz#4e6d27c74787777522395018f2497dab4a032c77"
-  integrity sha512-T598FTCgBFjjPLPClvn+lc2SFGAJkjaF+lbxvHNjzmUpOYdz7YyH1apd3XAZvDp5r5WBBhicB6693GhQRpf3oQ==
+  integrity sha512-4YVPRrB9JJhxoNC9PWN2zpGE7SXRAXcyCouawbd24iyBl4g9aRoQN12XA0qQZkbea9/NNLe9f2yhFMubM2CrJQ==
   dependencies:
     typescript "^4.3.5"
 
@@ -7104,15 +7104,6 @@ sass@^1.49.0, sass@^1.49.8:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.49.8:
-  version "1.49.9"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
-  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"