mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
wip: useActionState test fixture
This commit is contained in:
parent
d0eae83cd7
commit
d6dbdb73f7
6 changed files with 88 additions and 17 deletions
|
@ -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',
|
||||
|
|
7
packages/integrations/react/test/fixtures/react-19/astro.config.mjs
vendored
Normal file
7
packages/integrations/react/test/fixtures/react-19/astro.config.mjs
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [react()]
|
||||
});
|
23
packages/integrations/react/test/fixtures/react-19/package.json
vendored
Normal file
23
packages/integrations/react/test/fixtures/react-19/package.json
vendored
Normal file
|
@ -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"
|
||||
}
|
||||
}
|
31
packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx
vendored
Normal file
31
packages/integrations/react/test/fixtures/react-19/src/components/Like.tsx
vendored
Normal file
|
@ -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<TInput, TOutput>(action: (input: TInput) => Promise<TOutput>) {
|
||||
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 (
|
||||
<form action={action}>
|
||||
<button type="submit" disabled={pending}>Like</button>
|
||||
<p>{state} likes</p>
|
||||
</form>
|
||||
)
|
||||
}
|
15
packages/integrations/react/test/fixtures/react-19/src/pages/index.astro
vendored
Normal file
15
packages/integrations/react/test/fixtures/react-19/src/pages/index.astro
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import { Like } from '../components/Like';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>React 19</title>
|
||||
</head>
|
||||
<body>
|
||||
<Like client:load />
|
||||
</body>
|
||||
</html>
|
7
packages/integrations/react/test/fixtures/react-19/tsconfig.json
vendored
Normal file
7
packages/integrations/react/test/fixtures/react-19/tsconfig.json
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue