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

Add warnings if multiple JSX renderers are used #12887

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

louisescher
Copy link
Contributor

Changes

  • Adds warnings to all common JSX renderer integrations if multiple known JSX renderer integrations are used at the same time. This is meant to combat the common mistake of not setting the include or exclude options when using multiple UI frameworks together.

Testing

As this is just a warning printed to console, no tests have been added.

Docs

As this is just a warning printed to console, no docs have been added.

Copy link

changeset-bot bot commented Jan 3, 2025

🦋 Changeset detected

Latest commit: 4952d07

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

@github-actions github-actions bot added pkg: react Related to React (scope) pkg: preact Related to Preact (scope) pkg: solid Related to Solid (scope) pkg: integration Related to any renderer integration (scope) labels Jan 3, 2025
@louisescher louisescher changed the title Update index.ts Add warnings if multiple JSX renderers are used Jan 3, 2025
Copy link
Member

@ematipico ematipico left a comment

Choose a reason for hiding this comment

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

Have you considered having this logic in core? The integrations shouldn't be aware of each other, instead the core needs to know

@florian-lefebvre
Copy link
Member

I think the issue is core doesn't have access to the integrations options so it can't check include/exclude

@louisescher
Copy link
Contributor Author

@florian-lefebvre is correct. Core would've been the better solution but it can't see what options are passed

@ematipico
Copy link
Member

I don't see any issue at all. We could expose a utility from astro/config called getKnownJsxRenderers which does what this PR implemented.

@louisescher
Copy link
Contributor Author

@ematipico Is that just for the known renderers so that the integration can throw the warning? I'd be happy to implement it there

@ematipico
Copy link
Member

Yeah just for the known JSX renderers, it seems

Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

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

I'm personally happy with this current approach to keep things simple. I don't know if we need to expose a new API here to avoid the hardcoding. The downside with that is that integrations will require a newer version of Astro, so if the end-user only upgrades the integration and not Astro, it'll fail to import in runtime, which is a breaking change.

@@ -71,6 +71,14 @@ export default function ({ include, exclude, compat, devtools }: Options = {}):
injectScript('page', 'import "preact/debug";');
}
},
'astro:config:done': ({ logger, config }) => {
const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
Copy link
Member

Choose a reason for hiding this comment

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

Vue can also be used in jsx files if configured this way

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I wasn't sure at first, should I add Vue to that list then? I figured it might cause wrong errors since Vue can also be used without JSX and could be used just fine alongside React

Copy link
Member

Choose a reason for hiding this comment

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

You're right. I think I would only show it from inside the vue integration if it has jsx enabled

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) pkg: react Related to React (scope) pkg: solid Related to Solid (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants