The web framework with two modes.

import type { LoaderArgs, ActionArgs } from "@neutron-build/core";

export const config = { mode: "app" };

export async function loader({ params, context }: LoaderArgs) {
  const project = await context.db.getProject(params.id);
  if (!project) throw new Response("Not found", { status: 404 });
  return { project };
}

export async function action({ request, params, context }: ActionArgs) {
  const form = await request.formData();
  await context.db.updateProject(params.id, {
    name: form.get("name") as string,
  });
  return { saved: true };
}

export default function ProjectPage() {
  const { project } = useLoaderData<typeof loader>();
  const action = useActionData<typeof action>();

  return (
    <div>
      <h1>{project.name}</h1>
      {action?.saved && <p>Saved.</p>}
      <Form method="post">
        <input name="name" defaultValue={project.name} />
        <button type="submit">Save</button>
      </Form>
    </div>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return <p>{error.status}: Not found.</p>;
  }
  return <p>Something went wrong.</p>;
}