Name: Remix com importação automática. Tenha um código mais limpo.
Rating: 3.4 (3252 reviews)
Author: marcosviana

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>
  );
}