1 files changed, 57 insertions, 12 deletions
diff --git a/benchmark/make-project/render-default.js b/benchmark/make-project/render-default.js
index 3a01dcc47..36936513c 100644
--- a/benchmark/make-project/render-default.js
+++ b/benchmark/make-project/render-default.js
@@ -3,31 +3,68 @@ 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 renderFiles = {
+	'components/ListItem.astro': `\
 ---
+const { className, item, attrs } = Astro.props;
+const nested = item !== 0;
+---
+		<li class={className}>
+			<a
+				href={item}
+				aria-current={item === 0}
+				class:list={[{ large: !nested }, className]}
+				{...attrs}
+			>
+				<span>{item}</span>
+			</a>
+		</li>
+	`,
+	'components/Sublist.astro': `\
+---
+import ListItem from '../components/ListItem.astro';
+const { items } = Astro.props;
 const className = "text-red-500";
 const style = { color: "red" };
-const items = Array.from({ length: 1000 }, (_, i) => i);
 ---
-
+<ul style={style}>
+{items.map((item) => (
+	<ListItem className={className} item={item} attrs={{}} />
+))}
+</ul>
+	`,
+	'pages/astro.astro': `\
+---
+const className = "text-red-500";
+const style = { color: "red" };
+const items = Array.from({ length: 10000 }, (_, 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>
+		<ul style={style}>
+		{items.map((item) => (
+			<li class={className}>
+				<a
+					href={item.i}
+					aria-current={item.i === 0}
+					class:list={[{ large: item.i === 0 }, className]}
+					{...({})}
+				>
+					<span>{item.i}</span>
+				</a>
+			</li>
+		))}
+		</ul>
     ${Array.from({ length: 1000 })
 			.map(() => `<p>${loremIpsumHtml}</p>`)
 			.join('\n')}
   </body>
 </html>`,
-	'md.md': `\
+	'pages/md.md': `\
 # List
 
 ${Array.from({ length: 1000 }, (_, i) => i)
@@ -38,7 +75,7 @@ ${Array.from({ length: 1000 })
 	.map(() => loremIpsumMd)
 	.join('\n\n')}
 `,
-	'mdx.mdx': `\
+	'pages/mdx.mdx': `\
 export const className = "text-red-500";
 export const style = { color: "red" };
 export const items = Array.from({ length: 1000 }, (_, i) => i);
@@ -57,16 +94,24 @@ ${Array.from({ length: 1000 })
 `,
 };
 
+export const renderPages = [];
+for(const file of Object.keys(renderFiles)) {
+	if(file.startsWith('pages/')) {
+		renderPages.push(file.replace('pages/', ''));
+	}
+}
+
 /**
  * @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 fs.mkdir(new URL('./src/components', projectDir), { recursive: true });
 
 	await Promise.all(
 		Object.entries(renderFiles).map(([name, content]) => {
-			return fs.writeFile(new URL(`./src/pages/${name}`, projectDir), content, 'utf-8');
+			return fs.writeFile(new URL(`./src/${name}`, projectDir), content, 'utf-8');
 		})
 	);