Fix JSX tagging for anonymous higher-order components default export (#…

…5426)

* Tag JSX for call expression default export

* Refactor type checks

* Add changeset

.changeset/sixty-apricots-drum.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix JSX tagging for anonymous higher-order components default export

packages/astro/src/vite-plugin-jsx/tag.ts

@@ -65,33 +65,36 @@ 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;
 					}
 				},
 				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) {

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)

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 />

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 =