mirror of
https://github.com/withastro/astro.git
synced 2025-03-31 23:31:30 -05:00
Actions: React 19 progressive enhancement support (#11071)
* deps: react 19 * feat: react progressive enhancement with useActionState * refactor: revert old action state implementation * feat(test): react 19 action with useFormStatus * fix: remove unused context arg * fix: wrote actions to wrong test fixture! * deps: revert react 19 beta to 18 for actions-blog fixture * chore: remove unused overrides * chore: remove unused actions export * chore: spaces vs tabs ugh * chore: fix conflicting fixture names * chore: changeset * chore: bump changeset to minor * Actions: support React 19 `useActionState()` with progressive enhancement (#11074) * feat(ex): Like with useActionState * feat: useActionState progressive enhancement! * feat: getActionState utility * chore: revert actions-blog fixture experimentation * fix: add back actions.ts export * feat(test): Like with use action state test * fix: stub form state client-side to avoid hydration error * fix: bad .safe chaining * fix: update actionState for client call * fix: correctly resume form state client side * refactor: unify and document reactServerActionResult * feat(test): useActionState assertions * feat(docs): explain my mess * refactor: add experimental_ prefix * refactor: move all react internals to integration * chore: remove unused getIslandProps * chore: remove unused imports * chore: undo format changes * refactor: get actionResult from middleware directly * refactor: remove bad result type * fix: like button disabled timeout * chore: changeset * refactor: remove request cloning * Update .changeset/gentle-windows-enjoy.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * changeset grammar tense --------- Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Ben Holmes
GitHub
parent
3dd57f69e3
commit
8ca7c731de
34 changed files with 1211 additions and 4 deletions
46
.changeset/gentle-windows-enjoy.md
Normal file
46
.changeset/gentle-windows-enjoy.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
"@astrojs/react": minor
|
||||
"astro": minor
|
||||
---
|
||||
|
||||
Adds two new functions `experimental_getActionState()` and `experimental_withState()` to support [the React 19 `useActionState()` hook](https://react.dev/reference/react/useActionState) when using Astro Actions. This introduces progressive enhancement when calling an Action with the `withState()` utility.
|
||||
|
||||
This example calls a `like` action that accepts a `postId` and returns the number of likes. Pass this action to the `experimental_withState()` function to apply progressive enhancement info, and apply to `useActionState()` to track the result:
|
||||
|
||||
```tsx
|
||||
import { actions } from 'astro:actions';
|
||||
import { experimental_withState } from '@astrojs/react/actions';
|
||||
|
||||
export function Like({ postId }: { postId: string }) {
|
||||
const [state, action, pending] = useActionState(
|
||||
experimental_withState(actions.like),
|
||||
0, // initial likes
|
||||
);
|
||||
|
||||
return (
|
||||
<form action={action}>
|
||||
<input type="hidden" name="postId" value={postId} />
|
||||
<button disabled={pending}>{state} ❤️</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
You can also access the state stored by `useActionState()` from your action `handler`. Call `experimental_getActionState()` with the API context, and optionally apply a type to the result:
|
||||
|
||||
```ts
|
||||
import { defineAction, z } from 'astro:actions';
|
||||
import { experimental_getActionState } from '@astrojs/react/actions';
|
||||
|
||||
export const server = {
|
||||
like: defineAction({
|
||||
input: z.object({
|
||||
postId: z.string(),
|
||||
}),
|
||||
handler: async ({ postId }, ctx) => {
|
||||
const currentLikes = experimental_getActionState<number>(ctx);
|
||||
// write to database
|
||||
return currentLikes + 1;
|
||||
}
|
||||
})
|
||||
}
|
||||
18
.changeset/twenty-cycles-bathe.md
Normal file
18
.changeset/twenty-cycles-bathe.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
"astro": minor
|
||||
---
|
||||
|
||||
Adds compatibility for Astro Actions in the React 19 beta. Actions can be passed to a `form action` prop directly, and Astro will automatically add metadata for progressive enhancement.
|
||||
|
||||
```tsx
|
||||
import { actions } from 'astro:actions';
|
||||
|
||||
function Like() {
|
||||
return (
|
||||
<form action={actions.like}>
|
||||
{/* auto-inserts hidden input for progressive enhancement */}
|
||||
<button type="submit">Like</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
```
|
||||
61
packages/astro/e2e/actions-react-19.test.js
Normal file
61
packages/astro/e2e/actions-react-19.test.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import { expect } from '@playwright/test';
|
||||
import { testFactory } from './test-utils.js';
|
||||
|
||||
const test = testFactory({ root: './fixtures/actions-react-19/' });
|
||||
|
||||
let devServer;
|
||||
|
||||
test.beforeAll(async ({ astro }) => {
|
||||
devServer = await astro.startDevServer();
|
||||
});
|
||||
|
||||
test.afterEach(async ({ astro }) => {
|
||||
// Force database reset between tests
|
||||
await astro.editFile('./db/seed.ts', (original) => original);
|
||||
});
|
||||
|
||||
test.afterAll(async () => {
|
||||
await devServer.stop();
|
||||
});
|
||||
|
||||
test.describe('Astro Actions - React 19', () => {
|
||||
test('Like action - client pending state', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/blog/first-post/'));
|
||||
|
||||
const likeButton = page.getByLabel('likes-client');
|
||||
await expect(likeButton).toBeVisible();
|
||||
await likeButton.click();
|
||||
await expect(likeButton, 'like button should be disabled when pending').toBeDisabled();
|
||||
await expect(likeButton).not.toBeDisabled({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test('Like action - server progressive enhancement', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/blog/first-post/'));
|
||||
|
||||
const likeButton = page.getByLabel('likes-server');
|
||||
await expect(likeButton, 'like button starts with 10 likes').toContainText('10');
|
||||
await likeButton.click();
|
||||
|
||||
await expect(likeButton, 'like button increments').toContainText('11');
|
||||
});
|
||||
|
||||
test('Like action - client useActionState', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/blog/first-post/'));
|
||||
|
||||
const likeButton = page.getByLabel('likes-action-client');
|
||||
await expect(likeButton).toBeVisible();
|
||||
await likeButton.click();
|
||||
|
||||
await expect(likeButton, 'like button increments').toContainText('11');
|
||||
});
|
||||
|
||||
test('Like action - server useActionState progressive enhancement', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/blog/first-post/'));
|
||||
|
||||
const likeButton = page.getByLabel('likes-action-server');
|
||||
await expect(likeButton, 'like button starts with 10 likes').toContainText('10');
|
||||
await likeButton.click();
|
||||
|
||||
await expect(likeButton, 'like button increments').toContainText('11');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@e2e/astro-actions-basics",
|
||||
"name": "@e2e/actions-blog",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const server = {
|
|||
like: defineAction({
|
||||
input: z.object({ postId: z.string() }),
|
||||
handler: async ({ postId }) => {
|
||||
await new Promise((r) => setTimeout(r, 200));
|
||||
await new Promise((r) => setTimeout(r, 1000));
|
||||
|
||||
const { likes } = await db
|
||||
.update(Likes)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import db from '@astrojs/db';
|
||||
import react from '@astrojs/react';
|
||||
import node from '@astrojs/node';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://example.com',
|
||||
integrations: [db(), react()],
|
||||
output: 'hybrid',
|
||||
adapter: node({
|
||||
mode: 'standalone',
|
||||
}),
|
||||
experimental: {
|
||||
actions: true,
|
||||
},
|
||||
});
|
||||
21
packages/astro/e2e/fixtures/actions-react-19/db/config.ts
Normal file
21
packages/astro/e2e/fixtures/actions-react-19/db/config.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { column, defineDb, defineTable } from "astro:db";
|
||||
|
||||
const Comment = defineTable({
|
||||
columns: {
|
||||
postId: column.text(),
|
||||
author: column.text(),
|
||||
body: column.text(),
|
||||
},
|
||||
});
|
||||
|
||||
const Likes = defineTable({
|
||||
columns: {
|
||||
postId: column.text(),
|
||||
likes: column.number(),
|
||||
},
|
||||
});
|
||||
|
||||
// https://astro.build/db/config
|
||||
export default defineDb({
|
||||
tables: { Comment, Likes },
|
||||
});
|
||||
15
packages/astro/e2e/fixtures/actions-react-19/db/seed.ts
Normal file
15
packages/astro/e2e/fixtures/actions-react-19/db/seed.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { db, Likes, Comment } from "astro:db";
|
||||
|
||||
// https://astro.build/db/seed
|
||||
export default async function seed() {
|
||||
await db.insert(Likes).values({
|
||||
postId: "first-post.md",
|
||||
likes: 10,
|
||||
});
|
||||
|
||||
await db.insert(Comment).values({
|
||||
postId: "first-post.md",
|
||||
author: "Alice",
|
||||
body: "Great post!",
|
||||
});
|
||||
}
|
||||
28
packages/astro/e2e/fixtures/actions-react-19/package.json
Normal file
28
packages/astro/e2e/fixtures/actions-react-19/package.json
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "@e2e/actions-react-19",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.6.0",
|
||||
"@astrojs/db": "workspace:*",
|
||||
"@astrojs/node": "workspace:*",
|
||||
"@astrojs/react": "workspace:*",
|
||||
"@types/react": "npm:types-react",
|
||||
"@types/react-dom": "npm:types-react-dom",
|
||||
"astro": "workspace:*",
|
||||
"react": "19.0.0-beta-26f2496093-20240514",
|
||||
"react-dom": "19.0.0-beta-26f2496093-20240514",
|
||||
"typescript": "^5.4.5"
|
||||
},
|
||||
"overrides": {
|
||||
"@types/react": "npm:types-react",
|
||||
"@types/react-dom": "npm:types-react-dom"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { db, Likes, eq, sql } from 'astro:db';
|
||||
import { defineAction, getApiContext, z } from 'astro:actions';
|
||||
import { experimental_getActionState } from '@astrojs/react/actions';
|
||||
|
||||
export const server = {
|
||||
blog: {
|
||||
like: defineAction({
|
||||
accept: 'form',
|
||||
input: z.object({ postId: z.string() }),
|
||||
handler: async ({ postId }) => {
|
||||
await new Promise((r) => setTimeout(r, 1000));
|
||||
|
||||
const { likes } = await db
|
||||
.update(Likes)
|
||||
.set({
|
||||
likes: sql`likes + 1`,
|
||||
})
|
||||
.where(eq(Likes.postId, postId))
|
||||
.returning()
|
||||
.get();
|
||||
|
||||
return likes;
|
||||
},
|
||||
}),
|
||||
likeWithActionState: defineAction({
|
||||
accept: 'form',
|
||||
input: z.object({ postId: z.string() }),
|
||||
handler: async ({ postId }) => {
|
||||
await new Promise((r) => setTimeout(r, 200));
|
||||
|
||||
const context = getApiContext();
|
||||
const state = await experimental_getActionState<number>(context);
|
||||
|
||||
const { likes } = await db
|
||||
.update(Likes)
|
||||
.set({
|
||||
likes: state + 1,
|
||||
})
|
||||
.where(eq(Likes.postId, postId))
|
||||
.returning()
|
||||
.get();
|
||||
|
||||
return likes;
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
|
||||
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image, Astro.url)} />
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Your name here. All rights reserved.
|
||||
<div class="social-links">
|
||||
<a href="https://m.webtoo.ls/@astro" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Mastodon</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="32"
|
||||
height="32"
|
||||
astro-icon="social/mastodon"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://twitter.com/astrodotbuild" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/withastro/astro" target="_blank">
|
||||
<span class="sr-only">Go to Astro's GitHub repo</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.social-links a:hover {
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
interface Props {
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const { date } = Astro.props;
|
||||
---
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
</time>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
import HeaderLink from './HeaderLink.astro';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<h2><a href="/">{SITE_TITLE}</a></h2>
|
||||
<div class="internal-links">
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://m.webtoo.ls/@astro" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Mastodon</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://twitter.com/astrodotbuild" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/withastro/astro" target="_blank">
|
||||
<span class="sr-only">Go to Astro's GitHub repo</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
background: white;
|
||||
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h2 a,
|
||||
h2 a.active {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
nav a {
|
||||
padding: 1em 0.5em;
|
||||
color: var(--black);
|
||||
border-bottom: 4px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a.active {
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
.social-links,
|
||||
.social-links a {
|
||||
display: flex;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.social-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
|
||||
type Props = HTMLAttributes<'a'>;
|
||||
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const subpath = pathname.match(/[^\/]+/g);
|
||||
const isActive = href === pathname || href === '/' + subpath?.[0];
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { actions } from 'astro:actions';
|
||||
import { useActionState } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import { experimental_withState } from '@astrojs/react/actions';
|
||||
|
||||
export function Like({ postId, label, likes }: { postId: string; label: string; likes: number }) {
|
||||
return (
|
||||
<form action={actions.blog.like}>
|
||||
<input type="hidden" name="postId" value={postId} />
|
||||
<Button likes={likes} label={label} />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function LikeWithActionState({ postId, label, likes: initial }: { postId: string; label: string; likes: number }) {
|
||||
const [likes, action] = useActionState(
|
||||
experimental_withState(actions.blog.likeWithActionState),
|
||||
10,
|
||||
);
|
||||
|
||||
return (
|
||||
<form action={action}>
|
||||
<input type="hidden" name="postId" value={postId} />
|
||||
<Button likes={likes} label={label} />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function Button({likes, label}: {likes: number; label: string}) {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<button aria-label={label} disabled={pending} type="submit">
|
||||
{likes} ❤️
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Place any global data in this file.
|
||||
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||
|
||||
export const SITE_TITLE = 'Astro Blog';
|
||||
export const SITE_DESCRIPTION = 'Welcome to my website!';
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: 'First post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
|
||||
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
|
||||
|
||||
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
|
||||
|
||||
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
|
||||
|
||||
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
// Type-check frontmatter using a schema
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
|
||||
type Props = CollectionEntry<'blog'>['data'];
|
||||
|
||||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
<style>
|
||||
main {
|
||||
width: calc(100% - 2em);
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
}
|
||||
.hero-image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.prose {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.title h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
.date {
|
||||
margin-bottom: 0.5em;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.last-updated-on {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
|
||||
</div>
|
||||
<div class="prose">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<hr />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection, getEntry } from 'astro:content';
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
import { db, eq, Likes } from 'astro:db';
|
||||
import { Like, LikeWithActionState } from '../../components/Like';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
|
||||
type Props = CollectionEntry<'blog'>;
|
||||
|
||||
const post = await getEntry('blog', Astro.params.slug)!;
|
||||
const { Content } = await post.render();
|
||||
|
||||
const likesRes = await db.select().from(Likes).where(eq(Likes.postId, post.id)).get()!;
|
||||
---
|
||||
|
||||
<BlogPost {...post.data}>
|
||||
<h2>Like</h2>
|
||||
{
|
||||
likesRes && (
|
||||
<Like postId={post.id} likes={likesRes.likes} label="likes-client" client:load />
|
||||
<Like postId={post.id} likes={likesRes.likes} label="likes-server" />
|
||||
)
|
||||
}
|
||||
|
||||
<h2>Like with action state</h2>
|
||||
<LikeWithActionState postId={post.id} likes={10} label="likes-action-client" client:load />
|
||||
<LikeWithActionState postId={post.id} likes={10} label="likes-action-server" />
|
||||
|
||||
<Content />
|
||||
|
||||
</BlogPost>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
main {
|
||||
width: 960px;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
ul li * {
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
ul li:first-child {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child img {
|
||||
width: 100%;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 2.369rem;
|
||||
}
|
||||
ul li img {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
ul li a:hover h4,
|
||||
ul li a:hover .date {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
ul a:hover img {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
ul {
|
||||
gap: 0.5em;
|
||||
}
|
||||
ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<img width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
The CSS in this style tag is based off of Bear Blog's default CSS.
|
||||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
:root {
|
||||
--accent: #2337ff;
|
||||
--accent-dark: #000d8a;
|
||||
--black: 15, 18, 25;
|
||||
--gray: 96, 115, 159;
|
||||
--gray-light: 229, 233, 240;
|
||||
--gray-dark: 34, 41, 57;
|
||||
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||||
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
||||
0 16px 32px rgba(var(--gray), 33%);
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
background-size: 100% 600px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
color: rgb(var(--gray-dark));
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 3em 1em;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1.2;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.052em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.441em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.953em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
strong,
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
background-color: rgb(var(--gray-light));
|
||||
border-radius: 2px;
|
||||
}
|
||||
pre {
|
||||
padding: 1.5em;
|
||||
border-radius: 8px;
|
||||
}
|
||||
pre > code {
|
||||
all: unset;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent);
|
||||
padding: 0 0 0 20px;
|
||||
margin: 0px;
|
||||
font-size: 1.333em;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid rgb(var(--gray-light));
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
/* maybe deprecated but we need to support legacy browsers */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
/* modern browsers, clip-path works inwards from each corner */
|
||||
clip-path: inset(50%);
|
||||
/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
|
|
@ -3092,6 +3092,8 @@ export interface SSRResult {
|
|||
): AstroGlobal;
|
||||
resolve: (s: string) => Promise<string>;
|
||||
response: AstroGlobal['response'];
|
||||
request: AstroGlobal['request'];
|
||||
actionResult?: ReturnType<AstroGlobal['getActionResult']>;
|
||||
renderers: SSRLoadedRenderer[];
|
||||
/**
|
||||
* Map of directive name (e.g. `load`) to the directive script code
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { callSafely } from './virtual/shared.js';
|
|||
export type Locals = {
|
||||
_actionsInternal: {
|
||||
getActionResult: APIContext['getActionResult'];
|
||||
actionResult?: ReturnType<APIContext['getActionResult']>;
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -56,6 +57,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
|
|||
// Cast to `any` to satisfy `getActionResult()` type.
|
||||
return result as any;
|
||||
},
|
||||
actionResult: result,
|
||||
};
|
||||
Object.defineProperty(locals, '_actionsInternal', { writable: false, value: actionsInternal });
|
||||
const response = await next();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import type { APIContext } from '../@types/astro.js';
|
|||
import { AstroError } from '../core/errors/errors.js';
|
||||
import type { Locals } from './runtime/middleware.js';
|
||||
|
||||
function hasActionsInternal(locals: APIContext['locals']): locals is Locals {
|
||||
export function hasActionsInternal(locals: APIContext['locals']): locals is Locals {
|
||||
return '_actionsInternal' in locals;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import type {
|
|||
SSRResult,
|
||||
} from '../@types/astro.js';
|
||||
import type { ActionAPIContext } from '../actions/runtime/store.js';
|
||||
import { createGetActionResult } from '../actions/utils.js';
|
||||
import { createGetActionResult, hasActionsInternal } from '../actions/utils.js';
|
||||
import {
|
||||
computeCurrentLocale,
|
||||
computePreferredLocale,
|
||||
|
|
@ -297,6 +297,10 @@ export class RenderContext {
|
|||
},
|
||||
} satisfies AstroGlobal['response'];
|
||||
|
||||
const actionResult = hasActionsInternal(this.locals)
|
||||
? this.locals._actionsInternal?.actionResult
|
||||
: undefined;
|
||||
|
||||
// Create the result object that will be passed into the renderPage function.
|
||||
// This object starts here as an empty shell (not yet the result) but then
|
||||
// calling the render() function will populate the object with scripts, styles, etc.
|
||||
|
|
@ -316,8 +320,10 @@ export class RenderContext {
|
|||
renderers,
|
||||
resolve,
|
||||
response,
|
||||
request: this.request,
|
||||
scripts,
|
||||
styles,
|
||||
actionResult,
|
||||
_metadata: {
|
||||
hasHydrationScript: false,
|
||||
rendererSpecificHydrationScripts: new Set(),
|
||||
|
|
|
|||
|
|
@ -12,6 +12,28 @@ function toActionProxy(actionCallback = {}, aggregatedPath = '/_actions/') {
|
|||
action.safe = (input) => {
|
||||
return callSafely(() => action(input));
|
||||
};
|
||||
action.safe.toString = () => path;
|
||||
|
||||
// Add progressive enhancement info for React.
|
||||
action.$$FORM_ACTION = function () {
|
||||
const data = new FormData();
|
||||
data.set('_astroAction', action.toString());
|
||||
return {
|
||||
method: 'POST',
|
||||
name: action.toString(),
|
||||
data,
|
||||
}
|
||||
};
|
||||
action.safe.$$FORM_ACTION = function () {
|
||||
const data = new FormData();
|
||||
data.set('_astroAction', action.toString());
|
||||
data.set('_astroActionSafe', 'true');
|
||||
return {
|
||||
method: 'POST',
|
||||
name: action.toString(),
|
||||
data,
|
||||
}
|
||||
}
|
||||
// recurse to construct queries for nested object paths
|
||||
// ex. actions.user.admins.auth()
|
||||
return toActionProxy(action, path + '.');
|
||||
|
|
|
|||
|
|
@ -67,8 +67,19 @@ const getOrCreateRoot = (element, creator) => {
|
|||
export default (element) =>
|
||||
(Component, props, { default: children, ...slotted }, { client }) => {
|
||||
if (!element.hasAttribute('ssr')) return;
|
||||
|
||||
const actionKey = element.getAttribute('data-action-key');
|
||||
const actionName = element.getAttribute('data-action-name');
|
||||
const stringifiedActionResult = element.getAttribute('data-action-result');
|
||||
|
||||
const formState =
|
||||
actionKey && actionName && stringifiedActionResult
|
||||
? [JSON.parse(stringifiedActionResult), actionKey, actionName]
|
||||
: undefined;
|
||||
|
||||
const renderOptions = {
|
||||
identifierPrefix: element.getAttribute('prefix'),
|
||||
formState,
|
||||
};
|
||||
for (const [key, value] of Object.entries(slotted)) {
|
||||
props[key] = createElement(StaticHtml, { value, name: key });
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"homepage": "https://docs.astro.build/en/guides/integrations-guide/react/",
|
||||
"exports": {
|
||||
".": "./dist/index.js",
|
||||
"./actions": "./dist/actions.js",
|
||||
"./client.js": "./client.js",
|
||||
"./client-v17.js": "./client-v17.js",
|
||||
"./server.js": "./server.js",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import opts from 'astro:react:opts';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/server';
|
||||
import { AstroError } from 'astro/errors';
|
||||
import { incrementId } from './context.js';
|
||||
import StaticHtml from './static-html.js';
|
||||
|
||||
|
|
@ -101,9 +102,16 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
|
|||
value: newChildren,
|
||||
});
|
||||
}
|
||||
const formState = this ? await getFormState(this) : undefined;
|
||||
if (formState) {
|
||||
attrs['data-action-result'] = JSON.stringify(formState[0]);
|
||||
attrs['data-action-key'] = formState[1];
|
||||
attrs['data-action-name'] = formState[2];
|
||||
}
|
||||
const vnode = React.createElement(Component, newProps);
|
||||
const renderOptions = {
|
||||
identifierPrefix: prefix,
|
||||
formState,
|
||||
};
|
||||
let html;
|
||||
if ('renderToReadableStream' in ReactDOM) {
|
||||
|
|
@ -114,6 +122,43 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
|
|||
return { html, attrs };
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Promise<[actionResult: any, actionKey: string, actionName: string] | undefined>}
|
||||
*/
|
||||
async function getFormState({ result }) {
|
||||
const { request, actionResult } = result;
|
||||
|
||||
if (!actionResult) return undefined;
|
||||
if (!isFormRequest(request.headers.get('content-type'))) return undefined;
|
||||
|
||||
const formData = await request.clone().formData();
|
||||
/**
|
||||
* The key generated by React to identify each `useActionState()` call.
|
||||
* @example "k511f74df5a35d32e7cf266450d85cb6c"
|
||||
*/
|
||||
const actionKey = formData.get('$ACTION_KEY')?.toString();
|
||||
/**
|
||||
* The action name returned by an action's `toString()` property.
|
||||
* This matches the endpoint path.
|
||||
* @example "/_actions/blog.like"
|
||||
*/
|
||||
const actionName = formData.get('_astroAction')?.toString();
|
||||
|
||||
if (!actionKey || !actionName) return undefined;
|
||||
|
||||
const isUsingSafe = formData.has('_astroActionSafe');
|
||||
if (!isUsingSafe && actionResult.error) {
|
||||
throw new AstroError(
|
||||
`Unhandled error calling action ${actionName.replace(/^\/_actions\//, '')}:\n[${
|
||||
actionResult.error.code
|
||||
}] ${actionResult.error.message}`,
|
||||
'use `.safe()` to handle from your React component.'
|
||||
);
|
||||
}
|
||||
|
||||
return [isUsingSafe ? actionResult : actionResult.data, actionKey, actionName];
|
||||
}
|
||||
|
||||
async function renderToPipeableStreamAsync(vnode, options) {
|
||||
const Writable = await getNodeWritable();
|
||||
let html = '';
|
||||
|
|
@ -170,6 +215,16 @@ async function renderToReadableStreamAsync(vnode, options) {
|
|||
return await readResult(await ReactDOM.renderToReadableStream(vnode, options));
|
||||
}
|
||||
|
||||
const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
|
||||
|
||||
function isFormRequest(contentType) {
|
||||
// Split off parameters like charset or boundary
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
|
||||
const type = contentType?.split(';')[0].toLowerCase();
|
||||
|
||||
return formContentTypes.some((t) => type === t);
|
||||
}
|
||||
|
||||
export default {
|
||||
check,
|
||||
renderToStaticMarkup,
|
||||
|
|
|
|||
101
packages/integrations/react/src/actions.ts
Normal file
101
packages/integrations/react/src/actions.ts
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { AstroError } from 'astro/errors';
|
||||
|
||||
type FormFn<T> = (formData: FormData) => Promise<T>;
|
||||
|
||||
/**
|
||||
* Use an Astro Action with React `useActionState()`.
|
||||
* This function matches your action to the expected types,
|
||||
* and preserves metadata for progressive enhancement.
|
||||
* To read state from your action handler, use {@linkcode experimental_getActionState}.
|
||||
*/
|
||||
export function experimental_withState<T>(action: FormFn<T>) {
|
||||
// React expects two positional arguments when using `useActionState()`:
|
||||
// 1. The initial state value.
|
||||
// 2. The form data object.
|
||||
|
||||
// Map this first argument to a hidden input
|
||||
// for retrieval from `getActionState()`.
|
||||
const callback = async function (state: T, formData: FormData) {
|
||||
formData.set('_astroActionState', JSON.stringify(state));
|
||||
return action(formData);
|
||||
};
|
||||
if (!('$$FORM_ACTION' in action)) return callback;
|
||||
|
||||
// Re-bind progressive enhancement info for React.
|
||||
callback.$$FORM_ACTION = action.$$FORM_ACTION;
|
||||
// Called by React when form state is passed from the server.
|
||||
// If the action names match, React returns this state from `useActionState()`.
|
||||
callback.$$IS_SIGNATURE_EQUAL = (actionName: string) => {
|
||||
return action.toString() === actionName;
|
||||
};
|
||||
|
||||
// React calls `.bind()` internally to pass the initial state value.
|
||||
// Calling `.bind()` seems to remove our `$$FORM_ACTION` metadata,
|
||||
// so we need to define our *own* `.bind()` method to preserve that metadata.
|
||||
Object.defineProperty(callback, 'bind', {
|
||||
value: (...args: Parameters<typeof callback>) =>
|
||||
injectStateIntoFormActionData(callback, ...args),
|
||||
});
|
||||
return callback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the state object from your action handler when using `useActionState()`.
|
||||
* To ensure this state is retrievable, use the {@linkcode experimental_withState} helper.
|
||||
*/
|
||||
export async function experimental_getActionState<T>({
|
||||
request,
|
||||
}: { request: Request }): Promise<T> {
|
||||
const contentType = request.headers.get('Content-Type');
|
||||
if (!contentType || !isFormRequest(contentType)) {
|
||||
throw new AstroError(
|
||||
'`getActionState()` must be called with a form request.',
|
||||
"Ensure your action uses the `accept: 'form'` option."
|
||||
);
|
||||
}
|
||||
const formData = await request.clone().formData();
|
||||
const state = formData.get('_astroActionState')?.toString();
|
||||
if (!state) {
|
||||
throw new AstroError(
|
||||
'`getActionState()` could not find a state object.',
|
||||
'Ensure your action was passed to `useActionState()` with the `experimental_withState()` wrapper.'
|
||||
);
|
||||
}
|
||||
return JSON.parse(state) as T;
|
||||
}
|
||||
|
||||
const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
|
||||
|
||||
function isFormRequest(contentType: string) {
|
||||
// Split off parameters like charset or boundary
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
|
||||
const type = contentType.split(';')[0].toLowerCase();
|
||||
|
||||
return formContentTypes.some((t) => type === t);
|
||||
}
|
||||
|
||||
/**
|
||||
* Override the default `.bind()` method to:
|
||||
* 1. Inject the form state into the form data for progressive enhancement.
|
||||
* 2. Preserve the `$$FORM_ACTION` metadata.
|
||||
*/
|
||||
function injectStateIntoFormActionData<R extends [this: unknown, state: unknown, ...unknown[]]>(
|
||||
fn: (...args: R) => unknown,
|
||||
...args: R
|
||||
) {
|
||||
const boundFn = Function.prototype.bind.call(fn, ...args);
|
||||
Object.assign(boundFn, fn);
|
||||
const [, state] = args;
|
||||
|
||||
if ('$$FORM_ACTION' in fn && typeof fn.$$FORM_ACTION === 'function') {
|
||||
const metadata = fn.$$FORM_ACTION();
|
||||
boundFn.$$FORM_ACTION = () => {
|
||||
const data = (metadata.data as FormData) ?? new FormData();
|
||||
data.set('_astroActionState', JSON.stringify(state));
|
||||
metadata.data = data;
|
||||
|
||||
return metadata;
|
||||
};
|
||||
}
|
||||
return boundFn;
|
||||
}
|
||||
66
pnpm-lock.yaml
generated
66
pnpm-lock.yaml
generated
|
|
@ -914,6 +914,39 @@ importers:
|
|||
specifier: ^5.4.5
|
||||
version: 5.4.5
|
||||
|
||||
packages/astro/e2e/fixtures/actions-react-19:
|
||||
dependencies:
|
||||
'@astrojs/check':
|
||||
specifier: ^0.6.0
|
||||
version: 0.6.0(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.4.5)
|
||||
'@astrojs/db':
|
||||
specifier: workspace:*
|
||||
version: link:../../../../db
|
||||
'@astrojs/node':
|
||||
specifier: workspace:*
|
||||
version: link:../../../../integrations/node
|
||||
'@astrojs/react':
|
||||
specifier: workspace:*
|
||||
version: link:../../../../integrations/react
|
||||
'@types/react':
|
||||
specifier: npm:types-react
|
||||
version: /types-react@19.0.0-alpha.3
|
||||
'@types/react-dom':
|
||||
specifier: npm:types-react-dom
|
||||
version: /types-react-dom@19.0.0-alpha.3
|
||||
astro:
|
||||
specifier: workspace:*
|
||||
version: link:../../..
|
||||
react:
|
||||
specifier: 19.0.0-beta-26f2496093-20240514
|
||||
version: 19.0.0-beta-26f2496093-20240514
|
||||
react-dom:
|
||||
specifier: 19.0.0-beta-26f2496093-20240514
|
||||
version: 19.0.0-beta-26f2496093-20240514(react@19.0.0-beta-26f2496093-20240514)
|
||||
typescript:
|
||||
specifier: ^5.4.5
|
||||
version: 5.4.5
|
||||
|
||||
packages/astro/e2e/fixtures/astro-component:
|
||||
dependencies:
|
||||
'@astrojs/preact':
|
||||
|
|
@ -14807,6 +14840,18 @@ packages:
|
|||
react: 18.3.1
|
||||
scheduler: 0.23.2
|
||||
|
||||
/react-dom@19.0.0-beta-26f2496093-20240514(react@19.0.0-beta-26f2496093-20240514):
|
||||
resolution: {integrity: sha512-UvQ+K1l3DFQ34LDgfFSNuUGi9EC+yfE9tS6MdpNTd5fx7qC7KLfepfC/KpxWMQZ7JfE3axD4ZO6H4cBSpAZpqw==}
|
||||
peerDependencies:
|
||||
react: 19.0.0-beta-26f2496093-20240514
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
dependencies:
|
||||
react: 19.0.0-beta-26f2496093-20240514
|
||||
scheduler: 0.25.0-beta-26f2496093-20240514
|
||||
dev: false
|
||||
|
||||
/react-is@18.2.0:
|
||||
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
|
||||
dev: false
|
||||
|
|
@ -14822,6 +14867,11 @@ packages:
|
|||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
/react@19.0.0-beta-26f2496093-20240514:
|
||||
resolution: {integrity: sha512-ZsU/WjNZ6GfzMWsq2DcGjElpV9it8JmETHm9mAJuOJNhuJcWJxt8ltCJabONFRpDFq1A/DP0d0KFj9CTJVM4VA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/read-cache@1.0.0:
|
||||
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
|
||||
dependencies:
|
||||
|
|
@ -15320,6 +15370,10 @@ packages:
|
|||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
/scheduler@0.25.0-beta-26f2496093-20240514:
|
||||
resolution: {integrity: sha512-vDwOytLHFnA3SW2B1lNcbO+/qKVyLCX+KLpm+tRGNDsXpyxzRgkIaYGWmX+S70AJGchUHCtuqQ50GFeFgDbXUw==}
|
||||
dev: false
|
||||
|
||||
/scslre@0.3.0:
|
||||
resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
|
||||
engines: {node: ^14.0.0 || >=16.0.0}
|
||||
|
|
@ -16435,6 +16489,18 @@ packages:
|
|||
possible-typed-array-names: 1.0.0
|
||||
dev: true
|
||||
|
||||
/types-react-dom@19.0.0-alpha.3:
|
||||
resolution: {integrity: sha512-foCg3VSAoTLKBpU6FKgtHjOzqZVo7UVXfG/JnKM8imXq/+TvSGebj+KJlAVG6H1n+hiQtqpjHc+hk5FmZOJCqw==}
|
||||
dependencies:
|
||||
'@types/react': 18.3.2
|
||||
dev: false
|
||||
|
||||
/types-react@19.0.0-alpha.3:
|
||||
resolution: {integrity: sha512-u7IEgvEgACYFDGtaqBgh5tqtYxkfPgtE7sl3RjfsT4QTpRM9FADXoWomFYZVi55Upii3LUcaZYrKFyHqUTHpew==}
|
||||
dependencies:
|
||||
csstype: 3.1.3
|
||||
dev: false
|
||||
|
||||
/typesafe-path@0.2.2:
|
||||
resolution: {integrity: sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA==}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue