Add preact/compat support to @astrojs/preact

[delucis]

Changes

This branch tries to add a compat configuration option to the @astrojs/preact integration based on the the old preact/compat renderer.

I don’t think this works yet — trying with a local copy of this integration on Stackblitz still produces a Cannot find module 'react' error: https://stackblitz.com/edit/github-6sydzv?file=integrations/preact.mjs

I couldn't find any documentation or tests for the old renderer, so I'm not totally clear how it was used. I imagine you always need @astrojs/preact as well as compat, so thought this API would be nice:

defineConfig({
  integrations: [
    preact({ compat: true }),
  ],
});

If that could work, I think it would be the simplest Preact compat support around?

Testing

Nate added an E2E test for the compat option

Docs

Chris updated the integration README to follow our new template and add details about the new compat config option.

[changeset-bot]

🦋 Changeset detected

Latest commit: 85cf581

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

Looking good!

I bet the issue with any errors like "react" not found happens when any dependencies are treated as vite.ssr.external—they'll use standard Node resolution rather than Vite's resolution. So in that case, the error is correct... react cannot be found since it's not installed.

The fix is possibly to set vite.ssr.noExternal to true, ensuring that all dependencies are built.

[delucis]

No dice with ssr.noExternal — surfaces a __vite_ssr_import_1__ is not defined error. I’ve tried the following values:

• true
  Errors quickly as it’s trying to bundle github-slugger.

• ['react']
  Routes that don’t use React now load OK, but those that do error with Error when evaluating SSR module for

  • compat: /node_modules/preact/compat/dist/compat.module.js
  • the component: /src/components/ReactCounter.tsx
  • and the route: /src/pages/react.astro

• ['react', 'react-dom'] and ['preact/compat', 'react', 'react-dom'] both behave the same as ['react']

• Further adding 'preact' to the array completely crashes the dev server on routes rendering a Preact component.

Next hint, please! 😅

[natemoo-re]

@delucis I was able to get things mostly working by using manual aliases via babel-plugin-module-resolver. Not sure why it works when the alternative (plain Vite) doesn't, but it seems to be effective. Let me know if you run into anything else!

[delucis]

Amazing work @natemoo-re!!! 🥳

This is very close to perfect. Here’s what works and doesn’t work now:

	Preact component	React component	Preact importing React
build render	✅	✅	✅
build hydration	✅	✅	✅
dev render	✅	✅	✅
dev hydration	✅	❌	❌

In dev, when the page tries to hydrate a React component or Preact component that uses a React component, I get the following errors in the browser:

Weirder is that the same behaviour happens on a page with just a Preact component if you visit it after having visited a page with a React component. It’s almost like that 504 Error crashes some internal or causes Vite to cache some bad code? Not sure.

I’ll also stress — in case it’s important — that I’m testing this by copy-pasting the changes as a local integration in my test project. It’s on Stackblitz here: https://stackblitz.com/edit/github-6sydzv?file=integrations/preact.mjs

[natemoo-re]

LGTM whenever this is ready for review! It'd be nice to add some docs about this to the README.

[sarah11918]

Giving a README LGTM!

[kevinzunigacuellar]

LGTM 🚀

[natemoo-re]

Plenty of LGTMs, merge away @delucis!