Add `preact/compat` support to `@astrojs/preact` (#3712)

* Add preact/compat renderer (likely broken)

Based on the current Preact renderer and the old preact/compat implementation: https://github.com/withastro/astro/blob/f892aeb52f5a93d81a68d9833eb26bedd06aa2f0/packages/renderers/renderer-preact/compat/index.js

* Make sure name is consistent

* Switch to single integration with compat option

* fix: add module-resolver to alias react => preact/compat

* fix: preact/compat mode

* chore: remove client-compat entrypoint

* chore: add e2e test for preact/compat

* Try to fix frozen lock file error

* Add changeset

* Update README to new structure & document `compat`

* Fix changeset wording

* Fix README typo

* Tweak wording

Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>

1 files changed, 53 insertions, 5 deletions

diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
index 4c01e66f7..7c7ad618d 100644
--- a/packages/integrations/preact/src/index.ts
+++ b/packages/integrations/preact/src/index.ts
@@ -1,6 +1,6 @@
-import { AstroIntegration } from 'astro';
+import { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';
 
-function getRenderer() {
+function getRenderer(): AstroRenderer {
 	return {
 		name: '@astrojs/preact',
 		clientEntrypoint: '@astrojs/preact/client.js',
@@ -18,8 +18,36 @@ function getRenderer() {
 	};
 }
 
-function getViteConfiguration() {
+function getCompatRenderer(): AstroRenderer {
 	return {
+		name: '@astrojs/preact',
+		clientEntrypoint: '@astrojs/preact/client.js',
+		serverEntrypoint: '@astrojs/preact/server.js',
+		jsxImportSource: 'react',
+		jsxTransformOptions: async () => {
+			const {
+				default: { default: jsx },
+				// @ts-expect-error types not found
+			} = await import('@babel/plugin-transform-react-jsx');
+			return {
+				plugins: [
+					jsx({}, { runtime: 'automatic', importSource: 'preact/compat' }),
+					['babel-plugin-module-resolver', {
+						alias: {
+							'react': 'preact/compat',
+							'react-dom/test-utils': 'preact/test-utils',
+							'react-dom': 'preact/compat',
+        			'react/jsx-runtime': 'preact/jsx-runtime'
+						}
+					}],
+				],
+			};
+		},
+	};
+}
+
+function getViteConfiguration(compat?: boolean): ViteUserConfig {
+	const viteConfig: ViteUserConfig = {
 		optimizeDeps: {
 			include: [
 				'@astrojs/preact/client.js',
@@ -33,16 +61,36 @@ function getViteConfiguration() {
 			external: ['preact-render-to-string'],
 		},
 	};
+	
+	if (compat) {
+    viteConfig.optimizeDeps!.include!.push(
+			'preact/compat',
+			'preact/test-utils',
+			'preact/compat/jsx-runtime',
+		);
+    viteConfig.resolve = {
+      alias: [
+				{ find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+      ],
+      dedupe: ['preact/compat'],
+    };
+  }
+	
+	return viteConfig
 }
 
-export default function (): AstroIntegration {
+export default function ({ compat }: { compat?: boolean } = {}): AstroIntegration {
 	return {
 		name: '@astrojs/preact',
 		hooks: {
 			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+				if (compat) addRenderer(getCompatRenderer());
 				addRenderer(getRenderer());
 				updateConfig({
-					vite: getViteConfiguration(),
+					vite: getViteConfiguration(compat),
 				});
 			},
 		},