diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index 67f297444..4baf8e972 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -40,11 +40,13 @@ const {
 				{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
 				<h1 class="title">{title}</h1>
 				{pubDate && <time>{pubDate}</time>}
-				{updatedDate && (
-					<div>
-						Last updated on <time>{updatedDate}</time>
-					</div>
-				)}
+				{
+					updatedDate && (
+						<div>
+							Last updated on <time>{updatedDate}</time>
+						</div>
+					)
+				}
 				<hr />
 				<slot />
 			</article>
diff --git a/examples/blog/src/pages/blog.astro b/examples/blog/src/pages/blog.astro
index c50cc0528..cedf505b0 100644
--- a/examples/blog/src/pages/blog.astro
+++ b/examples/blog/src/pages/blog.astro
@@ -37,18 +37,20 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
 		<main>
 			<section>
 				<ul>
-					{posts.map((post) => (
-						<li>
-							<time datetime={post.frontmatter.pubDate}>
-								{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
-									year: 'numeric',
-									month: 'short',
-									day: 'numeric',
-								})}
-							</time>
-							<a href={post.url}>{post.frontmatter.title}</a>
-						</li>
-					))}
+					{
+						posts.map((post) => (
+							<li>
+								<time datetime={post.frontmatter.pubDate}>
+									{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
+										year: 'numeric',
+										month: 'short',
+										day: 'numeric',
+									})}
+								</time>
+								<a href={post.url}>{post.frontmatter.title}</a>
+							</li>
+						))
+					}
 				</ul>
 			</section>
 		</main>
diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro
index 5926936d6..b75589f5a 100644
--- a/examples/docs/src/components/Footer/AvatarList.astro
+++ b/examples/docs/src/components/Footer/AvatarList.astro
@@ -72,27 +72,31 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
 <div class="contributors">
 	<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
-		{recentContributors.map((item) => (
-			<li>
-				<a href={`https://github.com/${item.login}`}>
-					<img
-						alt={`Contributor ${item.login}`}
-						title={`Contributor ${item.login}`}
-						width="64"
-						height="64"
-						src={`https://avatars.githubusercontent.com/u/${item.id}`}
-					/>
-				</a>
-			</li>
-		))}
+		{
+			recentContributors.map((item) => (
+				<li>
+					<a href={`https://github.com/${item.login}`}>
+						<img
+							alt={`Contributor ${item.login}`}
+							title={`Contributor ${item.login}`}
+							width="64"
+							height="64"
+							src={`https://avatars.githubusercontent.com/u/${item.id}`}
+						/>
+					</a>
+				</li>
+			))
+		}
 	</ul>
-	{additionalContributors > 0 && (
-		<span>
-			<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
-				additionalContributors > 1 ? 's' : ''
-			}.`}</a>
-		</span>
-	)}
+	{
+		additionalContributors > 0 && (
+			<span>
+				<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
+					additionalContributors > 1 ? 's' : ''
+				}.`}</a>
+			</span>
+		)
+	}
 	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
 </div>
 
diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro
index 3551e5489..d77e4a90c 100644
--- a/examples/docs/src/components/HeadCommon.astro
+++ b/examples/docs/src/components/HeadCommon.astro
@@ -21,9 +21,7 @@ import '../styles/index.css';
 />
 
 <!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline>
-
-</script>
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
index 33af79463..33433f5be 100644
--- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -16,25 +16,27 @@ const sidebar = SIDEBAR[langCode];
 
 <nav aria-labelledby="grid-left">
 	<ul class="nav-groups">
