From 3e200db434fb02f048266fd50e6deb29c9b2322c Mon Sep 17 00:00:00 2001
From: aleksandrjet <aleksandrjet@gmail.com>
Date: Tue, 2 Jan 2024 21:41:38 +0800
Subject: [PATCH 1/6] feat: add preact-ssr-prepass

---
 .changeset/blue-bobcats-remain.md             |   5 +
 .../src/components/Counter.css                |   4 -
 .../src/components/Counter.tsx                |   8 +-
 .../src/components/Message.css                |   3 +
 .../src/components/Message.tsx                |   5 +
 .../preact-lazy-component/astro.config.mjs    |   8 ++
 .../preact-lazy-component/package.json        |  11 ++
 .../src/components/Counter.css                |  11 ++
 .../src/components/Counter.jsx                |  25 ++++
 .../src/components/CounterMessage.jsx         |   5 +
 .../src/components/JSXComponent.jsx           |   5 +
 .../src/components/Layout.astro               |   4 +
 .../src/pages/index.astro                     |  37 ++++++
 .../preact-lazy-component/src/pages/mdx.mdx   |  29 +++++
 .../astro/e2e/preact-lazy-component.test.js   |  24 ++++
 packages/integrations/preact/package.json     |   3 +-
 packages/integrations/preact/src/server.ts    |  37 +++---
 pnpm-lock.yaml                                | 118 +++++++++++-------
 18 files changed, 271 insertions(+), 71 deletions(-)
 create mode 100644 .changeset/blue-bobcats-remain.md
 create mode 100644 examples/framework-preact/src/components/Message.css
 create mode 100644 examples/framework-preact/src/components/Message.tsx
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/package.json
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/components/CounterMessage.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/components/JSXComponent.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/components/Layout.astro
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/pages/index.astro
 create mode 100644 packages/astro/e2e/fixtures/preact-lazy-component/src/pages/mdx.mdx
 create mode 100644 packages/astro/e2e/preact-lazy-component.test.js

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
new file mode 100644
index 000000000000..2979bfc1c6b8
--- /dev/null
+++ b/.changeset/blue-bobcats-remain.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/preact": minor
+---
+
+Allows rendering lazy components
diff --git a/examples/framework-preact/src/components/Counter.css b/examples/framework-preact/src/components/Counter.css
index fb21044d78cc..656b19d42ba1 100644
--- a/examples/framework-preact/src/components/Counter.css
+++ b/examples/framework-preact/src/components/Counter.css
@@ -5,7 +5,3 @@
 	margin-top: 2em;
 	place-items: center;
 }
-
-.counter-message {
-	text-align: center;
-}
diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx
index 5d702fb42ed9..f7db88c6d01a 100644
--- a/examples/framework-preact/src/components/Counter.tsx
+++ b/examples/framework-preact/src/components/Counter.tsx
@@ -1,6 +1,10 @@
 import { h, Fragment } from 'preact';
+import { lazy, Suspense } from 'preact/compat';
 import './Counter.css';
 
+const Message = lazy(async () => import('./Message'));
+const Fallback = () => <p>Loading...</p>;
+
 export default function Counter({ children, count }) {
 	const add = () => count.value++;
 	const subtract = () => count.value--;
@@ -12,7 +16,9 @@ export default function Counter({ children, count }) {
 				<pre>{count}</pre>
 				<button onClick={add}>+</button>
 			</div>
-			<div class="counter-message">{children}</div>
+			<Suspense fallback={Fallback}>
+				<Message>{children}</Message>
+			</Suspense>
 		</>
 	);
 }
diff --git a/examples/framework-preact/src/components/Message.css b/examples/framework-preact/src/components/Message.css
new file mode 100644
index 000000000000..71ffc2c310d6
--- /dev/null
+++ b/examples/framework-preact/src/components/Message.css
@@ -0,0 +1,3 @@
+.message {
+	text-align: center;
+}
diff --git a/examples/framework-preact/src/components/Message.tsx b/examples/framework-preact/src/components/Message.tsx
new file mode 100644
index 000000000000..2ae48d04b0e3
--- /dev/null
+++ b/examples/framework-preact/src/components/Message.tsx
@@ -0,0 +1,5 @@
+import './Message.css';
+
+export default function Message({ children }) {
+	return <div class="message">{children}</div>;
+}
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/astro.config.mjs b/packages/astro/e2e/fixtures/preact-lazy-component/astro.config.mjs
new file mode 100644
index 000000000000..7a8aef52144b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import mdx from '@astrojs/mdx';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [preact(), mdx()],
+});
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/package.json b/packages/astro/e2e/fixtures/preact-lazy-component/package.json
new file mode 100644
index 000000000000..173c71662538
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/preact-lazy-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.15.1"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.css b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.css
new file mode 100644
index 000000000000..fb21044d78cc
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.css
@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.jsx b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.jsx
new file mode 100644
index 000000000000..8b2a938ff718
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Counter.jsx
@@ -0,0 +1,25 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import { Suspense, lazy } from 'preact/compat';
+import './Counter.css';
+
+const LazyCounterMessage = lazy(() => import('./CounterMessage'))
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<Suspense fallback={<p>Load message...</p>}>
+				<LazyCounterMessage className="counter-message">{children}</LazyCounterMessage>
+			</Suspense>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/components/CounterMessage.jsx b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/CounterMessage.jsx
new file mode 100644
index 000000000000..376f4682fb16
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/CounterMessage.jsx
@@ -0,0 +1,5 @@
+const CounterMessage = (props) => {
+  return <div className={props.className}>{props.children}</div>
+}
+
+export default CounterMessage
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/JSXComponent.jsx
new file mode 100644
index 000000000000..16b98f6d4184
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/JSXComponent.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function({ id }) {
+	return <div id={id}>Framework client:only component</div>
+}
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Layout.astro b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Layout.astro
new file mode 100644
index 000000000000..3c3cf4e4de03
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/components/Layout.astro
@@ -0,0 +1,4 @@
+<html>
+	<head><title>Preact component</title></head>
+	<body><slot></slot></body>
+</html>
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/index.astro b/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/index.astro
new file mode 100644
index 000000000000..2fe26a5753ce
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/index.astro
@@ -0,0 +1,37 @@
+---
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
+		<Counter id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</Counter>
+
+		<Counter id="client-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="client-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+		<Counter id="client-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
+		<PreactComponent id="client-only" client:only="preact" />
+	</body>
+</html>
diff --git a/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/mdx.mdx b/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/mdx.mdx
new file mode 100644
index 000000000000..0ba9615505d8
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact-lazy-component/src/pages/mdx.mdx
@@ -0,0 +1,29 @@
+export { default } from '../components/Layout.astro';
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<PreactComponent id="client-only" client:only="preact" />
diff --git a/packages/astro/e2e/preact-lazy-component.test.js b/packages/astro/e2e/preact-lazy-component.test.js
new file mode 100644
index 000000000000..585d2d347345
--- /dev/null
+++ b/packages/astro/e2e/preact-lazy-component.test.js
@@ -0,0 +1,24 @@
+import { prepareTestFactory } from './shared-component-tests.js';
+
+const { test, createTests } = prepareTestFactory({ root: './fixtures/preact-lazy-component/' });
+
+const config = {
+	counterComponentFilePath: './src/components/Counter.jsx',
+	componentFilePath: './src/components/JSXComponent.jsx',
+};
+
+test.describe('Preact lazy components in Astro files', () => {
+	createTests({
+		...config,
+		pageUrl: '/',
+		pageSourceFilePath: './src/pages/index.astro',
+	});
+});
+
+test.describe('Preact lazy components in MDX files', () => {
+	createTests({
+		...config,
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.mdx',
+	});
+});
diff --git a/packages/integrations/preact/package.json b/packages/integrations/preact/package.json
index 80678b15e03e..a172152ee69c 100644
--- a/packages/integrations/preact/package.json
+++ b/packages/integrations/preact/package.json
@@ -40,7 +40,8 @@
     "@preact/preset-vite": "^2.7.0",
     "@preact/signals": "^1.2.1",
     "babel-plugin-transform-hook-names": "^1.0.2",
