0
Fork 0
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:
bholmesdev 2024-04-26 18:02:10 -04:00
parent d0eae83cd7
commit d6dbdb73f7
6 changed files with 88 additions and 17 deletions

View file

@ -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',

View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [react()]
});

View 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"
}
}

View 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>
)
}

View 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>

View file

@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}