From d6dbdb73f725df20fbe950aab743f003f0e7cd3b Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 26 Apr 2024 18:02:10 -0400 Subject: [PATCH] wip: useActionState test fixture --- packages/integrations/react/src/index.ts | 22 +++---------- .../test/fixtures/react-19/astro.config.mjs | 7 +++++ .../react/test/fixtures/react-19/package.json | 23 ++++++++++++++ .../fixtures/react-19/src/components/Like.tsx | 31 +++++++++++++++++++ .../fixtures/react-19/src/pages/index.astro | 15 +++++++++ .../test/fixtures/react-19/tsconfig.json | 7 +++++ 6 files changed, 88 insertions(+), 17 deletions(-) create mode 100644 packages/integrations/react/test/fixtures/react-19/astro.config.mjs create mode 100644 packages/integrations/react/test/fixtures/react-19/package.json create mode 100644 packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx create mode 100644 packages/integrations/react/test/fixtures/react-19/src/pages/index.astro create mode 100644 packages/integrations/react/test/fixtures/react-19/tsconfig.json diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index e0149e8e76..0167ac465c 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -1,6 +1,5 @@ import react, { type Options as ViteReactPluginOptions } from '@vitejs/plugin-react'; import type { AstroIntegration } from 'astro'; -import { version as ReactVersion } from 'react-dom'; import type * as vite from 'vite'; export type ReactIntegrationOptions = Pick< @@ -15,12 +14,8 @@ const FAST_REFRESH_PREAMBLE = react.preambleCode; function getRenderer() { return { name: '@astrojs/react', - clientEntrypoint: ReactVersion.startsWith('18.') - ? '@astrojs/react/client.js' - : '@astrojs/react/client-v17.js', - serverEntrypoint: ReactVersion.startsWith('18.') - ? '@astrojs/react/server.js' - : '@astrojs/react/server-v17.js', + clientEntrypoint: '@astrojs/react/client.js', + serverEntrypoint: '@astrojs/react/server.js' }; } @@ -54,19 +49,14 @@ function getViteConfiguration({ }: ReactIntegrationOptions = {}) { return { optimizeDeps: { - include: [ - ReactVersion.startsWith('18.') - ? '@astrojs/react/client.js' - : '@astrojs/react/client-v17.js', + include: ['@astrojs/react/client.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom', ], exclude: [ - ReactVersion.startsWith('18.') - ? '@astrojs/react/server.js' - : '@astrojs/react/server-v17.js', + '@astrojs/react/server.js' ], }, plugins: [react({ include, exclude, babel }), optionsPlugin(!!experimentalReactChildren)], @@ -74,9 +64,7 @@ function getViteConfiguration({ dedupe: ['react', 'react-dom', 'react-dom/server'], }, ssr: { - external: ReactVersion.startsWith('18.') - ? ['react-dom/server', 'react-dom/client'] - : ['react-dom/server.js', 'react-dom/client.js'], + external: ['react-dom/server', 'react-dom/client'], noExternal: [ // These are all needed to get mui to work. '@mui/material', diff --git a/packages/integrations/react/test/fixtures/react-19/astro.config.mjs b/packages/integrations/react/test/fixtures/react-19/astro.config.mjs new file mode 100644 index 0000000000..a4b01db58a --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-19/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import react from "@astrojs/react"; + +// https://astro.build/config +export default defineConfig({ + integrations: [react()] +}); \ No newline at end of file diff --git a/packages/integrations/react/test/fixtures/react-19/package.json b/packages/integrations/react/test/fixtures/react-19/package.json new file mode 100644 index 0000000000..542d468b20 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-19/package.json @@ -0,0 +1,23 @@ +{ + "name": "@test/react-19", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "astro dev" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "@astrojs/react": "workspace:*", + "astro": "workspace:*", + "react": "19.0.0-beta-94eed63c49-20240425", + "react-dom": "19.0.0-beta-94eed63c49-20240425", + "@types/react": "npm:types-react@beta", + "@types/react-dom": "npm:types-react-dom@beta" + }, + "overrides": { + "@types/react": "npm:types-react@beta", + "@types/react-dom": "npm:types-react-dom@beta" + } +} diff --git a/packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx b/packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx new file mode 100644 index 0000000000..c436a69a5b --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx @@ -0,0 +1,31 @@ +import { useActionState } from 'react'; + +let count = 0; + +async function addLike() { + await new Promise((resolve) => setTimeout(resolve, 200)); + count++; + return count; +} + +function withState(action: (input: TInput) => Promise) { + return async (state: TOutput, input: TInput) => { + const bound: typeof action = action.bind({ + headers: { + 'X-React-State': JSON.stringify(state) + } + }) + return bound(input); + }; +} + +export function Like() { + const [state, action, pending] = useActionState(withState(addLike), 0); + + return ( +
+ +

{state} likes

+
+ ) +} diff --git a/packages/integrations/react/test/fixtures/react-19/src/pages/index.astro b/packages/integrations/react/test/fixtures/react-19/src/pages/index.astro new file mode 100644 index 0000000000..4afe67e16f --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-19/src/pages/index.astro @@ -0,0 +1,15 @@ +--- +import { Like } from '../components/Like'; +--- + + + + + + + React 19 + + + + + diff --git a/packages/integrations/react/test/fixtures/react-19/tsconfig.json b/packages/integrations/react/test/fixtures/react-19/tsconfig.json new file mode 100644 index 0000000000..7fb90fafc0 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-19/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "react" + } +} \ No newline at end of file