Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify preact/compat integration docs #4267

Merged
merged 2 commits into from
Aug 11, 2022
Merged

Clarify preact/compat integration docs #4267

merged 2 commits into from
Aug 11, 2022

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Aug 11, 2022

Changes

Close #4107

Spent a fair bit of time with this today, and I think this is the best we can do at the moment:

  • Recommend alias react and react-dom to @preact/compat to intercept the alias into nested packages.
  • The alias works mostly for ESM libraries, but not for CJS libraries. In that case, recommend adding the library to ssr.noExternal.

red: extra context #4107 (comment)

Testing

N/A (docs change)

Docs

Updated preact readme

@changeset-bot
Copy link

changeset-bot bot commented Aug 11, 2022

🦋 Changeset detected

Latest commit: 74028d5

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

This PR includes changesets to release 3 packages
Name Type
@astrojs/preact Patch
@e2e/errors Patch
@e2e/preact-component Patch

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

@github-actions github-actions bot added pkg: preact Related to Preact (scope) pkg: integration Related to any renderer integration (scope) labels Aug 11, 2022
Comment on lines +121 to +122
> **Note**
> Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
Copy link
Contributor

@mayank99 mayank99 Aug 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not related to the content but i just noticed the github note syntax creates a blockquote

i'm guessing we don't want to use the custom admonition syntax in the readmes

:::note
Currently, the `compat`...
:::

since the github syntax is consistent, maybe there's a transformation that could happen in remark? /cc @sarah11918 @delucis

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well spotted @mayank99! That's actually something I've been wanting to add: use GitHub's syntax in these files and then automatically transform them in docs withastro/docs#967

Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great, thanks @bluwy!

Copy link
Member

@FredKSchott FredKSchott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for investigating the fix for this. Merging so that we can get this into the next release.

@FredKSchott FredKSchott merged commit 5b1facf into main Aug 11, 2022
@FredKSchott FredKSchott deleted the docs-preact-compat branch August 11, 2022 23:34
@astrobot-houston astrobot-houston mentioned this pull request Aug 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: integration Related to any renderer integration (scope) pkg: preact Related to Preact (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 BUG: react component + client:load fails with preact/compat but works fine with @astrojs/react
5 participants