Merge branch 'main' into sarah11918-patch-1

.changeset/flat-candles-glow.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add getStaticPaths type helpers to infer params and props

.changeset/old-rivers-remember.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add `--help` to various commands: `check`, `sync`, `dev`, `preview`, and `build`

.github/workflows/benchmark.yml

@@ -95,7 +95,7 @@ jobs:
         continue-on-error: true
         with:
           issue-number: ${{ github.event.issue.number }}
-          message: |
+          body: |
             ${{ needs.benchmark.outputs.PR-BENCH }}
 
             ${{ needs.benchmark.outputs.MAIN-BENCH }}

benchmark/bench/render.js

@@ -0,0 +1,122 @@
+import fs from 'fs/promises';
+import http from 'http';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execaCommand } from 'execa';
+import { waitUntilBusy } from 'port-authority';
+import { markdownTable } from 'markdown-table';
+import { renderFiles } from '../make-project/render-default.js';
+import { astroBin } from './_util.js';
+
+const port = 4322;
+
+export const defaultProject = 'render-default';
+
+/** @typedef {{ avg: number, stdev: number, max: number }} Stat */
+
+/**
+ * @param {URL} projectDir
+ * @param {URL} outputFile
+ */
+export async function run(projectDir, outputFile) {
+	const root = fileURLToPath(projectDir);
+
+	console.log('Building...');
+	await execaCommand(`${astroBin} build`, {
+		cwd: root,
+		stdio: 'inherit',
+	});
+
+	console.log('Previewing...');
+	const previewProcess = execaCommand(`${astroBin} preview --port ${port}`, {
+		cwd: root,
+		stdio: 'inherit',
+	});
+
+	console.log('Waiting for server ready...');
+	await waitUntilBusy(port, { timeout: 5000 });
+
+	console.log('Running benchmark...');
+	const result = await benchmarkRenderTime();
+
+	console.log('Killing server...');
+	if (!previewProcess.kill('SIGTERM')) {
+		console.warn('Failed to kill server process id:', previewProcess.pid);
+	}
+
+	console.log('Writing results to', fileURLToPath(outputFile));
+	await fs.writeFile(outputFile, JSON.stringify(result, null, 2));
+
+	console.log('Result preview:');
+	console.log('='.repeat(10));
+	console.log(`#### Render\n\n`);
+	console.log(printResult(result));
+	console.log('='.repeat(10));
+
+	console.log('Done!');
+}
+
+async function benchmarkRenderTime() {
+	/** @type {Record<string, number[]>} */
+	const result = {};
+	for (const fileName of Object.keys(renderFiles)) {
+		// Render each file 100 times and push to an array
+		for (let i = 0; i < 100; i++) {
+			const pathname = '/' + fileName.slice(0, -path.extname(fileName).length);
+			const renderTime = await fetchRenderTime(`http://localhost:${port}${pathname}`);
+			if (!result[pathname]) result[pathname] = [];
+			result[pathname].push(renderTime);
+		}
+	}
+	/** @type {Record<string, Stat>} */
+	const processedResult = {};
+	for (const [pathname, times] of Object.entries(result)) {
+		// From the 100 results, calculate average, standard deviation, and max value
+		const avg = times.reduce((a, b) => a + b, 0) / times.length;
+		const stdev = Math.sqrt(
+			times.map((x) => Math.pow(x - avg, 2)).reduce((a, b) => a + b, 0) / times.length
+		);
+		const max = Math.max(...times);
+		processedResult[pathname] = { avg, stdev, max };
+	}
+	return processedResult;
+}
+
+/**
+ * @param {Record<string, Stat>} result
+ */
+function printResult(result) {
+	return markdownTable(
+		[
+			['Page', 'Avg (ms)', 'Stdev (ms)', 'Max (ms)'],
+			...Object.entries(result).map(([pathname, { avg, stdev, max }]) => [
+				pathname,
+				avg.toFixed(2),
+				stdev.toFixed(2),
+				max.toFixed(2),
+			]),
+		],
+		{
+			align: ['l', 'r', 'r', 'r'],
+		}
+	);
+}
+
+/**
+ * Simple fetch utility to get the render time sent by `@astrojs/timer` in plain text
+ * @param {string} url
+ * @returns {Promise<number>}
+ */
+function fetchRenderTime(url) {
+	return new Promise((resolve, reject) => {
+		const req = http.request(url, (res) => {
+			res.setEncoding('utf8');
+			let data = '';
+			res.on('data', (chunk) => (data += chunk));
+			res.on('error', (e) => reject(e));
+			res.on('end', () => resolve(+data));
+		});
+		req.on('error', (e) => reject(e));
+		req.end();
+	});
+}

benchmark/index.js

@@ -12,6 +12,7 @@ astro-benchmark <command> [options]
 Command
   [empty]         Run all benchmarks
   memory          Run build memory and speed test
+  render          Run rendering speed test
   server-stress   Run server stress test
 
 Options
