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.

Sign up for GitHub

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd245e5
Clarify preact/compat integration
bluwy Aug 11, 2022
74028d5
Create long-lobsters-ring.md
FredKSchott Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/long-lobsters-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/preact": patch
---

README: Clarify `compat` docs
17 changes: 17 additions & 0 deletions packages/integrations/preact/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,23 @@ export default defineConfig({

With the `compat` option enabled, the Preact integration will render React components as well as Preact components in your project and also allow you to import React components inside Preact components. Read more in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) on the Preact website.

When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.

```js
// package.json
{
"overrides": {
"react": "npm:@preact/compat@latest",
"react-dom": "npm:@preact/compat@latest"
}
}
```

Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) docs for their respective overrides features.

> **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.
Comment on lines +121 to +122
Copy link
Contributor

@mayank99 mayank99 Aug 11, 2022 •
edited
Loading

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



## Examples

Expand Down