Fix: Invalid hook call when user use export jsx function

.changeset/cyan-chefs-marry.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Update vite-jsx-plugin for jsx export

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

@@ -1,6 +1,8 @@
 import type { PluginObj } from '@babel/core';
 import * as t from '@babel/types';
 
+
+
 /**
  * This plugin handles every file that runs through our JSX plugin.
  * Since we statically match every JSX file to an Astro renderer based on import scanning,
@@ -50,29 +52,71 @@ export default function tagExportsWithRenderer({
  }
  },
  },
- ExportDeclaration(path, state) {
- const node = path.node;
- if (node.exportKind === 'type') return;
- if (node.type === 'ExportAllDeclaration') return;
+ ExportDeclaration: {
+ /**
+ * For default anonymous function export, we need to give them a unique name
+ * @param path
+ * @returns
+ */
+ enter(path) {
+ const node = path.node;
+ if (node.type !== 'ExportDefaultDeclaration') return;
 
- if (node.type === 'ExportNamedDeclaration') {
- if (t.isFunctionDeclaration(node.declaration)) {
- if (node.declaration.id?.name) {
- const id = node.declaration.id.name;
- const tags = state.get('astro:tags') ?? [];
- state.set('astro:tags', [...tags, id]);
- }
+ if (node.declaration?.type === 'ArrowFunctionExpression') {
+ const uidIdentifier = path.scope.generateUidIdentifier('_arrow_function');
+ path.insertBefore(
+ t.variableDeclaration('const', [
+ t.variableDeclarator(uidIdentifier, node.declaration),
+ ])
+ );
+ node.declaration = uidIdentifier;
+ } else if (
+ node.declaration?.type === 'FunctionDeclaration' &&
+ !node.declaration.id?.name
+ ) {
+ const uidIdentifier = path.scope.generateUidIdentifier('_function');
+ node.declaration.id = uidIdentifier;
  }
- } else if (node.type === 'ExportDefaultDeclaration') {
- if (t.isFunctionDeclaration(node.declaration)) {
- if (node.declaration.id?.name) {
- const id = node.declaration.id.name;
- const tags = state.get('astro:tags') ?? [];
- state.set('astro:tags', [...tags, id]);
+ },
+ exit(path, state) {
+ const node = path.node;
+ if (node.exportKind === 'type') return;
+ if (node.type === 'ExportAllDeclaration') 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.isIdentifier(node.declaration)) {
+ addTag(node.declaration.name);
+ } else if (t.isFunctionDeclaration(node.declaration) && node.declaration.id?.name) {
+ addTag(node.declaration.id.name);
+ } else if (t.isVariableDeclaration(node.declaration)) {
+ node.declaration.declarations?.forEach((declaration) => {
+ if (
+ t.isArrowFunctionExpression(declaration.init) &&
+ t.isIdentifier(declaration.id)
+ ) {
+ addTag(declaration.id.name);
+ }
+ });
+ } else if (t.isObjectExpression(node.declaration)) {
+ node.declaration.properties?.forEach((property) => {
+ if (t.isProperty(property) && t.isIdentifier(property.key)) {
+ addTag(property.key.name);
+ }
+ });
+ } else if (t.isExportNamedDeclaration(node)) {
+ node.specifiers.forEach((specifier) => {
+ if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) {
+ addTag(specifier.local.name);
+ }
+ });
  }
  }
- }
+ },
  },
+
  },
  };
 }

packages/astro/test/fixtures/react-jsx-export/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+export default defineConfig({
+ integrations: [
+ react()
+ ]
+
+})

packages/astro/test/fixtures/react-jsx-export/package.json

@@ -0,0 +1,13 @@
+{
+ "name": "@test/react-jsx-export",
+ "version": "0.0.0",
+ "private": true,
+ "devDependencies": {
+ "astro": "workspace:*",
+ "@astrojs/react": "workspace:*"
+ },
+ "dependencies": {
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0"
+ }
+}

packages/astro/test/fixtures/react-jsx-export/src/components/DeclarationExportTest.jsx

@@ -0,0 +1,16 @@
+import { useState } from "react"
+
+export const ConstDeclarationExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="export_const_declaration">{example}</h2>
+}
+
+export let LetDeclarationExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="export_let_declaration">{example}</h2>
+}
+
+export function FunctionDeclarationExport() {
+ const [example] = useState('Example')
+ return <h2 id="export_function_declaration">{example}</h2>
+}

