matthewp · Aug 11, 2023 · Jul 23, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/.changeset/cool-feet-rest.md b/.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.
diff --git a/.changeset/large-countries-share.md b/.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.
diff --git a/.changeset/perfect-horses-tell.md b/.changeset/perfect-horses-tell.md
@@ -0,0 +1,25 @@
+---
+'astro': major
+---
+
+JSX refactor
+
+JSX in Astro has been refactored to better support each framework. In order to support multiple JSX frameworks at the same time, new `include` and `exclude` config options have been added to each integration to control which files to target. For example:
+
+```js
+export default defineConfig({
+  integrations: [
+		preact({
+			include: ['**/preact/*']
+		}),
+		react({
+			include: ['**/react/*']
+		}),
+		solid({
+			include: ['**/solid/*'],
+		}),
+  ]
+});
+```
+
+This config is only needed in projects that use multiple JSX frameworks; if only using one no config is needed.
diff --git a/.changeset/slimy-carrots-sell.md b/.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.
diff --git a/examples/framework-multiple/astro.config.mjs b/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(),
+	],
 });
diff --git a/...multiple/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx b/...multiple/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx
diff --git a/...-multiple/src/components/ReactCounter.tsx → ...ple/src/components/react/ReactCounter.tsx b/...-multiple/src/components/ReactCounter.tsx → ...ple/src/components/react/ReactCounter.tsx
diff --git a/...-multiple/src/components/SolidCounter.tsx → ...ple/src/components/solid/SolidCounter.tsx b/...-multiple/src/components/SolidCounter.tsx → ...ple/src/components/solid/SolidCounter.tsx
diff --git a/...tiple/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...tiple/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...rk-multiple/src/components/VueCounter.vue → ...ultiple/src/components/vue/VueCounter.vue b/...rk-multiple/src/components/VueCounter.vue → ...ultiple/src/components/vue/VueCounter.vue
diff --git a/examples/framework-multiple/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/errors.test.js b/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);

diff --git a/packages/astro/e2e/fixtures/client-only/astro.config.mjs b/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(),
+	],
 });
