From 19bdd37cbe26a62a9b0cff5bb8572b2e829aaa81 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 15 Aug 2022 17:16:33 +0800 Subject: [PATCH 1/3] Warn hydration directive for Astro components in JSX --- packages/astro/src/jsx/babel.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts index 925e263807bc..4da41827a3ba 100644 --- a/packages/astro/src/jsx/babel.ts +++ b/packages/astro/src/jsx/babel.ts @@ -1,6 +1,7 @@ import type { PluginObj } from '@babel/core'; import * as t from '@babel/types'; import { pathToFileURL } from 'node:url'; +import { HydrationDirectiveProps } from '../runtime/server/hydration.js'; import type { PluginMetadata } from '../vite-plugin-astro/types'; const ClientOnlyPlaceholder = 'astro-client-only'; @@ -280,6 +281,22 @@ export default function astroJSX(): PluginObj { const meta = path.getData('import'); if (meta) { + // check props and make sure they are valid for an Astro component + if (meta.path.endsWith('.astro')) { + const displayName = getTagName(parentNode); + for (const attr of parentNode.openingElement.attributes) { + if (t.isJSXAttribute(attr)) { + const name = jsxAttributeToString(attr); + if (HydrationDirectiveProps.has(name)) { + // eslint-disable-next-line + console.warn( + `You are attempting to render <${displayName} ${name} />, but ${displayName} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.` + ); + } + } + } + } + let resolvedPath: string; if (meta.path.startsWith('.')) { const fileURL = pathToFileURL(state.filename!); From 3d9d9badd3378d72e2ffe2a8ecefd5edc7017a08 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 15 Aug 2022 22:28:43 +0800 Subject: [PATCH 2/3] Add changeset --- .changeset/eight-adults-guess.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eight-adults-guess.md diff --git a/.changeset/eight-adults-guess.md b/.changeset/eight-adults-guess.md new file mode 100644 index 000000000000..8b73fb442a2d --- /dev/null +++ b/.changeset/eight-adults-guess.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Warn hydration directive for Astro components in JSX From d5a52e778eaf7e60a1d36158fc499501af5ce1d7 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 15 Aug 2022 22:31:25 +0800 Subject: [PATCH 3/3] Better comment --- packages/astro/src/jsx/babel.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts index 4da41827a3ba..338464b269d6 100644 --- a/packages/astro/src/jsx/babel.ts +++ b/packages/astro/src/jsx/babel.ts @@ -281,7 +281,8 @@ export default function astroJSX(): PluginObj { const meta = path.getData('import'); if (meta) { - // check props and make sure they are valid for an Astro component + // If JSX is importing an Astro component, e.g. using MDX for templating, + // check Astro node's props and make sure they are valid for an Astro component if (meta.path.endsWith('.astro')) { const displayName = getTagName(parentNode); for (const attr of parentNode.openingElement.attributes) { @@ -296,7 +297,6 @@ export default function astroJSX(): PluginObj { } } } - let resolvedPath: string; if (meta.path.startsWith('.')) { const fileURL = pathToFileURL(state.filename!);