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 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
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
7 changes: 7 additions & 0 deletions .changeset/strong-games-travel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@astrojs/preact': patch
'@astrojs/react': patch
'@astrojs/solid-js': patch
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
'@astrojs/solid-js': patch
'@astrojs/solid-js': patch
'@astrojs/vue': patch

---

Added a warning message when multiple UI frameworks are being used without either the `include` or `exclude` property being set on the integration.
8 changes: 8 additions & 0 deletions packages/integrations/preact/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

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 added the warning to Vue in the most recent commit, but the Vue docs don't have a section for using multiple JSX renderers at the moment. I linked to the solid docs for now but we should look into adding that section the the Vue integration's docs as well

Copy link
Member

Choose a reason for hiding this comment

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

If you don't mind, can you create an issue on the docs repo about it?

const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));

if (enabledKnownJsxRenderers.length > 1 && !include && !exclude) {
logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/preact/#combining-multiple-jsx-frameworks for more information.');
}
}
},
};
}
8 changes: 8 additions & 0 deletions packages/integrations/react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,14 @@ export default function ({
injectScript('before-hydration', preamble);
}
},
'astro:config:done': ({ logger, config }) => {
const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));

if (enabledKnownJsxRenderers.length > 1 && !include && !exclude) {
logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/react/#combining-multiple-jsx-frameworks for more information.');
}
}
},
};
}
Expand Down
8 changes: 8 additions & 0 deletions packages/integrations/solid/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,14 @@ export default function (options: Options = {}): AstroIntegration {
injectScript('page', 'import "solid-devtools";');
}
},
'astro:config:done': ({ logger, config }) => {
const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));

if (enabledKnownJsxRenderers.length > 1 && !options.include && !options.exclude) {
logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/solid-js/#combining-multiple-jsx-frameworks for more information.');
}
}
},
};
}
Loading