diff options
Diffstat (limited to 'packages/integrations/react')
| -rw-r--r-- | packages/integrations/react/CHANGELOG.md | 23 | ||||
| -rw-r--r-- | packages/integrations/react/package.json | 8 | ||||
| -rw-r--r-- | packages/integrations/react/src/index.ts | 63 | ||||
| -rw-r--r-- | packages/integrations/react/tsconfig.json | 2 |
4 files changed, 58 insertions, 38 deletions
diff --git a/packages/integrations/react/CHANGELOG.md b/packages/integrations/react/CHANGELOG.md index c6ccf491c..146d36427 100644 --- a/packages/integrations/react/CHANGELOG.md +++ b/packages/integrations/react/CHANGELOG.md @@ -1,5 +1,28 @@ # @astrojs/react +## 3.0.0-beta.2 + +### Patch Changes + +- Updated dependencies [[`2aa6d8ace`](https://github.com/withastro/astro/commit/2aa6d8ace398a41c2dec5473521d758816b08191)]: + - @astrojs/internal-helpers@0.2.0-beta.1 + +## 3.0.0-beta.1 + +### Major Changes + +- [#7924](https://github.com/withastro/astro/pull/7924) [`519a1c4e8`](https://github.com/withastro/astro/commit/519a1c4e8407c7abcb8d879b67a9f4b960652cae) Thanks [@matthewp](https://github.com/matthewp)! - Support for React Refresh + + The React integration now fully supports React Refresh and is backed by `@vitejs/plugin-react`. + + Also included in this change are new `include` and `exclude` config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and `exclude` does the opposite. + +## 3.0.0-beta.0 + +### Major Changes + +- [`1eae2e3f7`](https://github.com/withastro/astro/commit/1eae2e3f7d693c9dfe91c8ccfbe606d32bf2fb81) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023. + ## 2.2.2 ### Patch Changes diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json index e238e21b9..302ac4ae0 100644 --- a/packages/integrations/react/package.json +++ b/packages/integrations/react/package.json @@ -1,7 +1,7 @@ { "name": "@astrojs/react", "description": "Use React components within Astro", - "version": "2.2.2", + "version": "3.0.0-beta.2", "type": "module", "types": "./dist/index.d.ts", "author": "withastro", @@ -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.1", + "@vitejs/plugin-react": "^4.0.3", "ultrahtml": "^1.2.0" }, "devDependencies": { @@ -66,6 +66,6 @@ "react-dom": "^17.0.2 || ^18.0.0" }, "engines": { - "node": ">=16.12.0" + "node": ">=18.14.1" } } 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); + } }, }, }; diff --git a/packages/integrations/react/tsconfig.json b/packages/integrations/react/tsconfig.json index 64d4ef454..af1b43564 100644 --- a/packages/integrations/react/tsconfig.json +++ b/packages/integrations/react/tsconfig.json @@ -5,6 +5,6 @@ "allowJs": true, "module": "ES2022", "outDir": "./dist", - "target": "ES2021" + "target": "ES2022" } } |