diff --git a/.changeset/sixty-apricots-drum.md b/.changeset/sixty-apricots-drum.md
new file mode 100644
index 0000000000..2fc407ee60
--- /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 320965eb1c..adf7334190 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 0000000000..238f76cbc8
--- /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