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

Update tests

Browse source
This commit is contained in:
Nate Moore 2021-09-10 22:11:34 +00:00 committed by Matthew Phillips
parent 58b94197f7
commit f9c5f7ad3c
118 changed files with 4325 additions and 3232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/framework-preact/src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from '../components/Counter.jsx' import Counter from '../components/Counter.tsx'
// Full Astro Component Syntax: // Full Astro Component Syntax:

2
examples/minimal/src/pages/index.astro
View file

@ -1,5 +1,6 @@
--- ---
--- ---
<html lang="en"> <html lang="en">
<head> <head>
@ -7,6 +8,7 @@
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title> <title>Welcome to Astro</title>
</head> </head>
<body> <body>

6
package.json
View file

@ -44,7 +44,7 @@
}, },
"devDependencies": { "devDependencies": {
"@changesets/cli": "^2.16.0", "@changesets/cli": "^2.16.0",
"@octokit/action": "^3.15.4", "@types/jest": "^27.0.1",
"@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/parser": "^4.18.0",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
@ -56,11 +56,11 @@
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.0",
"execa": "^5.0.0", "execa": "^5.0.0",
"jest": "^27.1.0",
"lerna": "^4.0.0", "lerna": "^4.0.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"tiny-glob": "^0.2.8", "tiny-glob": "^0.2.8",
"typescript": "^4.4.2", "typescript": "^4.4.2"
"uvu": "^0.5.1"
}, },
"engines": { "engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0" "node": "^12.20.0 || ^14.13.1 || >=16.0.0"

78
packages/astro/components/Markdown.astro
View file

@ -1,12 +1,14 @@
---
import fetch from 'node-fetch';
import { renderMarkdown } from '@astrojs/markdown-support'; import { renderMarkdown } from '@astrojs/markdown-support';
import { __astro_slot } from 'astro/runtime/__astro_slot.js';
if(!('fetch' in globalThis)) { export interface Props {
globalThis.fetch = fetch; content?: string;
} }
// Internal props that should not be part of the external interface.
interface InternalProps extends Props {
$scope: string;
}
const __TopLevelAstro = { const __TopLevelAstro = {
site: new URL("http://localhost:3000"), site: new URL("http://localhost:3000"),
@ -64,11 +66,11 @@ async function __render(props, ...children) {
$scope $scope
} = Astro.props; } = Astro.props;
let html = null; let html = null;
// This flow is only triggered if a user passes `<Markdown content={content} />`
if (content) { if (content) {
const { const { content: htmlContent } = await renderMarkdown(content, {
content: htmlContent mode: 'md',
} = await renderMarkdown(content, {
mode: "md",
$: { $: {
scopedClassName: $scope scopedClassName: $scope
} }
@ -76,55 +78,9 @@ if (content) {
html = htmlContent; html = htmlContent;
} }
return h(Fragment, null, h(Fragment, null,(html ? html : h(Fragment, null, h(__astro_slot, { [__astroContext]: props[__astroContext] }, children))))); /*
} If we have rendered `html` for `content`, render that
export default { isAstroComponent: true, __render }; Otherwise, just render the slotted content
*/
// `__renderPage()`: Render the contents of the Astro module as a page. This is a special flow, ---
// triggered by loading a component directly by URL. {html ? html : <slot />}
export async function __renderPage({request, children, props, css}) {
const currentChild = {
isAstroComponent: true,
layout: typeof __layout === 'undefined' ? undefined : __layout,
content: typeof __content === 'undefined' ? undefined : __content,
__render,
};
const isLayout = (__astroContext in props);
if(!isLayout) {
let astroRootUIDCounter = 0;
Object.defineProperty(props, __astroContext, {
value: {
pageCSS: css,
request,
createAstroRootUID(seed) { return seed + astroRootUIDCounter++; },
},
writable: false,
enumerable: false
});
}
Object.defineProperty(props, __astroInternal, {
value: {
isPage: !isLayout
},
writable: false,
enumerable: false
});
const childBodyResult = await currentChild.__render(props, children);
// find layout, if one was given.
if (currentChild.layout) {
return currentChild.layout({
request,
props: {content: currentChild.content, [__astroContext]: props[__astroContext]},
children: [childBodyResult],
});
}
return childBodyResult;
};

11
packages/astro/package.json
View file

@ -17,7 +17,8 @@
"./debug": "./components/Debug.astro", "./debug": "./components/Debug.astro",
"./components/*": "./components/*", "./components/*": "./components/*",
"./package.json": "./package.json", "./package.json": "./package.json",
"./runtime/*": "./dist/runtime/*" "./runtime/*": "./dist/runtime/*.js",
"./internal": "./dist/internal/index.js"
}, },
"imports": { "imports": {
"#astro/*": "./dist/*.js" "#astro/*": "./dist/*.js"
@ -35,9 +36,10 @@
"dev": "astro-scripts dev \"src/**/*.ts\"", "dev": "astro-scripts dev \"src/**/*.ts\"",
"postbuild": "astro-scripts copy \"src/**/*.astro\"", "postbuild": "astro-scripts copy \"src/**/*.astro\"",
"benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js", "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
"test": "uvu test -i fixtures -i benchmark -i test-utils.js" "test": "NODE_OPTIONS=--experimental-vm-modules jest"
}, },
"dependencies": { "dependencies": {
"@astrojs/compiler": "^0.1.0-canary.36",
"@astrojs/markdown-support": "^0.3.1", "@astrojs/markdown-support": "^0.3.1",
"@babel/core": "^7.15.0", "@babel/core": "^7.15.0",
"@web/rollup-plugin-html": "^1.9.1", "@web/rollup-plugin-html": "^1.9.1",
@ -50,10 +52,12 @@
"es-module-lexer": "^0.7.1", "es-module-lexer": "^0.7.1",
"esbuild": "^0.12.23", "esbuild": "^0.12.23",
"estree-util-value-to-estree": "^1.2.0", "estree-util-value-to-estree": "^1.2.0",
"etag": "^1.8.1",
"fast-xml-parser": "^3.19.0", "fast-xml-parser": "^3.19.0",
"fdir": "^5.1.0", "fdir": "^5.1.0",
"kleur": "^4.1.4", "kleur": "^4.1.4",
"mime": "^2.5.2", "mime": "^2.5.2",
"morphdom": "^2.6.1",
"node-fetch": "^2.6.1", "node-fetch": "^2.6.1",
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",
"picomatch": "^2.3.0", "picomatch": "^2.3.0",
@ -67,13 +71,14 @@
"source-map": "^0.7.3", "source-map": "^0.7.3",
"string-width": "^5.0.0", "string-width": "^5.0.0",
"supports-esm": "^1.0.0", "supports-esm": "^1.0.0",
"vite": "^2.5.1", "vite": "^2.5.2",
"yargs-parser": "^20.2.9", "yargs-parser": "^20.2.9",
"zod": "^3.8.1" "zod": "^3.8.1"
}, },
"devDependencies": { "devDependencies": {
"@types/babel__core": "^7.1.15", "@types/babel__core": "^7.1.15",
"@types/connect": "^3.4.35", "@types/connect": "^3.4.35",
"@types/etag": "^1.8.1",
"@types/mime": "^2.0.3", "@types/mime": "^2.0.3",
"@types/node-fetch": "^2.5.12", "@types/node-fetch": "^2.5.12",
"@types/send": "^0.17.1", "@types/send": "^0.17.1",

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

@ -3,15 +3,16 @@ import type babel from '@babel/core';
import type vite from 'vite'; import type vite from 'vite';
import type { z } from 'zod'; import type { z } from 'zod';
import type { AstroConfigSchema } from '../config'; import type { AstroConfigSchema } from '../config';
import type { AstroComponentFactory } from '../internal';
export { AstroMarkdownOptions }; export { AstroMarkdownOptions };
export interface AstroComponentMetadata { export interface AstroComponentMetadata {
displayName: string; displayName: string;
hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only'; hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only';
hydrateArgs?: any;
componentUrl?: string; componentUrl?: string;
componentExport?: { value: string; namespace?: boolean }; componentExport?: { value: string; namespace?: boolean };
value?: undefined | string;
} }
/** /**
@ -140,12 +141,7 @@ export interface CollectionRSS {
/** Generic interface for a component (Astro, Svelte, React, etc.) */ /** Generic interface for a component (Astro, Svelte, React, etc.) */
export interface ComponentInstance { export interface ComponentInstance {
default: { default: AstroComponentFactory;
isAstroComponent: boolean;
__render?(props: Props, ...children: any[]): string;
__renderer?: Renderer;
};
__renderPage?: (options: RenderPageOptions) => string;
css?: string[]; css?: string[];
getStaticPaths?: (options: GetStaticPathsOptions) => GetStaticPathsResult; getStaticPaths?: (options: GetStaticPathsOptions) => GetStaticPathsResult;
} }

45
packages/astro/src/@types/compiler.d.ts vendored Normal file
View file

@ -0,0 +1,45 @@
declare module '@astrojs/compiler' {
export type Platform = 'browser' | 'node' | 'neutral';
export type SourceMap = any;
export interface TransformOptions {}
export interface TransformResult {
code: string;
map: SourceMap;
warnings: any[];
}
export interface TransformResults {
js: TransformResult;
css?: TransformResult;
}
// This function transforms a single JavaScript file. It can be used to minify
// JavaScript, convert TypeScript/JSX to JavaScript, or convert newer JavaScript
// to older JavaScript. It returns a promise that is either resolved with a
// "TransformResult" object or rejected with a "TransformFailure" object.
//
// Works in node: yes
// Works in browser: yes
export declare function transform(input: string, options?: TransformOptions): Promise<string>;
// This configures the browser-based version of astro. It is necessary to
// call this first and wait for the returned promise to be resolved before
// making other API calls when using astro in the browser.
//
// Works in node: yes
// Works in browser: yes ("options" is required)
export declare function initialize(options: InitializeOptions): Promise<void>;
export interface InitializeOptions {
// The URL of the "astro.wasm" file. This must be provided when running
// astro in the browser.
wasmURL?: string;
// By default astro runs the WebAssembly-based browser API in a web worker
// to avoid blocking the UI thread. This can be disabled by setting "worker"
// to false.
worker?: boolean;
}
}

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

@ -75,7 +75,7 @@ class AstroBuilder {
// static pages // static pages
if (pathname) { if (pathname) {
allPages.push( allPages.push(
ssr({ filePath, logging, mode: 'production', origin, route, routeCache: this.routeCache, pathname, viteServer }).then((html) => ({ ssr({ astroConfig: this.config, filePath, logging, mode: 'production', origin, route, routeCache: this.routeCache, pathname, viteServer }).then((html) => ({
html, html,
name: pathname.replace(/\/?$/, '/index.html').replace(/^\//, ''), name: pathname.replace(/\/?$/, '/index.html').replace(/^\//, ''),
})) }))
@ -97,7 +97,7 @@ class AstroBuilder {
// TODO: throw error if conflict // TODO: throw error if conflict
staticPaths.paths.forEach((staticPath) => { staticPaths.paths.forEach((staticPath) => {
allPages.push( allPages.push(
ssr({ filePath, logging, mode: 'production', origin, route, routeCache: this.routeCache, pathname: staticPath, viteServer }).then((html) => ({ ssr({ astroConfig: this.config, filePath, logging, mode: 'production', origin, route, routeCache: this.routeCache, pathname: staticPath, viteServer }).then((html) => ({
html, html,
name: staticPath.replace(/\/?$/, '/index.html').replace(/^\//, ''), name: staticPath.replace(/\/?$/, '/index.html').replace(/^\//, ''),
})) }))

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

@ -10,7 +10,7 @@ import { z } from 'zod';
import { defaultLogDestination } from '../logger.js'; import { defaultLogDestination } from '../logger.js';
import build from '../build/index.js'; import build from '../build/index.js';
import devServer from '../dev/index.js'; import devServer from '../dev/index.js';
import { preview } from '../preview/index.js'; import preview from '../preview/index.js';
import { reload } from './reload.js'; import { reload } from './reload.js';
import { formatConfigError, loadConfig } from '../config.js'; import { formatConfigError, loadConfig } from '../config.js';

110
packages/astro/src/dev/index.ts
View file

@ -1,13 +1,18 @@
import type { NextFunction } from 'connect'; import type { NextFunction } from 'connect';
import type http from 'http'; import type http from 'http';
import type { AstroConfig, ManifestData, RouteCache } from '../@types/astro'; import type { AstroConfig, ManifestData, RouteCache, RouteData } from '../@types/astro';
import type { LogOptions } from '../logger'; import type { LogOptions } from '../logger';
import type { HmrContext, ModuleNode } from 'vite';
import chokidar from 'chokidar'; import chokidar from 'chokidar';
import connect from 'connect'; import connect from 'connect';
import mime from 'mime'; import mime from 'mime';
import getEtag from 'etag';
import { performance } from 'perf_hooks'; import { performance } from 'perf_hooks';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { createRequire } from 'module';
import path from 'path';
import { promises as fs } from 'fs';
import vite from 'vite'; import vite from 'vite';
import { defaultLogOptions, error, info } from '../logger.js'; import { defaultLogOptions, error, info } from '../logger.js';
import { createRouteManifest, matchRoute } from '../runtime/routing.js'; import { createRouteManifest, matchRoute } from '../runtime/routing.js';
@ -16,6 +21,8 @@ import { loadViteConfig } from '../runtime/vite/config.js';
import * as msg from './messages.js'; import * as msg from './messages.js';
import { errorTemplate } from './template/error.js'; import { errorTemplate } from './template/error.js';
const require = createRequire(import.meta.url);
export interface DevOptions { export interface DevOptions {
logging: LogOptions; logging: LogOptions;
} }
@ -39,16 +46,18 @@ export default async function dev(config: AstroConfig, options: DevOptions = { l
hostname: server.hostname, hostname: server.hostname,
port: server.port, port: server.port,
server: server.app, server: server.app,
stop: server.stop, stop: () => server.stop(),
}; };
} }
/** Dev server */ /** Dev server */
class AstroDevServer { export class AstroDevServer {
app = connect(); app = connect();
httpServer: http.Server | undefined;
hostname: string; hostname: string;
port: number; port: number;
private internalCache: Map<string, string>;
private config: AstroConfig; private config: AstroConfig;
private logging: LogOptions; private logging: LogOptions;
private manifest: ManifestData; private manifest: ManifestData;
@ -56,8 +65,10 @@ class AstroDevServer {
private routeCache: RouteCache = {}; private routeCache: RouteCache = {};
private viteServer: vite.ViteDevServer | undefined; private viteServer: vite.ViteDevServer | undefined;
private watcher: chokidar.FSWatcher; private watcher: chokidar.FSWatcher;
private mostRecentRoute?: RouteData;
constructor(config: AstroConfig, options: DevOptions) { constructor(config: AstroConfig, options: DevOptions) {
this.internalCache = new Map();
this.config = config; this.config = config;
this.hostname = config.devOptions.hostname || 'localhost'; this.hostname = config.devOptions.hostname || 'localhost';
this.logging = options.logging; this.logging = options.logging;
@ -94,7 +105,7 @@ class AstroDevServer {
host: this.hostname, host: this.hostname,
}, },
}, },
{ astroConfig: this.config, logging: this.logging } { astroConfig: this.config, logging: this.logging, devServer: this }
); );
this.viteServer = await vite.createServer(viteConfig); this.viteServer = await vite.createServer(viteConfig);
@ -104,27 +115,24 @@ class AstroDevServer {
this.app.use((req, res, next) => this.renderError(req, res, next)); this.app.use((req, res, next) => this.renderError(req, res, next));
// 4. listen on port // 4. listen on port
await new Promise<void>((resolve, reject) => { this.httpServer = this.app.listen(this.port, this.hostname, () => {
this.app info(this.logging, 'astro', msg.devStart({ startupTime: performance.now() - devStart }));
.listen(this.port, this.hostname, () => { info(this.logging, 'astro', msg.devHost({ host: `http://${this.hostname}:${this.port}` }));
info(this.logging, 'astro', msg.devStart({ startupTime: performance.now() - devStart })); });
info(this.logging, 'astro', msg.devHost({ host: `http://${this.hostname}:${this.port}` })); this.httpServer.on('error', (err: NodeJS.ErrnoException) => {
resolve(); if (err.code && err.code === 'EADDRINUSE') {
}) error(this.logging, 'astro', `Address ${this.hostname}:${this.port} already in use. Try changing devOptions.port in your config file`);
.on('error', (err: NodeJS.ErrnoException) => { } else {
if (err.code && err.code === 'EADDRINUSE') { error(this.logging, 'astro', err.stack);
error(this.logging, 'astro', `Address ${this.hostname}:${this.port} already in use. Try changing devOptions.port in your config file`); }
} else { process.exit(1);
error(this.logging, 'astro', err.stack);
}
reject();
process.exit(1);
});
}); });
} }
/** Stop dev server */ /** Stop dev server */
async stop() { async stop() {
this.internalCache = new Map();
if (this.httpServer) this.httpServer.close(); // close HTTP server
await Promise.all([ await Promise.all([
...(this.viteServer ? [this.viteServer.close()] : []), // close Vite server ...(this.viteServer ? [this.viteServer.close()] : []), // close Vite server
this.watcher.close(), // close chokidar this.watcher.close(), // close chokidar
@ -138,6 +146,13 @@ class AstroDevServer {
let pathname = req.url || '/'; // original request let pathname = req.url || '/'; // original request
const reqStart = performance.now(); const reqStart = performance.now();
if (pathname.startsWith('/@astro')) {
const spec = pathname.slice(2);
const url = await this.viteServer.moduleGraph.resolveUrl(spec);
req.url = url[1];
return this.viteServer.middlewares.handle(req, res, next);
}
try { try {
const route = matchRoute(pathname, this.manifest); const route = matchRoute(pathname, this.manifest);
@ -147,8 +162,11 @@ class AstroDevServer {
return; return;
} }
this.mostRecentRoute = route;
// handle .astro and .md pages // handle .astro and .md pages
const html = await ssr({ const html = await ssr({
astroConfig: this.config,
filePath: new URL(`./${route.component}`, this.config.projectRoot), filePath: new URL(`./${route.component}`, this.config.projectRoot),
logging: this.logging, logging: this.logging,
mode: 'development', mode: 'development',
@ -168,7 +186,7 @@ class AstroDevServer {
} catch (e) { } catch (e) {
const err = e as Error; const err = e as Error;
this.viteServer.ssrFixStacktrace(err); this.viteServer.ssrFixStacktrace(err);
console.error(err.stack); console.log(err.stack);
const statusCode = 500; const statusCode = 500;
const html = errorTemplate({ statusCode, title: 'Internal Error', tabTitle: '500: Error', message: err.message }); const html = errorTemplate({ statusCode, title: 'Internal Error', tabTitle: '500: Error', message: err.message });
info(this.logging, 'astro', msg.req({ url: pathname, statusCode: 500, reqTime: performance.now() - reqStart })); info(this.logging, 'astro', msg.req({ url: pathname, statusCode: 500, reqTime: performance.now() - reqStart }));
@ -195,6 +213,7 @@ class AstroDevServer {
const userDefined404 = this.manifest.routes.find((route) => route.component === relPages + '404.astro'); const userDefined404 = this.manifest.routes.find((route) => route.component === relPages + '404.astro');
if (userDefined404) { if (userDefined404) {
html = await ssr({ html = await ssr({
astroConfig: this.config,
filePath: new URL(`./${userDefined404.component}`, this.config.projectRoot), filePath: new URL(`./${userDefined404.component}`, this.config.projectRoot),
logging: this.logging, logging: this.logging,
mode: 'development', mode: 'development',
@ -216,4 +235,53 @@ class AstroDevServer {
res.write(html); res.write(html);
res.end(); res.end();
} }
public async handleHotUpdate({ file, modules }: HmrContext): Promise<void | ModuleNode[]> {
if (!this.viteServer) throw new Error(`AstroDevServer.start() not called`);
for (const module of modules) {
this.viteServer.moduleGraph.invalidateModule(module);
}
const route = this.mostRecentRoute;
const pathname = route?.pathname ?? '/';
if (!route) {
this.viteServer.ws.send({
type: 'full-reload',
});
return [];
}
try {
// try to update the most recent route
const html = await ssr({
astroConfig: this.config,
filePath: new URL(`./${route.component}`, this.config.projectRoot),
logging: this.logging,
mode: 'development',
origin: this.origin,
pathname,
route,
routeCache: this.routeCache,
viteServer: this.viteServer,
});
// TODO: log update
this.viteServer.ws.send({
type: 'custom',
event: 'astro:reload',
data: { html },
});
return [];
} catch (e) {
const err = e as Error;
this.viteServer.ssrFixStacktrace(err);
console.log(err.stack);
this.viteServer.ws.send({
type: 'full-reload',
});
return [];
}
}
} }

6
packages/astro/src/dev/messages.ts
View file

@ -15,6 +15,12 @@ export function req({ url, statusCode, reqTime }: { url: string; statusCode: num
return `${color(statusCode)} ${pad(url, 40)} ${dim(Math.round(reqTime) + 'ms')}`; return `${color(statusCode)} ${pad(url, 40)} ${dim(Math.round(reqTime) + 'ms')}`;
} }
/** Display */
export function reload({ url, reqTime }: { url: string; reqTime: number }): string {
let color = yellow;
return `${pad(url, 40)} ${dim(Math.round(reqTime) + 'ms')}`;
}
/** Display dev server host and startup time */ /** Display dev server host and startup time */
export function devStart({ startupTime }: { startupTime: number }): string { export function devStart({ startupTime }: { startupTime: number }): string {
return `${pad(`Server started`, 44)} ${dim(`${Math.round(startupTime)}ms`)}`; return `${pad(`Server started`, 44)} ${dim(`${Math.round(startupTime)}ms`)}`;

211
packages/astro/src/internal/index.ts Normal file
View file

@ -0,0 +1,211 @@
import type { AstroComponentMetadata } from '../@types/astro';
import { renderAstroComponent } from '../runtime/ssr.js';
import { valueToEstree, Value } from 'estree-util-value-to-estree';
import * as astring from 'astring';
import shorthash from 'shorthash';
const { generate, GENERATOR } = astring;
// A more robust version alternative to `JSON.stringify` that can handle most values
// see https://github.com/remcohaszing/estree-util-value-to-estree#readme
const customGenerator: astring.Generator = {
...GENERATOR,
Literal(node, state) {
if (node.raw != null) {
// escape closing script tags in strings so browsers wouldn't interpret them as
// closing the actual end tag in HTML
state.write(node.raw.replace('</script>', '<\\/script>'));
} else {
GENERATOR.Literal(node, state);
}
},
};
const serialize = (value: Value) =>
generate(valueToEstree(value), {
generator: customGenerator,
});
async function _render(child: any) {
// Special: If a child is a function, call it automatically.
// This lets you do {() => ...} without the extra boilerplate
// of wrapping it in a function and calling it.
if (typeof child === 'function') {
return await child();
} else if (typeof child === 'string') {
return child;
} else if (!child && child !== 0) {
// do nothing, safe to ignore falsey values.
} else {
return child;
}
}
export class AstroComponent {
private htmlParts: string[];
private expressions: TemplateStringsArray;
constructor(htmlParts: string[], expressions: TemplateStringsArray) {
this.htmlParts = htmlParts;
this.expressions = expressions;
}
*[Symbol.iterator]() {
const { htmlParts, expressions } = this;
for (let i = 0; i < htmlParts.length; i++) {
const html = htmlParts[i];
const expression = expressions[i];
yield _render(html);
yield _render(expression);
}
}
}
export function render(htmlParts: string[], ...expressions: TemplateStringsArray) {
return new AstroComponent(htmlParts, expressions);
}
export interface AstroComponentFactory {
(result: any, props: any, slots: any): ReturnType<typeof render>;
isAstroComponentFactory?: boolean;
}
export const createComponent = (cb: AstroComponentFactory) => {
// Add a flag to this callback to mark it as an Astro component
(cb as any).isAstroComponentFactory = true;
return cb;
}
function extractHydrationDirectives(inputProps: Record<string | number, any>): { hydrationDirective: [string, any] | null; props: Record<string | number, any> } {
let props: Record<string | number, any> = {};
let hydrationDirective: [string, any] | null = null;
for (const [key, value] of Object.entries(inputProps)) {
if (key.startsWith('client:')) {
hydrationDirective = [key.split(':')[1], value];
} else {
props[key] = value;
}
}
return { hydrationDirective, props };
}
interface HydrateScriptOptions {
renderer: any;
astroId: string;
props: any;
}
/** For hydrated components, generate a <script type="module"> to load the component */
async function generateHydrateScript(scriptOptions: HydrateScriptOptions, metadata: Required<AstroComponentMetadata>) {
const { renderer, astroId, props } = scriptOptions;
const { hydrate, componentUrl, componentExport } = metadata;
if (!componentExport) {
throw new Error(`Unable to resolve a componentExport for "${metadata.displayName}"! Please open an issue.`)
}
let hydrationSource = '';
if (renderer.hydrationPolyfills) {
hydrationSource += `await Promise.all([${renderer.hydrationPolyfills.map((src: string) => `\n import("${src}")`).join(', ')}]);\n`;
}
hydrationSource += renderer.source
? `const [{ ${componentExport.value}: Component }, { default: hydrate }] = await Promise.all([import("${componentUrl}"), import("${renderer.source}")]);
return (el, children) => hydrate(el)(Component, ${serialize(props)}, children);
`
: `await import("${componentUrl}");
return () => {};
`;
const hydrationScript = `<script type="module">
import setup from 'astro/client/${hydrate}.js';
setup("${astroId}", {${metadata.hydrateArgs ? `value: ${JSON.stringify(metadata.hydrateArgs)}` : ''}}, async () => {
${hydrationSource}
});
</script>
`;
return hydrationScript;
}
export const renderComponent = async (result: any, displayName: string, Component: unknown, _props: Record<string | number, any>, children: any) => {
Component = await Component;
// children = await renderGenerator(children);
const { renderers } = result._metadata;
if (Component && (Component as any).isAstroComponentFactory) {
const output = await renderAstroComponent(await (Component as any)(result, Component, _props, children))
return output;
}
let metadata: AstroComponentMetadata = { displayName };
if (Component == null) {
throw new Error(`Unable to render ${metadata.displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`);
}
// else if (typeof Component === 'string' && !isCustomElementTag(Component)) {
// throw new Error(`Astro is unable to render ${metadata.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`);
// }
const { hydrationDirective, props } = extractHydrationDirectives(_props);
let html = '';
if (!hydrationDirective) {
return '<pre>Not implemented</pre>';
}
metadata.hydrate = hydrationDirective[0] as AstroComponentMetadata['hydrate'];
metadata.hydrateArgs = hydrationDirective[1];
for (const [url, exported] of Object.entries(result._metadata.importedModules)) {
for (const [key, value] of Object.entries(exported as any)) {
if (Component === value) {
metadata.componentExport = { value: key };
metadata.componentUrl = url;
break;
}
}
}
let renderer = null;
for (const r of renderers) {
if (await r.ssr.check(Component, props, null)) {
renderer = r;
}
}
({ html } = await renderer.ssr.renderToStaticMarkup(Component, props, null));
const astroId = shorthash.unique(html);
result.scripts.add(await generateHydrateScript({ renderer, astroId, props }, metadata as Required<AstroComponentMetadata>));
return `<astro-root uid="${astroId}">${html}</astro-root>`;
};
export const addAttribute = (value: any, key: string) => {
if (value == null || value === false) {
return '';
}
return ` ${key}="${value}"`;
};
export const spreadAttributes = (values: Record<any, any>) => {
let output = '';
for (const [key, value] of Object.entries(values)) {
output += addAttribute(value, key);
}
return output;
};
export const defineStyleVars = (astroId: string, vars: Record<any, any>) => {
let output = '\n';
for (const [key, value] of Object.entries(vars)) {
output += ` --${key}: ${value};\n`;
}
return `.${astroId} {${output}}`;
};
export const defineScriptVars = (vars: Record<any, any>) => {
let output = '';
for (const [key, value] of Object.entries(vars)) {
output += `let ${key} = ${JSON.stringify(value)};\n`;
}
return output;
};

2
packages/astro/src/preview/index.ts
View file

@ -13,7 +13,7 @@ interface PreviewOptions {
} }
/** The primary dev action */ /** The primary dev action */
export async function preview(config: AstroConfig, { logging }: PreviewOptions) { export default async function preview(config: AstroConfig, { logging }: PreviewOptions) {
const { const {
dist, dist,
devOptions: { hostname, port }, devOptions: { hostname, port },

242
packages/astro/src/runtime/__astro_component.ts
View file

@ -1,242 +0,0 @@
import type { AstroComponentMetadata, ComponentInstance, Renderer } from '../@types/astro';
import hash from 'shorthash';
import { valueToEstree, Value } from 'estree-util-value-to-estree';
import * as astring from 'astring';
import * as astroHtml from './html.js';
const { generate, GENERATOR } = astring;
// A more robust version alternative to `JSON.stringify` that can handle most values
// see https://github.com/remcohaszing/estree-util-value-to-estree#readme
const customGenerator: astring.Generator = {
...GENERATOR,
Literal(node, state) {
if (node.raw != null) {
// escape closing script tags in strings so browsers wouldn't interpret them as
// closing the actual end tag in HTML
state.write(node.raw.replace('</script>', '<\\/script>'));
} else {
GENERATOR.Literal(node, state);
}
},
};
const serialize = (value: Value) =>
generate(valueToEstree(value), {
generator: customGenerator,
});
declare let rendererInstances: Renderer[];
function isCustomElementTag(name: unknown) {
return typeof name === 'string' && /-/.test(name);
}
const rendererCache = new Map<any, Renderer>();
/** For client:only components, attempt to infer the required renderer. */
function inferClientRenderer(metadata: Partial<AstroComponentMetadata>) {
// If there's only one renderer, assume it's the required renderer
if (rendererInstances.length === 1) {
return rendererInstances[0];
} else if (metadata.value) {
// Attempt to find the renderer by matching the hydration value
const hint = metadata.value;
let match = rendererInstances.find((instance) => instance.name === hint);
if (!match) {
// Didn't find an exact match, try shorthand hints for the internal renderers
const fullHintName = `@astrojs/renderer-${hint}`;
match = rendererInstances.find((instance) => instance.name === fullHintName);
}
if (!match) {
throw new Error(
`Couldn't find a renderer for <${metadata.displayName} client:only="${metadata.value}" />. Is there a renderer that matches the "${metadata.value}" hint in your Astro config?`
);
}
return match;
} else {
// Multiple renderers included but no hint was provided
throw new Error(
`Can't determine the renderer for ${metadata.displayName}. Include a hint similar to <${metadata.displayName} client:only="react" /> when multiple renderers are included in your Astro config.`
);
}
}
/** For a given component, resolve the renderer. Results are cached if this instance is encountered again */
async function resolveRenderer(Component: any, props: any = {}, children?: string, metadata: Partial<AstroComponentMetadata> = {}): Promise<Renderer | undefined> {
// For client:only components, the component can't be imported
// during SSR. We need to infer the required renderer.
if (metadata.hydrate === 'only') {
return inferClientRenderer(metadata);
}
if (rendererCache.has(Component)) {
return rendererCache.get(Component);
}
const errors: Error[] = [];
for (const renderer of rendererInstances) {
// Yes, we do want to `await` inside of this loop!
// __renderer.check can't be run in parallel, it
// returns the first match and skips any subsequent checks
try {
const shouldUse: boolean = await renderer.ssr.check(Component, props, children);
if (shouldUse) {
rendererCache.set(Component, renderer);
return renderer;
}
} catch (err) {
errors.push(err as any);
}
}
if (errors.length) {
// For now just throw the first error we encounter.
throw errors[0];
}
}
interface HydrateScriptOptions {
renderer: Renderer;
astroId: string;
props: any;
}
const astroHtmlRendererInstance: Renderer = {
name: '@astrojs/renderer-html',
source: '',
ssr: astroHtml as any,
polyfills: [],
hydrationPolyfills: [],
};
/** For hydrated components, generate a <script type="module"> to load the component */
async function generateHydrateScript(scriptOptions: HydrateScriptOptions, metadata: Required<AstroComponentMetadata>) {
const { renderer, astroId, props } = scriptOptions;
const { hydrate, componentUrl, componentExport } = metadata;
let hydrationSource = '';
if (renderer.hydrationPolyfills) {
hydrationSource += `await Promise.all([${renderer.hydrationPolyfills.map((src) => `\n import("${src}")`).join(', ')}]);\n`;
}
hydrationSource += renderer.source
? `const [{ ${componentExport.value}: Component }, { default: hydrate }] = await Promise.all([import("${componentUrl}"), import("${renderer.source}")]);
return (el, children) => hydrate(el)(Component, ${serialize(props)}, children);
`
: `await import("${componentUrl}");
return () => {};
`;
const hydrationScript = `<script type="module">
import setup from 'astro/client/${hydrate}.js';
setup("${astroId}", {${metadata.value ? `value: "${metadata.value}"` : ''}}, async () => {
${hydrationSource}
});
</script>
`;
return hydrationScript;
}
const getComponentName = (Component: any, componentProps: any) => {
if (componentProps.displayName) return componentProps.displayName;
switch (typeof Component) {
case 'function':
return Component.displayName ?? Component.name;
case 'string':
return Component;
default: {
return Component;
}
}
};
const prepareSlottedChildren = (children: string | Record<any, any>[]) => {
const $slots: Record<string, string> = {
default: '',
};
for (const child of children) {
if (typeof child === 'string') {
$slots.default += child;
} else if (typeof child === 'object' && child['$slot']) {
if (!$slots[child['$slot']]) $slots[child['$slot']] = '';
$slots[child['$slot']] += child.children.join('').replace(new RegExp(`slot="${child['$slot']}"\s*`, ''));
}
}
return { $slots };
};
const removeSlottedChildren = (_children: string | Record<any, any>[]) => {
let children = '';
for (const child of _children) {
if (typeof child === 'string') {
children += child;
} else if (typeof child === 'object' && child['$slot']) {
children += child.children.join('');
}
}
return children;
};
/** The main wrapper for any components in Astro files */
export function __astro_component(Component: ComponentInstance['default'], metadata: AstroComponentMetadata = {} as any) {
if (Component == null) {
throw new Error(`Unable to render ${metadata.displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`);
} else if (typeof Component === 'string' && !isCustomElementTag(Component)) {
throw new Error(`Astro is unable to render ${metadata.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`);
}
return async function __astro_component_internal(props: any, ..._children: any[]) {
if (Component.isAstroComponent && Component.__render) {
return Component.__render(props, prepareSlottedChildren(_children));
}
const children = removeSlottedChildren(_children);
let renderer = await resolveRenderer(Component, props, children, metadata);
if (!renderer) {
if (isCustomElementTag(Component as any)) {
renderer = astroHtmlRendererInstance;
} else {
// If the user only specifies a single renderer, but the check failed
// for some reason... just default to their preferred renderer.
renderer = rendererInstances.length === 2 ? rendererInstances[1] : undefined;
}
if (!renderer) {
const name = getComponentName(Component, metadata);
throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`);
}
}
let html = '';
// Skip SSR for components using client:only hydration
if (metadata.hydrate !== 'only') {
const rendered = await renderer.ssr.renderToStaticMarkup(Component, props, children, metadata);
html = rendered.html;
}
if (renderer.polyfills) {
let polyfillScripts = renderer.polyfills.map((src: string) => `<script type="module" src="${src}"></script>`).join('');
html = html + polyfillScripts;
}
// If we're NOT hydrating this component, just return the HTML
if (!metadata.hydrate) {
// It's safe to remove <astro-fragment>, static content doesn't need the wrapper
return html.replace(/\<\/?astro-fragment\>/g, '');
}
// If we ARE hydrating this component, let's generate the hydration script
const uniqueId = props[Symbol.for('astro.context')].createAstroRootUID(html);
const uniqueIdHashed = hash.unique(uniqueId);
const script = await generateHydrateScript({ renderer, astroId: uniqueIdHashed, props }, metadata as Required<AstroComponentMetadata>);
const astroRoot = `<astro-root uid="${uniqueIdHashed}">${html}</astro-root>`;
return [astroRoot, script].join('\n');
};
}

33
packages/astro/src/runtime/hmr.ts Normal file
View file

@ -0,0 +1,33 @@
import 'vite/client';
if (import.meta.hot) {
const parser = new DOMParser();
import.meta.hot.on('astro:reload', async ({ html }: { html: string }) => {
const { default: morphdom } = await import('morphdom');
const doc = parser.parseFromString(html, 'text/html');
morphdom(document.head, doc.head, {
onBeforeElUpdated: function (fromEl, toEl) {
if (fromEl.isEqualNode(toEl)) {
return false;
}
return true;
},
});
morphdom(document.body, doc.body, {
onBeforeElUpdated: function (fromEl, toEl) {
if (fromEl.localName === 'astro-root') {
return fromEl.getAttribute('uid') !== toEl.getAttribute('uid');
}
if (fromEl.isEqualNode(toEl)) {
return false;
}
return true;
},
});
});
}

173
packages/astro/src/runtime/ssr.ts
View file

@ -1,15 +1,19 @@
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import * as eslexer from 'es-module-lexer'; import * as eslexer from 'es-module-lexer';
import type { ViteDevServer } from 'vite'; import type { ViteDevServer } from 'vite';
import type { ComponentInstance, GetStaticPathsResult, Params, Props, RouteCache, RouteData, RuntimeMode } from '../@types/astro'; import type { ComponentInstance, GetStaticPathsResult, Params, Props, RouteCache, RouteData, RuntimeMode, AstroConfig } from '../@types/astro';
import type { LogOptions } from '../logger'; import type { LogOptions } from '../logger';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import path from 'path';
import { generatePaginateFunction } from './paginate.js'; import { generatePaginateFunction } from './paginate.js';
import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js'; import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js';
import { canonicalURL, parseNpmName } from './util.js'; import { parseNpmName, canonicalURL as getCanonicalURL } from './util.js';
import type { AstroComponent, AstroComponentFactory } from '../internal';
interface SSROptions { interface SSROptions {
/** an instance of the AstroConfig */
astroConfig: AstroConfig,
/** location of file on disk */ /** location of file on disk */
filePath: URL; filePath: URL;
/** logging options */ /** logging options */
@ -32,11 +36,129 @@ interface SSROptions {
// this prevents client-side errors such as the "double React bug" (https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom) // this prevents client-side errors such as the "double React bug" (https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom)
let browserHash: string | undefined; let browserHash: string | undefined;
export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
let template = '';
for await (const value of component) {
if (value || value === 0) {
template += value;
}
}
return template;
}
export async function renderToString(result: any, componentFactory: AstroComponentFactory, props: any, children: any) {
const Component = componentFactory(result, props, children);
let template = await renderAstroComponent(Component);
return template
}
async function renderPage(result: any, Component: AstroComponentFactory, props: any, children: any) {
const template = await renderToString(result, Component, props, children);
const styles = Array.from(result.styles).map(style => `<style>${style}</style>`);
const scripts = Array.from(result.scripts);
return template.replace("</head>", styles.join('\n') + scripts.join('\n') + "</head>");
}
const cache = new Map();
// TODO: improve validation and error handling here.
async function resolveRenderers(viteServer: ViteDevServer, ids: string[]) {
const resolve = viteServer.config.createResolver();
const renderers = await Promise.all(ids.map(async renderer => {
if (cache.has(renderer)) return cache.get(renderer);
const resolvedRenderer: any = {};
// We can dynamically import the renderer by itself because it shouldn't have
// any non-standard imports, the index is just meta info.
// The other entrypoints need to be loaded through Vite.
const { default: instance } = await import(renderer);
// This resolves the renderer's entrypoints to a final URL through Vite
const getPath = async (src: string) => {
const spec = path.posix.join(instance.name, src);
const resolved = await resolve(spec);
if (!resolved) {
throw new Error(`Unable to resolve "${spec}" to a package!`)
}
return resolved;
}
resolvedRenderer.name = instance.name;
if (instance.client) {
resolvedRenderer.source = await getPath(instance.client);
}
if (Array.isArray(instance.hydrationPolyfills)) {
resolvedRenderer.hydrationPolyfills = await Promise.all(instance.hydrationPolyfills.map((src: string) => getPath(src)));
}
if (Array.isArray(instance.polyfills)) {
resolvedRenderer.polyfills = await Promise.all(instance.polyfills.map((src: string) => getPath(src)));
}
const { url } = await viteServer.moduleGraph.ensureEntryFromUrl(await getPath(instance.server));
const { default: server } = await viteServer.ssrLoadModule(url);
resolvedRenderer.ssr = server;
cache.set(renderer, resolvedRenderer);
return resolvedRenderer
}));
return renderers;
}
async function resolveImportedModules(viteServer: ViteDevServer, file: string) {
const { url } = await viteServer.moduleGraph.ensureEntryFromUrl(file);
const modulesByFile = viteServer.moduleGraph.getModulesByFile(url);
if (!modulesByFile) {
return {};
}
let importedModules: Record<string, any> = {};
const moduleNodes = Array.from(modulesByFile);
// Loop over the importedModules and grab the exports from each one.
// We'll pass these to the shared $$result so renderers can match
// components to their exported identifier and URL
// NOTE: Important that this is parallelized as much as possible!
await Promise.all(moduleNodes.map(moduleNode => {
const entries = Array.from(moduleNode.importedModules);
return Promise.all(entries.map(entry => {
// Skip our internal import that every module will have
if (entry.id?.endsWith('astro/dist/internal/index.js')) {
return;
}
return viteServer.moduleGraph.ensureEntryFromUrl(entry.url).then(mod => {
if (mod.ssrModule) {
importedModules[mod.url] = mod.ssrModule;
return;
} else {
return viteServer.ssrLoadModule(mod.url).then(result => {
importedModules[mod.url] = result.ssrModule;
return;
})
}
})
}))
}))
return importedModules
}
/** use Vite to SSR */ /** use Vite to SSR */
export async function ssr({ filePath, logging, mode, origin, pathname, route, routeCache, viteServer }: SSROptions): Promise<string> { export async function ssr({ astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer }: SSROptions): Promise<string> {
// 1. load module // 1. load module
const mod = (await viteServer.ssrLoadModule(fileURLToPath(filePath))) as ComponentInstance; const mod = (await viteServer.ssrLoadModule(fileURLToPath(filePath))) as ComponentInstance;
// 1.5. resolve renderers and imported modules.
// important that this happens _after_ ssrLoadModule, otherwise `importedModules` would be empty
const [renderers, importedModules] = await Promise.all([
resolveRenderers(viteServer, astroConfig.renderers),
resolveImportedModules(viteServer, fileURLToPath(filePath))
]);
// 2. handle dynamic routes // 2. handle dynamic routes
let params: Params = {}; let params: Params = {};
let pageProps: Props = {}; let pageProps: Props = {};
@ -68,24 +190,34 @@ export async function ssr({ filePath, logging, mode, origin, pathname, route, ro
// 3. render page // 3. render page
if (!browserHash && (viteServer as any)._optimizeDepsMetadata?.browserHash) browserHash = (viteServer as any)._optimizeDepsMetadata.browserHash; // note: this is "private" and may change over time if (!browserHash && (viteServer as any)._optimizeDepsMetadata?.browserHash) browserHash = (viteServer as any)._optimizeDepsMetadata.browserHash; // note: this is "private" and may change over time
const fullURL = new URL(pathname, origin); const fullURL = new URL(pathname, origin);
if (!mod.__renderPage) throw new Error(`__renderPage() undefined (${route?.component})`);
let html = await mod.__renderPage({ const Component = await mod.default;
request: { if (!Component)
params, throw new Error(`Expected an exported Astro component but recieved typeof ${typeof Component}`);
url: fullURL, if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
canonicalURL: canonicalURL(fullURL.pathname, fullURL.origin),
let html = await renderPage({
styles: new Set(),
scripts: new Set(),
/** This function returns the `Astro` faux-global */
createAstro(props: any) {
const site = new URL(origin);
const url = new URL('.' + pathname, site);
const canonicalURL = getCanonicalURL(pathname, astroConfig.buildOptions.site || origin)
return { isPage: true, site, request: { url, canonicalURL }, props };
}, },
children: [], _metadata: { importedModules, renderers },
props: pageProps, }, Component, { }, null);
css: mod.css || [],
});
// 4. modify response // 4. modify response
// inject Vite HMR code (dev only) if (mode === 'development') {
if (mode === 'development') html = injectViteClient(html); // inject Astro HMR code
html = injectAstroHMR(html);
// replace client hydration scripts // inject Vite HMR code
if (mode === 'development') html = resolveNpmImports(html); html = injectViteClient(html);
// replace client hydration scripts
html = resolveNpmImports(html);
}
// 5. finish // 5. finish
return html; return html;
@ -96,6 +228,11 @@ function injectViteClient(html: string): string {
return html.replace('<head>', `<head><script type="module" src="/@vite/client"></script>`); return html.replace('<head>', `<head><script type="module" src="/@vite/client"></script>`);
} }
/** Injects Astro HMR client code */
function injectAstroHMR(html: string): string {
return html.replace('<head>', `<head><script type="module" src="/@astro/runtime/hmr"></script>`);
}
/** Convert npm specifier into Vite URL */ /** Convert npm specifier into Vite URL */
function resolveViteNpmPackage(spec: string): string { function resolveViteNpmPackage(spec: string): string {
const pkg = parseNpmName(spec); const pkg = parseNpmName(spec);

7
packages/astro/src/runtime/vite/config.ts
View file

@ -10,6 +10,7 @@ import { createRequire } from 'module';
import { getPackageJSON, parseNpmName } from '../util.js'; import { getPackageJSON, parseNpmName } from '../util.js';
import astro from './plugin-astro.js'; import astro from './plugin-astro.js';
import jsx from './plugin-jsx.js'; import jsx from './plugin-jsx.js';
import { AstroDevServer } from '../../dev';
const require = createRequire(import.meta.url); const require = createRequire(import.meta.url);
@ -17,7 +18,7 @@ const require = createRequire(import.meta.url);
type ViteConfigWithSSR = InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } }; type ViteConfigWithSSR = InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } };
/** Return a common starting point for all Vite actions */ /** Return a common starting point for all Vite actions */
export async function loadViteConfig(viteConfig: ViteConfigWithSSR, { astroConfig, logging }: { astroConfig: AstroConfig; logging: LogOptions }): Promise<ViteConfigWithSSR> { export async function loadViteConfig(viteConfig: ViteConfigWithSSR, { astroConfig, logging, devServer }: { astroConfig: AstroConfig; logging: LogOptions, devServer?: AstroDevServer }): Promise<ViteConfigWithSSR> {
const optimizedDeps = new Set<string>(); // dependencies that must be bundled for the client (Vite may not detect all of these) const optimizedDeps = new Set<string>(); // dependencies that must be bundled for the client (Vite may not detect all of these)
const dedupe = new Set<string>(); // dependencies that can’t be duplicated (e.g. React & SolidJS) const dedupe = new Set<string>(); // dependencies that can’t be duplicated (e.g. React & SolidJS)
const plugins: Plugin[] = []; // Vite plugins const plugins: Plugin[] = []; // Vite plugins
@ -73,7 +74,7 @@ export async function loadViteConfig(viteConfig: ViteConfigWithSSR, { astroConfi
/** Always include these dependencies for optimization */ /** Always include these dependencies for optimization */
include: [...optimizedDeps], include: [...optimizedDeps],
}, },
plugins: [astro(astroConfig), jsx({ config: astroConfig, logging }), ...plugins], plugins: [astro({ config: astroConfig, devServer }), jsx({ config: astroConfig, logging }), ...plugins],
publicDir: fileURLToPath(astroConfig.public), publicDir: fileURLToPath(astroConfig.public),
resolve: { resolve: {
dedupe: [...dedupe], dedupe: [...dedupe],
@ -82,6 +83,8 @@ export async function loadViteConfig(viteConfig: ViteConfigWithSSR, { astroConfi
server: { server: {
/** prevent serving outside of project root (will become new default soon) */ /** prevent serving outside of project root (will become new default soon) */
fs: { strict: true }, fs: { strict: true },
/** disable HMR for test */
hmr: process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'production' ? false : undefined,
/** handle Vite URLs */ /** handle Vite URLs */
proxy: { proxy: {
// add proxies here // add proxies here

86
packages/astro/src/runtime/vite/plugin-astro.ts
View file

@ -1,58 +1,36 @@
import type { Plugin } from 'vite'; import type { Plugin } from 'vite';
import type { AstroConfig, Renderer } from '../../@types/astro.js'; import type { AstroConfig, Renderer } from '../../@types/astro.js';
import type { LogOptions } from '../../logger';
import { camelCase } from 'camel-case'; import esbuild from 'esbuild';
import fs from 'fs'; import fs from 'fs';
import { fileURLToPath } from 'url'; import { transform } from '@astrojs/compiler';
import { markdownToH } from '../markdown.js'; import { AstroDevServer } from '../../dev/index.js';
interface AstroPluginOptions {
config: AstroConfig;
devServer?: AstroDevServer;
}
/** Transform .astro files for Vite */ /** Transform .astro files for Vite */
export default function astro(config: AstroConfig): Plugin { export default function astro({ devServer }: AstroPluginOptions): Plugin {
return { return {
name: '@astrojs/vite-plugin-astro', name: '@astrojs/vite-plugin-astro',
enforce: 'pre', // run transforms before other plugins can enforce: 'pre', // run transforms before other plugins can
// note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.) // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
async load(id) { async load(id) {
if (id.endsWith('.astro') || id.endsWith('.md')) { if (id.endsWith('.astro') || id.endsWith('.md')) {
// TODO: replace with compiler let source = await fs.promises.readFile(id, 'utf8');
let code = await fs.promises.readFile(id, 'utf8');
return {
code: code,
map: null,
};
}
// inject renderers (TODO: improve this?)
if (id.endsWith('runtime/__astro_component.js')) {
let code = await fs.promises.readFile(id, 'utf8');
let rendererCode = '';
// add imports // 1. Transform from `.astro` to valid `.ts`
config.renderers.forEach((name) => { const tsResult = await transform(source, { sourcefile: id });
rendererCode += `import ${jsRef(name)} from '${name}';
import ${jsRef(name, '_ssr')} from '${name}/server';
`;
});
// initialize renderers // 2. Compile `.ts` to `.js`
rendererCode += ` const { code, map } = await esbuild.transform(tsResult, { loader: 'ts', sourcemap: 'inline', sourcefile: id });
function initRenderer(name, entry, ssr) {
const join = (...parts) => parts.map((part) => part.replace(/^\\./, '')).join('');
const renderer = {};
renderer.name = name;
renderer.ssr = ssr;
if (entry.client) renderer.source = join(name, entry.client);
if (Array.isArray(entry.hydrationPolyfills)) renderer.hydrationPolyfills = entry.hydrationPolyfills.map((src) => join(name, src));
if (Array.isArray(entry.polyfills)) renderer.polyfills = entry.polyfills.map((src) => join(name, src));
return renderer;
}
let rendererInstances = [
${config.renderers.map((name) => `initRenderer('${name}', ${jsRef(name)}, ${jsRef(name, '_ssr')})`).join(',\n')}
];
`;
return { return {
code: rendererCode + code, code,
map: null, map,
}; };
} }
@ -64,34 +42,10 @@ let rendererInstances = [
// } // }
return null; return null;
}, },
async handleHotUpdate({ file, modules, timestamp, server, read }) { async handleHotUpdate(context) {
// invalidate module if (devServer) {
const module = server.moduleGraph.getModuleById(file); return devServer.handleHotUpdate(context);
if (module) server.moduleGraph.invalidateModule(module);
try {
const {
default: { __render: render },
} = await server.ssrLoadModule(file);
const html = await render();
server.ws.send({
type: 'custom',
event: 'astro:reload',
data: {
html,
},
});
} catch (e) {
server.ws.send({
type: 'full-reload',
});
} }
return [];
}, },
}; };
} }
/** Given any string (e.g. npm package name), generate a JS-friendly ref */
function jsRef(name: string, suffix = ''): string {
return `__${camelCase(name)}${suffix}`;
}

32
packages/astro/test/astro-assets.test.js
View file

@ -1,20 +1,22 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils';
import * as assert from 'uvu/assert';
import build from '../dist/build/index.js';
const Assets = suite('Assets'); let fixture;
await build({ projectRoot: 'test/fixtures/astro-assets/' }); describe('Assets', () => {
beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-assets/' });
await fixture.build();
});
Assets('build the base image', () => {}); test('built the base image', async () => {
await fixture.readFile('/images/twitter.png');
});
// let oneX = await readFile('/_astro/src/images/twitter.png'); test('built the 2x image', async () => {
// assert.ok(oneX, 'built the base image'); await fixture.readFile('/images/twitter@2x.png');
});
// let twoX = await readFile('/_astro/src/images/twitter@2x.png'); test('built the 3x image', async () => {
// assert.ok(twoX, 'built the 2x image'); await fixture.readFile('/images/twitter@3x.png');
});
// let threeX = await readFile('/_astro/src/images/twitter@3x.png'); });
// assert.ok(threeX, 'build the 3x image');
Assets.run();

107
packages/astro/test/astro-attrs.test.js
View file

@ -1,59 +1,62 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Attributes = suite('Attributes test'); let fixture;
let devServer;
setup(Attributes, './fixtures/astro-attrs'); describe('Attributes', () => {
beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-attrs/' });
devServer = await fixture.dev();
});
Attributes('Passes attributes to elements as expected', async ({ runtime }) => { test('Passes attributes to elements as expected', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.html());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); const attrs = {
'false-str': 'false',
'true-str': 'true',
false: undefined,
true: '',
empty: '',
null: undefined,
undefined: undefined,
};
const ids = ['false-str', 'true-str', 'false', 'true', 'empty', 'null', 'undefined']; for (const [k, v] of Object.entries(attrs)) {
const specs = ['false', 'true', undefined, '', '', undefined, undefined]; const attr = $(`#${k}`).attr('attr');
expect(attr).toBe(v);
}
});
let i = 0; test('Passes boolean attributes to components as expected', async () => {
for (const id of ids) { const html = await fixture.fetch('/component').then((res) => res.text());
const spec = specs[i]; const $ = cheerio.load(html);
const attr = $(`#${id}`).attr('attr');
assert.equal(attr, spec, `Passes ${id} as "${spec}"`); expect($('#true').attr('attr')).toBe('attr-true');
i++; expect($('#true').attr('type')).toBe('boolean');
} expect($('#false').attr('attr')).toBe('attr-false');
expect($('#false').attr('type')).toBe('boolean');
});
test('Passes namespaced attributes as expected', async () => {
const html = await fixture.fetch('/namespaced').then((res) => res.text());
const $ = cheerio.load(result.contents);
expect($('div').attr('xmlns:happy')).toBe('https://example.com/schemas/happy');
expect($('img').attr('happy:smile')).toBe('sweet');
});
test('Passes namespaced attributes to components as expected', async () => {
const html = await fixture.fetch('/namespaced-component');
const $ = cheerio.load(html);
expect($('span').attr('on:click')).toEqual(Function.prototype.toString.call((event) => console.log(event)));
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
Attributes('Passes boolean attributes to components as expected', async ({ runtime }) => {
const result = await runtime.load('/component');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#true').attr('attr'), 'attr-true');
assert.equal($('#true').attr('type'), 'boolean');
assert.equal($('#false').attr('attr'), 'attr-false');
assert.equal($('#false').attr('type'), 'boolean');
});
Attributes('Passes namespaced attributes as expected', async ({ runtime }) => {
const result = await runtime.load('/namespaced');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('div').attr('xmlns:happy'), 'https://example.com/schemas/happy');
assert.equal($('img').attr('happy:smile'), 'sweet');
});
Attributes('Passes namespaced attributes to components as expected', async ({ runtime }) => {
const result = await runtime.load('/namespaced-component');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal(
$('span').attr('on:click'),
Function.prototype.toString.call((event) => console.log(event))
);
});
Attributes.run();

206
packages/astro/test/astro-basic.test.js
View file

@ -1,123 +1,109 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import http from 'http'; import { loadFixture } from './test-utils.js';
import { promisify } from 'util';
import * as assert from 'uvu/assert';
import { doc } from './test-utils.js';
import { setup, setupBuild, setupPreview } from './helpers.js';
const Basics = suite('Basic test'); describe('Astro basics', () => {
describe('dev', () => {
let fixture; // fixture #1. Note that .dev() and .preview() share a port, so these fixtures must be kept separate.
let devServer;
setup(Basics, './fixtures/astro-basic', { beforeAll(async () => {
runtimeOptions: { fixture = await loadFixture({ projectRoot: './fixtures/astro-basic/' });
mode: 'development', devServer = await fixture.dev();
}, });
});
setupBuild(Basics, './fixtures/astro-basic');
setupPreview(Basics, './fixtures/astro-basic');
Basics('Can load page', async ({ runtime }) => { test('Can load page', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch(`/`).then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); expect($('h1').text()).toBe('Hello world!');
});
assert.equal($('h1').text(), 'Hello world!'); test('Correctly serializes boolean attributes', async () => {
}); const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
Basics('Sets the HMR port when dynamic components used', async ({ runtime }) => { expect($('h1').attr('data-something')).toBe('');
const result = await runtime.load('/client'); expect($('h2').attr('not-data-ok')).toBe('');
const html = result.contents; });
assert.ok(/HMR_WEBSOCKET_PORT/.test(html), 'Sets the websocket port');
});
Basics('Correctly serializes boolean attributes', async ({ runtime }) => { test('Selector with an empty body', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/empty-class').then((res) => res.text());
const html = result.contents; const $ = cheerio.load(html);
const $ = doc(html);
assert.equal($('h1').attr('data-something'), '');
assert.equal($('h2').attr('not-data-ok'), '');
});
Basics('Selector with an empty body', async ({ runtime }) => { expect($('.author')).toHaveLength(1);
const result = await runtime.load('/empty-class'); });
const html = result.contents;
const $ = doc(html);
assert.equal($('.author').length, 1, 'author class added');
});
Basics('Build does not include HMR client', async ({ build, readFile }) => { test('Allows forward-slashes in mustache tags (#407)', async () => {
await build().catch((err) => { const html = await fixture.fetch('/forward-slash').then((res) => res.text());
assert.ok(!err, 'Error during the build'); const $ = cheerio.load(html);
expect($('a[href="/post/one"]')).toHaveLength(1);
expect($('a[href="/post/two"]')).toHaveLength(1);
expect($('a[href="/post/three"]')).toHaveLength(1);
});
test('Allows spread attributes (#521)', async () => {
const html = await fixture.fetch('/spread').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#spread-leading')).toHaveLength(1);
expect($('#spread-leading').attr('a')).toBe('0');
expect($('#spread-leading').attr('b')).toBe('1');
expect($('#spread-leading').attr('c')).toBe('2');
expect($('#spread-trailing')).toHaveLength(1);
expect($('#spread-trailing').attr('a')).toBe('0');
expect($('#spread-trailing').attr('b')).toBe('1');
expect($('#spread-trailing').attr('c')).toBe('2');
});
test('Allows spread attributes with TypeScript (#521)', async () => {
const html = await fixture.fetch('/spread').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#spread-ts')).toHaveLength(1);
expect($('#spread-ts').attr('a')).toBe('0');
expect($('#spread-ts').attr('b')).toBe('1');
expect($('#spread-ts').attr('c')).toBe('2');
});
test('Allows using the Fragment element to be used', async () => {
const html = await fixture.fetch('/fragment').then((res) => res.text());
const $ = cheerio.load(html);
// will be 1 if element rendered correctly
expect($('#one')).toHaveLength(1);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
const clientHTML = await readFile('/client/index.html');
const $ = doc(clientHTML);
assert.equal($('script[src="/_snowpack/hmr-client.js"]').length, 0, 'No HMR client script'); describe('preview', () => {
const hmrPortScript = $('script').filter((i, el) => { let fixture; // fixture #2. Note that .dev() and .preview() share a port, so these fixtures must be kept separate.
return $(el) let previewServer;
.text()
.match(/window\.HMR_WEBSOCKET_PORT/); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-basic' });
await fixture.build();
previewServer = await fixture.preview();
});
test('returns 200 for valid URLs', async () => {
const result = fixture.fetch('/');
expect(result.statusCode).toBe(200);
});
test('returns 404 for invalid URLs', async () => {
const result = fixture.fetch('/bad-url');
expect(result.statusCode).toBe(404);
});
// important: close preview server (free up port and connection)
afterAll(() => {
previewServer.close();
});
}); });
assert.equal(hmrPortScript.length, 0, 'No script setting the websocket port');
}); });
Basics('Preview server works as expected', async ({ build, previewServer }) => {
await build().catch((err) => {
assert.ok(!err, 'Error during the build');
});
{
const resultOrError = await promisify(http.get)(`http://localhost:${previewServer.address().port}/`).catch((err) => err);
assert.equal(resultOrError.statusCode, 200);
}
{
const resultOrError = await promisify(http.get)(`http://localhost:${previewServer.address().port}/bad-url`).catch((err) => err);
assert.equal(resultOrError.statusCode, 404);
}
});
Basics('Allows forward-slashes in mustache tags (#407)', async ({ runtime }) => {
const result = await runtime.load('/forward-slash');
const html = result.contents;
const $ = doc(html);
assert.equal($('a[href="/post/one"]').length, 1);
assert.equal($('a[href="/post/two"]').length, 1);
assert.equal($('a[href="/post/three"]').length, 1);
});
Basics('Allows spread attributes (#521)', async ({ runtime }) => {
const result = await runtime.load('/spread');
const html = result.contents;
const $ = doc(html);
assert.equal($('#spread-leading').length, 1);
assert.equal($('#spread-leading').attr('a'), '0');
assert.equal($('#spread-leading').attr('b'), '1');
assert.equal($('#spread-leading').attr('c'), '2');
assert.equal($('#spread-trailing').length, 1);
assert.equal($('#spread-trailing').attr('a'), '0');
assert.equal($('#spread-trailing').attr('b'), '1');
assert.equal($('#spread-trailing').attr('c'), '2');
});
Basics('Allows spread attributes with TypeScript (#521)', async ({ runtime }) => {
const result = await runtime.load('/spread');
const html = result.contents;
const $ = doc(html);
assert.equal($('#spread-ts').length, 1);
assert.equal($('#spread-ts').attr('a'), '0');
assert.equal($('#spread-ts').attr('b'), '1');
assert.equal($('#spread-ts').attr('c'), '2');
});
Basics('Allows using the Fragment element to be used', async ({ runtime }) => {
const result = await runtime.load('/fragment');
assert.ok(!result.error, 'No errors thrown');
const html = result.contents;
const $ = doc(html);
assert.equal($('#one').length, 1, 'Element in a fragment rendered');
});
Basics.run();

140
packages/astro/test/astro-children.test.js
View file

@ -1,75 +1,81 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const ComponentChildren = suite('Component children tests'); describe('Component children', () => {
let fixture;
let devServer;
setup(ComponentChildren, './fixtures/astro-children'); beforeAll(async () => {
setupBuild(ComponentChildren, './fixtures/astro-children'); fixture = await loadFixture({
projectRoot: './fixtures/astro-children/',
renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-vue', '@astrojs/renderer-svelte'],
});
devServer = await fixture.dev();
});
ComponentChildren('Passes string children to framework components', async ({ runtime }) => { test('Passes string children to framework components', async () => {
let result = await runtime.load('/strings'); const html = await fixture.fetch('/strings').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); // test 1: Can pass text to Preact components
const $preact = $('#preact');
expect($preact.text().trim()).toBe('Hello world');
const $preact = $('#preact'); // test 2: Can pass text to Vue components
assert.equal($preact.text().trim(), 'Hello world', 'Can pass text to Preact components'); const $vue = $('#vue');
expect($vue.text().trim()).toBe('Hello world');
const $vue = $('#vue'); // test 3: Can pass text to Svelte components
assert.equal($vue.text().trim(), 'Hello world', 'Can pass text to Vue components'); const $svelte = $('#svelte');
expect($svelte.text().trim()).toBe('Hello world');
});
const $svelte = $('#svelte'); test('Passes markup children to framework components', async () => {
assert.equal($svelte.text().trim(), 'Hello world', 'Can pass text to Svelte components'); const html = await fixture.fetch('/markup').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Can pass markup to Preact components
const $preact = $('#preact h1');
expect($preact.text().trim()).toBe('Hello world');
// test 2: Can pass markup to Vue components
const $vue = $('#vue h1');
expect($vue.text().trim()).toBe('Hello world');
// test 3: Can pass markup to Svelte components
const $svelte = $('#svelte h1');
expect($svelte.text().trim()).toBe('Hello world');
});
test('Passes multiple children to framework components', async () => {
const html = await fixture.fetch('/multiple').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Can pass multiple children to Preact components
const $preact = $('#preact');
expect($preact.children()).toHaveLength(2);
expect($preact.children(':first-child').text().trim()).toBe('Hello world');
expect($preact.children(':last-child').text().trim()).toBe('Goodbye world');
// test 2: Can pass multiple children to Vue components
const $vue = $('#vue');
expect($vue.children()).toHaveLength(2);
expect($vue.children(':first-child').text().trim()).toBe('Hello world');
expect($vue.children(':last-child').text().trim()).toBe('Goodbye world');
// test 3: Can pass multiple children to Svelte components
const $svelte = $('#svelte');
expect($svelte.children()).toHaveLength(2);
expect($svelte.children(':first-child').text().trim()).toBe('Hello world');
expect($svelte.children(':last-child').text().trim()).toBe('Goodbye world');
});
test('Can build a project with component children', async () => {
expect(() => fixture.build()).not.toThrow();
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
ComponentChildren('Passes markup children to framework components', async ({ runtime }) => {
let result = await runtime.load('/markup');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
const $preact = $('#preact h1');
assert.equal($preact.text().trim(), 'Hello world', 'Can pass markup to Preact components');
const $vue = $('#vue h1');
assert.equal($vue.text().trim(), 'Hello world', 'Can pass markup to Vue components');
const $svelte = $('#svelte h1');
assert.equal($svelte.text().trim(), 'Hello world', 'Can pass markup to Svelte components');
});
ComponentChildren('Passes multiple children to framework components', async ({ runtime }) => {
let result = await runtime.load('/multiple');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
const $preact = $('#preact');
assert.equal($preact.children().length, 2, 'Can pass multiple children to Preact components');
assert.equal($preact.children(':first-child').text().trim(), 'Hello world');
assert.equal($preact.children(':last-child').text().trim(), 'Goodbye world');
const $vue = $('#vue');
assert.equal($vue.children().length, 2, 'Can pass multiple children to Vue components');
assert.equal($vue.children(':first-child').text().trim(), 'Hello world');
assert.equal($vue.children(':last-child').text().trim(), 'Goodbye world');
const $svelte = $('#svelte');
assert.equal($svelte.children().length, 2, 'Can pass multiple children to Svelte components');
assert.equal($svelte.children(':first-child').text().trim(), 'Hello world');
assert.equal($svelte.children(':last-child').text().trim(), 'Goodbye world');
});
ComponentChildren('Can be built', async ({ build }) => {
try {
await build();
assert.ok(true, 'Can build a project with component children');
} catch (err) {
console.log(err);
assert.ok(false, 'build threw');
}
});
ComponentChildren.run();

69
packages/astro/test/astro-client-only.test.js
View file

@ -1,44 +1,43 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const ClientOnlyComponents = suite('Client only components tests'); describe('Client only components', () => {
let fixture;
let devServer;
setup(ClientOnlyComponents, './fixtures/astro-client-only'); beforeAll(async () => {
setupBuild(ClientOnlyComponents, './fixtures/astro-client-only'); fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
devServer = await fixture.dev();
});
ClientOnlyComponents('Loads pages using client:only hydrator', async ({ runtime }) => { test('Loads pages using client:only hydrator', async () => {
let result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.html());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
let html = result.contents; // test 1: <astro-root> is empty
expect($('astro-root').html()).toBe('');
const rootExp = /<astro-root\s[^>]*><\/astro-root>/; // test 2: svelte renderer is on the page
assert.ok(rootExp.exec(html), 'astro-root is empty'); const exp = /import\("(.+?)"\)/g;
let match, svelteRenderer;
// Grab the svelte import while ((match = exp.exec(result.contents))) {
const exp = /import\("(.+?)"\)/g; if (match[1].includes('renderers/renderer-svelte/client.js')) {
let match, svelteRenderer; svelteRenderer = match[1];
while ((match = exp.exec(result.contents))) { }
if (match[1].includes('renderers/renderer-svelte/client.js')) {
svelteRenderer = match[1];
} }
} expect(svelteRenderer).toBeTruthy();
assert.ok(svelteRenderer, 'Svelte renderer is on the page'); // test 3: can load svelte renderer
result = await fixture.fetch(svelteRenderer);
expect(result.statusCode).toBe(200);
});
result = await runtime.load(svelteRenderer); test('Can build a project with svelte dynamic components', async () => {
assert.equal(result.statusCode, 200, 'Can load svelte renderer'); expect(() => fixture.build()).not.toThrow();
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
ClientOnlyComponents('Can be built', async ({ build }) => {
try {
await build();
assert.ok(true, 'Can build a project with svelte dynamic components');
} catch (err) {
console.log(err);
assert.ok(false, 'build threw');
}
});
ClientOnlyComponents.run();

90
packages/astro/test/astro-components.test.js
View file

@ -1,53 +1,55 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const Components = suite('Components tests'); describe('Components tests', () => {
let fixture;
let devServer;
setup(Components, './fixtures/astro-components'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
devServer = await fixture.dev();
});
Components('Astro components are able to render framework components', async ({ runtime }) => { test('Astro components are able to render framework components', async () => {
let result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.html());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); // test 1: Renders Astro component
const $astro = $('#astro');
expect($astro.children()).toHaveLength(3);
const $astro = $('#astro'); // test 2: Renders React component
assert.equal($astro.children().length, 3, 'Renders astro component'); const $react = $('#react');
expect($react).not.toHaveLength(0);
const $react = $('#react'); // test 3: Renders Vue component
assert.not.type($react, 'undefined', 'Renders React component'); const $vue = $('#vue');
expect($vue).not.toHaveLength(0);
const $vue = $('#vue'); // test 4: Renders Svelte component
assert.not.type($vue, 'undefined', 'Renders Vue component'); const $svelte = $('#svelte');
expect($svelte).not.toHaveLength(0);
});
const $svelte = $('#svelte'); test('Allows Components defined in frontmatter', async () => {
assert.not.type($svelte, 'undefined', 'Renders Svelte component'); const html = await fixture.fetch('/frontmatter-component').then((res) => res.text());
const $ = cheerio.load(html);
expect($('h1')).toHaveLength(1);
});
test('Still throws an error for undefined components', async () => {
const result = await fixture.fetch('/undefined-component');
expect(result.statusCode).toBe(500);
});
test('Client attrs not added', async () => {
const html = await fixture.fetch('/client').then((res) => res.text());
expect(html).not.toEqual(expect.stringMatching(/"client:load": true/));
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
Components('Allows Components defined in frontmatter', async ({ runtime }) => {
const result = await runtime.load('/frontmatter-component');
const html = result.contents;
const $ = doc(html);
assert.equal($('h1').length, 1);
});
Components('Allows variables named props', async ({ runtime }) => {
const result = await runtime.load('/props-shadowing');
assert.equal(result.statusCode, 500);
});
Components('Still throws an error for undefined components', async ({ runtime }) => {
const result = await runtime.load('/undefined-component');
assert.equal(result.statusCode, 500);
});
Components('Svelte component', async ({ runtime }) => {
const result = await runtime.load('/client');
const html = result.contents;
assert.ok(!/"client:load": true/.test(html), 'Client attrs not added');
});
Components.run();

137
packages/astro/test/astro-css-bundling.test.js
View file

@ -1,11 +1,5 @@
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import { suite } from 'uvu'; import { loadFixture } from './test-utils';
import * as assert from 'uvu/assert';
import { setupBuild } from './helpers.js';
const CSSBundling = suite('CSS Bundling');
setupBuild(CSSBundling, './fixtures/astro-css-bundling');
// note: the hashes should be deterministic, but updating the file contents will change hashes // note: the hashes should be deterministic, but updating the file contents will change hashes
// be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling). // be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
@ -18,70 +12,75 @@ const EXPECTED_CSS = {
}; };
const UNEXPECTED_CSS = ['/_astro/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css']; const UNEXPECTED_CSS = ['/_astro/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css'];
CSSBundling('Bundles CSS', async (context) => { describe('CSS Bundling', () => {
await context.build(); let fixture;
const builtCSS = new Set(); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling/' });
await fixture.build();
});
// for all HTML files… test('Bundles CSS', async () => {
for (const [filepath, css] of Object.entries(EXPECTED_CSS)) { const builtCSS = new Set();
const html = await context.readFile(filepath);
const $ = cheerio.load(html);
// test 1: assert new bundled CSS is present // for all HTML files…
for (const href of css) { for (const [filepath, css] of Object.entries(EXPECTED_CSS)) {
const link = $(`link[rel="stylesheet"][href^="${href}"]`); const html = await fixture.readFile(filepath);
assert.equal(link.length, 1, 'New bundled CSS is not present'); const $ = cheerio.load(html);
builtCSS.add(link.attr('href'));
// test 1: assert new bundled CSS is present
for (const href of css) {
const link = $(`link[rel="stylesheet"][href^="${href}"]`);
expect(link).toHaveLength(1);
builtCSS.add(link.attr('href'));
}
// test 2: assert old CSS was removed
for (const href of UNEXPECTED_CSS) {
const link = $(`link[rel="stylesheet"][href="${href}"]`);
expect(link).toHaveLength(0);
}
// test 3: preload tags was not removed and attributes was preserved
if (filepath === '/preload/index.html') {
const stylesheet = $('link[rel="stylesheet"][href^="/_astro/preload/index-"]');
const preload = $('link[rel="preload"][href^="/_astro/preload/index-"]');
expect(stylesheet[0].attribs.media).toBe('print');
expect(preload).toHaveLength(1); // Preload tag was removed
}
// test 4: preload tags was not removed and attributes was preserved
if (filepath === '/preload-merge/index.html') {
const preload = $('link[rel="preload"]');
expect(preload).toHaveLength(1);
}
// test 5: assert all bundled CSS was built and contains CSS
for (const url of builtCSS.keys()) {
const css = await context.readFile(url);
expect(css).toBeTruthy();
}
// test 6: assert ordering is preserved (typography.css before colors.css)
const bundledLoc = [...builtCSS].find((k) => k.startsWith('/_astro/common-'));
const bundledContents = await context.readFile(bundledLoc);
const typographyIndex = bundledContents.indexOf('body{');
const colorsIndex = bundledContents.indexOf(':root{');
expect(typographyIndex).toBeLessThan(colorsIndex);
// test 7: assert multiple style blocks were bundled (Nav.astro includes 2 scoped style blocks)
const scopedNavStyles = [...bundledContents.matchAll('.nav.astro-')];
expect(scopedNavStyles).toHaveLength(2);
// test 8: assert <style global> was not scoped (in Nav.astro)
const globalStyles = [...bundledContents.matchAll('html{')];
expect(globalStyles).toHaveLength(1);
// test 9: assert keyframes are only scoped for non-global styles (from Nav.astro)
const scopedKeyframes = [...bundledContents.matchAll('nav-scoped-fade-astro')];
const globalKeyframes = [...bundledContents.matchAll('nav-global-fade{')];
expect(scopedKeyframes.length).toBeGreaterThan(0);
expect(globalKeyframes.length).toBeGreaterThan(0);
} }
});
// test 2: assert old CSS was removed
for (const href of UNEXPECTED_CSS) {
const link = $(`link[rel="stylesheet"][href="${href}"]`);
assert.equal(link.length, 0, 'Old CSS was not removed');
}
// test 3: preload tags was not removed and attributes was preserved
if (filepath === '/preload/index.html') {
const stylesheet = $('link[rel="stylesheet"][href^="/_astro/preload/index-"]');
const preload = $('link[rel="preload"][href^="/_astro/preload/index-"]');
assert.equal(stylesheet[0].attribs.media, 'print', 'Attribute was not preserved');
assert.equal(preload.length, 1, 'Preload tag was removed');
}
// test 4: preload tags was not removed and attributes was preserved
if (filepath === '/preload-merge/index.html') {
const preload = $('link[rel="preload"]');
assert.equal(preload.length, 1, 'Preload tag was not merged or was removed completly');
}
}
// test 5: assert all bundled CSS was built and contains CSS
for (const url of builtCSS.keys()) {
const css = await context.readFile(url);
assert.ok(css, true);
}
// test 6: assert ordering is preserved (typography.css before colors.css)
const bundledLoc = [...builtCSS].find((k) => k.startsWith('/_astro/common-'));
const bundledContents = await context.readFile(bundledLoc);
const typographyIndex = bundledContents.indexOf('body{');
const colorsIndex = bundledContents.indexOf(':root{');
assert.ok(typographyIndex < colorsIndex);
// test 7: assert multiple style blocks were bundled (Nav.astro includes 2 scoped style blocks)
const scopedNavStyles = [...bundledContents.matchAll('.nav.astro-')];
assert.is(scopedNavStyles.length, 2);
// test 8: assert <style global> was not scoped (in Nav.astro)
const globalStyles = [...bundledContents.matchAll('html{')];
assert.is(globalStyles.length, 1);
// test 9: assert keyframes are only scoped for non-global styles (from Nav.astro)
const scopedKeyframes = [...bundledContents.matchAll('nav-scoped-fade-astro')];
const globalKeyframes = [...bundledContents.matchAll('nav-global-fade{')];
assert.ok(scopedKeyframes.length > 0);
assert.ok(globalKeyframes.length > 0);
}); });
CSSBundling.run();

140
packages/astro/test/astro-doctype.test.js
View file

@ -1,73 +1,77 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const DType = suite('doctype'); describe('Doctype', () => {
let fixture;
let devServer;
setup(DType, './fixtures/astro-doctype'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-doctype/' });
devServer = await fixture.dev();
});
DType('Automatically prepends the standards mode doctype', async ({ runtime }) => { test('Automatically prepends the standards mode doctype', async () => {
const result = await runtime.load('/prepend'); const html = await fixture.fetch('/prepend').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8'); // test that Doctype always included
assert.ok(html.startsWith('<!doctype html>'), 'Doctype always included'); expect(html).toEqual(expect.stringMatching(/^<!doctype html>/));
});
test('No attributes added when doctype is provided by user', async () => {
const html = await fixture.fetch('/provided').then((res) => res.text());
// test that Doctype always included
expect(html).toEqual(expect.stringMatching(/^<!doctype html>/));
});
test.skip('Preserves user provided doctype', async () => {
const html = await fixture.fetch('/preserve').then((res) => res.text());
// test that Doctype included was preserved
expect(html).toEqual(expect.stringMatching(new RegExp('^<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">')));
});
test('User provided doctype is case insensitive', async () => {
const html = await fixture.fetch('/capital').then((res) => res.text());
// test 1: Doctype left alone
expect(html).toEqual(expect.stringMatching(/^<!DOCTYPE html>/));
// test 2: no closing tag
expect(html).not.toEqual(expect.stringContaining('</!DOCTYPE>'));
});
test('Doctype can be provided in a layout', async () => {
const html = await fixture.fetch('/in-layout').then((res) => res.text());
// test 1: doctype is at the front
expect(html).toEqual(expect.stringMatching(/^<!doctype html>/));
// test 2: A link inside of the head
const $ = cheerio.load(html);
expect($('head link')).toHaveLength(1);
});
test('Doctype is added in a layout without one', async () => {
const html = await fixture.fetch('/in-layout-no-doctype').then((res) => res.text());
// test that doctype is at the front
expect(html).toEqual(expect.stringMatching(/^<!doctype html>/));
});
test('Doctype is added in a layout used with markdown pages', async () => {
const html = await fixture.fetch('/in-layout-article').then((res) => res.text());
// test 1: doctype is at the front
expect(html).toEqual(expect.stringMatching(/^<!doctype html>/));
// test 2: A link inside of the head
const $ = doc(html);
expect($('head link')).toHaveLength(1);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
DType('No attributes added when doctype is provided by user', async ({ runtime }) => {
const result = await runtime.load('/provided');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!doctype html>'), 'Doctype always included');
});
DType.skip('Preserves user provided doctype', async ({ runtime }) => {
const result = await runtime.load('/preserve');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'), 'Doctype included was preserved');
});
DType('User provided doctype is case insensitive', async ({ runtime }) => {
const result = await runtime.load('/capital');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!DOCTYPE html>'), 'Doctype left alone');
assert.not.ok(html.includes('</!DOCTYPE>'), 'There should not be a closing tag');
});
DType('Doctype can be provided in a layout', async ({ runtime }) => {
const result = await runtime.load('/in-layout');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!doctype html>'), 'doctype is at the front');
const $ = doc(html);
assert.equal($('head link').length, 1, 'A link inside of the head');
});
DType('Doctype is added in a layout without one', async ({ runtime }) => {
const result = await runtime.load('/in-layout-no-doctype');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!doctype html>'), 'doctype is at the front');
});
DType('Doctype is added in a layout used with markdown pages', async ({ runtime }) => {
const result = await runtime.load('/in-layout-article');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents.toString('utf-8');
assert.ok(html.startsWith('<!doctype html>'), 'doctype is at the front');
const $ = doc(html);
assert.equal($('head link').length, 1, 'A link inside of the head');
});
DType.run();

113
packages/astro/test/astro-dynamic.test.js
View file

@ -1,72 +1,75 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const DynamicComponents = suite('Dynamic components tests'); describe('Dynamic components', () => {
let fixture;
let devServer;
setup(DynamicComponents, './fixtures/astro-dynamic'); beforeAll(async () => {
setupBuild(DynamicComponents, './fixtures/astro-dynamic'); fixture = await loadFixture({ projectRoot: './fixtures/astro-dynamic/' });
devServer = await fixture.dev();
});
DynamicComponents('Loads client-only packages', async ({ runtime }) => { test('Loads client-only packages', async () => {
let result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`);
// Grab the react-dom import // Grab the react-dom import
const exp = /import\("(.+?)"\)/g; const exp = /import\("(.+?)"\)/g;
let match, reactRenderer; let match, reactRenderer;
while ((match = exp.exec(result.contents))) { while ((match = exp.exec(html))) {
if (match[1].includes('renderers/renderer-react/client.js')) { if (match[1].includes('renderers/renderer-react/client.js')) {
reactRenderer = match[1]; reactRenderer = match[1];
}
} }
}
assert.ok(reactRenderer, 'React renderer is on the page'); // test 1: React renderer is on the page
expect(reactRenderer).toBeTruthy();
result = await runtime.load(reactRenderer); // test 2: Can load React renderer
assert.equal(result.statusCode, 200, 'Can load react renderer'); const result = await fixture.fetch(reactRenderer);
}); expect(result.statusCode).toBe(200);
});
DynamicComponents('Loads pages using client:media hydrator', async ({ runtime }) => { test('Loads pages using client:media hydrator', async () => {
let result = await runtime.load('/media'); const html = await fixture.fetch('/media').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`);
let html = result.contents; // test 1: static value rendered
assert.ok(html.includes(`value: "(max-width: 700px)"`), 'static value rendered'); expect(html).toEqual(expect.stringContaining(`value: "(max-width: 700px)"`));
assert.ok(html.includes(`value: "(max-width: 600px)"`), 'dynamic value rendered');
});
DynamicComponents('Loads pages using client:only hydrator', async ({ runtime }) => { // test 2: dynamic value rendered
let result = await runtime.load('/client-only'); expect(html).toEqual(expect.stringContaining(`value: "(max-width: 600px)"`));
assert.ok(!result.error, `build error: ${result.error}`); });
let html = result.contents; test('Loads pages using client:only hydrator', async () => {
const html = await fixture.fetch('/client-only').then((res) => res.html());
const $ = cheerio.load(html);
const rootExp = /<astro-root\s[^>]*><\/astro-root>/; // test 1: <astro-root> is empty
assert.ok(rootExp.exec(html), 'astro-root is empty'); expect($('<astro-root>').html()).toBe('');
// Grab the svelte import // Grab the svelte import
const exp = /import\("(.+?)"\)/g; const exp = /import\("(.+?)"\)/g;
let match, svelteRenderer; let match, svelteRenderer;
while ((match = exp.exec(result.contents))) { while ((match = exp.exec(result.contents))) {
if (match[1].includes('renderers/renderer-svelte/client.js')) { if (match[1].includes('renderers/renderer-svelte/client.js')) {
svelteRenderer = match[1]; svelteRenderer = match[1];
}
} }
}
assert.ok(svelteRenderer, 'Svelte renderer is on the page'); // test 2: Svelte renderer is on the page
expect(svelteRenderer).toBeTruthy();
result = await runtime.load(svelteRenderer); // test 3: Can load svelte renderer
assert.equal(result.statusCode, 200, 'Can load svelte renderer'); const result = await fixture.fetch(svelteRenderer);
expect(result.statusCode).toBe(200);
});
test('Can build a project with svelte dynamic components', async () => {
expect(() => fixture.build()).not.toThrow();
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
DynamicComponents('Can be built', async ({ build }) => {
try {
await build();
assert.ok(true, 'Can build a project with svelte dynamic components');
} catch (err) {
console.log(err);
assert.ok(false, 'build threw');
}
});
DynamicComponents.run();

186
packages/astro/test/astro-expr.test.js
View file

@ -1,91 +1,107 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Expressions = suite('Expressions'); describe('Expressions', () => {
let fixture;
let devServer;
setup(Expressions, './fixtures/astro-expr'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-expr/',
renderers: ['@astrojs/renderer-preact'],
});
devServer = await fixture.dev();
});
Expressions('Can load page', async ({ runtime }) => { test('Can load page', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); for (let col of ['red', 'yellow', 'blue']) {
expect($('#' + col)).toHaveLength(1);
}
});
for (let col of ['red', 'yellow', 'blue']) { test('Ignores characters inside of strings', async () => {
assert.equal($('#' + col).length, 1); const html = await fixture.fetch('/strings').then((res) => res.text());
} const $ = cheerio.load(html);
for (let col of ['red', 'yellow', 'blue']) {
expect($('#' + col)).toHaveLength(1);
}
});
test('Ignores characters inside of line comments', async () => {
const html = await fixture.fetch('/line-comments').then((res) => res.text());
const $ = cheerio.load(html);
for (let col of ['red', 'yellow', 'blue']) {
expect($('#' + col)).toHaveLength(1);
}
});
test('Ignores characters inside of multiline comments', async () => {
const html = await fixture.fetch('/multiline-comments').then((res) => res.text());
const $ = cheerio.load(html);
for (let col of ['red', 'yellow', 'blue']) {
expect($('#' + col)).toHaveLength(1);
}
});
test('Allows multiple JSX children in mustache', async () => {
const html = await fixture.fetch('/multiple-children').then((res) => res.text());
expect(html).toEqual(expect.stringContaining('#f'));
expect(html).not.toEqual(expect.stringContaining('#t'));
});
test('Allows <> Fragments in expressions', async () => {
const html = await fixture.fetch('/multiple-children').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#fragment').children()).toHaveLength(3);
expect($('#fragment').children('#a')).toHaveLength(1);
expect($('#fragment').children('#b')).toHaveLength(1);
expect($('#fragment').children('#c')).toHaveLength(1);
});
test('Does not render falsy values using &&', async () => {
const html = await fixture.fetch('/falsy').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Expected {true && <span id="true" />} to render
expect($('#true')).toHaveLength(1);
// test 2: Expected {0 && "VALUE"} to render "0"
expect($('#zero').text()).toBe('0');
// test 3: Expected {false && <span id="false" />} not to render
expect($('#false')).toHaveLength(0);
// test 4: Expected {null && <span id="null" />} not to render
expect($('#null')).toHaveLength(0);
// test 5: Expected {undefined && <span id="undefined" />} not to render
expect($('#undefined')).toHaveLength(0);
// Inside of a component
// test 6: Expected {true && <span id="true" />} to render
expect($('#frag-true')).toHaveLength(1);
// test 7: Expected {false && <span id="false" />} not to render
expect($('#frag-false')).toHaveLength(0);
// test 8: Expected {null && <span id="null" />} not to render
expect($('#frag-null')).toHaveLength(0);
// test 9: Expected {undefined && <span id="undefined" />} not to render
expect($('#frag-undefined')).toHaveLength(0);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.close();
});
}); });
Expressions('Ignores characters inside of strings', async ({ runtime }) => {
const result = await runtime.load('/strings');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
for (let col of ['red', 'yellow', 'blue']) {
assert.equal($('#' + col).length, 1);
}
});
Expressions('Ignores characters inside of line comments', async ({ runtime }) => {
const result = await runtime.load('/line-comments');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
for (let col of ['red', 'yellow', 'blue']) {
assert.equal($('#' + col).length, 1);
}
});
Expressions('Ignores characters inside of multiline comments', async ({ runtime }) => {
const result = await runtime.load('/multiline-comments');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
for (let col of ['red', 'yellow', 'blue']) {
assert.equal($('#' + col).length, 1);
}
});
Expressions('Allows multiple JSX children in mustache', async ({ runtime }) => {
const result = await runtime.load('/multiple-children');
assert.ok(!result.error, `build error: ${result.error}`);
assert.ok(result.contents.includes('#f') && !result.contents.includes('#t'));
});
Expressions('Allows <> Fragments in expressions', async ({ runtime }) => {
const result = await runtime.load('/multiple-children');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#fragment').children().length, 3);
assert.equal($('#fragment').children('#a').length, 1);
assert.equal($('#fragment').children('#b').length, 1);
assert.equal($('#fragment').children('#c').length, 1);
});
Expressions('Does not render falsy values using &&', async ({ runtime }) => {
const result = await runtime.load('/falsy');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#true').length, 1, `Expected {true && <span id="true" />} to render`);
assert.equal($('#zero').text(), '0', `Expected {0 && "VALUE"} to render "0"`);
assert.equal($('#false').length, 0, `Expected {false && <span id="false" />} not to render`);
assert.equal($('#null').length, 0, `Expected {null && <span id="null" />} not to render`);
assert.equal($('#undefined').length, 0, `Expected {undefined && <span id="undefined" />} not to render`);
// Inside of a component
assert.equal($('#frag-true').length, 1, `Expected {true && <span id="true" />} to render`);
assert.equal($('#frag-false').length, 0, `Expected {false && <span id="false" />} not to render`);
assert.equal($('#frag-null').length, 0, `Expected {null && <span id="null" />} not to render`);
assert.equal($('#frag-undefined').length, 0, `Expected {undefined && <span id="undefined" />} not to render`);
});
Expressions.run();

34
packages/astro/test/astro-fallback.test.js
View file

@ -1,18 +1,26 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Fallback = suite('Dynamic component fallback'); describe('Dynamic component fallback', () => {
let fixture;
let devServer;
setup(Fallback, './fixtures/astro-fallback'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-fallback',
renderers: ['@astrojs/renderer-preact'],
});
devServer = await fixture.dev();
});
Fallback('Shows static content', async (context) => { test('Shows static content', async () => {
const result = await context.runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
expect($('#fallback').text()).toBe('static');
});
const $ = doc(result.contents); // important: close dev server (free up port and connection)
assert.equal($('#fallback').text(), 'static'); afterAll(async () => {
await devServer.close();
});
}); });
Fallback.run();

25
packages/astro/test/astro-get-static-paths.test.js
View file

@ -1,13 +1,20 @@
import { suite } from 'uvu'; import { loadFixture } from './helpers.js';
import { setupBuild } from './helpers.js';
const GetStaticPaths = suite('getStaticPaths()'); describe('getStaticPaths()', () => {
let fixture;
setupBuild(GetStaticPaths, './fixtures/astro-get-static-paths'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-get-static-paths/',
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
});
});
GetStaticPaths('is only called once during build', async (context) => { test('is only called once during build', async () => {
// It would throw if this was not true // It would throw if this was not true
await context.build(); expect(() => fixture.build()).not.toThrow();
});
}); });
GetStaticPaths.run();

23
packages/astro/test/astro-global-build.test.js
View file

@ -1,23 +0,0 @@
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const GlobalBuild = suite('Astro.* built');
setup(GlobalBuild, './fixtures/astro-global', {
runtimeOptions: {
mode: 'production',
},
});
GlobalBuild('Astro.resolve in the build', async (context) => {
const result = await context.runtime.load('/resolve');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('img').attr('src'), '/blog/_astro/src/images/penguin.png');
});
GlobalBuild.run();

123
packages/astro/test/astro-global.test.js
View file

@ -1,54 +1,79 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Global = suite('Astro.*'); describe('Astro.*', () => {
let fixture;
setup(Global, './fixtures/astro-global'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-global/',
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
});
});
Global('Astro.request.url', async (context) => { describe('dev', () => {
const result = await context.runtime.load('/'); let devServer;
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents); beforeAll(async () => {
assert.equal($('#pathname').text(), '/'); devServer = await fixture.dev();
assert.equal($('#child-pathname').text(), '/'); });
assert.equal($('#nested-child-pathname').text(), '/');
test('Astro.request.url', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#pathname').text()).toBe('/');
expect($('#child-pathname').text()).toBe('/');
expect($('#nested-child-pathname').text()).toBe('/');
});
test('Astro.request.canonicalURL', async () => {
// given a URL, expect the following canonical URL
const canonicalURLs = {
'/': 'https://mysite.dev/blog/',
'/post/post': 'https://mysite.dev/blog/post/post/',
'/posts/1': 'https://mysite.dev/blog/posts/',
'/posts/2': 'https://mysite.dev/blog/posts/2/',
};
for (const [url, canonicalURL] of Object.entries(canonicalURLs)) {
const result = await fixture.fetch(url).then((res) => res.text());
const $ = cheerio.load(result.contents);
expect($('link[rel="canonical"]').attr('href')).toBe(canonicalURL);
}
});
test('Astro.site', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#site').attr('href')).toBe('https://mysite.dev/blog/');
});
test('Astro.resolve in development', async () => {
const html = await fixture.fetch('/resolve').then((res) => res.text());
const $ = cheerio.load(html);
expect($('img').attr('src')).toBe('/_astro/src/images/penguin.png');
expect($('#inner-child img').attr('src')).toBe('/_astro/src/components/nested/images/penguin.png');
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
});
describe('build', () => {
beforeAll(async () => {
await fixture.build();
});
test('Astro.resolve in the build', async () => {
const html = await fixture.readFile('/resolve/index.html');
const $ = cheerio.load(html);
expect($('img').attr('src')).toBe('/blog/_astro/src/images/penguin.png');
});
});
}); });
Global('Astro.request.canonicalURL', async (context) => {
// given a URL, expect the following canonical URL
const canonicalURLs = {
'/': 'https://mysite.dev/blog/',
'/post/post': 'https://mysite.dev/blog/post/post/',
'/posts/1': 'https://mysite.dev/blog/posts/',
'/posts/2': 'https://mysite.dev/blog/posts/2/',
};
for (const [url, canonicalURL] of Object.entries(canonicalURLs)) {
const result = await context.runtime.load(url);
const $ = doc(result.contents);
assert.equal($('link[rel="canonical"]').attr('href'), canonicalURL);
}
});
Global('Astro.site', async (context) => {
const result = await context.runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#site').attr('href'), 'https://mysite.dev/blog/');
});
Global('Astro.resolve in development', async (context) => {
const result = await context.runtime.load('/resolve');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('img').attr('src'), '/_astro/src/images/penguin.png');
assert.equal($('#inner-child img').attr('src'), '/_astro/src/components/nested/images/penguin.png');
});
Global.run();

92
packages/astro/test/astro-hmr.test.js
View file

@ -1,52 +1,46 @@
import { suite } from 'uvu'; /**
import * as assert from 'uvu/assert'; * note(drew): test was commented-out as this is now handled by Vite. Do we need any tests here?
import { doc } from './test-utils.js'; */
import { setup } from './helpers.js';
const HMR = suite('HMR tests'); import { loadFixture } from './test-utils.js';
setup(HMR, './fixtures/astro-hmr', { describe.skip('HMR tests', () => {
runtimeOptions: { let fixture;
mode: 'development',
}, beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-hmr/' });
});
test('Honors the user provided port', async () => {
const result = await runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
assert.ok(/window\.HMR_WEBSOCKET_PORT = 5555/.test(html), "Uses the user's websocket port");
});
test('Does not override script added by the user', async () => {
const result = await runtime.load('/manual');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
assert.ok(/window\.HMR_WEBSOCKET_URL = 'wss:\/\/example.com:3333'/.test(html), "User's script included");
assert.ok(/window\.HMR_WEBSOCKET_PORT = 5555/.test(html), 'Ignored when window.HMR_WEBSOCKET_URL set');
});
test('Adds script to static pages too', async () => {
const result = await runtime.load('/static');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('[src="/_snowpack/hmr-client.js"]').length, 1);
assert.ok(/window\.HMR_WEBSOCKET_PORT/.test(html), 'websocket port added');
});
test("Adds script to pages even if there aren't any elements in the template", async () => {
const result = await runtime.load('/no-elements');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('[src="/_snowpack/hmr-client.js"]').length, 1);
assert.ok(/window\.HMR_WEBSOCKET_PORT/.test(html), 'websocket port added');
});
}); });
HMR('Honors the user provided port', async ({ runtime }) => {
const result = await runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
assert.ok(/window\.HMR_WEBSOCKET_PORT = 5555/.test(html), "Uses the user's websocket port");
});
HMR('Does not override script added by the user', async ({ runtime }) => {
const result = await runtime.load('/manual');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
assert.ok(/window\.HMR_WEBSOCKET_URL = 'wss:\/\/example.com:3333'/.test(html), "User's script included");
assert.ok(/window\.HMR_WEBSOCKET_PORT = 5555/.test(html), 'Ignored when window.HMR_WEBSOCKET_URL set');
});
HMR('Adds script to static pages too', async ({ runtime }) => {
const result = await runtime.load('/static');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('[src="/_snowpack/hmr-client.js"]').length, 1);
assert.ok(/window\.HMR_WEBSOCKET_PORT/.test(html), 'websocket port added');
});
HMR("Adds script to pages even if there aren't any elements in the template", async ({ runtime }) => {
const result = await runtime.load('/no-elements');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('[src="/_snowpack/hmr-client.js"]').length, 1);
assert.ok(/window\.HMR_WEBSOCKET_PORT/.test(html), 'websocket port added');
});
HMR.run();

71
packages/astro/test/astro-markdown-plugins.test.js
View file

@ -1,29 +1,52 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const MarkdownPlugin = suite('Astro Markdown plugin tests'); describe('Astro Markdown plugins', () => {
let fixture;
let devServer;
setup(MarkdownPlugin, './fixtures/astro-markdown-plugins'); beforeAll(async () => {
setupBuild(MarkdownPlugin, './fixtures/astro-markdown-plugins'); fixture = await loadFixture({
projectRoot: './fixtures/astro-markdown-plugins/',
renderers: ['@astrojs/renderer-preact'],
markdownOptions: {
remarkPlugins: ['remark-code-titles', 'remark-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
rehypePlugins: [
['rehype-toc', { headings: ['h2', 'h3'] }],
['rehype-add-classes', { 'h1,h2,h3': 'title' }],
],
},
buildOptions: {
sitemap: false,
},
});
devServer = await fixture.dev();
});
MarkdownPlugin('Can render markdown with plugins', async ({ runtime }) => { test('Can render markdown with plugins', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); // test 1: Added a TOC
assert.equal($('.toc').length, 1, 'Added a TOC'); expect($('.toc')).toHaveLength(1);
assert.ok($('#hello-world').hasClass('title'), 'Added .title to h1');
// teste 2: Added .title to h1
expect($('#hello-world').hasClass('title')).toBeTrue();
});
test('Can render Astro <Markdown> with plugins', async () => {
const html = await fixture.fetch('/astro').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Added a TOC
expect($('.toc')).toHaveLength(1);
// teste 2: Added .title to h1
expect($('#hello-world').hasClass('title')).toBeTrue();
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
MarkdownPlugin('Can render Astro <Markdown> with plugins', async ({ runtime }) => {
const result = await runtime.load('/astro');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('.toc').length, 1, 'Added a TOC');
assert.ok($('#hello-world').hasClass('title'), 'Added .title to h1');
});
MarkdownPlugin.run();

311
packages/astro/test/astro-markdown.test.js
View file

@ -1,141 +1,180 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const Markdown = suite('Astro Markdown tests'); describe('Astro Markdown', () => {
let fixture;
setup(Markdown, './fixtures/astro-markdown'); beforeAll(async () => {
setupBuild(Markdown, './fixtures/astro-markdown'); fixture = await loadFixture({
projectRoot: './fixtures/astro-markdown/',
renderers: ['@astrojs/renderer-preact'],
buildOptions: {
sitemap: false,
},
});
});
Markdown('Can load markdown pages with Astro', async ({ runtime }) => { describe('dev', () => {
const result = await runtime.load('/post'); let devServer;
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents); beforeAll(async () => {
assert.ok($('#first').length, 'There is a div added in markdown'); devServer = await fixture.dev();
assert.ok($('#test').length, 'There is a div added via a component from markdown'); });
test('Can load markdown pages with Astro', async () => {
const html = await fixture.fetch('/post').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: There is a div added in markdown
expect($('#first').length).toBeTruthy();
// test 2: There is a div added via a component from markdown
expect($('#test').length).toBeTruthy();
});
test('Can load more complex jsxy stuff', async () => {
const html = await fixture.fetch('/complex').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#test').text()).toBe('Hello world');
});
test('Empty code blocks do not fail', async () => {
const html = await fixture.fetch('/empty-code').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: There is not a `<code>` in the codeblock
expect($('pre')[0].children).toHaveLength(1);
// test 2: The empty `<pre>` failed to render
expect($('pre')[1].children).toHaveLength(0);
});
test('Runs code blocks through syntax highlighter', async () => {
const html = await fixture.fetch('/code').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: There are child spans in code blocks
expect($('code span').length).toBeGreaterThan(0);
});
test('Scoped styles should not break syntax highlight', async () => {
const html = await fixture.fetch('/scopedStyles-code').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: <pre> tag has scopedStyle class passed down
expect($('pre').is('[class]')).toBe(true);
// test 2: <pre> tag has correct language
expect($('pre').hasClass('language-js')).toBe(true);
// test 3: <code> tag has correct language
expect($('code').hasClass('language-js')).toBe(true);
// test 4: There are child spans in code blocks
expect($('code span').length).toBeGreaterThan(0);
});
test('Renders correctly when deeply nested on a page', async () => {
const html = await fixture.fetch('/deep').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Rendered all children
expect($('#deep').children()).toHaveLength(3);
// tests 2–4: Only rendered title in each section
assert.equal($('.a').children()).toHaveLength(1);
assert.equal($('.b').children()).toHaveLength(1);
assert.equal($('.c').children()).toHaveLength(1);
// test 5–7: Rendered title in correct section
assert.equal($('.a > h2').text()).toBe('A');
assert.equal($('.b > h2').text()).toBe('B');
assert.equal($('.c > h2').text()).toBe('C');
});
test('Renders recursively', async () => {
const html = await fixture.fetch('/recursive').then((res) => res.text());
const $ = cheerio.load(html);
// tests 1–2: Rendered title correctly
expect($('.a > h1').text()).toBe('A');
expect($('.b > h1').text()).toBe('B');
expect($('.c > h1').text()).toBe('C');
});
test('Renders dynamic content though the content attribute', async () => {
const html = await fixture.fetch('/external').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Rendered markdown content
expect($('#outer')).toHaveLength(1);
// test 2: Nested markdown content
expect($('#inner')).toHaveLength(1);
// test 3: Scoped class passed down
expect($('#inner').is('[class]')).toBe(true);
});
test('Renders curly braces correctly', async () => {
const html = await fixture.fetch('/braces').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Rendered curly braces markdown content
expect($('code')).toHaveLength(3);
// test 2: Rendered curly braces markdown content
expect($('code:first-child').text()).toBe('({})');
// test 3: Rendered curly braces markdown content
expect($('code:nth-child(2)').text()).toBe('{...props}');
// test 4: Rendered curly braces markdown content
expect($('code:last-child').text()).toBe('{/* JavaScript */}');
});
test('Does not close parent early when using content attribute (#494)', async () => {
const html = await fixture.fetch('/close').then((res) => res.text());
const $ = cheerio.load(html);
// test <Markdown content /> closed div#target early
expect($('#target').children()).toHaveLength(2);
});
test('Can render markdown with --- for horizontal rule', async () => {
const result = await fixture.fetch('/dash');
expect(result.statusCode).toBe(200);
});
test('Can render markdown content prop (#1259)', async () => {
const html = await fixture.fetch('/content').then((res) => res.text());
const $ = cheerio.load(html);
// test Markdown rendered correctly via content prop
expect($('h1').text()).toBe('Foo');
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
});
describe('build', () => {
beforeAll(async () => {
await fixture.build();
});
test('Bundles client-side JS for prod', async () => {
const complexHtml = await fixture.readFile('/complex/index.html');
// test 1: Counter.js is loaded from page
expect(complexHtml).toEqual(expect.stringContaining(`import("/_astro/src/components/Counter.js"`));
// test 2: Counter.jsx is bundled for prod
const counterJs = await fixture.readFile('/_astro/src/components/Counter.js');
expect(counterJs).toBeTruthy();
});
});
}); });
Markdown('Can load more complex jsxy stuff', async ({ runtime }) => {
const result = await runtime.load('/complex');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
const $el = $('#test');
assert.equal($el.text(), 'Hello world');
});
Markdown('Runs code blocks through syntax highlighter', async ({ runtime }) => {
const result = await runtime.load('/code');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
const $el = $('code span');
assert.ok($el.length > 0, 'There are child spans in code blocks');
});
Markdown('Empty code blocks do not fail', async ({ runtime }) => {
const result = await runtime.load('/empty-code');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
const $el = $('pre');
assert.ok($el[0].children.length === 1, 'There is not a `<code>` in the codeblock');
assert.ok($el[1].children.length === 0, 'The empty `<pre>` failed to render');
});
Markdown('Scoped styles should not break syntax highlight', async ({ runtime }) => {
const result = await runtime.load('/scopedStyles-code');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.ok($('pre').is('[class]'), 'Pre tag has scopedStyle class passed down');
assert.ok($('pre').hasClass('language-js'), 'Pre tag has correct language');
assert.ok($('code').hasClass('language-js'), 'Code tag has correct language');
assert.ok($('code span').length > 0, 'There are child spans in code blocks');
});
Markdown('Bundles client-side JS for prod', async (context) => {
await context.build();
const complexHtml = await context.readFile('/complex/index.html');
assert.match(complexHtml, `import("/_astro/src/components/Counter.js"`);
const counterJs = await context.readFile('/_astro/src/components/Counter.js');
assert.ok(counterJs, 'Counter.jsx is bundled for prod');
});
Markdown('Renders correctly when deeply nested on a page', async ({ runtime }) => {
const result = await runtime.load('/deep');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#deep').children().length, 3, 'Rendered all children');
assert.equal($('.a').children().length, 1, 'Only rendered title in each section');
assert.equal($('.b').children().length, 1, 'Only rendered title in each section');
assert.equal($('.c').children().length, 1, 'Only rendered title in each section');
assert.equal($('.a > h2').text(), 'A', 'Rendered title in correct section');
assert.equal($('.b > h2').text(), 'B', 'Rendered title in correct section');
assert.equal($('.c > h2').text(), 'C', 'Rendered title in correct section');
});
Markdown('Renders recursively', async ({ runtime }) => {
const result = await runtime.load('/recursive');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('.a > h1').text(), 'A', 'Rendered title .a correctly');
assert.equal($('.b > h1').text(), 'B', 'Rendered title .b correctly');
assert.equal($('.c > h1').text(), 'C', 'Rendered title .c correctly');
});
Markdown('Renders dynamic content though the content attribute', async ({ runtime }) => {
const result = await runtime.load('/external');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#outer').length, 1, 'Rendered markdown content');
assert.equal($('#inner').length, 1, 'Nested markdown content');
assert.ok($('#inner').is('[class]'), 'Scoped class passed down');
});
Markdown('Renders curly braces correctly', async ({ runtime }) => {
const result = await runtime.load('/braces');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('code').length, 3, 'Rendered curly braces markdown content');
assert.equal($('code:first-child').text(), '({})', 'Rendered curly braces markdown content');
assert.equal($('code:nth-child(2)').text(), '{...props}', 'Rendered curly braces markdown content');
assert.equal($('code:last-child').text(), '{/* JavaScript */}', 'Rendered curly braces markdown content');
});
Markdown('Does not close parent early when using content attribute (#494)', async ({ runtime }) => {
const result = await runtime.load('/close');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#target').children().length, 2, '<Markdown content /> closed div#target early');
});
Markdown('Can render markdown with --- for horizontal rule', async ({ runtime }) => {
const result = await runtime.load('/dash');
assert.ok(!result.error, `build error: ${result.error}`);
// It works!
});
Markdown('Can render markdown content prop (#1259)', async ({ runtime }) => {
const result = await runtime.load('/content');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('h1').text(), 'Foo', 'Markdown rendered correctly via content prop');
// It works!
});
Markdown.run();

30
packages/astro/test/astro-pageDirectoryUrl.test.js
View file

@ -1,16 +1,22 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils.js';
import * as assert from 'uvu/assert';
import { setupBuild } from './helpers.js';
const PageDirectoryUrl = suite('pageUrlFormat'); describe('pageUrlFormat', () => {
let fixture;
setupBuild(PageDirectoryUrl, './fixtures/astro-page-directory-url'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-page-directory-url',
buildOptions: {
pageUrlFormat: 'file',
},
});
PageDirectoryUrl('outputs', async ({ build, readFile }) => { await fixture.build();
await build(); });
assert.ok(await readFile('/client.html'));
assert.ok(await readFile('/nested-md.html')); test('outputs', async () => {
assert.ok(await readFile('/nested-astro.html')); expect(await fixture.readFile('/client.html')).toBeTruthy();
expect(await fixture.readFile('/nested-md.html')).toBeTruthy();
expect(await fixture.readFile('/nested-astro.html')).toBeTruthy();
});
}); });
PageDirectoryUrl.run();

53
packages/astro/test/astro-pages.test.js
View file

@ -1,24 +1,43 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const Pages = suite('Pages tests'); describe('Pages', () => {
let fixture;
setup(Pages, './fixtures/astro-pages'); beforeAll(async () => {
setupBuild(Pages, './fixtures/astro-pages'); fixture = await loadFixture({ projectRoot: './fixtures/astro-pages/' });
Pages('Can find page with "index" at the end file name', async ({ build, runtime }) => {
await build().catch((err) => {
assert.ok(!err, 'Error during the build');
}); });
const result = await runtime.load('posts/name-with-index'); describe('dev', () => {
if (result.error) throw new Error(result.error); let devServer;
const $ = doc(result.contents); beforeAll(async () => {
devServer = await fixture.dev();
});
assert.equal($('h1').text(), 'Name with index'); test('Can find page with "index" at the end file name', async () => {
const html = await fixture.fetch('/posts/name-with-index').then((res) => res.text());
const $ = cheerio.load(html);
expect($('h1').text()).toBe('Name with index');
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
});
describe('build', () => {
beforeAll(async () => {
await fixture.build();
});
test('Can find page with "index" at the end file name', async () => {
const html = await fixture.readFile('/posts/name-with-index/index.html');
const $ = cheerio.load(html);
expect($('h1').text()).toBe('Name with index');
});
});
}); });
Pages.run();

113
packages/astro/test/astro-pagination.test.js
View file

@ -1,67 +1,54 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Global = suite('Astro.*'); describe('Pagination', () => {
let fixture;
let devServer;
setup(Global, './fixtures/astro-pagination'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-pagination/',
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
});
devServer = await fixture.dev();
});
Global('optional root page', async (context) => { test('optional root page', async () => {
{ const results = await Promise.all([fixture.fetch('/posts/optional-root-page/'), fixture.fetch('/posts/optional-root-page/2'), fixture.fetch('/posts/optional-root-page/3')]);
const result = await context.runtime.load('/posts/optional-root-page/'); for (const result of results) {
assert.ok(!result.error, `build error: ${result.error}`); expect(result.statusCode).toBe(200);
} }
{ });
const result = await context.runtime.load('/posts/optional-root-page/2');
assert.ok(!result.error, `build error: ${result.error}`); test('named root page', async () => {
} const results = await Promise.all([fixture.fetch('/posts/named-root-page/1'), fixture.fetch('/posts/named-root-page/2'), fixture.fetch('/posts/named-root-page/3')]);
{ for (const result of results) {
const result = await context.runtime.load('/posts/optional-root-page/3'); expect(result.statusCode).toBe(200);
assert.ok(!result.error, `build error: ${result.error}`); }
} });
test('multiple params', async () => {
const params = [
{ color: 'red', p: '1' },
{ color: 'blue', p: '1' },
{ color: 'blue', p: '2' },
];
await Promise.all(
params.map(({ color, p }) => {
const html = await fixture.fetch(`/posts/${color}/${p}`).then((res) => res.text());
const $ = cheerio.load(html);
expect($('#page-a').text()).toBe(p);
expect($('#page-b').text()).toBe(p);
expect($('#filter').text()).toBe(color);
})
);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
Global('named root page', async (context) => {
{
const result = await context.runtime.load('/posts/named-root-page/1');
assert.ok(!result.error, `build error: ${result.error}`);
}
{
const result = await context.runtime.load('/posts/named-root-page/2');
assert.ok(!result.error, `build error: ${result.error}`);
}
{
const result = await context.runtime.load('/posts/named-root-page/3');
assert.ok(!result.error, `build error: ${result.error}`);
}
});
Global('multiple params', async (context) => {
{
const result = await context.runtime.load('/posts/red/1');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#page-a').text(), '1');
assert.equal($('#page-b').text(), '1');
assert.equal($('#filter').text(), 'red');
}
{
const result = await context.runtime.load('/posts/blue/1');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#page-a').text(), '1');
assert.equal($('#page-b').text(), '1');
assert.equal($('#filter').text(), 'blue');
}
{
const result = await context.runtime.load('/posts/blue/2');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#page-a').text(), '2');
assert.equal($('#page-b').text(), '2');
assert.equal($('#filter').text(), 'blue');
}
});
Global.run();

28
packages/astro/test/astro-public.test.js
View file

@ -1,21 +1,17 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils.js';
import * as assert from 'uvu/assert';
import { setup, setupBuild } from './helpers.js';
const Public = suite('Public'); describe('Public', () => {
let fixture;
setup(Public, './fixtures/astro-public'); beforeAll(async () => {
setupBuild(Public, './fixtures/astro-public'); fixture = await loadFixture({ projectRoot: './fixtures/astro-public/' });
await fixture.build();
Public('css and js files do not get bundled', async ({ build, readFile }) => {
await build().catch((err) => {
assert.ok(!err, 'Error during the build');
}); });
let indexHtml = await readFile('/index.html'); test('css and js files do not get bundled', async () => {
assert.ok(indexHtml.includes('<script src="/example.js"></script>')); let indexHtml = await fixture.readFile('/index.html');
assert.ok(indexHtml.includes('<link href="/example.css" ref="stylesheet">')); expect(indexHtml).toEqual(expect.stringContaining('<script src="/example.js"></script>'));
assert.ok(indexHtml.includes('<img src="/images/twitter.png">')); expect(indexHtml).toEqual(expect.stringContaining('<link href="/example.css" ref="stylesheet">'));
expect(indexHtml).toEqual(expect.stringContaining('<img src="/images/twitter.png">'));
});
}); });
Public.run();

29
packages/astro/test/astro-rss.test.js
View file

@ -1,17 +1,20 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils.js';
import * as assert from 'uvu/assert';
import { setupBuild } from './helpers.js';
const RSS = suite('RSS Generation'); describe('RSS Generation', () => {
let fixture;
setupBuild(RSS, './fixtures/astro-rss'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-rss/',
buildOptions: {
site: 'https://mysite.dev',
},
});
await fixture.build();
});
const snapshot = `<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title><![CDATA[MF Doomcast]]></title><description><![CDATA[The podcast about the things you find on a picnic, or at a picnic table]]></description><link>https://mysite.dev/custom/feed.xml</link><language>en-us</language><itunes:author>MF Doom</itunes:author><item><title><![CDATA[Rap Snitch Knishes (feat. Mr. Fantastik)]]></title><link>https://mysite.dev/episode/rap-snitch-knishes/</link><description><![CDATA[Complex named this song the “22nd funniest rap song of all time.”]]></description><pubDate>Tue, 16 Nov 2004 00:00:00 GMT</pubDate><itunes:episodeType>music</itunes:episodeType><itunes:duration>172</itunes:duration><itunes:explicit>true</itunes:explicit></item><item><title><![CDATA[Fazers]]></title><link>https://mysite.dev/episode/fazers/</link><description><![CDATA[Rhapsody ranked Take Me to Your Leader 17th on its list “Hip-Hop’s Best Albums of the Decade”]]></description><pubDate>Thu, 03 Jul 2003 00:00:00 GMT</pubDate><itunes:episodeType>music</itunes:episodeType><itunes:duration>197</itunes:duration><itunes:explicit>true</itunes:explicit></item><item><title><![CDATA[Rhymes Like Dimes (feat. Cucumber Slice)]]></title><link>https://mysite.dev/episode/rhymes-like-dimes/</link><description><![CDATA[Operation: Doomsday has been heralded as an underground classic that established MF Doom's rank within the underground hip-hop scene during the early to mid-2000s.\n]]></description><pubDate>Tue, 19 Oct 1999 00:00:00 GMT</pubDate><itunes:episodeType>music</itunes:episodeType><itunes:duration>259</itunes:duration><itunes:explicit>true</itunes:explicit></item></channel></rss>`; it('generates RSS correctly', async () => {
const rss = await fixture.readFile('/custom/feed.xml');
RSS('Generates RSS correctly', async (context) => { expect(rss).toMatchSnapshot();
await context.build(); });
let rss = await context.readFile('/custom/feed.xml');
assert.match(rss, snapshot);
}); });
RSS.run();

84
packages/astro/test/astro-scoped-styles.test.js
View file

@ -1,46 +1,44 @@
import { suite } from 'uvu'; /**
import * as assert from 'uvu/assert'; * note(drew): TODO: update this test for compiler
import { scopeRule } from '#astro/compiler'; */
const ScopedStyles = suite('Astro PostCSS Scoped Styles Plugin'); // import { scopeRule } from '../dist/compiler';
const className = 'astro-abcd1234'; describe.skip('Scoped styles', () => {
// test('Scopes rules correctly', () => {
ScopedStyles('Scopes rules correctly', () => { // const className = 'astro-abcd1234';
// Note: assume all selectors have no unnecessary spaces (i.e. must be minified) // // Note: assume all selectors have no unnecessary spaces (i.e. must be minified)
const tests = { // const tests = {
'.class': `.class.${className}`, // '.class': `.class.${className}`,
h1: `h1.${className}`, // h1: `h1.${className}`,
'.nav h1': `.nav.${className} h1.${className}`, // '.nav h1': `.nav.${className} h1.${className}`,
'.class+.class': `.class.${className}+.class.${className}`, // '.class+.class': `.class.${className}+.class.${className}`,
'.class~:global(a)': `.class.${className}~a`, // '.class~:global(a)': `.class.${className}~a`,
'.class *': `.class.${className} .${className}`, // '.class *': `.class.${className} .${className}`,
'.class>*': `.class.${className}>.${className}`, // '.class>*': `.class.${className}>.${className}`,
'.class button:focus': `.class.${className} button.${className}:focus`, // '.class button:focus': `.class.${className} button.${className}:focus`,
'.class h3::before': `.class.${className} h3.${className}::before`, // '.class h3::before': `.class.${className} h3.${className}::before`,
'button:focus::before': `button.${className}:focus::before`, // 'button:focus::before': `button.${className}:focus::before`,
'.class :global(*)': `.class.${className} *`, // '.class :global(*)': `.class.${className} *`,
'.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens // '.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens
'.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors // '.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors
':global(body:not(.is-light)).is-dark,:global(body:not(.is-dark)).is-light': `body:not(.is-light).is-dark,body:not(.is-dark).is-light`, // :global() can contain parens, and can be chained off of // ':global(body:not(.is-light)).is-dark,:global(body:not(.is-dark)).is-light': `body:not(.is-light).is-dark,body:not(.is-dark).is-light`, // :global() can contain parens, and can be chained off of
':global(.foo):global(.bar)': '.foo.bar', // more :global() shenanigans // ':global(.foo):global(.bar)': '.foo.bar', // more :global() shenanigans
'.class:global(.bar)': `.class.bar`, // this is technically a “useless“ :global() but it should still be extracted // '.class:global(.bar)': `.class.bar`, // this is technically a “useless“ :global() but it should still be extracted
'.class:not(.is-active):not(.is-disabled)': `.class.${className}:not(.is-active):not(.is-disabled)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion // '.class:not(.is-active):not(.is-disabled)': `.class.${className}:not(.is-active):not(.is-disabled)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion
':hover.a:focus': `.${className}:hover.a:focus`, // weird but still valid (yes, it’s valid) // ':hover.a:focus': `.${className}:hover.a:focus`, // weird but still valid (yes, it’s valid)
'*:hover': `.${className}:hover`, // '*:hover': `.${className}:hover`,
':not(.is-disabled).a': `.${className}:not(.is-disabled).a`, // also valid // ':not(.is-disabled).a': `.${className}:not(.is-disabled).a`, // also valid
'body h1': `body h1.${className}`, // body shouldn‘t be scoped; it‘s not a component // 'body h1': `body h1.${className}`, // body shouldn‘t be scoped; it‘s not a component
'html,body': `html,body`, // 'html,body': `html,body`,
from: 'from', // ignore keyframe keywords (below) // from: 'from', // ignore keyframe keywords (below)
to: 'to', // to: 'to',
'55%': '55%', // '55%': '55%',
'.class\\:class': `.class\\:class.${className}`, // classes can contain special characters if escaped // '.class\\:class': `.class\\:class.${className}`, // classes can contain special characters if escaped
'.class\\:class:focus': `.class\\:class.${className}:focus`, // '.class\\:class:focus': `.class\\:class.${className}:focus`,
}; // };
// for (const [given, expected] of Object.entries(tests)) {
for (const [given, expected] of Object.entries(tests)) { // expect(scopeRule(given, className)).toBe(expected);
assert.equal(scopeRule(given, className), expected); // }
} // });
}); });
ScopedStyles.run();

129
packages/astro/test/astro-scripts.test.js
View file

@ -1,62 +1,79 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert';
import { setup, setupBuild } from './helpers.js';
import { doc } from './test-utils.js';
import path from 'path'; import path from 'path';
import { loadFixture } from './test-utils.js';
const Scripts = suite('Hoisted scripts'); describe('Hoisted scripts', () => {
let fixture;
setup(Scripts, './fixtures/astro-scripts'); beforeAll(async () => {
setupBuild(Scripts, './fixtures/astro-scripts'); fixture = await loadFixture({ projectRoot: './fixtures/astro-scripts/' });
});
Scripts('Moves external scripts up', async ({ runtime }) => { describe('dev', () => {
const result = await runtime.load('/external'); let devServer;
if (result.error) throw new Error(result.error);
assert.equal(result.statusCode, 200);
const html = result.contents;
const $ = doc(html); beforeAll(async () => {
assert.equal($('head script[type="module"][data-astro="hoist"]').length, 2); devServer = await fixture.dev();
assert.equal($('body script').length, 0); });
test('Moves external scripts up', async () => {
const html = await fixture.fetch('/external').then((res) => res.text());
const $ = doc(html);
expect($('head script[type="module"][data-astro="hoist"]')).toHaveLength(2);
expect($('body script')).toHaveLength(0);
});
test('Moves inline scripts up', async () => {
const html = await fixture.fetch('/inline').then((res) => res.text());
const $ = doc(html);
expect($('head script[type="module"][data-astro="hoist"]')).toHaveLength(1);
expect($('body script')).toHaveLength(0);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
});
describe('build', () => {
beforeAll(async () => {
await fixture.build();
});
test('Inline page builds the scripts to a single bundle', async () => {
/* Inline page */
let inline = await fixture.readFile('/inline/index.html');
let $ = cheerio.load(inline);
// test 1: Just one entry module
assert.equal($('script')).toHaveLength(1);
// test 2: attr removed
expect($('script').attr('data-astro')).toBe(undefined);
let entryURL = path.join('inline', $('script').attr('src'));
let inlineEntryJS = await fixture.readFile(entryURL);
// test 3: the JS exists
expect(inlineEntryJS).toBeTruthy();
});
test('External page builds the scripts to a single bundle', async () => {
let external = await fixture.readFile('/external/index.html');
$ = doc(external);
// test 1: there are two scripts
assert.equal($('script')).toHaveLength(2);
let el = $('script').get(1);
entryURL = path.join('external', $(el).attr('src'));
let externalEntryJS = await readFile(entryURL);
// test 2: the JS exists
expect(externalEntryJS).toBeTruthy();
});
});
}); });
Scripts('Moves inline scripts up', async ({ runtime }) => {
const result = await runtime.load('/inline');
if (result.error) throw new Error(result.error);
assert.equal(result.statusCode, 200);
const html = result.contents;
const $ = doc(html);
assert.equal($('head script[type="module"][data-astro="hoist"]').length, 1);
assert.equal($('body script').length, 0);
});
Scripts('Builds the scripts to a single bundle', async ({ build, readFile }) => {
try {
await build();
} catch (err) {
console.error(err.stack);
assert.ok(!err);
return;
}
/* Inline page */
let inline = await readFile('/inline/index.html');
let $ = doc(inline);
assert.equal($('script').length, 1, 'Just one entry module');
assert.equal($('script').attr('data-astro'), undefined, 'attr removed');
let entryURL = path.join('inline', $('script').attr('src'));
let inlineEntryJS = await readFile(entryURL);
assert.ok(inlineEntryJS, 'The JS exists');
/* External page */
let external = await readFile('/external/index.html');
$ = doc(external);
assert.equal($('script').length, 2, 'There are two scripts');
let el = $('script').get(1);
entryURL = path.join('external', $(el).attr('src'));
let externalEntryJS = await readFile(entryURL);
assert.ok(externalEntryJS, 'got JS');
});
Scripts.run();

29
packages/astro/test/astro-search.test.js
View file

@ -1,29 +0,0 @@
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { setup } from './helpers.js';
const Search = suite('Search paths');
setup(Search, './fixtures/astro-basic');
Search('Finds the root page', async ({ runtime }) => {
const result = await runtime.load('/');
assert.equal(result.statusCode, 200);
});
Search('Matches pathname to filename', async ({ runtime }) => {
assert.equal((await runtime.load('/news')).statusCode, 200);
assert.equal((await runtime.load('/news/')).statusCode, 200);
});
Search('Matches pathname to a nested index.astro file', async ({ runtime }) => {
assert.equal((await runtime.load('/nested-astro')).statusCode, 200);
assert.equal((await runtime.load('/nested-astro/')).statusCode, 200);
});
Search('Matches pathname to a nested index.md file', async ({ runtime }) => {
assert.equal((await runtime.load('/nested-md')).statusCode, 200);
assert.equal((await runtime.load('/nested-md/')).statusCode, 200);
});
Search.run();

24
packages/astro/test/astro-sitemap.test.js
View file

@ -1,17 +1,15 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils.js';
import * as assert from 'uvu/assert';
import { setupBuild } from './helpers.js';
const Sitemap = suite('Sitemap Generation'); describe('Sitemap Generation', () => {
let fixture;
setupBuild(Sitemap, './fixtures/astro-rss'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-rss/' });
await fixture.build();
});
const snapshot = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://mysite.dev/episode/fazers/</loc></url><url><loc>https://mysite.dev/episode/rap-snitch-knishes/</loc></url><url><loc>https://mysite.dev/episode/rhymes-like-dimes/</loc></url><url><loc>https://mysite.dev/episodes/</loc></url></urlset>\n`; test('Generates Sitemap correctly', async () => {
let sitemap = await fixture.readFile('/sitemap.xml');
Sitemap('Generates Sitemap correctly', async (context) => { expect(sitemap).toMatchSnapshot();
await context.build(); });
let sitemap = await context.readFile('/sitemap.xml');
assert.match(sitemap, snapshot);
}); });
Sitemap.run();

247
packages/astro/test/astro-slots.test.js
View file

@ -1,133 +1,120 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const Slots = suite('Slot test'); describe('Slots', () => {
let fixture;
let devServer;
setup(Slots, './fixtures/astro-slots', { beforeAll(async () => {
runtimeOptions: { fixture = await loadFixture({ projectRoot: './fixtures/astro-slots/' });
mode: 'development', devServer = await fixture.dev();
}, });
test('Basic named slots work', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a').text()).toBe('A');
expect($('#b').text()).toBe('B');
expect($('#c').text()).toBe('C');
expect($('#default').text()).toBe('Default');
});
test('Dynamic named slots work', async () => {
const html = await fixture.fetch('/dynamic').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a').text()).toBe('A');
expect($('#b').text()).toBe('B');
expect($('#c').text()).toBe('C');
expect($('#default').text()).toBe('Default');
});
test('Slots render fallback content by default', async () => {
const html = await fixture.fetch('/fallback').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#default')).toHaveLength(1);
});
test('Slots override fallback content', async () => {
const html = await fixture.fetch('/fallback-override').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#override')).toHaveLength(1);
});
test('Slots work with multiple elements', async () => {
const html = await fixture.fetch('/multiple').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a').text()).toBe('ABC');
});
test('Slots work on Components', async () => {
const html = await fixture.fetch('/component').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: #a renders
expect($('#a')).toHaveLength(1);
// test 2: Slotted component into #a
expect($('#a').children('astro-component')).toHaveLength(1);
// test 3: Slotted component into default slot
expect($('#default').children('astro-component')).toHaveLength(1);
});
test('Slots API work on Components', async () => {
// IDs will exist whether the slots are filled or not
{
const html = await fixture.fetch('/slottedapi-default').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a')).toHaveLength(1);
expect($('#b')).toHaveLength(1);
expect($('#c')).toHaveLength(1);
expect($('#default')).toHaveLength(1);
}
// IDs will not exist because the slots are not filled
{
const html = await fixture.fetch('/slottedapi-empty').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a')).toHaveLength(0);
expect($('#b')).toHaveLength(0);
expect($('#c')).toHaveLength(0);
expect($('#default')).toHaveLength(0);
}
// IDs will exist because the slots are filled
{
const html = await fixture.fetch('/slottedapi-filled').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a')).toHaveLength(1);
expect($('#b')).toHaveLength(1);
expect($('#c')).toHaveLength(1);
expect($('#default')).toHaveLength(0); // the default slot is not filled
}
// Default ID will exist because the default slot is filled
{
const html = await fixture.fetch('/slottedapi-default-filled').then((res) => res.text());
const $ = cheerio.load(html);
expect($('#a')).toHaveLength(0);
expect($('#b')).toHaveLength(0);
expect($('#c')).toHaveLength(0);
expect($('#default')).toHaveLength(1); // the default slot is filled
}
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
setupBuild(Slots, './fixtures/astro-slots');
Slots('Basic named slots work', async ({ runtime }) => {
const result = await runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').text(), 'A');
assert.equal($('#b').text(), 'B');
assert.equal($('#c').text(), 'C');
assert.equal($('#default').text(), 'Default');
});
Slots('Dynamic named slots work', async ({ runtime }) => {
const result = await runtime.load('/dynamic');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').text(), 'A');
assert.equal($('#b').text(), 'B');
assert.equal($('#c').text(), 'C');
assert.equal($('#default').text(), 'Default');
});
Slots('Slots render fallback content by default', async ({ runtime }) => {
const result = await runtime.load('/fallback');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#default').length, 1);
});
Slots('Slots override fallback content', async ({ runtime }) => {
const result = await runtime.load('/fallback-override');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#override').length, 1);
});
Slots('Slots work with multiple elements', async ({ runtime }) => {
const result = await runtime.load('/multiple');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').text(), 'ABC');
});
Slots('Slots work on Components', async ({ runtime }) => {
const result = await runtime.load('/component');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').length, 1);
assert.equal($('#a').children('astro-component').length, 1, 'Slotted component into #a');
assert.equal($('#default').children('astro-component').length, 1, 'Slotted component into default slot');
});
Slots('Slots API work on Components', async ({ runtime }) => {
// IDs will exist whether the slots are filled or not
{
const result = await runtime.load('/slottedapi-default');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').length, 1);
assert.equal($('#b').length, 1);
assert.equal($('#c').length, 1);
assert.equal($('#default').length, 1);
}
// IDs will not exist because the slots are not filled
{
const result = await runtime.load('/slottedapi-empty');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').length, 0);
assert.equal($('#b').length, 0);
assert.equal($('#c').length, 0);
assert.equal($('#default').length, 0);
}
// IDs will exist because the slots are filled
{
const result = await runtime.load('/slottedapi-filled');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').length, 1);
assert.equal($('#b').length, 1);
assert.equal($('#c').length, 1);
assert.equal($('#default').length, 0); // the default slot is not filled
}
// Default ID will exist because the default slot is filled
{
const result = await runtime.load('/slottedapi-default-filled');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('#a').length, 0);
assert.equal($('#b').length, 0);
assert.equal($('#c').length, 0);
assert.equal($('#default').length, 1); // the default slot is filled
}
});
Slots.run();

252
packages/astro/test/astro-styles-ssr.test.js
View file

@ -1,9 +1,5 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const StylesSSR = suite('Styles SSR');
/** Basic CSS minification; removes some flakiness in testing CSS */ /** Basic CSS minification; removes some flakiness in testing CSS */
function cssMinify(css) { function cssMinify(css) {
@ -15,136 +11,148 @@ function cssMinify(css) {
.replace(/;}/g, '}'); // collapse block .replace(/;}/g, '}'); // collapse block
} }
setup(StylesSSR, './fixtures/astro-styles-ssr'); describe('Styles SSR', () => {
let fixture;
let devServer;
StylesSSR('Has <link> tags', async ({ runtime }) => { beforeAll(async () => {
const MUST_HAVE_LINK_TAGS = [ fixture = await loadFixture({ projectRoot: './fixtures/astro-styles-ssr/' });
'/_astro/src/components/ReactCSS.css', devServer = await fixture.dev();
'/_astro/src/components/ReactModules.module.css', });
'/_astro/src/components/SvelteScoped.svelte.css',
'/_astro/src/components/VueCSS.vue.css',
'/_astro/src/components/VueModules.vue.css',
'/_astro/src/components/VueScoped.vue.css',
];
const result = await runtime.load('/'); test('Has <link> tags', async () => {
const $ = doc(result.contents); const MUST_HAVE_LINK_TAGS = [
'/src/components/ReactCSS.css',
'/src/components/ReactModules.module.css',
'/src/components/SvelteScoped.css',
'/src/components/VueCSS.css',
'/src/components/VueModules.css',
'/src/components/VueScoped.css',
];
for (const href of MUST_HAVE_LINK_TAGS) { const html = await fixture.fetch('/').then((res) => res.text());
const el = $(`link[href="${href}"]`); const $ = cheerio.load(html);
assert.equal(el.length, 1);
}
});
StylesSSR('Has correct CSS classes', async ({ runtime }) => { for (const href of MUST_HAVE_LINK_TAGS) {
// TODO: remove this (temporary CI patch) const el = $(`link[href="${href}"]`);
if (process.version.startsWith('v14.')) { expect(el).toHaveLength(1);
return;
}
const result = await runtime.load('/');
const $ = doc(result.contents);
const MUST_HAVE_CLASSES = {
'#react-css': 'react-title',
'#react-modules': 'title', // ⚠️ this should be transformed
'#vue-css': 'vue-title',
'#vue-modules': 'title', // ⚠️ this should also be transformed
'#vue-scoped': 'vue-title', // also has data-v-* property
'#svelte-scoped': 'svelte-title', // also has additional class
};
for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) {
const el = $(selector);
if (selector === '#react-modules' || selector === '#vue-modules') {
// this will generate differently on Unix vs Windows. Here we simply test that it has transformed
assert.match(el.attr('class'), new RegExp(`^_${className}_[A-Za-z0-9-_]+`)); // className should be transformed, surrounded by underscores and other stuff
} else {
// if this is not a CSS module, it should remain as expected
assert.ok(el.attr('class').includes(className));
} }
});
// add’l test: Vue Scoped styles should have data-v-* attribute test('Has correct CSS classes', async () => {
if (selector === '#vue-scoped') { const html = await fixture.fetch('/').then((res) => res.text());
const { attribs } = el.get(0); const $ = cheerio.load(html);
const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
assert.ok(scopeId); const MUST_HAVE_CLASSES = {
'#react-css': 'react-title',
'#react-modules': 'title', // ⚠️ this should be transformed
'#vue-css': 'vue-title',
'#vue-modules': 'title', // ⚠️ this should also be transformed
'#vue-scoped': 'vue-title', // also has data-v-* property
'#svelte-scoped': 'svelte-title', // also has additional class
};
for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) {
const el = $(selector);
if (selector === '#react-modules' || selector === '#vue-modules') {
// this will generate differently on Unix vs Windows. Here we simply test that it has transformed
expect(el.attr('class')).toEqual(expect.stringMatching(new RegExp(`^_${className}_[A-Za-z0-9-_]+`))); // className should be transformed, surrounded by underscores and other stuff
} else {
// if this is not a CSS module, it should remain as expected
expect(el.attr('class')).toEqual(expect.stringContaining(className));
}
// add’l test: Vue Scoped styles should have data-v-* attribute
if (selector === '#vue-scoped') {
const { attribs } = el.get(0);
const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
expect(scopeId).toBeTruthy();
}
// add’l test: Svelte should have another class
if (selector === '#svelte-title') {
expect(el.attr('class')).not.toBe(className);
}
} }
});
// add’l test: Svelte should have another class test('CSS Module support in .astro', async () => {
if (selector === '#svelte-title') { const html = await fixture.fetch('/').then((res) => res.text());
assert.not.equal(el.attr('class'), className); const $ = cheerio.load(html);
}
}
});
StylesSSR('CSS Module support in .astro', async ({ runtime }) => { let scopedClass;
const result = await runtime.load('/');
const $ = doc(result.contents);
let scopedClass; // test 1: <style> tag in <head> is transformed
const css = cssMinify(
$('style')
.html()
.replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
scopedClass = match; // get class hash from result
return match;
})
);
// test 1: <style> tag in <head> is transformed expect(css).toBe(`.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);
const css = cssMinify(
// test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
const wrapper = $(`.wrapper${scopedClass}`);
expect(wrapper).toHaveLength(1);
});
test('Astro scoped styles', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
const el1 = $('#dynamic-class');
const el2 = $('#dynamic-vis');
let scopedClass;
$('#class')
.attr('class')
.replace(/astro-[A-Za-z0-9-]+/, (match) => {
scopedClass = match;
return match;
});
// test 1: Astro component missing scoped class
expect(scopedClass).toBe(``);
// test 2–3: children get scoped class
expect(el1.attr('class')).toBe(`blue ${scopedClass}`);
expect(el2.attr('class')).toBe(`visible ${scopedClass}`);
const { contents: css } = await fixture.fetch('/src/components/Astro.astro.css').then((res) => res.text());
// test 4: CSS generates as expected
expect(cssMinify(css.toString())).toBe(`.blue.${scopedClass}{color:powderblue}.color\\:blue.${scopedClass}{color:powderblue}.visible.${scopedClass}{display:block}`);
});
test('Astro scoped styles skipped without <style>', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Astro component without <style> should not include scoped class
expect($('#no-scope').attr('class')).toBe(undefined);
});
test('Astro scoped styles can be passed to child components', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
let scopedClass;
$('style') $('style')
.html() .html()
.replace(/\.astro-[A-Za-z0-9-]+/, (match) => { .replace(/outer\.(astro-[A-Za-z0-9-]+)/, (match, p1) => {
scopedClass = match; // get class hash from result scopedClass = p1;
return match; return match;
}) });
);
assert.match(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`); expect($('#passed-in').attr('class')).toBe(`outer ${scopedClass}`);
});
// test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly) // important: close dev server (free up port and connection)
const wrapper = $(`.wrapper${scopedClass}`); afterAll(async () => {
assert.equal(wrapper.length, 1); await devServer.stop();
});
}); });
StylesSSR('Astro scoped styles', async ({ runtime }) => {
const result = await runtime.load('/');
const $ = doc(result.contents);
const el1 = $('#dynamic-class');
const el2 = $('#dynamic-vis');
let scopedClass;
$('#class')
.attr('class')
.replace(/astro-[A-Za-z0-9-]+/, (match) => {
scopedClass = match;
return match;
});
assert.ok(scopedClass, `Astro component missing scoped class`);
assert.match(el1.attr('class'), `blue ${scopedClass}`);
assert.match(el2.attr('class'), `visible ${scopedClass}`);
const { contents: css } = await runtime.load('/_astro/src/components/Astro.astro.css');
assert.match(cssMinify(css.toString()), `.blue.${scopedClass}{color:powderblue}.color\\:blue.${scopedClass}{color:powderblue}.visible.${scopedClass}{display:block}`);
});
StylesSSR('Astro scoped styles skipped without <style>', async ({ runtime }) => {
const result = await runtime.load('/');
const $ = doc(result.contents);
assert.type($('#no-scope').attr('class'), 'undefined', `Astro component without <style> should not include scoped class`);
});
StylesSSR('Astro scoped styles can be passed to child components', async ({ runtime }) => {
const result = await runtime.load('/');
const $ = doc(result.contents);
let scopedClass;
$('style')
.html()
.replace(/outer\.(astro-[A-Za-z0-9-]+)/, (match, p1) => {
scopedClass = p1;
return match;
});
assert.match($('#passed-in').attr('class'), `outer ${scopedClass}`);
});
StylesSSR.run();

40
packages/astro/test/astro-throw.test.js
View file

@ -1,27 +1,25 @@
import { suite } from 'uvu'; import { loadFixture } from './test-utils.js';
import * as assert from 'uvu/assert';
import { doc } from './test-utils.js';
import { setup, setupBuild } from './helpers.js';
const Throwable = suite('Throw test'); describe('Throw', () => {
let fixture;
let devServer;
setup(Throwable, './fixtures/astro-throw', { beforeAll(async () => {
runtimeOptions: { fixture = await loadFixture({ projectRoot: './fixtures/astro-throw/' });
mode: 'development', devServer = await fixture.dev();
}, });
});
setupBuild(Throwable, './fixtures/astro-throw');
Throwable('Can throw an error from an `.astro` file', async ({ runtime }) => { test('Can throw an error from an `.astro` file', async () => {
const result = await runtime.load('/'); const result = await fixture.fetch('/');
assert.equal(result.statusCode, 500); expect(result.statusCode).toBe(500);
assert.equal(result.error.message, 'Oops!'); });
});
Throwable('Does not complete build when Error is thrown', async ({ build }) => { test('Does not complete build when Error is thrown', async () => {
await build().catch((e) => { expect(() => fixture.build()).toThrow();
assert.ok(e, 'Build threw'); });
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
}); });
}); });
Throwable.run();

29
packages/astro/test/builtins-polyfillnode.test.js
View file

@ -1,19 +1,22 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Builtins = suite('Node builtins with polyfillNode option'); describe('Node builtins with polyfillNode option', () => {
let fixture;
setup(Builtins, './fixtures/builtins-polyfillnode'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/builtins-polyfillnode/' });
});
Builtins('Doesnt alias to node: prefix', async ({ runtime }) => { test('Doesn’t alias to node: prefix', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); expect($('#url').text()).toBe('unicorn.jpg');
});
assert.match($('#url').text(), new RegExp('unicorn.jpg')); // important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
Builtins.run();

53
packages/astro/test/builtins.test.js
View file

@ -1,30 +1,35 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Builtins = suite('Node builtins'); describe('Node builtins', () => {
let fixture;
let devServer;
setup(Builtins, './fixtures/builtins'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
devServer = await fixture.dev();
});
Builtins('Can be used with the node: prefix', async ({ runtime }) => { test('Can be used with the node: prefix', async () => {
// node:fs/promise is not supported in Node v12. Test currently throws. // node:fs/promise is not supported in Node v12. Test currently throws.
if (process.versions.node <= '13') { if (process.versions.node <= '13') {
return; return;
} }
const result = await runtime.load('/'); const result = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); expect($('#version').text()).toBe('1.2.0');
expect($('#dep-version').text()).toBe('0.0.1');
});
assert.equal($('#version').text(), '1.2.0'); test('Throw if using the non-prefixed version', async () => {
assert.equal($('#dep-version').text(), '0.0.1'); const result = await fixture.fetch('/bare');
expect(result.statusCode).toBe(500);
expect(result.body).toEqual(expect.stringContaining('Use node:fs instead'));
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
Builtins('Throw if using the non-prefixed version', async ({ runtime }) => {
const result = await runtime.load('/bare');
assert.ok(result.error, 'Produced an error');
assert.ok(/Use node:fs instead/.test(result.error.message));
});
Builtins.run();

43
packages/astro/test/config-hostname.test.js
View file

@ -1,43 +0,0 @@
import { fileURLToPath } from 'url';
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { runDevServer } from './helpers.js';
import { loadConfig } from '#astro/config';
const ConfigPort = suite('Config hostname');
const MAX_TEST_TIME = 10000; // max time this test suite may take
const root = new URL('./fixtures/config-hostname/', import.meta.url);
const timers = {};
ConfigPort.before.each(({ __test__ }) => {
timers[__test__] = setTimeout(() => {
throw new Error(`Test "${__test__}" did not finish within allowed time`);
}, MAX_TEST_TIME);
});
ConfigPort('can be specified in the astro config', async (context) => {
const astroConfig = await loadConfig(fileURLToPath(root));
assert.equal(astroConfig.devOptions.hostname, '0.0.0.0');
});
ConfigPort('can be specified via --hostname flag', async (context) => {
const args = ['--hostname', '127.0.0.1'];
const proc = runDevServer(root, args);
proc.stdout.setEncoding('utf8');
for await (const chunk of proc.stdout) {
if (/Local:/.test(chunk)) {
assert.ok(/:127.0.0.1/.test(chunk), 'Using the right hostname');
break;
}
}
proc.kill();
});
ConfigPort.after.each(({ __test__ }) => {
clearTimeout(timers[__test__]);
});
ConfigPort.run();

37
packages/astro/test/config-path.test.js
View file

@ -1,37 +0,0 @@
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { runDevServer } from './helpers.js';
const ConfigPath = suite('Config path');
const MAX_TEST_TIME = 10000; // max time this test suite may take
const root = new URL('./fixtures/config-path/', import.meta.url);
const timers = {};
ConfigPath.before.each(({ __test__ }) => {
timers[__test__] = setTimeout(() => {
throw new Error(`Test "${__test__}" did not finish within allowed time`);
}, MAX_TEST_TIME);
});
ConfigPath('can be passed via --config', async (context) => {
const configPath = new URL('./config/my-config.mjs', root).pathname;
const args = ['--config', configPath];
const process = runDevServer(root, args);
process.stdout.setEncoding('utf8');
for await (const chunk of process.stdout) {
if (/Server started/.test(chunk)) {
break;
}
}
process.kill();
assert.ok(true, 'Server started');
});
ConfigPath.after.each(({ __test__ }) => {
clearTimeout(timers[__test__]);
});
ConfigPath.run();

43
packages/astro/test/config-port.test.js
View file

@ -1,43 +0,0 @@
import { fileURLToPath } from 'url';
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { runDevServer } from './helpers.js';
import { loadConfig } from '#astro/config';
const ConfigPort = suite('Config path');
const MAX_TEST_TIME = 10000; // max time this test suite may take
const root = new URL('./fixtures/config-port/', import.meta.url);
const timers = {};
ConfigPort.before.each(({ __test__ }) => {
timers[__test__] = setTimeout(() => {
throw new Error(`Test "${__test__}" did not finish within allowed time`);
}, MAX_TEST_TIME);
});
ConfigPort('can be specified in the astro config', async (context) => {
const astroConfig = await loadConfig(fileURLToPath(root));
assert.equal(astroConfig.devOptions.port, 3001);
});
ConfigPort('can be specified via --port flag', async (context) => {
const args = ['--port', '3002'];
const proc = runDevServer(root, args);
proc.stdout.setEncoding('utf8');
for await (const chunk of proc.stdout) {
if (/Local:/.test(chunk)) {
assert.ok(/:3002/.test(chunk), 'Using the right port');
break;
}
}
proc.kill();
});
ConfigPort.after.each(({ __test__ }) => {
clearTimeout(timers[__test__]);
});
ConfigPort.run();

79
packages/astro/test/config.test.js Normal file
View file

@ -0,0 +1,79 @@
import { loadConfig } from '../dist/config';
import { devCLI, loadFixture } from './test-utils.js';
describe('config', () => {
describe('hostname', () => {
const cwd = './fixtures/config-hostname/';
const cwdURL = new URL(cwd, import.meta.url);
test('can be specified in astro.config.mjs', async () => {
const fixture = await loadFixture({
projectRoot: cwd,
devOptions: { hostname: '0.0.0.0' },
});
expect(fixture.config.devOptions.hostname).toBe('0.0.0.0');
});
test('can be specified via --hostname flag', async () => {
const args = ['--hostname', '127.0.0.1'];
const proc = devCLI(cwdURL, args);
proc.stdout.setEncoding('utf8');
for await (const chunk of proc.stdout) {
if (/Local:/.test(chunk)) {
expect(chunk).toEqual(expect.stringContaining('127.0.0.1'));
break;
}
}
proc.kill();
});
});
describe('path', () => {
const cwd = './fixtures/config-path/';
const cwdURL = new URL(cwd, import.meta.url);
test('can be passed via --config', async () => {
const configPath = new URL('./config/my-config.mjs', cwdURL).pathname;
const args = ['--config', configPath];
const process = devCLI(cwdURL, args);
process.stdout.setEncoding('utf8');
for await (const chunk of process.stdout) {
if (/Server started/.test(chunk)) {
break;
}
}
process.kill();
// test will time out if the server never started
});
});
describe('port', () => {
const cwd = './fixtures/config-port/';
const cwdURL = new URL(cwd, import.meta.url);
test.skip('can be specified in astro.config.mjs', async () => {
const config = await loadConfig(cwdURL);
expect(config.devOptions.port).toEqual(5001);
});
test.skip('can be specified via --port flag', async () => {
const args = ['--port', '5002']; // note: this should be on the higher-end of possible ports
const proc = devCLI(cwdURL, args);
proc.stdout.setEncoding('utf8');
for await (const chunk of proc.stdout) {
if (/Local:/.test(chunk)) {
expect(chunk).toEqual(expect.stringContaining(':5002'));
break;
}
}
proc.kill();
// test will time out on a different port
});
});
});

169
packages/astro/test/custom-elements.test.js
View file

@ -1,83 +1,96 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const CustomElements = suite('Custom Elements'); describe('Custom Elements', () => {
let fixture;
let devServer;
setup(CustomElements, './fixtures/custom-elements'); beforeAll(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/custom-elements/',
renderers: ['@astrojs/test-custom-element-renderer'],
});
devServer = await fixture.dev();
});
CustomElements('Work as constructors', async ({ runtime }) => { test('Work as constructors', async () => {
const result = await runtime.load('/ctr'); const html = await fixture.fetch('/ctr').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
const $ = doc(result.contents); // test 1: Element rendered
assert.equal($('my-element').length, 1, 'Element rendered'); expect($('my-element')).toHaveLength(1);
assert.equal($('my-element template[shadowroot=open]').length, 1, 'shadow rendered');
// test 2: shadow rendererd
expect($('my-element template[shadowroot=open]')).toHaveLength(1);
});
test('Works with exported tagName', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Element rendered
expect($('my-element')).toHaveLength(1);
// test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).toHaveLength(1);
});
test('Hydration works with exported tagName', async () => {
const html = await fixture.fetch('/load').then((res) => res.text());
const $ = cheerio.load(html);
// SSR
// test 1: Element rendered
expect($('my-element')).toHaveLength(1);
// test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).toHaveLength(1);
// Hydration
// test 3: Component URL is included
expect(html).toEqual(expect.stringContaining('/src/components/my-element.js'));
});
test('Polyfills are added before the hydration script', async () => {
const html = await fixture.fetch('/load').then((res) => res.text());
const $ = cheerio.load(html);
expect($('script[type=module]')).toHaveLength(2);
expect($('script[type=module]').attr('src')).toBe('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/polyfill.js');
expect($($('script[type=module]').get(1)).html()).toEqual(
expect.stringContaining('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/hydration-polyfill.js')
);
});
test('Polyfills are added even if not hydrating', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerio.load(html);
expect($('script[type=module]')).toHaveLength(1);
expect($('script[type=module]').attr('src')).toBe('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/polyfill.js');
expect($($('script[type=module]').get(1)).html()).not.toEqual(
expect.stringContaining('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/hydration-polyfill.js')
);
});
test('Custom elements not claimed by renderer are rendered as regular HTML', async () => {
const html = await fixture.fetch('/nossr').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Rendered the client-only element
expect($('client-element')).toHaveLength(1);
});
test('Can import a client-only element that is nested in JSX', async () => {
const html = await fixture.fetch('/nested').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Element rendered
expect($('client-only-element')).toHaveLength(1);
});
// important: close dev server (free up port and connection)
afterAll(async () => {
await devServer.stop();
});
}); });
CustomElements('Works with exported tagName', async ({ runtime }) => {
const result = await runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('my-element').length, 1, 'Element rendered');
assert.equal($('my-element template[shadowroot=open]').length, 1, 'shadow rendered');
});
CustomElements('Hydration works with exported tagName', async ({ runtime }) => {
const result = await runtime.load('/load');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
// SSR
assert.equal($('my-element').length, 1, 'Element rendered');
assert.equal($('my-element template[shadowroot=open]').length, 1, 'shadow rendered');
// Hydration
assert.ok(new RegExp('/_astro/src/components/my-element.js').test(html), 'Component URL is included');
});
CustomElements('Polyfills are added before the hydration script', async ({ runtime }) => {
const result = await runtime.load('/load');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('script[type=module]').length, 2);
assert.equal($('script[type=module]').attr('src'), '/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/polyfill.js');
assert.match($($('script[type=module]').get(1)).html(), new RegExp('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/hydration-polyfill.js'));
});
CustomElements('Polyfills are added even if not hydrating', async ({ runtime }) => {
const result = await runtime.load('/');
assert.ok(!result.error, `build error: ${result.error}`);
const html = result.contents;
const $ = doc(html);
assert.equal($('script[type=module]').length, 1);
assert.equal($('script[type=module]').attr('src'), '/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/polyfill.js');
assert.not.match($($('script[type=module]').get(1)).html(), new RegExp('/_snowpack/link/packages/astro/test/fixtures/custom-elements/my-component-lib/hydration-polyfill.js'));
});
CustomElements('Custom elements not claimed by renderer are rendered as regular HTML', async ({ runtime }) => {
const result = await runtime.load('/nossr');
assert.ok(!result.error, `build error: ${result.error}`);
const $ = doc(result.contents);
assert.equal($('client-element').length, 1, 'Rendered the client-only element');
});
CustomElements('Can import a client-only element that is nested in JSX', async ({ runtime }) => {
const result = await runtime.load('/nested');
assert.ok(!result.error, 'No error loading');
const html = result.contents;
const $ = doc(html);
assert.equal($('client-only-element').length, 1, 'Element rendered');
});
CustomElements.run();

31
packages/astro/test/fetch.test.js
View file

@ -1,18 +1,23 @@
import { suite } from 'uvu'; import cheerio from 'cheerio';
import * as assert from 'uvu/assert'; import { loadFixture } from './test-utils.js';
import { doc } from './test-utils.js';
import { setup } from './helpers.js';
const Fetch = suite('Global Fetch'); describe('Global Fetch', () => {
let fixture;
let devServer;
setup(Fetch, './fixtures/fetch'); beforeAll(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/fetch/' });
devServer = await fixture.dev();
});
Fetch('Is available in non-Astro components.', async ({ runtime }) => { test('Is available in non-Astro components.', async () => {
const result = await runtime.load('/'); const html = await fixture.fetch('/').then((res) => res.text());
assert.ok(!result.error, `build error: ${result.error}`); const $ = cheerio.load(html);
expect($('#jsx').text()).toBe('function');
});
const $ = doc(result.contents); // important: close dev server (free up port and connection)
assert.equal($('#jsx').text(), 'function'); afterAll(async () => {
await devServer.stop();
});
}); });
Fetch.run();

17
packages/astro/test/fixtures/astro-assets/src/pages/index.astro vendored
View file

@ -5,12 +5,7 @@
</style> </style>
<body> <body>
<h1>Icons</h1> <h1>Icons</h1>
<img src="/_astro/src/images/twitter.png" srcset="/_astro/src/images/twitter.png 1x, /_astro/src/images/twitter@2x.png 2x, /_astro/src/images/twitter@3x.png 3x" /> <img src="../images/twitter.png" srcset="../images/twitter.png 1x, ../images/twitter@2x.png 2x, ../images/twitter@3x.png 3x" />
<!--
In Astro (0.20.4 and below) these srcsets will cause a build fail.
Error (for Assets Test)
[build] file:///astro/packages/astro/test/fixtures/astro-assets/src/pages/index.astro: could not find "/_astro/src/pages/h-300/medium_cafe_B1iTdD0C.jpg"
-->
<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 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"> <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">
<!-- <!--
@ -18,15 +13,7 @@
as no checking is done for this tag (a good way to circumvent the check.) as no checking is done for this tag (a good way to circumvent the check.)
--> -->
<picture> <picture>
<!--
This will cause build fail
[build] file:///astro/packages/astro/test/fixtures/astro-assets/src/pages/index.astro: could not find "/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg"
-->
<!-- <source srcset="/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, /demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, /demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w"> -->
<!--
This will pass
-->
<source 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"> <source 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">
</picture> </picture>
</body> </body>
</html> </html>

3
packages/astro/test/fixtures/astro-attrs/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-basic/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

7
packages/astro/test/fixtures/astro-children/astro.config.mjs vendored
View file

@ -1,7 +0,0 @@
export default {
renderers: [
'@astrojs/renderer-preact',
'@astrojs/renderer-vue',
'@astrojs/renderer-svelte',
],
};

3
packages/astro/test/fixtures/astro-children/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

8
packages/astro/test/fixtures/astro-client-only/astro.config.mjs vendored
View file

@ -1,8 +0,0 @@
export default {
buildOptions: {
sitemap: false,
},
renderers: [
'@astrojs/renderer-svelte',
],
};

3
packages/astro/test/fixtures/astro-client-only/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-components/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-css-bundling/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-doctype/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/astro-dynamic/astro.config.mjs vendored
View file

@ -1,5 +0,0 @@
export default {
buildOptions: {
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-dynamic/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/astro-expr/astro.config.mjs vendored
View file

@ -1,5 +0,0 @@
export default {
renderers: [
'@astrojs/renderer-preact'
]
}

3
packages/astro/test/fixtures/astro-expr/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/astro-fallback/astro.config.mjs vendored
View file

@ -1,5 +0,0 @@
export default {
renderers: [
'@astrojs/renderer-preact'
]
}

3
packages/astro/test/fixtures/astro-fallback/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

6
packages/astro/test/fixtures/astro-get-static-paths/astro.config.mjs vendored
View file

@ -1,6 +0,0 @@
export default {
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-get-static-paths/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

6
packages/astro/test/fixtures/astro-global/astro.config.mjs vendored
View file

@ -1,6 +0,0 @@
export default {
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-global/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

6
packages/astro/test/fixtures/astro-hmr/snowpack.config.json vendored
View file

@ -1,6 +0,0 @@
{
"workspaceRoot": "../../../../../",
"devOptions": {
"hmrPort": 5555
}
}

19
packages/astro/test/fixtures/astro-markdown-plugins/astro.config.mjs vendored
View file

@ -1,19 +0,0 @@
export default {
renderers: [
'@astrojs/renderer-preact'
],
markdownOptions: {
remarkPlugins: [
'remark-code-titles',
'remark-slug',
['rehype-autolink-headings', { behavior: 'prepend' }],
],
rehypePlugins: [
['rehype-toc', { headings: ["h2", "h3"] }],
['rehype-add-classes', { 'h1,h2,h3': 'title', }],
]
},
buildOptions: {
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-markdown-plugins/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

8
packages/astro/test/fixtures/astro-markdown/astro.config.mjs vendored
View file

@ -1,8 +0,0 @@
export default {
renderers: [
'@astrojs/renderer-preact'
],
buildOptions: {
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-markdown/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/astro-page-directory-url/astro.config.mjs vendored
View file

@ -1,5 +0,0 @@
export default {
buildOptions: {
pageUrlFormat: 'file'
}
};

3
packages/astro/test/fixtures/astro-page-directory-url/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-pages/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

6
packages/astro/test/fixtures/astro-pagination/astro.config.mjs vendored
View file

@ -1,6 +0,0 @@
export default {
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
},
};

3
packages/astro/test/fixtures/astro-pagination/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-public/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/astro-rss/astro.config.mjs vendored
View file

@ -1,5 +0,0 @@
export default {
buildOptions: {
site: 'https://mysite.dev',
},
};

3
packages/astro/test/fixtures/astro-rss/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-scripts/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-slots/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-styles-ssr/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/astro-throw/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

6
packages/astro/test/fixtures/builtins-polyfillnode/snowpack.config.json vendored
View file

@ -1,6 +0,0 @@
{
"workspaceRoot": "../../../../../",
"packageOptions": {
"polyfillNode": false
}
}

3
packages/astro/test/fixtures/builtins/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

5
packages/astro/test/fixtures/config-port/astro.config.mjs vendored
View file

@ -1,6 +1,5 @@
export default { export default {
devOptions: { devOptions: {
port: 3001 port: 5001
} }
} }

6
packages/astro/test/fixtures/custom-elements/astro.config.mjs vendored
View file

@ -1,6 +0,0 @@
export default {
renderers: [
'@astrojs/test-custom-element-renderer'
]
}

3
packages/astro/test/fixtures/custom-elements/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

3
packages/astro/test/fixtures/fetch/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

17
packages/astro/test/fixtures/lit-element/astro.config.mjs vendored
View file

@ -1,17 +0,0 @@
export default {
// projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project.
// pages: './src/pages', // Path to Astro components, pages, and data
// dist: './dist', // When running `astro build`, path to final static output
// public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
buildOptions: {
// site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
// sitemap: true, // Generate sitemap (set to "false" to disable)
},
devOptions: {
// port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
},
renderers: [
'@astrojs/renderer-lit'
]
};

3
packages/astro/test/fixtures/lit-element/snowpack.config.json vendored
View file

@ -1,3 +0,0 @@
{
"workspaceRoot": "../../../../../"
}

Some files were not shown because too many files have changed in this diff Show more