diff options
5 files changed, 34 insertions, 9 deletions
diff --git a/.changeset/sixty-apricots-drum.md b/.changeset/sixty-apricots-drum.md new file mode 100644 index 000000000..2fc407ee6 --- /dev/null +++ b/.changeset/sixty-apricots-drum.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix JSX tagging for anonymous higher-order components default export diff --git a/packages/astro/src/vite-plugin-jsx/tag.ts b/packages/astro/src/vite-plugin-jsx/tag.ts index 320965eb1..adf733419 100644 --- a/packages/astro/src/vite-plugin-jsx/tag.ts +++ b/packages/astro/src/vite-plugin-jsx/tag.ts @@ -65,20 +65,23 @@ export default async function tagExportsWithRenderer({ */ enter(path) { const node = path.node; - if (node.type !== 'ExportDefaultDeclaration') return; + if (!t.isExportDefaultDeclaration(node)) return; - if (node.declaration?.type === 'ArrowFunctionExpression') { - const uidIdentifier = path.scope.generateUidIdentifier('_arrow_function'); + if ( + t.isArrowFunctionExpression(node.declaration) || + t.isCallExpression(node.declaration) + ) { + const varName = t.isArrowFunctionExpression(node.declaration) + ? '_arrow_function' + : '_hoc_function'; + const uidIdentifier = path.scope.generateUidIdentifier(varName); path.insertBefore( t.variableDeclaration('const', [ t.variableDeclarator(uidIdentifier, node.declaration), ]) ); node.declaration = uidIdentifier; - } else if ( - node.declaration?.type === 'FunctionDeclaration' && - !node.declaration.id?.name - ) { + } else if (t.isFunctionDeclaration(node.declaration) && !node.declaration.id?.name) { const uidIdentifier = path.scope.generateUidIdentifier('_function'); node.declaration.id = uidIdentifier; } @@ -86,12 +89,12 @@ export default async function tagExportsWithRenderer({ exit(path, state) { const node = path.node; if (node.exportKind === 'type') return; - if (node.type === 'ExportAllDeclaration') return; + if (t.isExportAllDeclaration(node)) return; const addTag = (id: string) => { const tags = state.get('astro:tags') ?? []; state.set('astro:tags', [...tags, id]); }; - if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') { + if (t.isExportNamedDeclaration(node) || t.isExportDefaultDeclaration(node)) { if (t.isIdentifier(node.declaration)) { addTag(node.declaration.name); } else if (t.isFunctionDeclaration(node.declaration) && node.declaration.id?.name) { diff --git a/packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/HocDefaultExport.jsx b/packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/HocDefaultExport.jsx new file mode 100644 index 000000000..238f76cbc --- /dev/null +++ b/packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/HocDefaultExport.jsx @@ -0,0 +1,14 @@ +import { useState } from "react" + +function withSomething(Component) { + return (props) => { + const [example] = useState('Example') + return <Component {...props} example={example} />; + }; +} + +function Child({ example }) { + return <h2 id="hoc_default_export">{example}</h2> +} + +export default withSomething(Child) diff --git a/packages/astro/test/fixtures/react-jsx-export/src/pages/index.astro b/packages/astro/test/fixtures/react-jsx-export/src/pages/index.astro index 8414987e3..945f965f5 100644 --- a/packages/astro/test/fixtures/react-jsx-export/src/pages/index.astro +++ b/packages/astro/test/fixtures/react-jsx-export/src/pages/index.astro @@ -3,6 +3,7 @@ import ListAsDefaultExport, {ListExport, RenamedListExport, ListExportTestCompon import {ConstDeclarationExport, LetDeclarationExport, FunctionDeclarationExport} from '../components/DeclarationExportTest' import AnonymousArrowDefaultExport from '../components/defaultExport/AnonymousArrowDefaultExport' import AnonymousFunctionDefaultExport from '../components/defaultExport/AnonymousFunctionDefaultExport' +import HocDefaultExport from '../components/defaultExport/HocDefaultExport' import NamedArrowDefaultExport from '../components/defaultExport/NamedArrowDefaultExport' import NamedFunctionDefaultExport from '../components/defaultExport/NamedFunctionDefaultExport' --- @@ -20,5 +21,6 @@ import NamedFunctionDefaultExport from '../components/defaultExport/NamedFunctio <AnonymousArrowDefaultExport /> <AnonymousFunctionDefaultExport /> +<HocDefaultExport /> <NamedArrowDefaultExport /> <NamedFunctionDefaultExport /> diff --git a/packages/astro/test/react-jsx-export.test.js b/packages/astro/test/react-jsx-export.test.js index b43f53c5f..2f5e9567e 100644 --- a/packages/astro/test/react-jsx-export.test.js +++ b/packages/astro/test/react-jsx-export.test.js @@ -18,6 +18,7 @@ describe('react-jsx-export', () => { 'renamed_list_export', 'list_as_default_export', 'list_export_test_component', + 'hoc_default_export', ]; const reactInvalidHookWarning = |