feat: add preact-ssr-prepass

.changeset/cold-llamas-laugh.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/preact": patch
+---
+
+Allows rendering lazy components

examples/framework-preact-lazy/.codesandbox/Dockerfile

@@ -0,0 +1 @@
+FROM node:18-bullseye

examples/framework-preact-lazy/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/framework-preact-lazy/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/framework-preact-lazy/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/framework-preact-lazy/README.md

@@ -0,0 +1,13 @@
+# Astro + Preact Example
+
+```sh
+npm create astro@latest -- --template framework-preact-lazy
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-preact-lazy)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-preact-lazy)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-preact-lazy/devcontainer.json)
+
+This example showcases Astro working with [Preact](https://preactjs.com).
+
+Write your Preact components as `.jsx` or `.tsx` files in your project.

examples/framework-preact-lazy/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	// Enable Preact to support Preact JSX components.
+	integrations: [preact({compat: true})],
+});

examples/framework-preact-lazy/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@example/framework-preact-lazy",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/preact": "^3.0.1",
+    "@preact/signals": "^1.2.1",
+    "astro": "^3.6.0",
+    "preact": "^10.17.1"
+  }
+}

examples/framework-preact-lazy/src/components/Counter.css

@@ -0,0 +1,7 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}

examples/framework-preact-lazy/src/components/Counter.tsx

@@ -0,0 +1,27 @@
+import { h, Fragment } from 'preact';
+import { Suspense, lazy } from 'preact/compat';
+import './Counter.css';
+
+const LazyMessage = lazy(() => import('./Message'));
+const LazyNumberValue = lazy(() => import('./NumberValue'));
+const Fallback = () => <p>i'm loader, which nobody should see</p>;
+
+export default function Counter({ children, count }) {
+	const add = () => count.value++;
+	const subtract = () => count.value--;
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract}>-</button>
+				<Suspense fallback={Fallback}>
+					<LazyNumberValue>{count}</LazyNumberValue>
+				</Suspense>
+				<button onClick={add}>+</button>
+			</div>
+			<Suspense fallback={Fallback}>
+				<LazyMessage>{children}</LazyMessage>
+			</Suspense>
+		</>
+	);
+}

examples/framework-preact-lazy/src/components/Message.css

@@ -0,0 +1,3 @@
+.message {
+	text-align: center;
+}

examples/framework-preact-lazy/src/components/Message.tsx

@@ -0,0 +1,5 @@
+import './Message.css';
+
+export default function Message({ children }) {
+	return <div class="message">{children}</div>;
+}

examples/framework-preact-lazy/src/components/NumberValue.tsx

@@ -0,0 +1,3 @@
+export default function NumberValue({ children }) {
+	return <pre>{children}</pre>;
+}

examples/framework-preact-lazy/src/pages/index.astro

@@ -0,0 +1,41 @@
+---
+// Component Imports
+import Counter from '../components/Counter';
+
+import { signal } from '@preact/signals';
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+const count = signal(0);
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<style>
+			html,
+			body {
+				font-family: system-ui;
+				margin: 0;
+			}
+			body {
+				padding: 2rem;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<Counter count={count} client:visible>
+				<h1>Hello, Preact 1!</h1>
+			</Counter>
+
+			<Counter count={count} client:visible>
+				<h1>Hello, Preact 2!</h1>
+			</Counter>
+		</main>
+	</body>
+</html>

examples/framework-preact-lazy/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    // Preact specific settings
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}

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()],
+});

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"
+  }
+}

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;
+}

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>
+		</>
+	);
+}

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

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>
+}

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>

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>

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" />

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',
+	});
+});

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:*",