feat(router): introduce server support for form actions #1346

brandonroberts · 2024-09-12T03:45:04Z

PR Checklist

Closes #935

What is the new behavior?

In .server.ts files, an action function can be defined to be used with forms to progressively enhance forms and build the foundation for handling form actions on the server.

// newsletter.server.ts
import {
  type PageServerAction,
  redirect,
  json,
  fail,
} from '@analogjs/router/server/actions';
import { readFormData } from 'h3';

export function load() {
  return {
    loaded: true,
  };
}

export async function action({ event }: PageServerAction) {
  const body = await readFormData(event);
  const email = body.get('email') as string;

  if (!email) {
    return fail(422, { email: 'Email is required' });
  }

  if (email.length < 10) {
    return redirect('/');
  }

  console.log({ email: body.get('email') });

  return json({ type: 'success' });
}

A follow-up PR will land to add a form directive to bridge the form to the form server action.

Does this PR introduce a breaking change?

Yes
No

Other information

[optional] What gif best describes this PR or how it makes you feel?

Closes #935

netlify · 2024-09-12T03:45:21Z

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	`8ecf449`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-blog/deploys/66e44ad7a21f5500088a2f18
😎 Deploy Preview	https://deploy-preview-1346--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-09-12T03:45:21Z

✅ Deploy Preview for analog-docs ready!

Name	Link
🔨 Latest commit	`8ecf449`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-docs/deploys/66e44ad7d74296000801877d
😎 Deploy Preview	https://deploy-preview-1346--analog-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-09-12T03:46:18Z

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	`8ecf449`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-app/deploys/66e44ad72c0ff000088a53d1
😎 Deploy Preview	https://deploy-preview-1346--analog-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-09-12T03:47:17Z

✅ Deploy Preview for analog-ng-app ready!

Name	Link
🔨 Latest commit	`8ecf449`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-ng-app/deploys/66e44ad8812b9700085d1f39
😎 Deploy Preview	https://deploy-preview-1346--analog-ng-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

apps/analog-app/src/app/pages/form-action.directive.ts

+
+  submitted($event: { target: HTMLFormElement } & Event) {
+    $event.preventDefault();
+    const body = new FormData($event.target);


ajitzero · 2024-09-12T19:22:53Z

apps/analog-app/src/app/pages/form-action.directive.ts

+    fetch(this.action() || `/api/_analog/pages${window.location.pathname}`, {
+      method: $event.target.method,
+      body,
+    }).then((res) => {


question: I'm not against fetch, but would it be possible to support/use HttpClient? Does the internal implementation even matter? I genuinely don't know.

Its possible to use HttpClient, but I don't think it matters. fetch is more flexible out of the box in terms of determining what to do with the response

ajitzero · 2024-09-12T19:26:21Z

apps/analog-app/src/app/pages/newsletter.server.ts

+  const email = body.get('email') as string;
+
+  if (!email) {
+    return fail(422, { errors: { email: 'Email is required' } });


question: If JavaScript is disabled, what happens in this case? Can we set up something like [...not-found].page.ts but like [...422].page.ts to handle this?

I tried handling it manually by adding a format: 'json' field if the call is made via Js:

https://github.com/ajitzero/spartan-repro/blob/feat/form-action/analog-app/src/server/routes/v1/subscribe.ts

https://github.com/ajitzero/spartan-repro/blob/feat/form-action/analog-app/src/app/pages/subscribe/(home).page.ts#L54

This is still TBD. Ideally, if JS is off, you come back to this page with errors displayed as part of the rendered HTML

jdgamble555 · 2024-09-13T12:32:49Z

whahoo!

nartc · 2024-09-13T14:13:17Z

apps/analog-app/src/app/pages/search.server.ts

+  };
+}
+
+export async function action({ event }: PageServerAction) {


nit: this is copy-pasta so not needed? If this is for demo purposes, can we change the body to something related to the search page instead?

Oh yea, copy-pasta. Will remove

nartc

Approved with one small nit

feat(router): introduce support for form actions

bbd35a6

Closes #935

vercel bot deployed to Preview September 12, 2024 03:45 View deployment

ajitzero reviewed Sep 12, 2024

View reviewed changes

apps/analog-app/src/app/pages/form-action.directive.ts

submitted($event: { target: HTMLFormElement } & Event) {

$event.preventDefault();

const body = new FormData($event.target);

This comment was marked as resolved.

Sign in to view

ajitzero reviewed Sep 12, 2024

View reviewed changes

ajitzero approved these changes Sep 12, 2024

View reviewed changes

chore: define server actions, add post and get examples

f06f6fe

vercel bot deployed to Preview September 12, 2024 22:56 View deployment

fix: stringify url on redirect

70a5514

vercel bot deployed to Preview September 13, 2024 00:38 View deployment

fix: use Location header for redirects

dac4f86

vercel bot deployed to Preview September 13, 2024 01:15 View deployment

brandonroberts added 2 commits September 12, 2024 21:01

chore: remove response types

762ba6e

feat: re-run guards/resolvers on same url by default

f5940fc

vercel bot deployed to Preview September 13, 2024 02:47 View deployment

chore: update search example

f95b31f

vercel bot deployed to Preview September 13, 2024 03:05 View deployment

nartc reviewed Sep 13, 2024

View reviewed changes

nartc approved these changes Sep 13, 2024

View reviewed changes

chore: remove copy-pasta

8ecf449

vercel bot deployed to Preview September 13, 2024 14:24 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(router): introduce server support for form actions #1346

feat(router): introduce server support for form actions #1346

brandonroberts commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

This comment was marked as resolved.

ajitzero Sep 12, 2024

brandonroberts Sep 13, 2024

ajitzero Sep 12, 2024

ajitzero Sep 12, 2024

brandonroberts Sep 13, 2024

jdgamble555 commented Sep 13, 2024

nartc Sep 13, 2024

brandonroberts Sep 13, 2024

nartc left a comment

feat(router): introduce server support for form actions #1346

Are you sure you want to change the base?

feat(router): introduce server support for form actions #1346

Conversation

brandonroberts commented Sep 12, 2024 • edited Loading

PR Checklist

What is the new behavior?

Does this PR introduce a breaking change?

Other information

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Sep 12, 2024 • edited Loading

✅ Deploy Preview for analog-blog ready!

netlify bot commented Sep 12, 2024 • edited Loading

✅ Deploy Preview for analog-docs ready!

netlify bot commented Sep 12, 2024 • edited Loading

✅ Deploy Preview for analog-app ready!

netlify bot commented Sep 12, 2024 • edited Loading

✅ Deploy Preview for analog-ng-app ready!

This comment was marked as resolved.

ajitzero Sep 12, 2024

Choose a reason for hiding this comment

brandonroberts Sep 13, 2024

Choose a reason for hiding this comment

ajitzero Sep 12, 2024

Choose a reason for hiding this comment

ajitzero Sep 12, 2024

Choose a reason for hiding this comment

brandonroberts Sep 13, 2024

Choose a reason for hiding this comment

jdgamble555 commented Sep 13, 2024

nartc Sep 13, 2024

Choose a reason for hiding this comment

brandonroberts Sep 13, 2024

Choose a reason for hiding this comment

nartc left a comment

Choose a reason for hiding this comment

brandonroberts commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading

netlify bot commented Sep 12, 2024 •

edited

Loading