withastro · bluwy · Aug 10, 2022 · Aug 4, 2022 · Aug 9, 2022 · Aug 9, 2022
diff --git a/.changeset/tall-eels-wink.md b/.changeset/tall-eels-wink.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bump Vite to 3.0.5
diff --git a/.changeset/tall-walls-visit.md b/.changeset/tall-walls-visit.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': patch
+---
+
+Fix compat support for libraries
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -138,7 +138,7 @@
     "tsconfig-resolver": "^3.0.1",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2",
-    "vite": "3.0.4",
+    "vite": "3.0.5",
     "yargs-parser": "^21.0.1",
     "zod": "^3.17.3"
   },

diff --git a/packages/astro/test/fixtures/preact-compat-component/astro.config.mjs b/packages/astro/test/fixtures/preact-compat-component/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [preact({ compat: true })],
+});
diff --git a/packages/astro/test/fixtures/preact-compat-component/package.json b/packages/astro/test/fixtures/preact-compat-component/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@test/preact-compat-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "@test/react-lib": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.10.1"
+  }
+}
diff --git a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js
@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+export function useSpecialState(initialState) {
+  return useState(initialState);
+}
diff --git a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/react-lib",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "^18.2.0"
+  }
+}
diff --git a/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx b/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx
@@ -0,0 +1,19 @@
+/** @jsxImportSource preact */
+import { useSpecialState } from '@test/react-lib'
+
+export default function Counter({ children }) {
+	const [count, setCount] = useSpecialState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract}>-</button>
+				<pre id="counter-text">{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro b/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import Counter from '../components/Counter.jsx';
+---
+
+<html>
+<head>
+  <title>Preact compat component</title>
+</head>
+<body>
+  <Counter client:load />
+</body>
+</html>
diff --git a/packages/astro/test/preact-compat-component.test.js b/packages/astro/test/preact-compat-component.test.js
@@ -0,0 +1,41 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Preact compat component', () => {
+	describe('Development', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/preact-compat-component/',
+			});
+			await fixture.startDevServer();
+		});
+
+		it('Can load Counter', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			expect($('#counter-text').text()).to.be.eq('0');
+		});
+	});
+
+	describe('Build', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/preact-compat-component/',
+			});
+			await fixture.build();
+		});
+
+		it('Can load Counter', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#counter-text').text()).to.be.eq('0');
+		});
+	});
+});
diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
@@ -78,8 +78,15 @@ function getViteConfiguration(compat?: boolean): ViteUserConfig {
 				{ find: 'react-dom', replacement: 'preact/compat' },
 				{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
 			],
-			dedupe: ['preact/compat'],
+			dedupe: ['preact/compat', 'preact'],
 		};
+		// noExternal React entrypoints to be bundled, resolved, and aliased by Vite
+		viteConfig.ssr!.noExternal = [
+			'react',
+			'react-dom',
+			'react-dom/test-utils',
+			'react/jsx-runtime',
+		];
 	}
 
 	return viteConfig;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml