summaryrefslogtreecommitdiff
path: root/packages/integrations/react/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/react/src')
-rw-r--r--packages/integrations/react/src/index.ts63
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);
+ }
},
},
};