-    "preact-render-to-string": "^6.3.1"
+    "preact-render-to-string": "^6.3.1",
+    "preact-ssr-prepass": "^1.2.1"
   },
   "devDependencies": {
     "astro": "workspace:*",
diff --git a/packages/integrations/preact/src/server.ts b/packages/integrations/preact/src/server.ts
index bd9eda3aa348..99ed072e2f5e 100644
--- a/packages/integrations/preact/src/server.ts
+++ b/packages/integrations/preact/src/server.ts
@@ -1,5 +1,6 @@
 import type { AstroComponentMetadata } from 'astro';
 import { Component as BaseComponent, h, type VNode } from 'preact';
+import prepass from "preact-ssr-prepass";
 import { render } from 'preact-render-to-string';
 import { getContext } from './context.js';
 import { restoreSignalsOnProps, serializeSignals } from './signals.js';
@@ -11,7 +12,7 @@ const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w
 let originalConsoleError: typeof console.error;
 let consoleFilterRefs = 0;
 
-function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
+async function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
 	if (typeof Component !== 'function') return false;
 	if (Component.name === 'QwikComponent') return false;
 
@@ -23,7 +24,7 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 
 	try {
 		try {
-			const { html } = renderToStaticMarkup.call(this, Component, props, children, undefined);
+			const { html } = await renderToStaticMarkup.call(this, Component, props, children, undefined);
 			if (typeof html !== 'string') {
 				return false;
 			}
@@ -45,7 +46,7 @@ function shouldHydrate(metadata: AstroComponentMetadata | undefined) {
 	return metadata?.astroStaticSlot ? !!metadata.hydrate : true;
 }
 
-function renderToStaticMarkup(
+async function renderToStaticMarkup(
 	this: RendererContext,
 	Component: any,
 	props: Record<string, any>,
@@ -72,22 +73,20 @@ function renderToStaticMarkup(
 	const attrs: AstroPreactAttrs = {};
 	serializeSignals(ctx, props, attrs, propsMap);
 
-	const html = render(
-		h(
-			Component,
-			newProps,
-			children != null
-				? h(StaticHtml, {
-						hydrate: shouldHydrate(metadata),
-						value: children,
-					})
-				: children
-		) as VNode<any>
-	);
-	return {
-		attrs,
-		html,
-	};
+	const vNode: VNode<any> = h(
+		Component,
+		newProps,
+		children != null
+			? h(StaticHtml, {
+					hydrate: shouldHydrate(metadata),
+					value: children,
+				})
+			: children
+	)
+
+	await prepass(vNode)
+	const html = render(vNode);
+	return { attrs, html };
 }
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fe84084be43..74461d6f4918 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,10 +32,10 @@ importers:
         version: 18.19.4
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.11.0
-        version: 6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)(typescript@5.2.2)
+        version: 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.2.2)
       '@typescript-eslint/parser':
         specifier: ^6.11.0
-        version: 6.16.0(eslint@8.56.0)(typescript@5.2.2)
+        version: 6.17.0(eslint@8.56.0)(typescript@5.2.2)
       esbuild:
         specifier: ^0.19.6
         version: 0.19.11
@@ -1421,6 +1421,21 @@ importers:
         specifier: ^10.19.2
         version: 10.19.3
 
+  packages/astro/e2e/fixtures/preact-lazy-component:
+    dependencies:
+      '@astrojs/mdx':
+        specifier: workspace:*
+        version: link:../../../../integrations/mdx
+      '@astrojs/preact':
+        specifier: workspace:*
+        version: link:../../../../integrations/preact
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+      preact:
+        specifier: ^10.15.1
+        version: 10.19.3
+
   packages/astro/e2e/fixtures/prefetch:
     dependencies:
       astro:
@@ -3850,7 +3865,7 @@ importers:
         version: 4.3.2
       linkedom:
         specifier: ^0.16.4
-        version: 0.16.5
+        version: 0.16.6
       mocha:
         specifier: ^10.2.0
         version: 10.2.0
@@ -4052,7 +4067,7 @@ importers:
         version: 1.0.0-rc.12
       linkedom:
         specifier: ^0.16.4
-        version: 0.16.5
+        version: 0.16.6
       mdast-util-mdx:
         specifier: ^3.0.0
         version: 3.0.0
@@ -4405,6 +4420,9 @@ importers:
       preact-render-to-string:
         specifier: ^6.3.1
         version: 6.3.1(preact@10.19.3)
+      preact-ssr-prepass:
+        specifier: ^1.2.1
+        version: 1.2.1(preact@10.19.3)
     devDependencies:
       astro:
         specifier: workspace:*
@@ -4844,7 +4862,7 @@ importers:
         version: 1.0.0-rc.12
       linkedom:
         specifier: ^0.16.4
-        version: 0.16.5
+        version: 0.16.6
       mocha:
         specifier: ^10.2.0
         version: 10.2.0
@@ -7671,8 +7689,8 @@ packages:
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==}
+  /@typescript-eslint/eslint-plugin@6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-Vih/4xLXmY7V490dGwBQJTpIZxH4ZFH6eCVmQ4RFkB+wmaCTDAx4dtgoWwMNGKLkqRY1L6rPqzEbjorRnDo4rQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -7683,11 +7701,11 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.16.0(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 6.16.0
-      '@typescript-eslint/type-utils': 6.16.0(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.16.0(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.16.0
+      '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/type-utils': 6.17.0(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.17.0
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.56.0
       graphemer: 1.4.0
@@ -7700,8 +7718,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.16.0(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==}
+  /@typescript-eslint/parser@6.17.0(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-C4bBaX2orvhK+LlwrY8oWGmSl4WolCfYm513gEccdWZj0CwGadbIADb0FtVEcI+WzUyjyoBj2JRP8g25E6IB8A==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -7710,10 +7728,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.16.0
-      '@typescript-eslint/types': 6.16.0
-      '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.16.0
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.17.0
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.56.0
       typescript: 5.2.2
@@ -7721,16 +7739,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@6.16.0:
-    resolution: {integrity: sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==}
+  /@typescript-eslint/scope-manager@6.17.0:
+    resolution: {integrity: sha512-RX7a8lwgOi7am0k17NUO0+ZmMOX4PpjLtLRgLmT1d3lBYdWH4ssBUbwdmc5pdRX8rXon8v9x8vaoOSpkHfcXGA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.16.0
-      '@typescript-eslint/visitor-keys': 6.16.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/visitor-keys': 6.17.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.16.0(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==}
+  /@typescript-eslint/type-utils@6.17.0(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-hDXcWmnbtn4P2B37ka3nil3yi3VCQO2QEB9gBiHJmQp5wmyQWqnjA85+ZcE8c4FqnaB6lBwMrPkgd4aBYz3iNg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -7739,8 +7757,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.16.0(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.2.2)
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.56.0
       ts-api-utils: 1.0.3(typescript@5.2.2)
@@ -7749,13 +7767,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@6.16.0:
-    resolution: {integrity: sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==}
+  /@typescript-eslint/types@6.17.0:
+    resolution: {integrity: sha512-qRKs9tvc3a4RBcL/9PXtKSehI/q8wuU9xYJxe97WFxnzH8NWWtcW3ffNS+EWg8uPvIerhjsEZ+rHtDqOCiH57A==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.16.0(typescript@5.2.2):
-    resolution: {integrity: sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==}
+  /@typescript-eslint/typescript-estree@6.17.0(typescript@5.2.2):
+    resolution: {integrity: sha512-gVQe+SLdNPfjlJn5VNGhlOhrXz4cajwFd5kAgWtZ9dCZf4XJf8xmgCTLIqec7aha3JwgLI2CK6GY1043FRxZwg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -7763,8 +7781,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.16.0
-      '@typescript-eslint/visitor-keys': 6.16.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/visitor-keys': 6.17.0
       debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
@@ -7776,8 +7794,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.16.0(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==}
+  /@typescript-eslint/utils@6.17.0(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-LofsSPjN/ITNkzV47hxas2JCsNCEnGhVvocfyOcLzT9c/tSZE7SfhS/iWtzP1lKNOEfLhRTZz6xqI8N2RzweSQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -7785,9 +7803,9 @@ packages:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.6
-      '@typescript-eslint/scope-manager': 6.16.0
-      '@typescript-eslint/types': 6.16.0
-      '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.2.2)
       eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -7795,11 +7813,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.16.0:
-    resolution: {integrity: sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==}
+  /@typescript-eslint/visitor-keys@6.17.0:
+    resolution: {integrity: sha512-H6VwB/k3IuIeQOyYczyyKN8wH6ed8EwliaYHLxOIhyF0dYEIsN8+Bk3GE19qafeMKyZJJHP8+O1HiFhFLUNKSg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.16.0
+      '@typescript-eslint/types': 6.17.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -11423,8 +11441,8 @@ packages:
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  /linkedom@0.16.5:
-    resolution: {integrity: sha512-FtcuLuxDtlKWWilm5Z0HgmrfMwO0tOfC6tu47fRXj2/KGEeDSh4ihiDwFKZSbJj6zh520r8XZjZ7v2Jb30HAQA==}
+  /linkedom@0.16.6:
+    resolution: {integrity: sha512-vJ8oadtJe3DM4FNW15Fj5NLIJlJk+AOypoRxzq9prLx+gAKvHYcTfV98pzOoRkwx4ZvvYzqT1bcDKluHH72apg==}
     dependencies:
       css-select: 5.1.0
       cssom: 0.5.0
@@ -13511,6 +13529,14 @@ packages:
       pretty-format: 3.8.0
     dev: false
 
+  /preact-ssr-prepass@1.2.1(preact@10.19.3):
+    resolution: {integrity: sha512-bLgbUfy8nL+PZghAPpyk9MF+cmXjdwEnxYPaJBmwbzFQqzIz8dQVBqjwB60RqZ9So/vIf6BRfHCiwFGuMCyfbQ==}
+    peerDependencies:
+      preact: '>=10 || ^10.0.0-beta.0 || ^10.0.0-alpha.0'
+    dependencies:
+      preact: 10.19.3
+    dev: false
+
   /preact@10.19.3:
     resolution: {integrity: sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==}
 
@@ -14895,8 +14921,8 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: false
 
-  /svgo@3.1.0:
-    resolution: {integrity: sha512-R5SnNA89w1dYgNv570591F66v34b3eQShpIBcQtZtM5trJwm1VvxbIoMpRYY3ybTAutcKTLEmTsdnaknOHbiQA==}
+  /svgo@3.2.0:
+    resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -15738,7 +15764,7 @@ packages:
         optional: true
     dependencies:
       '@vue/compiler-sfc': 3.4.3
-      svgo: 3.1.0
+      svgo: 3.2.0
     dev: false
 
   /vite-svg-loader@5.0.1:
@@ -15749,7 +15775,7 @@ packages:
       vue:
         optional: true
     dependencies:
-      svgo: 3.1.0
+      svgo: 3.2.0
     dev: false
 
   /vite@5.0.10(@types/node@18.19.4)(sass@1.69.6):

From 1bc88b5601663930b9e47803503720fb50589149 Mon Sep 17 00:00:00 2001
From: aleksandrjet <aleksandrjet@gmail.com>
Date: Wed, 3 Jan 2024 20:04:03 +0800
Subject: [PATCH 2/6] added more info to changelog

---
 .changeset/blue-bobcats-remain.md | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
index 2979bfc1c6b8..a6e091f7d2ff 100644
--- a/.changeset/blue-bobcats-remain.md
+++ b/.changeset/blue-bobcats-remain.md
@@ -2,4 +2,27 @@
 "@astrojs/preact": minor
 ---
 
-Allows rendering lazy components
+Allows rendering lazy components.
+
+Now you can use lazy components on your SSR. Fallback will be not displayed when component renders on the server and when hydration process too. More details about [lazy-components](https://preactjs.com/guide/v10/switching-to-preact/#suspense-experimental).
+
+``` jsx
+import { lazy, Suspense } from 'preact/compat';
+
+const BigComponent = lazy(async () => import('./Message'));
+const Fallback = () => <p>Loading...</p>;
+
+const Component = () => {
+  return (
+    <div>
+      <h1>Header</h1>
+
+      <Suspense fallback={Fallback}>
+				<BigComponent someProp="someValue">
+          {children}
+        </BigComponent>
+			</Suspense>
+    </div>
+  )
+}
+```

From f863d9a309e3d26a081274795214100b6968c1c0 Mon Sep 17 00:00:00 2001
From: aleksandrjet <aleksandrjet@gmail.com>
Date: Wed, 3 Jan 2024 20:11:14 +0800
Subject: [PATCH 3/6] fix example in changelog

---
 .changeset/blue-bobcats-remain.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
index a6e091f7d2ff..6a15e5819f41 100644
--- a/.changeset/blue-bobcats-remain.md
+++ b/.changeset/blue-bobcats-remain.md
@@ -9,7 +9,7 @@ Now you can use lazy components on your SSR. Fallback will be not displayed when
 ``` jsx
 import { lazy, Suspense } from 'preact/compat';
 
-const BigComponent = lazy(async () => import('./Message'));
+const BigComponent = lazy(async () => import('./BigComponent'));
 const Fallback = () => <p>Loading...</p>;
 
 const Component = () => {

From c4e03630095b80daa9892b4764f4094694de3857 Mon Sep 17 00:00:00 2001
From: aleksandrjet <aleksandrjet@gmail.com>
Date: Wed, 3 Jan 2024 22:16:01 +0800
Subject: [PATCH 4/6] fix changelog description

---
 .changeset/blue-bobcats-remain.md | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
index 6a15e5819f41..589a4dbb030a 100644
--- a/.changeset/blue-bobcats-remain.md
+++ b/.changeset/blue-bobcats-remain.md
@@ -4,25 +4,18 @@
 
 Allows rendering lazy components.
 
-Now you can use lazy components on your SSR. Fallback will be not displayed when component renders on the server and when hydration process too. More details about [lazy-components](https://preactjs.com/guide/v10/switching-to-preact/#suspense-experimental).
+You can now use [lazy components](https://preactjs.com/guide/v10/switching-to-preact/#suspense-experimental) with Suspense:
 
 ``` jsx
 import { lazy, Suspense } from 'preact/compat';
 
-const BigComponent = lazy(async () => import('./BigComponent'));
-const Fallback = () => <p>Loading...</p>;
+const HeavyComponent= lazy(() => import('./HeavyComponent'));
 
 const Component = () => {
-  return (
-    <div>
-      <h1>Header</h1>
-
-      <Suspense fallback={Fallback}>
-				<BigComponent someProp="someValue">
-          {children}
-        </BigComponent>
-			</Suspense>
-    </div>
-  )
-}
+	return (
+    		<Suspense fallback={<p>Loading...</p>}>
+			<HeavyComponent foo="bar" />
+		</Suspense>
+  	);
+};
 ```

From de1037eeea2328f7cf1792f923a01a33d4654eec Mon Sep 17 00:00:00 2001
From: aleksandrjet <aleksandrjet@gmail.com>
Date: Wed, 3 Jan 2024 22:17:00 +0800
Subject: [PATCH 5/6] fix tab in code of changelog

---
 .changeset/blue-bobcats-remain.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
index 589a4dbb030a..a634a63abb56 100644
--- a/.changeset/blue-bobcats-remain.md
+++ b/.changeset/blue-bobcats-remain.md
@@ -13,7 +13,7 @@ const HeavyComponent= lazy(() => import('./HeavyComponent'));
 
 const Component = () => {
 	return (
-    		<Suspense fallback={<p>Loading...</p>}>
+    <Suspense fallback={<p>Loading...</p>}>
 			<HeavyComponent foo="bar" />
 		</Suspense>
   	);

From d7f6fd602515ba46f23da58dab7ab206f5bdd110 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Wed, 3 Jan 2024 15:50:56 +0100
Subject: [PATCH 6/6] Update .changeset/blue-bobcats-remain.md

---
 .changeset/blue-bobcats-remain.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.changeset/blue-bobcats-remain.md b/.changeset/blue-bobcats-remain.md
index a634a63abb56..3562d49aefca 100644
--- a/.changeset/blue-bobcats-remain.md
+++ b/.changeset/blue-bobcats-remain.md
@@ -12,10 +12,10 @@ import { lazy, Suspense } from 'preact/compat';
 const HeavyComponent= lazy(() => import('./HeavyComponent'));
 
 const Component = () => {
-	return (
-    <Suspense fallback={<p>Loading...</p>}>
-			<HeavyComponent foo="bar" />
-		</Suspense>
-  	);
+  return (
+      <Suspense fallback={<p>Loading...</p>}>
+        <HeavyComponent foo="bar" />
+      </Suspense>
+    );
 };
 ```