Forem: Marcos Viana

Remix with automatic importation. Have cleaner code.

Marcos Viana — Tue, 23 Apr 2024 13:16:28 +0000

If you are using Vite, the unimport plugin will help you keep your components cleaner.

First, install the package:

pnpm add unimport

Then, define these plugins and configurations in your vite.config.ts file:

import { defineConfig } from "vite";
import Unimport from 'unimport/unplugin'

export default defineConfig({
  plugins: [
        Unimport.vite({
            dts: true,
            dirs: [
                './app/components/*',
                '../../packages/ui/src/components/*'
            ],
            presets: [
                'react',
                {
                    from: '@remix-run/react',
                    imports: [
                        'useLoaderData', 'useActionData', 'useLocation', 'useNavigation',
                        'useNavigate', 'useParams', 'useAsyncError', 'useAsyncValue',
                        'useBeforeUnload', 'useBlocker', 'useFetcher', 'useFetchers',
                        'useFormAction', 'useHref', 'useMatches', 'useNavigationType',
                        'useOutlet', 'useOutletContext', 'unstable_usePrompt', 'useResolvedPath',
                        'useRevalidator', 'useRouteError', 'useRouteLoaderData', 'useSearchParams',
                        'useSubmit', 'unstable_useViewTransitionState', 'Link', 'Form', 'Await', 'Links',
                        'Outlet', 'NavLink', 'PrefetchPageLinks'
                    ],
                    priority: 10
                },
                {
                    from: '@remix-run/node',
                    imports: [
                        'json', 'redirect', 'defer', 'createCookie', 'isRouteErrorResponse', 'redirectDocument',
                        'createCookieSessionStorage', 'createMemorySessionStorage', 'createFileSessionStorage'
                    ]
                },
                {
                    from: '@remix-run/node',
                    type: true,
                    imports: [
                        'ActionFunctionArgs', 'LoaderFunctionArgs',
                        'MetaFunctionArgs', 'MetaFunction', 'ClientActionFunctionArgs',
                        'ClientLoaderFunctionArgs', 'HeadersFunction', 'LinksFunction',
                        'ShouldRevalidateFunction'
                    ]
                }
            ]   
        })
    ],
});

After installing the package and setting up the plugin, you can create components like the one below without using any imports.

Importing will be necessary only for independent cases.

export const meta: MetaFunction = () => {
  return [{ title: "Summary" }];
};

export const action = async ({ request }: ActionFunctionArgs) => {
    const formData = await request.clone().formData()
    return json({ success: true, message: formData.get("name")?.toString() })
}

export const loader = ({ request }: LoaderFunctionArgs) => {
    return json({ hello: 'world' })
}

export default function Page() {
    const loaderData = useLoaderData<typeof loader>()
    const actionData = useActionData<typeof action>()

  return (
    <main className="w-full min-h-screen flex items-center justify-center bg-zinc-100">
      <div className="sm:w-[500px] space-y-3">
                <Link to="testing">
                    <Headline name="Testing" />
                </Link>
                {JSON.stringify(loaderData)}

                <Card>
                    <CardHeader>
                        <CardTitle>Testing</CardTitle>
                        {actionData ? <p>{actionData.message}</p> : null}
                    </CardHeader>
                    <CardContent>
                        <Form method="post" className="space-y-2">
                            <Label htmlFor="name">Name</Label>
                            <Input name="name" id="name" type="text" />
                            <Button type="submit" variant="default">
                                Add
                            </Button>
                        </Form>
                    </CardContent>
                </Card>
            </div>
    </main>
  );
}

Remix com importação automática. Tenha um código mais limpo.

Marcos Viana — Tue, 23 Apr 2024 13:11:37 +0000

Se você está utilizando Vite , o plugin unimport vai te ajudar bastante a deixar seus componentes mais limpos.

Antes de tudo, instale o pacote:

pnpm add unimport

Depois defina este plugins e estas configurações em seu arquivo vite.config.ts

import { defineConfig } from "vite";
import Unimport from 'unimport/unplugin'

export default defineConfig({
  plugins: [
        Unimport.vite({
            dts: true,
            dirs: [
                './app/components/*',
                '../../packages/ui/src/components/*'
            ],
            presets: [
                'react',
                {
                    from: '@remix-run/react',
                    imports: [
                        'useLoaderData', 'useActionData', 'useLocation', 'useNavigation',
                        'useNavigate', 'useParams', 'useAsyncError', 'useAsyncValue',
                        'useBeforeUnload', 'useBlocker', 'useFetcher', 'useFetchers',
                        'useFormAction', 'useHref', 'useMatches', 'useNavigationType',
                        'useOutlet', 'useOutletContext', 'unstable_usePrompt', 'useResolvedPath',
                        'useRevalidator', 'useRouteError', 'useRouteLoaderData', 'useSearchParams',
                        'useSubmit', 'unstable_useViewTransitionState', 'Link', 'Form', 'Await', 'Links',
                        'Outlet', 'NavLink', 'PrefetchPageLinks'
                    ],
                    priority: 10
                },
                {
                    from: '@remix-run/node',
                    imports: [
                        'json', 'redirect', 'defer', 'createCookie', 'isRouteErrorResponse', 'redirectDocument',
                        'createCookieSessionStorage', 'createMemorySessionStorage', 'createFileSessionStorage'
                    ]
                },
                {
                    from: '@remix-run/node',
                    type: true,
                    imports: [
                        'ActionFunctionArgs', 'LoaderFunctionArgs',
                        'MetaFunctionArgs', 'MetaFunction', 'ClientActionFunctionArgs',
                        'ClientLoaderFunctionArgs', 'HeadersFunction', 'LinksFunction',
                        'ShouldRevalidateFunction'
                    ]
                }
            ]   
        })
    ],
});

Após instalar o pacote e configurar o plugin, você pode criar componentes como este abaixo, sem utilizar nenhuma importação.

A importação será necessária apenas para casos independentes.

export const meta: MetaFunction = () => {
  return [{ title: "Summary" }];
};

export const action = async ({ request }: ActionFunctionArgs) => {
    const formData = await request.clone().formData()
    return json({ success: true, message: formData.get("name")?.toString() })
}

export const loader = ({ request }: LoaderFunctionArgs) => {
    return json({ hello: 'world' })
}

export default function Page() {
    const loaderData = useLoaderData<typeof loader>()
    const actionData = useActionData<typeof action>()

  return (
    <main className="w-full min-h-screen flex items-center justify-center bg-zinc-100">
      <div className="sm:w-[500px] space-y-3">
                <Link to="eae">
                    <Headline name="Teste" />
                </Link>
                {JSON.stringify(loaderData)}

                <Card>
                    <CardHeader>
                        <CardTitle>Eae</CardTitle>
                        {actionData ? <p>{actionData.message}</p> : null}
                    </CardHeader>
                    <CardContent>
                        <Form method="post" className="space-y-2">
                            <Label htmlFor="name">Nome</Label>
                            <Input name="name" id="name" type="text" />
                            <Button type="submit" variant="default">
                                Adicionar
                            </Button>
                        </Form>
                    </CardContent>
                </Card>
            </div>
    </main>
  );
}

New way to handle forms in Remix.run

Marcos Viana — Tue, 23 Apr 2024 13:10:26 +0000

A good way to use forms in Remix is by using the remix-hook-form package, which utilizes the foundations of the react-hook-form package, considered the best for form handling.

Link to the documentation of the remix-hook-form package:
https://github.com/Code-Forge-Net/remix-hook-form

Since the form needs to be handled both on the server and client sides, the author Alem Tuzlak created this library.

I tested it and found it very good. Before testing it, I was planning to create my own package for form handling using any type of validator.

While I was looking for more information, I remembered the react-hook-form package and ended up stumbling upon the remix-hook-form package. My experience was the best.

First of all, you need to install the following packages:


pnpm add remix-hook-form react-hook-form @hookform/resolvers zod

Below is a page that handles multiple forms and performs validation on both the client and server sides.

I used intent to differentiate the forms in a single route. I used the Form component and also utilized fetcher.

import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node"
import { Form, useFetcher, useNavigation, isRouteErrorResponse, useRouteError } from "@remix-run/react"

import { useRemixForm, getValidatedFormData, parseFormData } from "remix-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"

import { Label, Input, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@workspace/ui"
import { Loader2Icon } from "lucide-react"

export const meta: MetaFunction = () => [{ title: "Summary" }];

export default function Page() {
    const fetcher = useFetcher()
    const navigation = useNavigation()

    const loginForm = useRemixForm<LoginFormData>({ 
        mode: "onSubmit",
        resolver: loginResolver,
        submitData: { intent: "login" },
        fetcher
    })

    const signUpForm = useRemixForm<SignUpFormData>({
        mode: "onSubmit",
        resolver: signUpResolver,
        submitData: { intent: "sign-up" },
    })

  return (
        <div className="w-full min-h-dvh flex items-center justify-center">
            <div className="max-w-sm space-y-5">
                <fetcher.Form onSubmit={loginForm.handleSubmit}>
                    <Card className="w-full">
                        <CardHeader>
                            <CardTitle className="text-2xl">Login</CardTitle>
                            <CardDescription>
                                Enter your email below to login to your account.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="grid gap-4">
                            <div className="grid gap-2">
                                <Label htmlFor="email">Email</Label>
                                <Input id="email" type="email" placeholder="m@example.com" {...loginForm.register("email")} />
                                {loginForm.formState.errors.email && (
                                    <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.email.message}</p>
                                )}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="password">Password</Label>
                                <Input id="password" type="password" {...loginForm.register("password")}/>
                                {loginForm.formState.errors.password && (
                                    <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.password.message}</p>
                                )}
                            </div>
                        </CardContent>
                        <CardFooter>
                            <Button type="submit" className="w-full">
                                {(fetcher.formData?.get("intent") === '"login"')
                                    ? <Loader2Icon className="w-4 h-4 animate-spin" />
                                    : "Sign In"
                                }
                            </Button>
                        </CardFooter>
                    </Card>
                </fetcher.Form>

                <Form onSubmit={signUpForm.handleSubmit}>
                    <Card className="w-full">
                        <CardHeader>
                            <CardTitle className="text-2xl">SignUp</CardTitle>
                            <CardDescription>
                                Enter your email below to create your account.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="grid gap-4">
                            <div className="grid gap-2">
                                <Label htmlFor="email">Email</Label>
                                <Input id="email" type="email" placeholder="m@example.com" {...signUpForm.register("email")} />
                                {signUpForm.formState.errors.email && (
                                    <p className="text-xs text-red-500 font-medium">{signUpForm.formState.errors.email.message}</p>
                                )}
                            </div>
                        </CardContent>
                        <CardFooter>
                            <Button type="submit" className="w-full">
                                {(navigation.formData?.get("intent") === '"sign-up"')
                                    ? <Loader2Icon className="w-4 h-4 animate-spin" />
                                    : "Sign up"
                                }
                            </Button>
                        </CardFooter>
                    </Card>
                </Form>
            </div>
        </div>
  )
}

export const action = async ({ request }: ActionFunctionArgs) => {
    const formData = await parseFormData<{ intent?: string }>(request.clone())
    if (!formData.intent) throw json({ error: "Intent not found" }, { status: 404 })
    switch (formData.intent) {
        case 'sign-up': return await handleSignUp(request)
        case 'login': return await handleLogin(request)
        default: throw json({ error: "Invalid intent" }, { status: 404 })
    }
}

const loginSchema = z.object({ email: z.string().email(), password: z.string().min(8) })
const loginResolver = zodResolver(loginSchema)
type LoginFormData = z.infer<typeof loginSchema>
async function handleLogin(request: Request) {
    const { errors, data, receivedValues: defaultValues } =
        await getValidatedFormData<LoginFormData>(request, loginResolver);
    if (errors) return json({ errors, defaultValues })
    await new Promise(resolve => setTimeout(resolve, 1500))
    return json(data)
}

const signUpSchema = z.object({ email: z.string().email() })
const signUpResolver = zodResolver(signUpSchema)
type SignUpFormData = z.infer<typeof signUpSchema>
async function handleSignUp(request: Request) {
    const { errors, data, receivedValues: defaultValues } =
        await getValidatedFormData<SignUpFormData>(request, signUpResolver);
    if (errors) return json({ errors, defaultValues })
    await new Promise(resolve => setTimeout(resolve, 1500))
    return json(data)
}

Melhor forma de tratar formulários no Remix.run

Marcos Viana — Tue, 23 Apr 2024 13:07:21 +0000

Uma boa forma de utilizar formulário no Remix, é utilizando o pacote remix-hook-form. Que utiliza bases do pacote react-hook-form considerada a melhor para tratamento de formulário.

Link para a documentação do pacote remix-hook-form:
https://github.com/Code-Forge-Net/remix-hook-form

Como o formulário precisar ser tratado tanto no lado do servidor quanto no lado do cliente, o autor Alem Tuzlak criou esta biblioteca.

Eu testei ela e achei muito boa. Antes de testar eu estava planejando criar meu próprio pacote para tratamento de formulário utilizando qualquer tipo de validador.

No momento em que estava procurando mais informações, lembrei do pacote react-hook-form e acabei me deparando com o pacote remix-hook-form . Minha experiência, foi a melhor.

Antes de tudo, você precisa instalar os seguintes pacotes:

pnpm add remix-hook-form react-hook-form @hookform/resolvers zod

Abaixo esta uma página que trata múltiplos formulários e faz validação tanto no lado do cliente, como no lado do servidor.

Utilizei intent para diferenciar os formulários em uma única rota. Utilizei o componente Form e também utilizar fetcher .

import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node"
import { Form, useFetcher, useNavigation, isRouteErrorResponse, useRouteError } from "@remix-run/react"

import { useRemixForm, getValidatedFormData, parseFormData } from "remix-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"

import { Label, Input, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@workspace/ui"
import { Loader2Icon } from "lucide-react"

export const meta: MetaFunction = () => [{ title: "Summary" }];

export default function Page() {
    const fetcher = useFetcher()
    const navigation = useNavigation()

    const loginForm = useRemixForm<LoginFormData>({ 
        mode: "onSubmit",
        resolver: loginResolver,
        submitData: { intent: "login" },
        fetcher
    })

    const signUpForm = useRemixForm<SignUpFormData>({
        mode: "onSubmit",
        resolver: signUpResolver,
        submitData: { intent: "sign-up" },
    })

  return (
        <div className="w-full min-h-dvh flex items-center justify-center">
            <div className="max-w-sm space-y-5">
                <fetcher.Form onSubmit={loginForm.handleSubmit}>
                    <Card className="w-full">
                        <CardHeader>
                            <CardTitle className="text-2xl">Login</CardTitle>
                            <CardDescription>
                                Enter your email below to login to your account.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="grid gap-4">
                            <div className="grid gap-2">
                                <Label htmlFor="email">Email</Label>
                                <Input id="email" type="email" placeholder="m@example.com" {...loginForm.register("email")} />
                                {loginForm.formState.errors.email && (
                                    <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.email.message}</p>
                                )}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="password">Password</Label>
                                <Input id="password" type="password" {...loginForm.register("password")}/>
                                {loginForm.formState.errors.password && (
                                    <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.password.message}</p>
                                )}
                            </div>
                        </CardContent>
                        <CardFooter>
                            <Button type="submit" className="w-full">
                                {(fetcher.formData?.get("intent") === '"login"')
                                    ? <Loader2Icon className="w-4 h-4 animate-spin" />
                                    : "Sign In"
                                }
                            </Button>
                        </CardFooter>
                    </Card>
                </fetcher.Form>

                <Form onSubmit={signUpForm.handleSubmit}>
                    <Card className="w-full">
                        <CardHeader>
                            <CardTitle className="text-2xl">SignUp</CardTitle>
                            <CardDescription>
                                Enter your email below to create your account.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="grid gap-4">
                            <div className="grid gap-2">
                                <Label htmlFor="email">Email</Label>
                                <Input id="email" type="email" placeholder="m@example.com" {...signUpForm.register("email")} />
                                {signUpForm.formState.errors.email && (
                                    <p className="text-xs text-red-500 font-medium">{signUpForm.formState.errors.email.message}</p>
                                )}
                            </div>
                        </CardContent>
                        <CardFooter>
                            <Button type="submit" className="w-full">
                                {(navigation.formData?.get("intent") === '"sign-up"')
                                    ? <Loader2Icon className="w-4 h-4 animate-spin" />
                                    : "Sign up"
                                }
                            </Button>
                        </CardFooter>
                    </Card>
                </Form>
            </div>
        </div>
  )
}

export const action = async ({ request }: ActionFunctionArgs) => {
    const formData = await parseFormData<{ intent?: string }>(request.clone())
    if (!formData.intent) throw json({ error: "Intent not found" }, { status: 404 })
    switch (formData.intent) {
        case 'sign-up': return await handleSignUp(request)
        case 'login': return await handleLogin(request)
        default: throw json({ error: "Invalid intent" }, { status: 404 })
    }
}

const loginSchema = z.object({ email: z.string().email(), password: z.string().min(8) })
const loginResolver = zodResolver(loginSchema)
type LoginFormData = z.infer<typeof loginSchema>
async function handleLogin(request: Request) {
    const { errors, data, receivedValues: defaultValues } =
        await getValidatedFormData<LoginFormData>(request, loginResolver);
    if (errors) return json({ errors, defaultValues })
    await new Promise(resolve => setTimeout(resolve, 1500))
    return json(data)
}

const signUpSchema = z.object({ email: z.string().email() })
const signUpResolver = zodResolver(signUpSchema)
type SignUpFormData = z.infer<typeof signUpSchema>
async function handleSignUp(request: Request) {
    const { errors, data, receivedValues: defaultValues } =
        await getValidatedFormData<SignUpFormData>(request, signUpResolver);
    if (errors) return json({ errors, defaultValues })
    await new Promise(resolve => setTimeout(resolve, 1500))
    return json(data)
}