JSX refactor (#7924)

* JSX refactor

* Get preact/compat test to pass

* Use include config

* Remove old astro flavored markdown test

* Move babel dep to preact

* Remove errant debugger

* Update lockfile

* Update the multi-framework example

* Update e2e tests

* Fix nested-in-vue tests

* Add back in astro check

* Update packages/astro/src/core/create-vite.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/astro/src/core/create-vite.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Move the comment about the include config

* Remove redundant alias config

* Use react's own preamble code

* Use the base for the preamble

* Remove solid redundancy

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update based on review comments

* Oops

---------

Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/cool-feet-rest.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/solid-js': major
+---
+
+New `include` and `exclude` config options
+
+The Solid integration now has new `include` and `exclude` config options. Use these if you want to use Solid alongside another JSX framework; include specifies files to be compiled for Solid and `exclude` does the opposite.

.changeset/large-countries-share.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/preact': major
+---
+
+New `include` and `exclude` config options
+
+The Preact integration now has new `include` and `exclude` config options. Use these if you want to use Preact alongside another JSX framework; include specifies files to be compiled for Preact and `exclude` does the opposite.

.changeset/perfect-horses-tell.md

@@ -0,0 +1,27 @@
+---
+'astro': major
+---
+
+Astro's JSX handling has been refactored with better support for each framework.
+
+Previously, Astro automatically scanned your components to determine which framework-specific transformations should be used. In practice, supporting advanced features like Fast Refresh with this approach proved difficult.
+
+Now, Astro determines which framework to use with `include` and `exclude` config options where you can specify files and folders on a per-framework basis. When using multiple JSX frameworks in the same project, users should manually control which files belong to each framework using the `include` and `exclude` options.
+
+```js
+export default defineConfig({
+  // The `include` config is only needed in projects that use multiple JSX frameworks;
+  // if only using one no extra config is needed.
+  integrations: [
+		preact({
+			include: ['**/preact/*']
+		}),
+		react({
+			include: ['**/react/*']
+		}),
+		solid({
+			include: ['**/solid/*'],
+		}),
+  ]
+});
+```

.changeset/slimy-carrots-sell.md

@@ -0,0 +1,9 @@
+---
+'@astrojs/react': major
+---
+
+Support for React Refresh
+
+The React integration now fully supports React Refresh and is backed by `@vitejs/plugin-react`.
+
+Also included in this change are new `include` and `exclude` config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and `exclude` does the opposite.

examples/framework-multiple/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		react({ include: ['**/react/*'] }),
+		svelte(),
+		vue(),
+	],
 });

examples/framework-multiple/src/pages/index.astro

@@ -4,12 +4,12 @@ import '../styles/global.css';
 
 // Component Imports
 // For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!
-import * as react from '../components/ReactCounter';
-import { PreactCounter } from '../components/PreactCounter';
-import SolidCounter from '../components/SolidCounter';
+import * as react from '../components/react/ReactCounter';
+import { PreactCounter } from '../components/preact/PreactCounter';
+import SolidCounter from '../components/solid/SolidCounter';
 
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/errors.test.js

@@ -75,7 +75,7 @@ test.describe('Error display', () => {
 		const fileExists = astro.pathExists(absoluteFileUrl);
 
 		expect(fileExists).toBeTruthy();
-		expect(fileLocation).toMatch(/^components\/PreactRuntimeError.jsx/);
+		expect(fileLocation).toMatch(/^preact\/PreactRuntimeError.jsx/);
 	});
 
 	test('shows correct line when a style preprocess has an error', async ({ page, astro }) => {
@@ -105,7 +105,7 @@ test.describe('Error display', () => {
 			// Wait for page reload
 			page.waitForNavigation(),
 			// Edit the component file
-			astro.editFile('./src/components/SvelteSyntaxError.svelte', () => `<h1>No mismatch</h1>`),
+			astro.editFile('./src/components/svelte/SvelteSyntaxError.svelte', () => `<h1>No mismatch</h1>`),
 		]);
 
 		expect(await page.locator('vite-error-overlay').count()).toEqual(0);

packages/astro/e2e/fixtures/client-only/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/client-only/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import * as react from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import * as react from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.jsx';
+import SolidCounter from '../components/solid/SolidCounter.jsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/errors/astro.config.mjs

@@ -7,5 +7,11 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [react(), preact(), solid(), svelte(), vue()],
-});
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
+});

packages/astro/e2e/fixtures/errors/src/pages/astro-client-media-error.astro

@@ -1,7 +1,7 @@
 ---
-import SvelteDirectiveError from '../components/SvelteDirectiveError.svelte';
+import SvelteDirectiveError from '../components/svelte/SvelteDirectiveError.svelte';
 ---
 
 <div>
   <SvelteDirectiveError client:media />
-</div>
+</div>

packages/astro/e2e/fixtures/errors/src/pages/astro-hydration-error.astro

@@ -1,7 +1,7 @@
 ---
-import SvelteDirectiveError from '../components/SvelteDirectiveError.svelte';
+import SvelteDirectiveError from '../components/svelte/SvelteDirectiveError.svelte';
 ---
 
 <div>
   <SvelteDirectiveError client:loadm />
-</div>
+</div>

packages/astro/e2e/fixtures/errors/src/pages/preact-runtime-error.astro

@@ -1,5 +1,5 @@
 ---
-import PreactRuntimeError from '../components/PreactRuntimeError.jsx';
+import PreactRuntimeError from '../components/preact/PreactRuntimeError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/preact-syntax-error.astro

@@ -1,5 +1,5 @@
 ---
-import PreactSyntaxError from '../components/PreactSyntaxError.jsx';
+import PreactSyntaxError from '../components/preact/PreactSyntaxError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/react-runtime-error.astro

@@ -1,5 +1,5 @@
 ---
-import ReactRuntimeError from '../components/ReactRuntimeError.jsx';
+import ReactRuntimeError from '../components/react/ReactRuntimeError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/react-syntax-error.astro

@@ -1,5 +1,5 @@
 ---
-import ReactSyntaxError from '../components/ReactSyntaxError.jsx';
+import ReactSyntaxError from '../components/react/ReactSyntaxError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/solid-runtime-error.astro

@@ -1,5 +1,5 @@
 ---
-import SolidRuntimeError from '../components/SolidRuntimeError.jsx';
+import SolidRuntimeError from '../components/solid/SolidRuntimeError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/solid-syntax-error.astro

@@ -1,5 +1,5 @@
 ---
-import SolidSyntaxError from '../components/SolidSyntaxError.jsx';
+import SolidSyntaxError from '../components/solid/SolidSyntaxError.jsx';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/svelte-runtime-error.astro

@@ -1,5 +1,5 @@
 ---
-import SvelteRuntimeError from '../components/SvelteRuntimeError.svelte';
+import SvelteRuntimeError from '../components/svelte/SvelteRuntimeError.svelte';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/svelte-syntax-error.astro

@@ -1,5 +1,5 @@
 ---
-import SvelteSyntaxError from '../components/SvelteSyntaxError.svelte';
+import SvelteSyntaxError from '../components/svelte/SvelteSyntaxError.svelte';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/vue-runtime-error.astro

@@ -1,5 +1,5 @@
 ---
-import VueRuntimeError from '../components/VueRuntimeError.vue';
+import VueRuntimeError from '../components/vue/VueRuntimeError.vue';
 ---
 
 <div>

packages/astro/e2e/fixtures/errors/src/pages/vue-syntax-error.astro

@@ -1,5 +1,5 @@
 ---
-import VueSyntaxError from '../components/VueSyntaxError.vue';
+import VueSyntaxError from '../components/vue/VueSyntaxError.vue';
 ---
 
 <div>

packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro

@@ -3,11 +3,11 @@
 import '../styles/global.css';
 // Component Imports
 import { A, B as Renamed } from '../components';
-import * as react from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import * as react from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.tsx';
+import SolidCounter from '../components/solid/SolidCounter.tsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/nested-in-preact/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/nested-in-preact/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import ReactCounter from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import ReactCounter from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.tsx';
+import SolidCounter from '../components/solid/SolidCounter.tsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/nested-in-react/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/nested-in-react/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import ReactCounter from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import ReactCounter from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.tsx';
+import SolidCounter from '../components/solid/SolidCounter.tsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/nested-in-solid/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/nested-in-solid/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import { Counter as ReactCounter } from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import { Counter as ReactCounter } from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.tsx';
+import SolidCounter from '../components/solid/SolidCounter.tsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/nested-in-svelte/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });

packages/astro/e2e/fixtures/nested-in-svelte/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import { Counter as ReactCounter } from '../components/ReactCounter.jsx';
-import { PreactCounter } from '../components/PreactCounter.tsx';
-import SolidCounter from '../components/SolidCounter.tsx';
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import { Counter as ReactCounter } from '../components/react/ReactCounter.jsx';
+import { PreactCounter } from '../components/preact/PreactCounter.tsx';
+import SolidCounter from '../components/solid/SolidCounter.tsx';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

packages/astro/e2e/fixtures/nested-in-vue/astro.config.mjs

@@ -8,5 +8,11 @@ import solid from '@astrojs/solid-js';
 // https://astro.build/config
 export default defineConfig({
 	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue(), solid()],
+	integrations: [
+		react({ include: ['**/react/*'] }),
+		preact({ include: ['**/preact/*'] }),
+		solid({ include: ['**/solid/*'] }),
+		svelte(),
+		vue(),
+	],
 });