From ea603aec80531205d38fed11c525b3faa0271903 Mon Sep 17 00:00:00 2001 From: Louis Escher <66965600+louisescher@users.noreply.github.com> Date: Tue, 14 Jan 2025 12:52:51 +0100 Subject: [PATCH] Add warnings if multiple JSX renderers are used (#12887) Co-authored-by: Florian Lefebvre Co-authored-by: Bjorn Lu --- .changeset/strong-games-travel.md | 8 ++++++++ packages/integrations/preact/src/index.ts | 8 ++++++++ packages/integrations/react/src/index.ts | 8 ++++++++ packages/integrations/solid/src/index.ts | 8 ++++++++ packages/integrations/vue/src/index.ts | 11 +++++++++++ 5 files changed, 43 insertions(+) create mode 100644 .changeset/strong-games-travel.md diff --git a/.changeset/strong-games-travel.md b/.changeset/strong-games-travel.md new file mode 100644 index 0000000000..38edec4224 --- /dev/null +++ b/.changeset/strong-games-travel.md @@ -0,0 +1,8 @@ +--- +'@astrojs/preact': patch +'@astrojs/react': patch +'@astrojs/solid-js': patch +'@astrojs/vue': patch +--- + +Adds a warning message when multiple JSX-based UI frameworks are being used without either the `include` or `exclude` property being set on the integration. diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts index 4f999103ca..1f6b7857bb 100644 --- a/packages/integrations/preact/src/index.ts +++ b/packages/integrations/preact/src/index.ts @@ -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']; + 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.'); + } + } }, }; } diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index 46da29c7b9..16f4064d05 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -100,6 +100,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.'); + } + } }, }; } diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts index f39dffed59..662bfa2547 100644 --- a/packages/integrations/solid/src/index.ts +++ b/packages/integrations/solid/src/index.ts @@ -108,6 +108,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.'); + } + } }, }; } diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts index d9e42a6dd2..2c7992fe80 100644 --- a/packages/integrations/vue/src/index.ts +++ b/packages/integrations/vue/src/index.ts @@ -158,6 +158,17 @@ export default function (options?: Options): AstroIntegration { } updateConfig({ vite: await getViteConfiguration(command, options) }); }, + 'astro:config:done': ({ logger, config }) => { + if (!options?.jsx) return; + + const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js']; + const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name)); + + // This error can only be thrown from here since Vue is an optional JSX renderer + 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.'); + } + } }, }; }