packages/astro/test/fixtures/react-jsx-export/src/components/ListExportTest.jsx

@@ -0,0 +1,26 @@
+import { useState } from "react"
+
+const ListExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="default_list_export">{example}</h2>
+}
+
+export {ListExport}
+
+const OriginListExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="renamed_list_export">{example}</h2>
+}
+
+export {
+ OriginListExport as RenamedListExport
+}
+
+const ListAsDefaultExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="list_as_default_export">{example}</h2>
+}
+
+export {
+ ListAsDefaultExport as default
+}

packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/AnonymousArrowDefaultExport.jsx

@@ -0,0 +1,6 @@
+import { useState } from "react"
+
+export default () => {
+ const [example] = useState('Example')
+ return <h2 id="anonymous_arrow_default_export">{example}</h2>
+}

packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/AnonymousFunctionDefaultExport.jsx

@@ -0,0 +1,6 @@
+import { useState } from "react"
+
+export default function() {
+ const [example] = useState('Example')
+ return <h2 id="anonymous_function_default_export">{example}</h2>
+}

packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/NamedArrowDefaultExport.jsx

@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+const NamedArrowDefaultExport = () => {
+ const [example] = useState('Example')
+ return <h2 id="named_arrow_default_export">{example}</h2>
+}
+
+export default NamedArrowDefaultExport;

packages/astro/test/fixtures/react-jsx-export/src/components/defaultExport/NamedFunctionDefaultExport.jsx

@@ -0,0 +1,6 @@
+import { useState } from "react"
+
+export default function NamedFunctionDefaultExport() {
+ const [example] = useState('Example')
+ return <h2 id="named_Function_default_export">{example}</h2>
+}

packages/astro/test/fixtures/react-jsx-export/src/pages/index.astro

@@ -0,0 +1,23 @@
+---
+import ListAsDefaultExport, {ListExport, RenamedListExport} from '../components/ListExportTest'
+import {ConstDeclarationExport, LetDeclarationExport, FunctionDeclarationExport} from '../components/DeclarationExportTest'
+import AnonymousArrowDefaultExport from '../components/defaultExport/AnonymousArrowDefaultExport'
+import AnonymousFunctionDefaultExport from '../components/defaultExport/AnonymousFunctionDefaultExport'
+import NamedArrowDefaultExport from '../components/defaultExport/NamedArrowDefaultExport'
+import NamedFunctionDefaultExport from '../components/defaultExport/NamedFunctionDefaultExport'
+---
+
+<h1>React JSX Export Test</h1>
+
+<ListAsDefaultExport />
+<ListExport />
+<RenamedListExport />
+
+<ConstDeclarationExport />
+<LetDeclarationExport />
+<FunctionDeclarationExport />
+
+<AnonymousArrowDefaultExport />
+<AnonymousFunctionDefaultExport /> 
+<NamedArrowDefaultExport />
+<NamedFunctionDefaultExport />

packages/astro/test/react-jsx-export.test.js

@@ -0,0 +1,51 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('react-jsx-export', () => {
+ let fixture;
+ let logs = [];
+
+ const ids = [
+ 'anonymous_arrow_default_export',
+ 'anonymous_function_default_export',
+ 'named_arrow_default_export',
+ 'named_Function_default_export',
+ 'export_const_declaration',
+ 'export_let_declaration',
+ 'export_function_declaration',
+ 'default_list_export',
+ 'renamed_list_export',
+ 'list_as_default_export',
+ ];
+
+ const reactInvalidHookWarning =
+ 'Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons';
+ before(async () => {
+ const logging = {
+ dest: {
+ write(chunk) {
+ logs.push(chunk);
+ },
+ },
+ level: 'warn',
+ };
+ fixture = await loadFixture({
+ root: './fixtures/react-jsx-export/',
+ });
+ await fixture.build({ logging });
+ });
+
+ it('Can load all JSX components', async () => {
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerio.load(html);
+
+ ids.forEach((id) => {
+ expect($(`#${id}`).text()).to.equal('Example');
+ });
+ });
+
+ it('Can not output React Invalid Hook warning', async () => {
+ expect(logs.every((log) => log.message.indexOf(reactInvalidHookWarning) === -1)).to.be.true;
+ });
+});