🖥️ Support Server Actions

examples/remix-form/.codesandbox/tasks.json

@@ -0,0 +1,31 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
+    },
+    "start": {
+      "name": "start",
+      "command": "pnpm start",
+      "runAtStart": false
+    }
+  }
+}

examples/remix-form/.devcontainer/Dockerfile

@@ -0,0 +1,2 @@
+FROM node:18
+RUN npm install -g pnpm

examples/remix-form/.devcontainer/devcontainer.json

@@ -0,0 +1,6 @@
+{
+  "name": "Devcontainer",
+  "build": {
+    "dockerfile": "./Dockerfile"
+  }
+}

examples/remix-form/.eslintrc.cjs

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

examples/remix-form/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

examples/remix-form/app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

examples/remix-form/app/entry.server.tsx

@@ -0,0 +1,137 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import { PassThrough } from 'node:stream';
+
+import type { AppLoadContext, EntryContext } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import isbot from 'isbot';
+import { renderToPipeableStream } from 'react-dom/server';
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  loadContext: AppLoadContext,
+) {
+  return isbot(request.headers.get('user-agent'))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext,
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext,
+      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onAllReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}

examples/remix-form/app/root.tsx

@@ -0,0 +1,35 @@
+import { cssBundleHref } from '@remix-run/css-bundle';
+import type { LinksFunction } from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import styles from '~/styles/globals.css';
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
+  { rel: 'stylesheet', href: styles },
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}

examples/remix-form/app/routes/_index.tsx

@@ -0,0 +1,110 @@
+import type { MetaFunction, ActionFunctionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { Form, useActionData } from '@remix-run/react';
+import { setTimeout } from 'timers/promises';
+import { createActionValidator } from 'react-hook-form/server';
+import { useForm } from 'react-hook-form';
+import { zodResolverSync } from '../../node_modules/@hookform/resolvers/zod';
+import { z } from 'zod';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'New Remix App' },
+    { name: 'description', content: 'Welcome to Remix!' },
+  ];
+};
+
+const schema = z.object({
+  username: z.string().min(1, 'Username is required'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+let count = 0;
+const maxCount = 1;
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+
+  await setTimeout(1000);
+
+  const validator = createActionValidator(formData, {
+    resolver: zodResolverSync(schema),
+  });
+
+  await validator.validate();
+
+  if (!validator.isValid()) {
+    return json(validator.getResult());
+  }
+
+  if (Math.random() < 0.5) {
+    validator.setError('root.serverError', {
+      type: '409',
+      message: 'Username already exists. Please choose a different username.',
+    });
+    return json(validator.getResult());
+  }
+
+  if (Math.random() < 0.5) {
+    count++;
+    if (count > maxCount) {
+      validator.setError('root.serverError', {
+        type: '401',
+        message: 'Too many login attempts.',
+      });
+      return json(validator.getResult());
+    }
+
+    validator.setError('root.serverError', {
+      type: '401',
+      message: 'Invalid username or password.',
+    });
+    return json(validator.getResult());
+  }
+
+  if (Math.random() < 0.5) {
+    validator.setError('root.serverError', {
+      type: '500',
+      message: 'Internal server error. Please try again later.',
+    });
+  }
+
+  return json({ status: 200, message: 'Login successful!' });
+}
+
+export default function Index() {
+  const actionData = useActionData<typeof action>();
+  console.log('actionData', actionData);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{
+    username: string;
+    password: string;
+  }>({
+    resolver: zodResolverSync(schema),
+    defaultValues: actionData?.values || {
+      username: '',
+      password: '',
+    },
+    errors: actionData?.errors,
+    progressive: true,
+  });
+
+  console.log('errors', errors);
+
+  return (
+    <Form method="post" onSubmit={handleSubmit()}>
+      <label>Username</label>
+      <input {...register('username')} placeholder="Username" />
+      {errors.username && <p>{errors.username.message}</p>}
+      <label>Password</label>
+      <input {...register('password')} type="password" placeholder="Password" />
+      {errors.password && <p>{errors.password.message}</p>}
+      <input type="submit" />
+      {errors.root?.serverError && <p>{errors.root.serverError.message}</p>}
+    </Form>
+  );
+}