diff options
Diffstat (limited to 'packages/integrations/react/src')
-rw-r--r-- | packages/integrations/react/src/index.ts | 63 |
1 files changed, 30 insertions, 33 deletions
diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index d1cd7c4e6..a318bb4c2 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -1,7 +1,14 @@ 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'; import type * as vite from 'vite'; +const FAST_REFRESH_PREAMBLE = react.preambleCode; + + + + function getRenderer() { return { name: '@astrojs/react', @@ -11,29 +18,6 @@ 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', - } - ), - ], - }; - }, }; } @@ -59,7 +43,7 @@ function optionsPlugin(experimentalReactChildren: boolean): vite.Plugin { }; } -function getViteConfiguration(experimentalReactChildren: boolean) { +function getViteConfiguration(experimentalReactChildren: boolean, { include, exclude }: Options = {}) { return { optimizeDeps: { include: [ @@ -77,8 +61,12 @@ function getViteConfiguration(experimentalReactChildren: boolean) { : '@astrojs/react/server-v17.js', ], }, + plugins: [ + react({ include, exclude }), + optionsPlugin(experimentalReactChildren) + ], resolve: { - dedupe: ['react', 'react-dom'], + dedupe: ['react', 'react-dom', 'react-dom/server'], }, ssr: { external: ReactVersion.startsWith('18.') @@ -93,23 +81,32 @@ function getViteConfiguration(experimentalReactChildren: boolean) { 'use-immer', ], }, - plugins: [optionsPlugin(experimentalReactChildren)], }; } -export type ReactIntegrationOptions = { +export type ReactIntegrationOptions = Pick<ViteReactPluginOptions, 'include' | 'exclude'> & { experimentalReactChildren: boolean; }; - -export default function ( - { experimentalReactChildren }: ReactIntegrationOptions = { experimentalReactChildren: false } -): AstroIntegration { +export default function ({ + include, + exclude, + experimentalReactChildren +}: ReactIntegrationOptions = { + experimentalReactChildren: false +}): AstroIntegration { return { name: '@astrojs/react', hooks: { - 'astro:config:setup': ({ addRenderer, updateConfig }) => { + 'astro:config:setup': ({ config, command, addRenderer, updateConfig, injectScript }) => { addRenderer(getRenderer()); - updateConfig({ vite: getViteConfiguration(experimentalReactChildren) }); + updateConfig({ vite: getViteConfiguration(experimentalReactChildren, { include, exclude }) }); + if (command === 'dev') { + const preamble = FAST_REFRESH_PREAMBLE.replace( + `__BASE__`, + appendForwardSlash(config.base) + ); + injectScript('before-hydration', preamble); + } }, }, }; |