diff options
Diffstat (limited to 'packages')
123 files changed, 487 insertions, 616 deletions
diff --git a/packages/astro/e2e/errors.test.js b/packages/astro/e2e/errors.test.js index e23b22c65..2a5a83ace 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/client-only/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/client-only/src/components/preact/PreactCounter.tsx index b0570046c..b0570046c 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/client-only/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/client-only/src/components/react/ReactCounter.jsx index 770f93890..770f93890 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/client-only/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/client-only/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/client-only/src/components/solid/SolidCounter.tsx index fbbb9850b..fbbb9850b 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/client-only/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/client-only/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte index cc9fe8c93..cc9fe8c93 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/client-only/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/client-only/src/components/vue/VueCounter.vue index 906da1944..906da1944 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/client-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 index 708ba1582..0b4299600 100644 --- 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 index 8f27d8fab..48e8736bd 100644 --- 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()], -});
\ No newline at end of file + integrations: [ + react({ include: ['**/react/*'] }), + preact({ include: ['**/preact/*'] }), + solid({ include: ['**/solid/*'] }), + svelte(), + vue(), + ], +}); diff --git a/packages/astro/e2e/fixtures/errors/src/components/PreactRuntimeError.jsx b/packages/astro/e2e/fixtures/errors/src/components/preact/PreactRuntimeError.jsx index 8ee30ccf4..8ee30ccf4 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/PreactRuntimeError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/preact/PreactRuntimeError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/PreactSyntaxError.jsx b/packages/astro/e2e/fixtures/errors/src/components/preact/PreactSyntaxError.jsx index f6826c588..f6826c588 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/PreactSyntaxError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/preact/PreactSyntaxError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/ReactRuntimeError.jsx b/packages/astro/e2e/fixtures/errors/src/components/react/ReactRuntimeError.jsx index 2ea3d9981..2ea3d9981 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/ReactRuntimeError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/react/ReactRuntimeError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/ReactSyntaxError.jsx b/packages/astro/e2e/fixtures/errors/src/components/react/ReactSyntaxError.jsx index ff2798aa4..ff2798aa4 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/ReactSyntaxError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/react/ReactSyntaxError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/SolidRuntimeError.jsx b/packages/astro/e2e/fixtures/errors/src/components/solid/SolidRuntimeError.jsx index 70398ddcb..70398ddcb 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/SolidRuntimeError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/solid/SolidRuntimeError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/SolidSyntaxError.jsx b/packages/astro/e2e/fixtures/errors/src/components/solid/SolidSyntaxError.jsx index 0e396be43..0e396be43 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/SolidSyntaxError.jsx +++ b/packages/astro/e2e/fixtures/errors/src/components/solid/SolidSyntaxError.jsx diff --git a/packages/astro/e2e/fixtures/errors/src/components/SvelteDirectiveError.svelte b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteDirectiveError.svelte index b07b120a2..b07b120a2 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/SvelteDirectiveError.svelte +++ b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteDirectiveError.svelte diff --git a/packages/astro/e2e/fixtures/errors/src/components/SvelteRuntimeError.svelte b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte index 54dbab6a7..54dbab6a7 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/SvelteRuntimeError.svelte +++ b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte diff --git a/packages/astro/e2e/fixtures/errors/src/components/SvelteSyntaxError.svelte b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteSyntaxError.svelte index 457878396..457878396 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/SvelteSyntaxError.svelte +++ b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteSyntaxError.svelte diff --git a/packages/astro/e2e/fixtures/errors/src/components/VueRuntimeError.vue b/packages/astro/e2e/fixtures/errors/src/components/vue/VueRuntimeError.vue index e2e38338b..e2e38338b 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/VueRuntimeError.vue +++ b/packages/astro/e2e/fixtures/errors/src/components/vue/VueRuntimeError.vue diff --git a/packages/astro/e2e/fixtures/errors/src/components/VueSyntaxError.vue b/packages/astro/e2e/fixtures/errors/src/components/vue/VueSyntaxError.vue index bd509b3bc..bd509b3bc 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/VueSyntaxError.vue +++ b/packages/astro/e2e/fixtures/errors/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 index 46bb9a2c4..94e124c9a 100644 --- 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>
\ No newline at end of file +</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 index 1852539eb..8fcd56bd4 100644 --- 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>
\ No newline at end of file +</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 index 5c0aa2526..17ad92808 100644 --- 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 index 6748b0366..b0f709b9d 100644 --- 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 index f1df8ec99..18490518e 100644 --- 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 index 6e61ae31d..c11b49ae0 100644 --- 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 index 51a2608bd..7d4160126 100644 --- 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 index 0fdbad25b..028ab9ede 100644 --- 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 index ec499f6db..662a48f0e 100644 --- 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 index 26c14c15e..e275251a4 100644 --- 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 index b63f85e63..698da561f 100644 --- 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 index 8db897fe1..c76ed16fe 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/preact/PreactCounter.tsx index af2258fdf..af2258fdf 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/react/ReactCounter.jsx index 02eb19539..02eb19539 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/solid/SolidCounter.tsx index 689c5222c..689c5222c 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte index d6870af3c..d6870af3c 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/vue/VueCounter.vue index 4861511c8..4861511c8 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/multiple-frameworks/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 index a30688bca..747744852 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/nested-in-preact/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-in-preact/src/components/preact/PreactCounter.tsx index 5f20f560d..5f20f560d 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-preact/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-in-preact/src/components/react/ReactCounter.jsx index 0dc0deb47..0dc0deb47 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-in-preact/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-in-preact/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-preact/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-in-preact/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-in-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 index 619e8cccd..7512b86f4 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/nested-in-react/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-in-react/src/components/preact/PreactCounter.tsx index 5f20f560d..5f20f560d 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-react/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-in-react/src/components/react/ReactCounter.jsx index 0dc0deb47..0dc0deb47 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-in-react/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-in-react/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-react/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-in-react/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-in-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 index 0b3b23d9d..fe18a3151 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/nested-in-solid/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-in-solid/src/components/preact/PreactCounter.tsx index 5f20f560d..5f20f560d 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-solid/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-in-solid/src/components/react/ReactCounter.jsx index c7197a072..c7197a072 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-in-solid/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-in-solid/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-solid/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-in-solid/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-in-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 index 0feb5ba60..7b2c8da8d 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/nested-in-svelte/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/preact/PreactCounter.tsx index 5f20f560d..5f20f560d 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/react/ReactCounter.jsx index c7197a072..c7197a072 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-in-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 index 764ebfaf7..aa11de7fd 100644 --- 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 index 4b50887cd..0ef8f6e2b 100644 --- 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/packages/astro/e2e/fixtures/nested-in-vue/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-in-vue/src/components/preact/PreactCounter.tsx index 5f20f560d..5f20f560d 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-vue/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-in-vue/src/components/react/ReactCounter.jsx index c7197a072..c7197a072 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-in-vue/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-in-vue/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-in-vue/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-vue/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-vue/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-in-vue/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-in-vue/src/components/vue/VueCounter.vue diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/pages/index.astro b/packages/astro/e2e/fixtures/nested-in-vue/src/pages/index.astro index 5e4d47d76..e89554755 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/nested-in-vue/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-recursive/astro.config.mjs b/packages/astro/e2e/fixtures/nested-recursive/astro.config.mjs index 4b50887cd..0ef8f6e2b 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/astro.config.mjs +++ b/packages/astro/e2e/fixtures/nested-recursive/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/packages/astro/e2e/fixtures/nested-recursive/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/nested-recursive/src/components/preact/PreactCounter.tsx index 32200f41f..32200f41f 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/PreactCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-recursive/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/nested-recursive/src/components/react/ReactCounter.jsx index 6b3a1de5f..6b3a1de5f 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/ReactCounter.jsx +++ b/packages/astro/e2e/fixtures/nested-recursive/src/components/react/ReactCounter.jsx diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/nested-recursive/src/components/solid/SolidCounter.tsx index afabe43b9..afabe43b9 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/SolidCounter.tsx +++ b/packages/astro/e2e/fixtures/nested-recursive/src/components/solid/SolidCounter.tsx diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-recursive/src/components/svelte/SvelteCounter.svelte index 733f58076..733f58076 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-recursive/src/components/svelte/SvelteCounter.svelte diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/nested-recursive/src/components/vue/VueCounter.vue index d404cc965..d404cc965 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/nested-recursive/src/components/vue/VueCounter.vue diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/pages/index.astro b/packages/astro/e2e/fixtures/nested-recursive/src/pages/index.astro index 685c7fb5e..a17337c89 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/nested-recursive/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'; --- <html lang="en"> diff --git a/packages/astro/src/core/build/plugins/plugin-renderers.ts b/packages/astro/src/core/build/plugins/plugin-renderers.ts index 912df4241..f0cdf8983 100644 --- a/packages/astro/src/core/build/plugins/plugin-renderers.ts +++ b/packages/astro/src/core/build/plugins/plugin-renderers.ts @@ -38,6 +38,8 @@ export function vitePluginRenderers(opts: StaticBuildOptions): VitePlugin { exports.push(`export const renderers = [${rendererItems}];`); return `${imports.join('\n')}\n${exports.join('\n')}`; + } else { + return `export const renderers = [];`; } } }, diff --git a/packages/astro/src/core/config/settings.ts b/packages/astro/src/core/config/settings.ts index c0274f602..1d0938c00 100644 --- a/packages/astro/src/core/config/settings.ts +++ b/packages/astro/src/core/config/settings.ts @@ -3,7 +3,6 @@ import path from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import type { AstroConfig, AstroSettings } from '../../@types/astro'; import { getContentPaths } from '../../content/index.js'; -import jsxRenderer from '../../jsx/renderer.js'; import { markdownContentEntryType } from '../../vite-plugin-markdown/content-entry-type.js'; import { getDefaultClientDirectives } from '../client-directive/index.js'; import { AstroError, AstroErrorData } from '../errors/index.js'; @@ -96,7 +95,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings { }, }, ], - renderers: [jsxRenderer], + renderers: [], scripts: [], clientDirectives: getDefaultClientDirectives(), watchFiles: [], diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index efb78d137..846d6109d 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -19,9 +19,9 @@ import configAliasVitePlugin from '../vite-plugin-config-alias/index.js'; import envVitePlugin from '../vite-plugin-env/index.js'; import astroHeadPlugin from '../vite-plugin-head/index.js'; import htmlVitePlugin from '../vite-plugin-html/index.js'; +import mdxVitePlugin from '../vite-plugin-mdx/index.js'; import { astroInjectEnvTsPlugin } from '../vite-plugin-inject-env-ts/index.js'; import astroIntegrationsContainerPlugin from '../vite-plugin-integrations-container/index.js'; -import jsxVitePlugin from '../vite-plugin-jsx/index.js'; import astroLoadFallbackPlugin from '../vite-plugin-load-fallback/index.js'; import markdownVitePlugin from '../vite-plugin-markdown/index.js'; import astroScannerPlugin from '../vite-plugin-scanner/index.js'; @@ -121,7 +121,7 @@ export async function createVite( envVitePlugin({ settings }), markdownVitePlugin({ settings, logging }), htmlVitePlugin(), - jsxVitePlugin({ settings, logging }), + mdxVitePlugin({ settings, logging }), astroPostprocessVitePlugin(), astroIntegrationsContainerPlugin({ settings, logging }), astroScriptsPageSSRPlugin({ settings }), diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts deleted file mode 100644 index 7aa7e7b16..000000000 --- a/packages/astro/src/vite-plugin-jsx/index.ts +++ /dev/null @@ -1,251 +0,0 @@ -import type { TransformResult } from 'rollup'; -import { - transformWithEsbuild, - type EsbuildTransformOptions, - type Plugin, - type ResolvedConfig, -} from 'vite'; -import type { AstroRenderer, AstroSettings } from '../@types/astro'; -import type { LogOptions } from '../core/logger/core.js'; -import type { PluginMetadata } from '../vite-plugin-astro/types'; - -import babel from '@babel/core'; -import * as colors from 'kleur/colors'; -import path from 'node:path'; -import { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from '../content/index.js'; -import { astroEntryPrefix } from '../core/build/plugins/plugin-component-entry.js'; -import { error } from '../core/logger/core.js'; -import { removeQueryString } from '../core/path.js'; -import { detectImportSource } from './import-source.js'; -import tagExportsPlugin from './tag.js'; - -const JSX_EXTENSIONS = new Set(['.jsx', '.tsx', '.mdx']); -const IMPORT_STATEMENTS: Record<string, string> = { - react: "import React from 'react'", - preact: "import { h } from 'preact'", - 'solid-js': "import 'solid-js'", - astro: "import 'astro/jsx-runtime'", -}; - -function getEsbuildLoader(filePath: string): EsbuildTransformOptions['loader'] { - const fileExt = path.extname(filePath); - if (fileExt === '.mdx') return 'jsx'; - return fileExt.slice(1) as EsbuildTransformOptions['loader']; -} - -function collectJSXRenderers(renderers: AstroRenderer[]): Map<string, AstroRenderer> { - const renderersWithJSXSupport = renderers.filter((r) => r.jsxImportSource); - return new Map( - renderersWithJSXSupport.map((r) => [r.jsxImportSource, r] as [string, AstroRenderer]) - ); -} - -interface TransformJSXOptions { - code: string; - id: string; - mode: string; - renderer: AstroRenderer; - ssr: boolean; - root: URL; -} - -async function transformJSX({ - code, - mode, - id, - ssr, - renderer, - root, -}: TransformJSXOptions): Promise<TransformResult> { - const { jsxTransformOptions } = renderer; - const options = await jsxTransformOptions!({ mode, ssr }); - const plugins = [...(options.plugins || [])]; - if (ssr) { - plugins.push(await tagExportsPlugin({ rendererName: renderer.name, root })); - } - const result = await babel.transformAsync(code, { - presets: options.presets, - plugins, - cwd: process.cwd(), - filename: id, - ast: false, - compact: false, - sourceMaps: true, - configFile: false, - babelrc: false, - inputSourceMap: options.inputSourceMap, - }); - // TODO: Be more strict about bad return values here. - // Should we throw an error instead? Should we never return `{code: ""}`? - if (!result) return null; - - if (renderer.name === 'astro:jsx') { - const { astro } = result.metadata as unknown as PluginMetadata; - return { - code: result.code || '', - map: result.map, - meta: { - astro, - vite: { - // Setting this vite metadata to `ts` causes Vite to resolve .js - // extensions to .ts files. - lang: 'ts', - }, - }, - }; - } - - return { - code: result.code || '', - map: result.map, - }; -} - -interface AstroPluginJSXOptions { - settings: AstroSettings; - logging: LogOptions; -} - -// Format inspired by https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L54 -const SPECIAL_QUERY_REGEX = new RegExp( - `[?&](?:worker|sharedworker|raw|url|${CONTENT_FLAG}|${PROPAGATED_ASSET_FLAG})\\b` -); - -/** Use Astro config to allow for alternate or multiple JSX renderers (by default Vite will assume React) */ -export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugin { - let viteConfig: ResolvedConfig; - const jsxRenderers = new Map<string, AstroRenderer>(); - const jsxRenderersIntegrationOnly = new Map<string, AstroRenderer>(); - // A reference to Astro's internal JSX renderer. - let astroJSXRenderer: AstroRenderer; - // The first JSX renderer provided is considered the default renderer. - // This is a useful reference for when the user only gives a single render. - let defaultJSXRendererEntry: [string, AstroRenderer] | undefined; - - return { - name: 'astro:jsx', - enforce: 'pre', // run transforms before other plugins - async configResolved(resolvedConfig) { - viteConfig = resolvedConfig; - const possibleRenderers = collectJSXRenderers(settings.renderers); - for (const [importSource, renderer] of possibleRenderers) { - jsxRenderers.set(importSource, renderer); - if (importSource === 'astro') { - astroJSXRenderer = renderer; - } else { - jsxRenderersIntegrationOnly.set(importSource, renderer); - } - } - defaultJSXRendererEntry = [...jsxRenderersIntegrationOnly.entries()][0]; - }, - async transform(code, id, opts) { - const ssr = Boolean(opts?.ssr); - // Skip special queries and astro entries. We skip astro entries here as we know it doesn't contain - // JSX code, and also because we can't detect the import source to apply JSX transforms. - if (SPECIAL_QUERY_REGEX.test(id) || id.startsWith(astroEntryPrefix)) { - return null; - } - id = removeQueryString(id); - if (!JSX_EXTENSIONS.has(path.extname(id))) { - return null; - } - - const { mode } = viteConfig; - // Shortcut: only use Astro renderer for MD and MDX files - if (id.endsWith('.mdx')) { - const { code: jsxCode } = await transformWithEsbuild(code, id, { - loader: getEsbuildLoader(id), - jsx: 'preserve', - sourcemap: 'inline', - tsconfigRaw: { - compilerOptions: { - // Ensure client:only imports are treeshaken - verbatimModuleSyntax: false, - importsNotUsedAsValues: 'remove', - }, - }, - }); - return transformJSX({ - code: jsxCode, - id, - renderer: astroJSXRenderer, - mode, - ssr, - root: settings.config.root, - }); - } - if (defaultJSXRendererEntry && jsxRenderersIntegrationOnly.size === 1) { - // downlevel any non-standard syntax, but preserve JSX - const { code: jsxCode } = await transformWithEsbuild(code, id, { - loader: getEsbuildLoader(id), - jsx: 'preserve', - sourcemap: 'inline', - }); - return transformJSX({ - code: jsxCode, - id, - renderer: defaultJSXRendererEntry[1], - mode, - ssr, - root: settings.config.root, - }); - } - - const importSource = await detectImportSource(code, jsxRenderers, settings.tsConfig); - - // if we still can’t tell the import source, now is the time to throw an error. - if (!importSource && defaultJSXRendererEntry) { - const [defaultRendererName] = defaultJSXRendererEntry; - error( - logging, - 'renderer', - `${colors.yellow(id)} -Unable to resolve a renderer that handles this file! With more than one renderer enabled, you should include an import or use a pragma comment. -Add ${colors.cyan( - IMPORT_STATEMENTS[defaultRendererName] || `import '${defaultRendererName}';` - )} or ${colors.cyan(`/** @jsxImportSource: ${defaultRendererName} */`)} to this file. -` - ); - return null; - } else if (!importSource) { - error( - logging, - 'renderer', - `${colors.yellow(id)} -Unable to find a renderer for JSX. Do you have one configured in your Astro config? See this page to learn how: -https://docs.astro.build/en/core-concepts/framework-components/#installing-integrations -` - ); - return null; - } - - const selectedJsxRenderer = jsxRenderers.get(importSource); - // if the renderer is not installed for this JSX source, throw error - if (!selectedJsxRenderer) { - error( - logging, - 'renderer', - `${colors.yellow( - id - )} No renderer installed for ${importSource}. Try adding \`@astrojs/${importSource}\` to your project.` - ); - return null; - } - - // downlevel any non-standard syntax, but preserve JSX - const { code: jsxCode } = await transformWithEsbuild(code, id, { - loader: getEsbuildLoader(id), - jsx: 'preserve', - sourcemap: 'inline', - }); - return await transformJSX({ - code: jsxCode, - id, - renderer: selectedJsxRenderer, - mode, - ssr, - root: settings.config.root, - }); - }, - }; -} diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index dd2cbcd85..aff27f7a6 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -49,11 +49,6 @@ function safeMatter(source: string, id: string) { } } -// absolute path of "astro/jsx-runtime" -const astroJsxRuntimeModulePath = normalizePath( - fileURLToPath(new URL('../jsx-runtime/index.js', import.meta.url)) -); - const astroServerRuntimeModulePath = normalizePath( fileURLToPath(new URL('../runtime/server/index.js', import.meta.url)) ); @@ -115,8 +110,7 @@ export default function markdown({ settings, logging }: AstroPluginOptions): Plu } const code = escapeViteEnvReferences(` - import { Fragment, jsx as h } from ${JSON.stringify(astroJsxRuntimeModulePath)}; - import { spreadAttributes } from ${JSON.stringify(astroServerRuntimeModulePath)}; + import { unescapeHTML, spreadAttributes, createComponent, render, renderComponent } from ${JSON.stringify(astroServerRuntimeModulePath)}; import { AstroError, AstroErrorData } from ${JSON.stringify(astroErrorModulePath)}; ${layout ? `import Layout from ${JSON.stringify(layout)};` : ''} @@ -167,27 +161,29 @@ export default function markdown({ settings, logging }: AstroPluginOptions): Plu export function getHeadings() { return ${JSON.stringify(headings)}; } - export async function Content() { + + export const Content = createComponent((result, _props, slots) => { const { layout, ...content } = frontmatter; content.file = file; content.url = url; - const contentFragment = h(Fragment, { 'set:html': html }); + return ${ layout - ? `h(Layout, { - file, - url, - content, - frontmatter: content, - headings: getHeadings(), - rawContent, - compiledContent, - 'server:root': true, - children: contentFragment - })` - : `contentFragment` - }; - } + ? `render\`\${renderComponent(result, 'Layout', Layout, { + file, + url, + content, + frontmatter: content, + headings: getHeadings(), + rawContent, + compiledContent, + 'server:root': true, + }, { + 'default': () => render\`\${unescapeHTML(html)}\` + })}\`;` + : `render\`\${unescapeHTML(html)}\`;` + } + }); Content[Symbol.for('astro.needsHeadRendering')] = ${layout ? 'false' : 'true'}; export default Content; `); diff --git a/packages/astro/src/vite-plugin-jsx/README.md b/packages/astro/src/vite-plugin-mdx/README.md index 554651869..554651869 100644 --- a/packages/astro/src/vite-plugin-jsx/README.md +++ b/packages/astro/src/vite-plugin-mdx/README.md diff --git a/packages/astro/src/vite-plugin-jsx/import-source.ts b/packages/astro/src/vite-plugin-mdx/import-source.ts index c1f9ea6dc..c1f9ea6dc 100644 --- a/packages/astro/src/vite-plugin-jsx/import-source.ts +++ b/packages/astro/src/vite-plugin-mdx/import-source.ts diff --git a/packages/astro/src/vite-plugin-mdx/index.ts b/packages/astro/src/vite-plugin-mdx/index.ts new file mode 100644 index 000000000..473c4a78e --- /dev/null +++ b/packages/astro/src/vite-plugin-mdx/index.ts @@ -0,0 +1,134 @@ +import type { TransformResult } from 'rollup'; +import { + transformWithEsbuild, + type Plugin, + type ResolvedConfig, +} from 'vite'; +import type { AstroRenderer, AstroSettings } from '../@types/astro'; +import type { LogOptions } from '../core/logger/core.js'; +import type { PluginMetadata } from '../vite-plugin-astro/types'; + +import babel from '@babel/core'; +import { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from '../content/index.js'; +import { astroEntryPrefix } from '../core/build/plugins/plugin-component-entry.js'; +import { removeQueryString } from '../core/path.js'; +import tagExportsPlugin from './tag.js'; + +interface TransformJSXOptions { + code: string; + id: string; + mode: string; + renderer: AstroRenderer; + ssr: boolean; + root: URL; +} + +async function transformJSX({ + code, + mode, + id, + ssr, + renderer, + root, +}: TransformJSXOptions): Promise<TransformResult> { + const { jsxTransformOptions } = renderer; + const options = await jsxTransformOptions!({ mode, ssr }); + const plugins = [...(options.plugins || [])]; + if (ssr) { + plugins.push(await tagExportsPlugin({ rendererName: renderer.name, root })); + } + const result = await babel.transformAsync(code, { + presets: options.presets, + plugins, + cwd: process.cwd(), + filename: id, + ast: false, + compact: false, + sourceMaps: true, + configFile: false, + babelrc: false, + inputSourceMap: options.inputSourceMap, + }); + // TODO: Be more strict about bad return values here. + // Should we throw an error instead? Should we never return `{code: ""}`? + if (!result) return null; + + if (renderer.name === 'astro:jsx') { + const { astro } = result.metadata as unknown as PluginMetadata; + return { + code: result.code || '', + map: result.map, + meta: { + astro, + vite: { + // Setting this vite metadata to `ts` causes Vite to resolve .js + // extensions to .ts files. + lang: 'ts', + }, + }, + }; + } + + return { + code: result.code || '', + map: result.map, + }; +} + +interface AstroPluginJSXOptions { + settings: AstroSettings; + logging: LogOptions; +} + +// Format inspired by https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L54 +const SPECIAL_QUERY_REGEX = new RegExp( + `[?&](?:worker|sharedworker|raw|url|${CONTENT_FLAG}|${PROPAGATED_ASSET_FLAG})\\b` +); + +/** Use Astro config to allow for alternate or multiple JSX renderers (by default Vite will assume React) */ +export default function mdxVitePlugin({ settings }: AstroPluginJSXOptions): Plugin { + let viteConfig: ResolvedConfig; + // A reference to Astro's internal JSX renderer. + let astroJSXRenderer: AstroRenderer; + + return { + name: 'astro:jsx', + enforce: 'pre', // run transforms before other plugins + async configResolved(resolvedConfig) { + viteConfig = resolvedConfig; + astroJSXRenderer = settings.renderers.find((r) => r.jsxImportSource === 'astro')!; + }, + async transform(code, id, opts) { + // Skip special queries and astro entries. We skip astro entries here as we know it doesn't contain + // JSX code, and also because we can't detect the import source to apply JSX transforms. + if (SPECIAL_QUERY_REGEX.test(id) || id.startsWith(astroEntryPrefix)) { + return null; + } + id = removeQueryString(id); + // Shortcut: only use Astro renderer for MD and MDX files + if (!id.endsWith('.mdx')) { + return null; + } + const { code: jsxCode } = await transformWithEsbuild(code, id, { + loader: 'jsx', + jsx: 'preserve', + sourcemap: 'inline', + tsconfigRaw: { + compilerOptions: { + // Ensure client:only imports are treeshaken + verbatimModuleSyntax: false, + importsNotUsedAsValues: 'remove', + }, + }, + }); + return transformJSX({ + code: jsxCode, + id, + renderer: astroJSXRenderer, + mode: viteConfig.mode, + ssr: Boolean(opts?.ssr), + root: settings.config.root, + }); + }, + }; +} diff --git a/packages/astro/src/vite-plugin-jsx/tag.ts b/packages/astro/src/vite-plugin-mdx/tag.ts index 5efc4c41f..5efc4c41f 100644 --- a/packages/astro/src/vite-plugin-jsx/tag.ts +++ b/packages/astro/src/vite-plugin-mdx/tag.ts diff --git a/packages/astro/test/fixtures/astro-slots-nested/astro.config.mjs b/packages/astro/test/fixtures/astro-slots-nested/astro.config.mjs index 4a8807ed0..6f37285c6 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-slots-nested/astro.config.mjs @@ -7,9 +7,9 @@ import vue from '@astrojs/vue'; export default defineConfig({ integrations: [ - react(), - preact(), - solid(), + preact({ include: ['**/preact/*'] }), + solid({ include: ['**/solid/*'] }), + react({ include: ['**/react/*'] }), svelte(), vue() ] diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildrenP.tsx b/packages/astro/test/fixtures/astro-slots-nested/src/components/preact/PassesChildrenP.tsx index ec89ed15c..ec89ed15c 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildrenP.tsx +++ b/packages/astro/test/fixtures/astro-slots-nested/src/components/preact/PassesChildrenP.tsx diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/components/Inner.tsx b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/Inner.tsx index b7cfe16a2..b7cfe16a2 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/components/Inner.tsx +++ b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/Inner.tsx diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/components/Parent.jsx b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/Parent.jsx index 340dacab3..340dacab3 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/components/Parent.jsx +++ b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/Parent.jsx diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildren.tsx b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/PassesChildren.tsx index e764d5867..e764d5867 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildren.tsx +++ b/packages/astro/test/fixtures/astro-slots-nested/src/components/react/PassesChildren.tsx diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildrenS.tsx b/packages/astro/test/fixtures/astro-slots-nested/src/components/solid/PassesChildrenS.tsx index d539c55dc..d539c55dc 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/components/PassesChildrenS.tsx +++ b/packages/astro/test/fixtures/astro-slots-nested/src/components/solid/PassesChildrenS.tsx diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/pages/component-slot.astro b/packages/astro/test/fixtures/astro-slots-nested/src/pages/component-slot.astro index b9a03f887..d803f3ff7 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/pages/component-slot.astro +++ b/packages/astro/test/fixtures/astro-slots-nested/src/pages/component-slot.astro @@ -1,6 +1,6 @@ --- import SlotRender from '../components/SlotRender.astro' -import Inner from '../components/Inner' +import Inner from '../components/react/Inner' --- <html lang="en"> diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/pages/hidden-nested.astro b/packages/astro/test/fixtures/astro-slots-nested/src/pages/hidden-nested.astro index e51ce00a0..dcb3ebcba 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/pages/hidden-nested.astro +++ b/packages/astro/test/fixtures/astro-slots-nested/src/pages/hidden-nested.astro @@ -1,6 +1,6 @@ --- -import Parent from '../components/Parent' -import Inner from '../components/Inner' +import Parent from '../components/react/Parent' +import Inner from '../components/react/Inner' --- <html lang="en"> diff --git a/packages/astro/test/fixtures/astro-slots-nested/src/pages/server-component-nested.astro b/packages/astro/test/fixtures/astro-slots-nested/src/pages/server-component-nested.astro index b5a3d72a0..ec4ae3158 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/src/pages/server-component-nested.astro +++ b/packages/astro/test/fixtures/astro-slots-nested/src/pages/server-component-nested.astro @@ -1,7 +1,7 @@ --- -import PassesChildren from '../components/PassesChildren.jsx'; -import PassesChildrenP from '../components/PassesChildrenP.jsx'; -import PassesChildrenS from '../components/PassesChildrenS.jsx'; +import PassesChildren from '../components/react/PassesChildren.jsx'; +import PassesChildrenP from '../components/preact/PassesChildrenP.jsx'; +import PassesChildrenS from '../components/solid/PassesChildrenS.jsx'; import PassesChildrenSv from '../components/PassesChildrenSv.svelte'; import PassesChildrenV from '../components/PassesChildrenV.vue'; --- diff --git a/packages/astro/test/fixtures/jsx/astro.config.mjs b/packages/astro/test/fixtures/jsx/astro.config.mjs index 5b84d23a8..61d0d075e 100644 --- a/packages/astro/test/fixtures/jsx/astro.config.mjs +++ b/packages/astro/test/fixtures/jsx/astro.config.mjs @@ -1,13 +1,27 @@ import { defineConfig } from 'astro/config'; import renderer from 'astro/jsx/renderer.js'; +import mdx from '@astrojs/mdx'; import preact from '@astrojs/preact'; import react from '@astrojs/react'; import svelte from '@astrojs/svelte'; import vue from '@astrojs/vue'; import solid from '@astrojs/solid-js'; + export default defineConfig({ integrations: [ + preact({ + include: ['**/preact/*'] + }), + react({ + include: ['**/react/*'] + }), + solid({ + include: ['**/solid/*'], + }), + mdx(), + svelte(), + vue(), { name: '@astrojs/test-jsx', hooks: { @@ -16,10 +30,5 @@ export default defineConfig({ } } }, - preact(), - react(), - svelte(), - vue(), - solid(), ] }) diff --git a/packages/astro/test/fixtures/jsx/package.json b/packages/astro/test/fixtures/jsx/package.json index 1e7001b47..e5b12ece4 100644 --- a/packages/astro/test/fixtures/jsx/package.json +++ b/packages/astro/test/fixtures/jsx/package.json @@ -3,6 +3,7 @@ "version": "0.0.0", "private": true, "devDependencies": { + "@astrojs/mdx": "workspace:*", "@astrojs/preact": "workspace:*", "@astrojs/react": "workspace:*", "@astrojs/solid-js": "workspace:*", diff --git a/packages/astro/test/fixtures/jsx/src/components/Content.mdx b/packages/astro/test/fixtures/jsx/src/components/Content.mdx new file mode 100644 index 000000000..7a8bbc0f4 --- /dev/null +++ b/packages/astro/test/fixtures/jsx/src/components/Content.mdx @@ -0,0 +1,5 @@ +import ReactCounter from './react/ReactCounter.jsx' + +# Hello world + +<ReactCounter /> diff --git a/packages/astro/test/fixtures/jsx/src/components/Frameworks.jsx b/packages/astro/test/fixtures/jsx/src/components/Frameworks.jsx deleted file mode 100644 index 2cc175964..000000000 --- a/packages/astro/test/fixtures/jsx/src/components/Frameworks.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import 'astro/jsx-runtime'; -import { Test } from "./Test"; - -import PreactCounter from "./PreactCounter"; -import ReactCounter from "./ReactCounter"; -import SolidCounter from "./SolidCounter"; -import SvelteCounter from "./SvelteCounter.svelte"; -import VueCounter from "./VueCounter.vue"; - -export function Preact() { - return <Test case="has-preact"><PreactCounter /></Test> -} - -export function React() { - return <Test case="has-react"><ReactCounter /></Test> -} - -export function Solid() { - return <Test case="has-solid"><SolidCounter /></Test> -} - -export function Svelte() { - return <Test case="has-svelte"><SvelteCounter /></Test> -} - -export function Vue() { - return <Test case="has-vue"><VueCounter /></Test> -} diff --git a/packages/astro/test/fixtures/jsx/src/components/PreactCounter.tsx b/packages/astro/test/fixtures/jsx/src/components/preact/PreactCounter.tsx index cdb368377..cdb368377 100644 --- a/packages/astro/test/fixtures/jsx/src/components/PreactCounter.tsx +++ b/packages/astro/test/fixtures/jsx/src/components/preact/PreactCounter.tsx diff --git a/packages/astro/test/fixtures/jsx/src/components/ReactCounter.jsx b/packages/astro/test/fixtures/jsx/src/components/react/ReactCounter.jsx index 5c5a001e8..7404d45bc 100644 --- a/packages/astro/test/fixtures/jsx/src/components/ReactCounter.jsx +++ b/packages/astro/test/fixtures/jsx/src/components/react/ReactCounter.jsx @@ -6,6 +6,8 @@ export default function ReactCounter() { const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); + debugger; + return ( <div id="react"> <div className="counter"> diff --git a/packages/astro/test/fixtures/jsx/src/components/SolidCounter.jsx b/packages/astro/test/fixtures/jsx/src/components/solid/SolidCounter.jsx index 9cfd85d02..9cfd85d02 100644 --- a/packages/astro/test/fixtures/jsx/src/components/SolidCounter.jsx +++ b/packages/astro/test/fixtures/jsx/src/components/solid/SolidCounter.jsx diff --git a/packages/astro/test/fixtures/jsx/src/pages/frameworks.astro b/packages/astro/test/fixtures/jsx/src/pages/frameworks.astro index ede0f542c..cfd28a3d4 100644 --- a/packages/astro/test/fixtures/jsx/src/pages/frameworks.astro +++ b/packages/astro/test/fixtures/jsx/src/pages/frameworks.astro @@ -1,13 +1,27 @@ --- -import * as Framework from '../components/Frameworks' +import FrameworkSolid from '../components/solid/SolidCounter.jsx' +import FrameworkPreact from '../components/preact/PreactCounter.jsx' +import FrameworkReact from '../components/react/ReactCounter.jsx' +import FrameworkSvelte from '../components/SvelteCounter.svelte' +import FrameworkVue from '../components/VueCounter.vue' +import FrameworkMDX from '../components/Content.mdx' --- -<Framework.Preact /> - -<Framework.React /> - -<Framework.Solid /> - -<Framework.Svelte /> - -<Framework.Vue /> +<div id="preact-wrapper"> + <FrameworkPreact /> +</div> +<div id="rreact-wrapper"> + <FrameworkReact /> +</div> +<div id="solid-wrapper"> + <FrameworkSolid /> +</div> +<div id="svelte-wrapper"> + <FrameworkSvelte /> +</div> +<div id="vue-wrapper"> + <FrameworkVue /> +</div> +<div id="mdx-wrapper"> + <FrameworkMDX /> +</div> diff --git a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js index 22fb55f10..4f15bdac1 100644 --- a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js +++ b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js @@ -2,4 +2,4 @@ import { useState } from "react"; export function useSpecialState(initialState) { return useState(initialState); -}
\ No newline at end of file +} diff --git a/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx b/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx index bfdf5bed1..7ee876f2c 100644 --- a/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx +++ b/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx @@ -1,4 +1,3 @@ -/** @jsxImportSource preact */ import { useSpecialState } from '@test/react-lib' export default function Counter({ children }) { diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/markdown-page.md b/packages/astro/test/fixtures/tailwindcss/src/pages/markdown-page.md deleted file mode 100644 index e4c6b6bc9..000000000 --- a/packages/astro/test/fixtures/tailwindcss/src/pages/markdown-page.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: "Markdown + Tailwind" -setup: | - import Button from '../components/Button.astro'; - import Complex from '../components/Complex.astro'; ---- - -<div class="grid place-items-center h-screen content-center"> - <Button>Tailwind Button in Markdown!</Button> - <Complex /> -</div>
\ No newline at end of file diff --git a/packages/astro/test/jsx.test.js b/packages/astro/test/jsx.test.js index 41671699c..64c7a7609 100644 --- a/packages/astro/test/jsx.test.js +++ b/packages/astro/test/jsx.test.js @@ -20,43 +20,51 @@ describe('jsx-runtime', () => { expect($('#named').text()).to.equal('Named'); }); - it('Can load Preact component inside Astro JSX', async () => { + it('Can load Preact component inside Astro', async () => { const html = await fixture.readFile('/frameworks/index.html'); const $ = cheerio.load(html); - expect($('#has-preact #preact').length).to.equal(1); + expect($('#has-preact #preact').length).to.equal(0); expect($('#preact').text()).to.include('Preact'); }); - it('Can load React component inside Astro JSX', async () => { + it('Can load React component inside Astro', async () => { const html = await fixture.readFile('/frameworks/index.html'); const $ = cheerio.load(html); - expect($('#has-react #react').length).to.equal(1); + expect($('#has-react #react').length).to.equal(0); expect($('#react').text()).to.include('React'); }); - it('Can load Solid component inside Astro JSX', async () => { + it('Can load Solid component inside Astro', async () => { const html = await fixture.readFile('/frameworks/index.html'); const $ = cheerio.load(html); - expect($('#has-solid #solid').length).to.equal(1); + expect($('#has-solid #solid').length).to.equal(0); expect($('#solid').text()).to.include('Solid'); }); - it('Can load Svelte component inside Astro JSX', async () => { + it('Can load Svelte component inside Astro', async () => { const html = await fixture.readFile('/frameworks/index.html'); const $ = cheerio.load(html); - expect($('#has-svelte #svelte').length).to.equal(1); + expect($('#has-svelte #svelte').length).to.equal(0); expect($('#svelte').text()).to.include('Svelte'); }); - it('Can load Vue component inside Astro JSX', async () => { + it('Can load Vue component inside Astro', async () => { const html = await fixture.readFile('/frameworks/index.html'); const $ = cheerio.load(html); - expect($('#has-vue #vue').length).to.equal(1); + expect($('#has-vue #vue').length).to.equal(0); expect($('#vue').text()).to.include('Vue'); }); + + it('Can load MDX component inside Astro', async () => { + const html = await fixture.readFile('/frameworks/index.html'); + const $ = cheerio.load(html); + + expect($('#mdx-wrapper #hello-world')).to.have.a.lengthOf(1, 'md content rendered'); + expect($('#mdx-wrapper #react')).to.have.a.lengthOf(1, 'React component rendered') + }); }); diff --git a/packages/astro/test/preact-compat-component.test.js b/packages/astro/test/preact-compat-component.test.js index f0cd9e45f..8937e9afa 100644 --- a/packages/astro/test/preact-compat-component.test.js +++ b/packages/astro/test/preact-compat-component.test.js @@ -3,18 +3,30 @@ import * as cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; describe('Preact compat component', () => { + /** @type {import('./test-utils.js').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/preact-compat-component/', + }); + }); + describe('Development', () => { - let fixture; + /** @type {import('./test-utils.js').DevServer} */ + let devServer; before(async () => { - fixture = await loadFixture({ - root: './fixtures/preact-compat-component/', - }); - await fixture.startDevServer(); + devServer = await fixture.startDevServer(); }); + after(async() => { + await devServer.stop(); + }) + it('Can load Counter', async () => { - const html = await fixture.fetch('/').then((res) => res.text()); + const res = await fixture.fetch('/'); + const html = await res.text(); const $ = cheerio.load(html); expect($('#counter-text').text()).to.be.eq('0'); @@ -22,12 +34,7 @@ describe('Preact compat component', () => { }); describe('Build', () => { - let fixture; - before(async () => { - fixture = await loadFixture({ - root: './fixtures/preact-compat-component/', - }); await fixture.build(); }); diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js index 2a37c6572..3c249cc2c 100644 --- a/packages/astro/test/tailwindcss.test.js +++ b/packages/astro/test/tailwindcss.test.js @@ -3,6 +3,7 @@ import * as cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; describe('Tailwind', () => { + /** @type {import('./test-utils.js').Fixture} */ let fixture; before(async () => { @@ -58,14 +59,6 @@ describe('Tailwind', () => { expect(button.hasClass('2xl:w-[80%]'), 'complex class').to.be.true; }); - it('handles Markdown pages', async () => { - const html = await fixture.readFile('/markdown-page/index.html'); - const $md = cheerio.load(html); - const bundledCSSHREF = $md('link[rel=stylesheet][href^=/_astro/]').attr('href'); - const mdBundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/')); - expect(mdBundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/); - }); - it('handles MDX pages (with integration)', async () => { const html = await fixture.readFile('/mdx-page/index.html'); const $md = cheerio.load(html); diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js index a58d417d7..0b336698f 100644 --- a/packages/astro/test/test-utils.js +++ b/packages/astro/test/test-utils.js @@ -20,7 +20,7 @@ import { sync } from '../dist/core/sync/index.js'; process.env.ASTRO_TELEMETRY_DISABLED = true; /** - * @typedef {import('../src/core/dev/dev').DedvServer} DevServer + * @typedef {import('../src/core/dev/dev').DevServer} DevServer * @typedef {import('../src/@types/astro').AstroInlineConfig & { root?: string | URL }} AstroInlineConfig * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer * @typedef {import('../src/core/app/index').App} App diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index ecf2a9a95..4cce23921 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -13,6 +13,7 @@ import type { Plugin as VitePlugin } from 'vite'; import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js'; import type { OptimizeOptions } from './rehype-optimize-static.js'; import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from './utils.js'; +import astroJSXRenderer from 'astro/jsx/renderer.js'; export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & { extendMarkdownConfig: boolean; @@ -37,9 +38,10 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI name: '@astrojs/mdx', hooks: { 'astro:config:setup': async (params) => { - const { updateConfig, config, addPageExtension, addContentEntryType, command } = + const { updateConfig, config, addPageExtension, addContentEntryType, command, addRenderer } = params as SetupHookParams; + addRenderer(astroJSXRenderer); addPageExtension('.mdx'); addContentEntryType({ extensions: ['.mdx'], diff --git a/packages/integrations/preact/package.json b/packages/integrations/preact/package.json index f1a5f08f4..5fefa53eb 100644 --- a/packages/integrations/preact/package.json +++ b/packages/integrations/preact/package.json @@ -35,10 +35,11 @@ "dev": "astro-scripts dev \"src/**/*.ts\"" }, "dependencies": { - "@babel/core": "^7.22.5", "@babel/plugin-transform-react-jsx": "^7.22.5", + "@babel/plugin-transform-react-jsx-development": "^7.22.5", + "babel-plugin-transform-hook-names": "^1.0.2", + "@preact/preset-vite": "^2.5.0", "@preact/signals": "^1.1.3", - "babel-plugin-module-resolver": "^5.0.0", "preact-render-to-string": "^5.2.6" }, "devDependencies": { diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts index 98a2dd205..153b9e1c3 100644 --- a/packages/integrations/preact/src/index.ts +++ b/packages/integrations/preact/src/index.ts @@ -1,94 +1,68 @@ import type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro'; +import preact, {type PreactPluginOptions as VitePreactPluginOptions} from '@preact/preset-vite'; +import { fileURLToPath } from 'node:url'; + +const babelCwd = new URL('../', import.meta.url); function getRenderer(development: boolean): AstroRenderer { return { name: '@astrojs/preact', clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js', serverEntrypoint: '@astrojs/preact/server.js', - jsxImportSource: 'preact', - jsxTransformOptions: async () => { - // @ts-expect-error types not found - const plugin = await import('@babel/plugin-transform-react-jsx'); - const jsx = plugin.default?.default ?? plugin.default; - return { - plugins: [jsx({}, { runtime: 'automatic', importSource: 'preact' })], - }; - }, }; } -function getCompatRenderer(development: boolean): AstroRenderer { +export type Options =Pick<VitePreactPluginOptions, 'include' | 'exclude'> & { compat?: boolean }; + +export default function ({include, exclude, compat}: Options = {}): AstroIntegration { return { name: '@astrojs/preact', - clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js', - serverEntrypoint: '@astrojs/preact/server.js', - jsxImportSource: 'react', - jsxTransformOptions: async () => { - // @ts-expect-error types not found - const plugin = await import('@babel/plugin-transform-react-jsx'); - const jsx = plugin.default?.default ?? plugin.default; - return { - plugins: [ - jsx({}, { runtime: 'automatic', importSource: 'preact/compat' }), - [ - 'babel-plugin-module-resolver', - { - alias: { - react: 'preact/compat', - 'react-dom/test-utils': 'preact/test-utils', - 'react-dom': 'preact/compat', - 'react/jsx-runtime': 'preact/jsx-runtime', - }, - }, - ], - ], - }; - }, - }; -} + hooks: { + 'astro:config:setup': ({ addRenderer, updateConfig, command }) => { + const preactPlugin = preact({ + include, + exclude, + babel: { + cwd: fileURLToPath(babelCwd) + } + }); -function getViteConfiguration(compat?: boolean): ViteUserConfig { - const viteConfig: ViteUserConfig = { - optimizeDeps: { - include: ['@astrojs/preact/client.js', 'preact', 'preact/jsx-runtime'], - exclude: ['@astrojs/preact/server.js'], - }, - }; + const viteConfig: ViteUserConfig = { + optimizeDeps: { + include: ['@astrojs/preact/client.js', 'preact', 'preact/jsx-runtime'], + exclude: ['@astrojs/preact/server.js'], + }, + }; - if (compat) { - viteConfig.optimizeDeps!.include!.push( - 'preact/compat', - 'preact/test-utils', - 'preact/compat/jsx-runtime' - ); - viteConfig.resolve = { - alias: [ - { find: 'react', replacement: 'preact/compat' }, - { find: 'react-dom/test-utils', replacement: 'preact/test-utils' }, - { find: 'react-dom', replacement: 'preact/compat' }, - { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }, - ], - dedupe: ['preact/compat', 'preact'], - }; - // noExternal React entrypoints to be bundled, resolved, and aliased by Vite - viteConfig.ssr = { - noExternal: ['react', 'react-dom', 'react-dom/test-utils', 'react/jsx-runtime'], - }; - } + // If not compat, delete the plugin that does it + if(!compat) { + const pIndex = preactPlugin.findIndex(p => p.name == 'preact:config'); + if (pIndex >= 0) { + preactPlugin.splice(pIndex, 1); + } + } else { + viteConfig.optimizeDeps!.include!.push( + 'preact/compat', + 'preact/test-utils', + 'preact/compat/jsx-runtime', + ); + viteConfig.resolve = { + alias: [ + { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }, + ], + dedupe: ['preact/compat', 'preact'], + }; + // noExternal React entrypoints to be bundled, resolved, and aliased by Vite + viteConfig.ssr = { + noExternal: ['react', 'react-dom', 'react-dom/test-utils', 'react/jsx-runtime'], + }; + } - return viteConfig; -} + viteConfig.plugins = [preactPlugin]; -export default function ({ compat }: { compat?: boolean } = {}): AstroIntegration { - return { - name: '@astrojs/preact', - hooks: { - 'astro:config:setup': ({ addRenderer, updateConfig, command }) => { - const development = command === 'dev'; - if (compat) addRenderer(getCompatRenderer(development)); - addRenderer(getRenderer(development)); + addRenderer(getRenderer(command === 'dev')); updateConfig({ - vite: getViteConfiguration(compat), + vite: viteConfig, }); }, }, diff --git a/packages/integrations/preact/src/server.ts b/packages/integrations/preact/src/server.ts index 6a2ceb612..b9d063b62 100644 --- a/packages/integrations/preact/src/server.ts +++ b/packages/integrations/preact/src/server.ts @@ -29,8 +29,8 @@ function check(this: RendererContext, Component: any, props: Record<string, any> // There are edge cases (SolidJS) where Preact *might* render a string, // but components would be <undefined></undefined> - - return !/\<undefined\>/.test(html); + // It also might render an empty sting. + return html == '' ? false : !/\<undefined\>/.test(html); } catch (err) { return false; } diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json index 958ee5ed7..28dbf0891 100644 --- a/packages/integrations/react/package.json +++ b/packages/integrations/react/package.json @@ -44,8 +44,8 @@ "dev": "astro-scripts dev \"src/**/*.ts\"" }, "dependencies": { - "@babel/core": "^7.22.5", - "@babel/plugin-transform-react-jsx": "^7.22.5" + "@astrojs/internal-helpers": "0.2.0-beta.0", + "@vitejs/plugin-react": "^4.0.3" }, "devDependencies": { "@types/react": "^17.0.62", diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index d7906fe4a..da008a670 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -1,5 +1,10 @@ import type { AstroIntegration } from 'astro'; import { version as ReactVersion } from 'react-dom'; +import react, {type Options as ViteReactPluginOptions} from '@vitejs/plugin-react'; +import { appendForwardSlash } from '@astrojs/internal-helpers/path'; + + +const FAST_REFRESH_PREAMBLE = react.preambleCode; function getRenderer() { return { @@ -10,33 +15,10 @@ function getRenderer() { serverEntrypoint: ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js', - jsxImportSource: 'react', - jsxTransformOptions: async () => { - // @ts-expect-error types not found - const babelPluginTransformReactJsxModule = await import('@babel/plugin-transform-react-jsx'); - const jsx = - babelPluginTransformReactJsxModule?.default?.default ?? - babelPluginTransformReactJsxModule?.default; - return { - plugins: [ - jsx( - {}, - { - runtime: 'automatic', - // This option tells the JSX transform how to construct the "*/jsx-runtime" import. - // In React v17, we had to shim this due to an export map issue in React. - // In React v18, this issue was fixed and we can import "react/jsx-runtime" directly. - // See `./jsx-runtime.js` for more details. - importSource: ReactVersion.startsWith('18.') ? 'react' : '@astrojs/react', - } - ), - ], - }; - }, }; } -function getViteConfiguration() { +function getViteConfiguration({include, exclude}: Options = {}) { return { optimizeDeps: { include: [ @@ -54,8 +36,9 @@ function getViteConfiguration() { : '@astrojs/react/server-v17.js', ], }, + plugins: [react({include, exclude})], resolve: { - dedupe: ['react', 'react-dom'], + dedupe: ['react', 'react-dom', 'react-dom/server'], }, ssr: { external: ReactVersion.startsWith('18.') @@ -73,13 +56,18 @@ function getViteConfiguration() { }; } -export default function (): AstroIntegration { +export type Options =Pick<ViteReactPluginOptions, 'include' | 'exclude'>; +export default function ({include, exclude}: Pick<ViteReactPluginOptions, 'include' | 'exclude'> = {}): AstroIntegration { return { name: '@astrojs/react', hooks: { - 'astro:config:setup': ({ addRenderer, updateConfig }) => { + 'astro:config:setup': ({ config, command, addRenderer, updateConfig, injectScript }) => { addRenderer(getRenderer()); - updateConfig({ vite: getViteConfiguration() }); + updateConfig({ vite: getViteConfiguration({include, exclude}) }); + if (command === 'dev') { + const preamble = FAST_REFRESH_PREAMBLE.replace(`__BASE__`, appendForwardSlash(config.base)) + injectScript('before-hydration', preamble); + } }, }, }; diff --git a/packages/integrations/solid/package.json b/packages/integrations/solid/package.json index c962e025a..580545f44 100644 --- a/packages/integrations/solid/package.json +++ b/packages/integrations/solid/package.json @@ -35,8 +35,7 @@ "dev": "astro-scripts dev \"src/**/*.ts\"" }, "dependencies": { - "babel-preset-solid": "^1.7.4", - "vitefu": "^0.2.4" + "vite-plugin-solid": "^2.7.0" }, "devDependencies": { "astro": "workspace:*", diff --git a/packages/integrations/solid/src/dependencies.ts b/packages/integrations/solid/src/dependencies.ts deleted file mode 100644 index ac6e5c655..000000000 --- a/packages/integrations/solid/src/dependencies.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { AstroConfig } from 'astro'; -import { fileURLToPath } from 'node:url'; -import { crawlFrameworkPkgs } from 'vitefu'; - -export async function getSolidPkgsConfig(isBuild: boolean, astroConfig: AstroConfig) { - return await crawlFrameworkPkgs({ - root: fileURLToPath(astroConfig.root), - isBuild, - viteUserConfig: astroConfig.vite, - isFrameworkPkgByJson(pkgJson) { - return containsSolidField(pkgJson.exports || {}); - }, - }); -} - -// Reference vite-plugin-solid heuristic -// https://github.com/solidjs/vite-plugin-solid/blob/5558486b0c63788e1275244256918f80294a8338/src/index.ts#L251-L259 -// License: MIT (https://github.com/solidjs/vite-plugin-solid/blob/5558486b0c63788e1275244256918f80294a8338/package.json#L38) -function containsSolidField(fields: Record<string, any>) { - const keys = Object.keys(fields); - for (const key of keys) { - if (key === 'solid') return true; - if (typeof fields[key] === 'object' && fields[key] != null && containsSolidField(fields[key])) - return true; - } - return false; -} diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts index cfd38224c..1385ffc21 100644 --- a/packages/integrations/solid/src/index.ts +++ b/packages/integrations/solid/src/index.ts @@ -1,63 +1,64 @@ -import type { AstroConfig, AstroIntegration, AstroRenderer } from 'astro'; -import { getSolidPkgsConfig } from './dependencies.js'; +import type { AstroIntegration, AstroRenderer } from 'astro'; +import solid, { type Options as ViteSolidPluginOptions } from 'vite-plugin-solid'; -function getRenderer(): AstroRenderer { - return { - name: '@astrojs/solid-js', - clientEntrypoint: '@astrojs/solid-js/client.js', - serverEntrypoint: '@astrojs/solid-js/server.js', - jsxImportSource: 'solid-js', - jsxTransformOptions: async ({ ssr }) => { - // @ts-expect-error types not found - const [{ default: solid }] = await Promise.all([import('babel-preset-solid')]); - const options = { - presets: [solid({}, { generate: ssr ? 'ssr' : 'dom', hydratable: true })], - plugins: [], - // Otherwise, babel will try to consume the source map generated by esbuild - // This causes unexpected issues with newline characters: https://github.com/withastro/astro/issues/3371 - // Note "vite-plugin-solid" does the same: https://github.com/solidjs/vite-plugin-solid/blob/master/src/index.ts#L344-L345 - inputSourceMap: false as any, - }; - - return options; - }, - }; -} - -async function getViteConfiguration(isDev: boolean, astroConfig: AstroConfig) { +async function getViteConfiguration( + isDev: boolean, + { include, exclude }: Options = {}, +) { // https://github.com/solidjs/vite-plugin-solid // We inject the dev mode only if the user explicitly wants it or if we are in dev (serve) mode const nestedDeps = ['solid-js', 'solid-js/web', 'solid-js/store', 'solid-js/html', 'solid-js/h']; - const solidPkgsConfig = await getSolidPkgsConfig(!isDev, astroConfig); return { - /** - * We only need esbuild on .ts or .js files. - * .tsx & .jsx files are handled by us - */ - esbuild: { include: /\.ts$/ }, resolve: { conditions: ['solid', ...(isDev ? ['development'] : [])], dedupe: nestedDeps, alias: [{ find: /^solid-refresh$/, replacement: '/@solid-refresh' }], }, optimizeDeps: { - include: [...nestedDeps, ...solidPkgsConfig.optimizeDeps.include], - exclude: ['@astrojs/solid-js/server.js', ...solidPkgsConfig.optimizeDeps.exclude], + include: [...nestedDeps], + exclude: ['@astrojs/solid-js/server.js'], }, + plugins: [ + solid({ include, exclude, dev: isDev, ssr: true }), + { + name: '@astrojs/solid:config-overrides', + enforce: 'post', + config() { + return { + esbuild: { + // To support using alongside other JSX frameworks, still let + // esbuild compile stuff. Solid goes first anyways. + include: /\.(m?ts|[jt]sx)$/ + }, + } + }, + } + ], ssr: { - external: ['babel-preset-solid', ...solidPkgsConfig.ssr.external], - noExternal: [...solidPkgsConfig.ssr.noExternal], + external: ['babel-preset-solid'], }, }; } -export default function (): AstroIntegration { +function getRenderer(): AstroRenderer { + return { + name: '@astrojs/solid-js', + clientEntrypoint: '@astrojs/solid-js/client.js', + serverEntrypoint: '@astrojs/solid-js/server.js', + }; +} + +export type Options = Pick<ViteSolidPluginOptions, 'include' | 'exclude'>; + +export default function (opts: Options = {}): AstroIntegration { return { name: '@astrojs/solid-js', hooks: { - 'astro:config:setup': async ({ command, addRenderer, updateConfig, config }) => { + 'astro:config:setup': async ({ command, addRenderer, updateConfig }) => { addRenderer(getRenderer()); - updateConfig({ vite: await getViteConfiguration(command === 'dev', config) }); + updateConfig({ + vite: await getViteConfiguration(command === 'dev', opts), + }); }, }, }; |