@@ -24,6 +25,7 @@ Options
 const commandName = args._[0];
 const benchmarks = {
 	memory: () => import('./bench/memory.js'),
+	render: () => import('./bench/render.js'),
 	'server-stress': () => import('./bench/server-stress.js'),
 };
 

benchmark/make-project/render-default.js

@@ -0,0 +1,87 @@
+import fs from 'fs/promises';
+import { loremIpsumHtml, loremIpsumMd } from './_util.js';
+
+// Map of files to be generated and tested for rendering.
+// Ideally each content should be similar for comparison.
+export const renderFiles = {
+	'astro.astro': `\
+---
+const className = "text-red-500";
+const style = { color: "red" };
+const items = Array.from({ length: 1000 }, (_, i) => i);
+---
+
+<html>
+  <head>
+    <title>My Site</title>
+  </head>
+  <body>
+    <h1 class={className + ' text-lg'}>List</h1>
+    <ul style={style}>
+      {items.map((item) => (
+        <li class={className}>{item}</li>
+      ))}
+    </ul>
+    ${Array.from({ length: 1000 })
+			.map(() => `<p>${loremIpsumHtml}</p>`)
+			.join('\n')}
+  </body>
+</html>`,
+	'md.md': `\
+# List
+
+${Array.from({ length: 1000 }, (_, i) => i)
+	.map((v) => `- ${v}`)
+	.join('\n')}
+
+${Array.from({ length: 1000 })
+	.map(() => loremIpsumMd)
+	.join('\n\n')}
+`,
+	'mdx.mdx': `\
+export const className = "text-red-500";
+export const style = { color: "red" };
+export const items = Array.from({ length: 1000 }, (_, i) => i);
+
+# List
+
+<ul style={style}>
+  {items.map((item) => (
+    <li class={className}>{item}</li>
+  ))}
+</ul>
+
+${Array.from({ length: 1000 })
+	.map(() => loremIpsumMd)
+	.join('\n\n')}
+`,
+};
+
+/**
+ * @param {URL} projectDir
+ */
+export async function run(projectDir) {
+	await fs.rm(projectDir, { recursive: true, force: true });
+	await fs.mkdir(new URL('./src/pages', projectDir), { recursive: true });
+
+	await Promise.all(
+		Object.entries(renderFiles).map(([name, content]) => {
+			return fs.writeFile(new URL(`./src/pages/${name}`, projectDir), content, 'utf-8');
+		})
+	);
+
+	await fs.writeFile(
+		new URL('./astro.config.js', projectDir),
+		`\
+import { defineConfig } from 'astro/config';
+import timer from '@astrojs/timer';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [mdx()],
+	output: 'server',
+	adapter: timer(),
+});`,
+		'utf-8'
+	);
+}

benchmark/package.json

@@ -7,7 +7,9 @@
     "astro-benchmark": "./index.js"
   },
   "dependencies": {
+    "@astrojs/mdx": "workspace:*",
     "@astrojs/node": "workspace:*",
+    "@astrojs/timer": "workspace:*",
     "astro": "workspace:*",
     "autocannon": "^7.10.0",
     "execa": "^6.1.0",

examples/basics/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17"
+    "astro": "^2.0.18"
   }
 }

examples/blog/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "@astrojs/mdx": "^0.17.2",
     "@astrojs/rss": "^2.1.1",
     "@astrojs/sitemap": "^1.1.0"

examples/component/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^2.0.17"
+    "astro": "^2.0.18"
   },
   "peerDependencies": {
     "astro": "^2.0.0-beta.0"

examples/deno/package.json

@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17"
+    "astro": "^2.0.18"
   },
   "devDependencies": {
     "@astrojs/deno": "^4.0.2"

examples/docs/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "preact": "^10.7.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

examples/framework-alpine/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "alpinejs": "^3.10.2",
     "@astrojs/alpinejs": "^0.1.3",
     "@types/alpinejs": "^3.7.0"

examples/framework-lit/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "lit": "^2.2.5",
     "@astrojs/lit": "^1.2.1",
     "@webcomponents/template-shadowroot": "^0.1.0"

examples/framework-multiple/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "preact": "^10.7.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

examples/framework-preact/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "preact": "^10.7.3",
     "@astrojs/preact": "^2.0.3",
     "@preact/signals": "^1.1.0"

examples/framework-react/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "@astrojs/react": "^2.0.2",

examples/framework-solid/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "solid-js": "^1.4.3",
     "@astrojs/solid-js": "^2.0.2"
   }

examples/framework-svelte/package.json

@@ -13,6 +13,6 @@
   "dependencies": {
     "svelte": "^3.48.0",
     "@astrojs/svelte": "^2.0.2",
-    "astro": "^2.0.17"
+    "astro": "^2.0.18"
   }
 }

examples/framework-vue/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.17",
+    "astro": "^2.0.18",
     "vue": "^3.2.37",
     "@astrojs/vue": "^2.0.1"
   }