-		{Object.entries(sidebar).map(([header, children]) => (
-			<li>
-				<div class="nav-group">
-					<h2>{header}</h2>
-					<ul>
-						{children.map((child) => {
-							const url = Astro.site?.pathname + child.link;
-							return (
-								<li class="nav-link">
-									<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
-										{child.text}
-									</a>
-								</li>
-							);
-						})}
-					</ul>
-				</div>
-			</li>
-		))}
+		{
+			Object.entries(sidebar).map(([header, children]) => (
+				<li>
+					<div class="nav-group">
+						<h2>{header}</h2>
+						<ul>
+							{children.map((child) => {
+								const url = Astro.site?.pathname + child.link;
+								return (
+									<li class="nav-link">
+										<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+											{child.text}
+										</a>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				</li>
+			))
+		}
 	</ul>
 </nav>
 
diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro
index 8fcbfa567..655f8eac1 100644
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro
@@ -12,54 +12,58 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
 
 {showMoreSection && <h2 class="heading">More</h2>}
 <ul>
-	{editHref && (
-		<li class={`heading-link depth-2`}>
-			<a class="edit-on-github" href={editHref} target="_blank">
-				<svg
-					aria-hidden="true"
-					focusable="false"
-					data-prefix="fas"
-					data-icon="pen"
-					class="svg-inline--fa fa-pen fa-w-16"
-					role="img"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 512 512"
-					height="1em"
-					width="1em"
-				>
-					<path
-						fill="currentColor"
-						d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
-					/>
-				</svg>
-				<span>Edit this page</span>
-			</a>
-		</li>
-	)}
-	{CONFIG.COMMUNITY_INVITE_URL && (
-		<li class={`heading-link depth-2`}>
-			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
-				<svg
-					aria-hidden="true"
-					focusable="false"
-					data-prefix="fas"
-					data-icon="comment-alt"
-					class="svg-inline--fa fa-comment-alt fa-w-16"
-					role="img"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 512 512"
-					height="1em"
-					width="1em"
-				>
-					<path
-						fill="currentColor"
-						d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-					/>
-				</svg>
-				<span>Join our community</span>
-			</a>
-		</li>
-	)}
+	{
+		editHref && (
+			<li class={`heading-link depth-2`}>
+				<a class="edit-on-github" href={editHref} target="_blank">
+					<svg
+						aria-hidden="true"
+						focusable="false"
+						data-prefix="fas"
+						data-icon="pen"
+						class="svg-inline--fa fa-pen fa-w-16"
+						role="img"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 512 512"
+						height="1em"
+						width="1em"
+					>
+						<path
+							fill="currentColor"
+							d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+						/>
+					</svg>
+					<span>Edit this page</span>
+				</a>
+			</li>
+		)
+	}
+	{
+		CONFIG.COMMUNITY_INVITE_URL && (
+			<li class={`heading-link depth-2`}>
+				<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
+					<svg
+						aria-hidden="true"
+						focusable="false"
+						data-prefix="fas"
+						data-icon="comment-alt"
+						class="svg-inline--fa fa-comment-alt fa-w-16"
+						role="img"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 512 512"
+						height="1em"
+						width="1em"
+					>
+						<path
+							fill="currentColor"
+							d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+						/>
+					</svg>
+					<span>Join our community</span>
+				</a>
+			</li>
+		)
+	}
 </ul>
 <div style="margin: 2rem 0; text-align: center;">
 	<ThemeToggleButton client:visible />
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
index d193842a0..55d051cc0 100644
--- a/examples/framework-lit/src/pages/index.astro
+++ b/examples/framework-lit/src/pages/index.astro
@@ -20,10 +20,12 @@ import { MyCounter } from '../components/my-counter.js';
 		<MyCounter client:load />
 		<Lorem />
 
-		{/**
-		 * Our VS Code extension does not currently properly typecheck attributes on Lit components
-		 * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro!
-		 * @ts-expect-error */}
+		{
+			/**
+			 * Our VS Code extension does not currently properly typecheck attributes on Lit components
+			 * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro!
+			 * @ts-expect-error */
+		}
 		<CalcAdd num={0} />
 	</body>
 </html>
diff --git a/examples/hackernews/src/components/Comment.astro b/examples/hackernews/src/components/Comment.astro
index 50fa3e9e4..8327e666c 100644
--- a/examples/hackernews/src/components/Comment.astro
+++ b/examples/hackernews/src/components/Comment.astro
@@ -16,7 +16,7 @@ const { comment } = Astro.props;
 		<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
 		{comment.time_ago} ago
 	</div>
-	<div class="text" set:html={comment.content}></div>
+	<div class="text" set:html={comment.content} />
 	<Show when={comment.comments.length}>
 		<Toggle open>
 			<For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For>
diff --git a/examples/hackernews/src/components/For.astro b/examples/hackernews/src/components/For.astro
index b784f8f8a..885c22a65 100644
--- a/examples/hackernews/src/components/For.astro
+++ b/examples/hackernews/src/components/For.astro
@@ -8,13 +8,15 @@ export interface Props<T> {
 const { each } = Astro.props;
 ---
 
-{(async function* () {
-	for await (const value of each) {
-		let html = await Astro.slots.render('default', [value]);
-		yield <Fragment set:html={html} />;
-		yield '\n';
-	}
-})()}
+{
+	(async function* () {
+		for await (const value of each) {
+			let html = await Astro.slots.render('default', [value]);
+			yield <Fragment set:html={html} />;
+			yield '\n';
+		}
+	})()
+}
 
 <Show when={!each.length}>
 	<slot name="fallback" />
diff --git a/examples/hackernews/src/components/Nav.astro b/examples/hackernews/src/components/Nav.astro
index 10bf0f899..7eeba2865 100644
--- a/examples/hackernews/src/components/Nav.astro
+++ b/examples/hackernews/src/components/Nav.astro
@@ -15,11 +15,13 @@ const links: Link[] = [
 
 <header>
 	<nav aria-label="Main menu">
-		{links.map(({ href, text }) => (
-			<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
-				<strong>{text}</strong>
-			</a>
-		))}
+		{
+			links.map(({ href, text }) => (
+				<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
+					<strong>{text}</strong>
+				</a>
+			))
+		}
 		<a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer">
 			Built with Astro
 		</a>
diff --git a/examples/hackernews/src/pages/users/[id].astro b/examples/hackernews/src/pages/users/[id].astro
index 9b43c6958..e56085992 100644
--- a/examples/hackernews/src/pages/users/[id].astro
+++ b/examples/hackernews/src/pages/users/[id].astro
@@ -25,7 +25,7 @@ const user = (await fetchAPI(`user/${id}`)) as IUser;
 						{user.karma}
 					</li>
 					<Show when={user.about}>
-						<li set:html={user.about} class="about"></li>{' '}
+						<li set:html={user.about} class="about" />{' '}
 					</Show>
 				</ul>
 				<p>
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro
index 4a4b55e7d..4dafd0e6a 100644
--- a/examples/portfolio/src/components/PortfolioPreview.astro
+++ b/examples/portfolio/src/components/PortfolioPreview.astro
@@ -17,11 +17,13 @@ const { frontmatter, url } = Astro.props.project;
 		<p class="desc">{frontmatter.description}</p>
 		<div class="tags">
 			Tagged:
-			{frontmatter.tags.map((t) => (
-				<div class="tag" data-tag={t}>
-					{t}
-				</div>
-			))}
+			{
+				frontmatter.tags.map((t) => (
+					<div class="tag" data-tag={t}>
+						{t}
+					</div>
+				))
+			}
 		</div>
 		<a class="link" href={url}>
 			<span class="linkInner">View</span>
diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro
index 96b6ea581..14e6e1d8c 100644
--- a/examples/ssr/src/components/ProductListing.astro
+++ b/examples/ssr/src/components/ProductListing.astro
@@ -52,17 +52,19 @@ const { products } = Astro.props;
 </style>
 <slot name="title" />
 <ul>
-	{products.map((product) => (
-		<li class="product">
-			<a href={`/products/${product.id}`}>
-				<figure>
-					<img src={product.image} />
-					<figcaption>
-						<div class="name">{product.name}</div>
-						<div class="price">${product.price}</div>
-					</figcaption>
-				</figure>
-			</a>
-		</li>
-	))}
+	{
+		products.map((product) => (
+			<li class="product">
+				<a href={`/products/${product.id}`}>
+					<figure>
+						<img src={product.image} />
+						<figcaption>
+							<div class="name">{product.name}</div>
+							<div class="price">${product.price}</div>
+						</figcaption>
+					</figure>
+				</a>
+			</li>
+		))
+	}
 </ul>
diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro
index 524732d04..707027763 100644
--- a/examples/ssr/src/components/TextDecorationSkip.astro
+++ b/examples/ssr/src/components/TextDecorationSkip.astro
@@ -13,9 +13,11 @@ const last = words.length - 1;
 		text-decoration: underline;
 	}
 </style>
-{words.map((word, i) => (
-	<Fragment>
-		<span>{word}</span>
-		{i !== last && <Fragment>&#32;</Fragment>}
-	</Fragment>
-))}
+{
+	words.map((word, i) => (
+		<Fragment>
+			<span>{word}</span>
+			{i !== last && <Fragment>&#32;</Fragment>}
+		</Fragment>
+	))
+}
diff --git a/examples/ssr/src/pages/cart.astro b/examples/ssr/src/pages/cart.astro
index d153e3ea9..ebc2f1472 100644
--- a/examples/ssr/src/pages/cart.astro
+++ b/examples/ssr/src/pages/cart.astro
@@ -36,12 +36,14 @@ const cart = await getCart(Astro.request);
 					</tr>
 				</thead>
 				<tbody>
-					{cart.items.map((item) => (
-						<tr>
-							<td>{item.name}</td>
-							<td>{item.count}</td>
-						</tr>
-					))}
+					{
+						cart.items.map((item) => (
+							<tr>
+								<td>{item.name}</td>
+								<td>{item.count}</td>
+							</tr>
+						))
+					}
 				</tbody>
 			</table>
 		</Container>
diff --git a/examples/with-vite-plugin-pwa/src/pages/index.astro b/examples/with-vite-plugin-pwa/src/pages/index.astro
index af2303f57..28af70e3b 100644
--- a/examples/with-vite-plugin-pwa/src/pages/index.astro
+++ b/examples/with-vite-plugin-pwa/src/pages/index.astro
@@ -12,8 +12,6 @@
 
 	<body>
 		<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
-		<script src="/src/index.ts">
-
-		</script>
+		<script src="/src/index.ts"></script>
 	</body>
 </html>
diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md
index 1885c650b..3fe64f0e4 100644
--- a/packages/astro/CHANGELOG.md
+++ b/packages/astro/CHANGELOG.md
@@ -501,7 +501,7 @@
   This expands the abilities of `set:html` to ultimate service this use-case:
 
   ```astro
-  <div set:html={fetch('/legacy-post.html')}></div>
+  <div set:html={fetch('/legacy-post.html')} />
   ```
 
   This means you can take a legacy app that has been statically generated to HTML and directly consume that HTML within your templates. As is always the case with `set:html`, this should only be used on trusted content.
@@ -514,8 +514,7 @@
       set:html={new Response('<span>Hello world</span>', {
         headers: { 'content-type': 'text/html' },
       })}
-    >
-    </div>
+    />
     ```
   - `ReadableStream`s:
     ```astro
@@ -526,8 +525,7 @@
           controller.close();
         },
       })}
-    >
-    </div>
+    />
     ```
   - `AsyncIterable`s:
     ```astro
@@ -537,8 +535,7 @@
           yield `<li>${num}</li>`;
         }
       })()}
-    >
-    </div>
+    />
     ```
   - `Iterable`s (non-async):
     ```astro
@@ -548,8 +545,7 @@
           yield `<li>${num}</li>`;
         }
       })()}
-    >
-    </div>
+    />
     ```
 
 ### Patch Changes