diff --git a/.changeset/tall-eels-wink.md b/.changeset/tall-eels-wink.md
new file mode 100644
index 000000000000..af06792c7edf
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..9168d09d8a85
--- /dev/null
+++ 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
index 36e017eeb1b5..f6cf58e689ca 100644
--- 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
new file mode 100644
index 000000000000..58361989c9bd
--- /dev/null
+++ 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 })],
+});
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/preact-compat-component/package.json b/packages/astro/test/fixtures/preact-compat-component/package.json
new file mode 100644
index 000000000000..9cef449cc829
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..22fb55f10567
--- /dev/null
+++ 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);
+}
\ No newline at end of file
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
new file mode 100644
index 000000000000..651d1c90e3a1
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..bfdf5bed15a8
--- /dev/null
+++ 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 (
+ <>
+
+ {children}
+
+ );
+}
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
new file mode 100644
index 000000000000..d28a4fff55ab
--- /dev/null
+++ b/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import Counter from '../components/Counter.jsx';
+---
+
+
+
+ Preact compat component
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/astro/test/preact-compat-component.test.js b/packages/astro/test/preact-compat-component.test.js
new file mode 100644
index 000000000000..f0cd9e45fec9
--- /dev/null
+++ 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
index 67a972475db2..5c5ed0363aff 100644
--- 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
index 05a830826405..4736948d78f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -460,7 +460,7 @@ importers:
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
dependencies:
@@ -516,7 +516,7 @@ importers:
tsconfig-resolver: 3.0.1
unist-util-visit: 4.1.0
vfile: 5.3.4
- vite: 3.0.4_sass@1.54.4
+ vite: 3.0.5_sass@1.54.4
yargs-parser: 21.1.1
zod: 3.18.0
devDependencies:
@@ -1666,6 +1666,24 @@ importers:
devDependencies:
postcss-preset-env: 7.7.2_postcss@8.4.16
+ packages/astro/test/fixtures/preact-compat-component:
+ specifiers:
+ '@astrojs/preact': workspace:*
+ '@test/react-lib': workspace:*
+ astro: workspace:*
+ preact: ^10.10.1
+ dependencies:
+ '@astrojs/preact': link:../../../../integrations/preact
+ '@test/react-lib': link:packages/react-lib
+ astro: link:../../..
+ preact: 10.10.2
+
+ packages/astro/test/fixtures/preact-compat-component/packages/react-lib:
+ specifiers:
+ react: ^18.2.0
+ dependencies:
+ react: 18.2.0
+
packages/astro/test/fixtures/preact-component:
specifiers:
'@astrojs/preact': workspace:*
@@ -16580,8 +16598,8 @@ packages:
- supports-color
dev: true
- /vite/3.0.4_sass@1.54.4:
- resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
+ /vite/3.0.5:
+ resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
@@ -16603,12 +16621,10 @@ packages:
postcss: 8.4.16
resolve: 1.22.1
rollup: 2.77.2
- sass: 1.54.4
optionalDependencies:
fsevents: 2.3.2
- dev: false
- /vite/3.0.5:
+ /vite/3.0.5_sass@1.54.4:
resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@@ -16631,8 +16647,10 @@ packages:
postcss: 8.4.16
resolve: 1.22.1
rollup: 2.77.2
+ sass: 1.54.4
optionalDependencies:
fsevents: 2.3.2
+ dev: false
/vitest/0.20.3:
resolution: {integrity: sha512-cXMjTbZxBBUUuIF3PUzEGPLJWtIMeURBDXVxckSHpk7xss4JxkiiWh5cnIlfGyfJne2Ii3QpbiRuFL5dMJtljw==}