diff --git a/...ent-only/src/components/PreactCounter.tsx → ...y/src/components/preact/PreactCounter.tsx b/...ent-only/src/components/PreactCounter.tsx → ...y/src/components/preact/PreactCounter.tsx
diff --git a/...ient-only/src/components/ReactCounter.jsx → ...nly/src/components/react/ReactCounter.jsx b/...ient-only/src/components/ReactCounter.jsx → ...nly/src/components/react/ReactCounter.jsx
diff --git a/...ient-only/src/components/SolidCounter.tsx → ...nly/src/components/solid/SolidCounter.tsx b/...ient-only/src/components/SolidCounter.tsx → ...nly/src/components/solid/SolidCounter.tsx
diff --git a/...-only/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...-only/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...client-only/src/components/VueCounter.vue → ...nt-only/src/components/vue/VueCounter.vue b/...client-only/src/components/VueCounter.vue → ...nt-only/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/client-only/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/errors/astro.config.mjs b/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(),
+	],
+});
diff --git a/...ors/src/components/PreactRuntimeError.jsx → .../components/preact/PreactRuntimeError.jsx b/...ors/src/components/PreactRuntimeError.jsx → .../components/preact/PreactRuntimeError.jsx
diff --git a/...rors/src/components/PreactSyntaxError.jsx → ...c/components/preact/PreactSyntaxError.jsx b/...rors/src/components/PreactSyntaxError.jsx → ...c/components/preact/PreactSyntaxError.jsx
diff --git a/...rors/src/components/ReactRuntimeError.jsx → ...rc/components/react/ReactRuntimeError.jsx b/...rors/src/components/ReactRuntimeError.jsx → ...rc/components/react/ReactRuntimeError.jsx
diff --git a/...rrors/src/components/ReactSyntaxError.jsx → ...src/components/react/ReactSyntaxError.jsx b/...rrors/src/components/ReactSyntaxError.jsx → ...src/components/react/ReactSyntaxError.jsx
diff --git a/...rors/src/components/SolidRuntimeError.jsx → ...rc/components/solid/SolidRuntimeError.jsx b/...rors/src/components/SolidRuntimeError.jsx → ...rc/components/solid/SolidRuntimeError.jsx
diff --git a/...rrors/src/components/SolidSyntaxError.jsx → ...src/components/solid/SolidSyntaxError.jsx b/...rrors/src/components/SolidSyntaxError.jsx → ...src/components/solid/SolidSyntaxError.jsx
diff --git a/...rc/components/SvelteDirectiveError.svelte → ...onents/svelte/SvelteDirectiveError.svelte b/...rc/components/SvelteDirectiveError.svelte → ...onents/svelte/SvelteDirectiveError.svelte
diff --git a/.../src/components/SvelteRuntimeError.svelte → ...mponents/svelte/SvelteRuntimeError.svelte b/.../src/components/SvelteRuntimeError.svelte → ...mponents/svelte/SvelteRuntimeError.svelte
diff --git a/...s/src/components/SvelteSyntaxError.svelte → ...omponents/svelte/SvelteSyntaxError.svelte b/...s/src/components/SvelteSyntaxError.svelte → ...omponents/svelte/SvelteSyntaxError.svelte
diff --git a/...errors/src/components/VueRuntimeError.vue → ...rs/src/components/vue/VueRuntimeError.vue b/...errors/src/components/VueRuntimeError.vue → ...rs/src/components/vue/VueRuntimeError.vue
diff --git a/.../errors/src/components/VueSyntaxError.vue → ...ors/src/components/vue/VueSyntaxError.vue b/.../errors/src/components/VueSyntaxError.vue → ...ors/src/components/vue/VueSyntaxError.vue
diff --git a/packages/astro/e2e/fixtures/errors/src/pages/astro-client-media-error.astro b/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>
diff --git a/packages/astro/e2e/fixtures/errors/src/pages/astro-hydration-error.astro b/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>
diff --git a/packages/astro/e2e/fixtures/errors/src/pages/preact-runtime-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/preact-syntax-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/react-runtime-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/react-syntax-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/solid-runtime-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/solid-syntax-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/svelte-runtime-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/svelte-syntax-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/vue-runtime-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/vue-syntax-error.astro b/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>

diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs b/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(),
+	],
 });
diff --git a/...ameworks/src/components/PreactCounter.tsx → ...s/src/components/preact/PreactCounter.tsx b/...ameworks/src/components/PreactCounter.tsx → ...s/src/components/preact/PreactCounter.tsx
diff --git a/...rameworks/src/components/ReactCounter.jsx → ...rks/src/components/react/ReactCounter.jsx b/...rameworks/src/components/ReactCounter.jsx → ...rks/src/components/react/ReactCounter.jsx
diff --git a/...rameworks/src/components/SolidCounter.tsx → ...rks/src/components/solid/SolidCounter.tsx b/...rameworks/src/components/SolidCounter.tsx → ...rks/src/components/solid/SolidCounter.tsx
diff --git a/...works/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...works/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...-frameworks/src/components/VueCounter.vue → ...meworks/src/components/vue/VueCounter.vue b/...-frameworks/src/components/VueCounter.vue → ...meworks/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/nested-in-preact/astro.config.mjs b/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(),
+	],
 });
diff --git a/...n-preact/src/components/PreactCounter.tsx → ...t/src/components/preact/PreactCounter.tsx b/...n-preact/src/components/PreactCounter.tsx → ...t/src/components/preact/PreactCounter.tsx
diff --git a/...in-preact/src/components/ReactCounter.jsx → ...act/src/components/react/ReactCounter.jsx b/...in-preact/src/components/ReactCounter.jsx → ...act/src/components/react/ReactCounter.jsx
diff --git a/...in-preact/src/components/SolidCounter.tsx → ...act/src/components/solid/SolidCounter.tsx b/...in-preact/src/components/SolidCounter.tsx → ...act/src/components/solid/SolidCounter.tsx
diff --git a/...react/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...react/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...d-in-preact/src/components/VueCounter.vue → ...-preact/src/components/vue/VueCounter.vue b/...d-in-preact/src/components/VueCounter.vue → ...-preact/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/nested-in-react/astro.config.mjs b/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(),
+	],
 });
diff --git a/...in-react/src/components/PreactCounter.tsx → ...t/src/components/preact/PreactCounter.tsx b/...in-react/src/components/PreactCounter.tsx → ...t/src/components/preact/PreactCounter.tsx
diff --git a/...-in-react/src/components/ReactCounter.jsx → ...act/src/components/react/ReactCounter.jsx b/...-in-react/src/components/ReactCounter.jsx → ...act/src/components/react/ReactCounter.jsx
diff --git a/...-in-react/src/components/SolidCounter.tsx → ...act/src/components/solid/SolidCounter.tsx b/...-in-react/src/components/SolidCounter.tsx → ...act/src/components/solid/SolidCounter.tsx
diff --git a/...react/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...react/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...ed-in-react/src/components/VueCounter.vue → ...n-react/src/components/vue/VueCounter.vue b/...ed-in-react/src/components/VueCounter.vue → ...n-react/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/nested-in-solid/astro.config.mjs b/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(),
+	],
 });
diff --git a/...in-solid/src/components/PreactCounter.tsx → ...d/src/components/preact/PreactCounter.tsx b/...in-solid/src/components/PreactCounter.tsx → ...d/src/components/preact/PreactCounter.tsx
diff --git a/...-in-solid/src/components/ReactCounter.jsx → ...lid/src/components/react/ReactCounter.jsx b/...-in-solid/src/components/ReactCounter.jsx → ...lid/src/components/react/ReactCounter.jsx
diff --git a/...-in-solid/src/components/SolidCounter.tsx → ...lid/src/components/solid/SolidCounter.tsx b/...-in-solid/src/components/SolidCounter.tsx → ...lid/src/components/solid/SolidCounter.tsx
diff --git a/...solid/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...solid/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...ed-in-solid/src/components/VueCounter.vue → ...n-solid/src/components/vue/VueCounter.vue b/...ed-in-solid/src/components/VueCounter.vue → ...n-solid/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/astro.config.mjs b/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(),
+	],
 });
diff --git a/...n-svelte/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx b/...n-svelte/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx
diff --git a/...in-svelte/src/components/ReactCounter.jsx → ...lte/src/components/react/ReactCounter.jsx b/...in-svelte/src/components/ReactCounter.jsx → ...lte/src/components/react/ReactCounter.jsx
diff --git a/...in-svelte/src/components/SolidCounter.tsx → ...lte/src/components/solid/SolidCounter.tsx b/...in-svelte/src/components/SolidCounter.tsx → ...lte/src/components/solid/SolidCounter.tsx
diff --git a/...velte/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...velte/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...d-in-svelte/src/components/VueCounter.vue → ...-svelte/src/components/vue/VueCounter.vue b/...d-in-svelte/src/components/VueCounter.vue → ...-svelte/src/components/vue/VueCounter.vue
diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/pages/index.astro b/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/

diff --git a/packages/astro/e2e/fixtures/nested-in-vue/astro.config.mjs b/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(),
+	],
 });
diff --git a/...d-in-vue/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx b/...d-in-vue/src/components/PreactCounter.tsx → ...e/src/components/preact/PreactCounter.tsx
diff --git a/...ed-in-vue/src/components/ReactCounter.jsx → ...vue/src/components/react/ReactCounter.jsx b/...ed-in-vue/src/components/ReactCounter.jsx → ...vue/src/components/react/ReactCounter.jsx
diff --git a/...ed-in-vue/src/components/SolidCounter.tsx → ...vue/src/components/solid/SolidCounter.tsx b/...ed-in-vue/src/components/SolidCounter.tsx → ...vue/src/components/solid/SolidCounter.tsx
diff --git a/...n-vue/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte b/...n-vue/src/components/SvelteCounter.svelte → ...rc/components/svelte/SvelteCounter.svelte
diff --git a/...sted-in-vue/src/components/VueCounter.vue → ...-in-vue/src/components/vue/VueCounter.vue b/...sted-in-vue/src/components/VueCounter.vue → ...-in-vue/src/components/vue/VueCounter.vue