# Points d’entrée par framework

Formerie offre un seul contrat d’API et plusieurs points d’entrée d’intégration.
Utilisez l’adaptateur d’interface pour l’état des composants, et
`@formerie/client` lorsque le traitement de votre formulaire s’exécute dans un
composant de navigateur, une route serveur, une action ou un point de terminaison.

## Choisir un point d’entrée

| Type de projet | À utiliser en premier | Formulaires côté serveur |
| --- | --- | --- |
| HTML simple ou JavaScript de navigateur | `@formerie/client` | API HTTP directe ou `@formerie/client` |
| React | `@formerie/react` | `@formerie/client` dans votre route ou action serveur |
| Next.js | `@formerie/next` dans les composants client | Server Actions de `@formerie/next` ou `@formerie/client` |
| React Router | `@formerie/react` dans les composants d’interface | `@formerie/client` dans les actions de route |
| Vue | `@formerie/vue` | `@formerie/client` dans votre route ou action serveur |
| Nuxt | `@formerie/nuxt` dans les composants | Gestionnaires serveur de `@formerie/nuxt` ou `@formerie/client` |
| Svelte | `@formerie/svelte` | `@formerie/client` dans les actions ou points de terminaison SvelteKit |
| Solid | `@formerie/solid` | `@formerie/client` dans les fonctions serveur ou routes d’API SolidStart |
| Angular | `@formerie/angular` | `@formerie/client` dans votre route ou action serveur |
| Astro | `@formerie/astro` pour les attributs | `@formerie/client` ou un adaptateur d’îlot |
| Remix | `@formerie/remix` dans les modules de route | Actions de `@formerie/remix` ou `@formerie/client` |
| Qwik | `@formerie/client` dans les actions Qwik City | `@formerie/client` |
| Preact, Lit, Web Components | `@formerie/client` | `@formerie/client` |

## Gestionnaires de paquets

Utilisez le gestionnaire de paquets que votre projet utilise déjà.

npm:

```sh
npm install @formerie/client
```

pnpm:

```sh
pnpm add @formerie/client
```

Yarn:

```sh
yarn add @formerie/client
```

Bun:

```sh
bun add @formerie/client
```

Les adaptateurs de framework suivent le même principe. Cet exemple utilise React;
remplacez le nom du paquet par celui de l’adaptateur ou du méta-framework de votre
projet.

npm:

```sh
npm install @formerie/react
```

pnpm:

```sh
pnpm add @formerie/react
```

Yarn:

```sh
yarn add @formerie/react
```

Bun:

```sh
bun add @formerie/react
```

Dans les objets cibles du SDK, utilisez `workspace` pour l’identifiant de l’espace
de travail Formerie.

## Next.js

Utilisez `@formerie/next` dans les composants client et les Server Actions. Le
paquet réexporte les hooks React et ajoute des fonctions utilitaires pour les
formulaires App Router qui passent d’abord par votre application Next.js.

```tsx
import { createFormerieNextAction } from "@formerie/next";

const submitContact = createFormerieNextAction({
  workspace: "example.com",
  form: "contact"
});

export function ContactForm() {
  return (
    <form action={submitContact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button>Send</button>
    </form>
  );
}
```

## Nuxt

Utilisez `@formerie/vue` dans les composants Vue. Utilisez `@formerie/nuxt` dans
les routes serveur Nuxt lorsque la soumission doit passer par votre application.

```ts
import { readFormData } from "h3";
import { createFormerieNuxtSubmitHandler } from "@formerie/nuxt";

export default defineEventHandler(
  createFormerieNuxtSubmitHandler(
    {
      workspace: "example.com",
      form: "contact"
    },
    {
      readFormData
    }
  )
);
```

## Remix

Utilisez `@formerie/remix` dans les modules de route Remix lorsqu’une action doit
soumettre les données du formulaire à Formerie et retourner une réponse JSON
normalisée. Le paquet réexporte aussi les hooks React pour les composants de route.

```ts
import { createFormerieRemixAction } from "@formerie/remix";

export const action = createFormerieRemixAction({
  workspace: "example.com",
  form: "contact"
});
```

## Qwik

Pour l’instant, utilisez `@formerie/client` dans les actions Qwik City. Un paquet
`@formerie/qwik` dédié pourrait arriver plus tard si des fonctions utilitaires
d’action répétitives se dégagent.

```tsx
import { component$ } from "@builder.io/qwik";
import { Form, routeAction$ } from "@builder.io/qwik-city";
import { FormerieRuntimeClient } from "@formerie/client";

export const useContact = routeAction$(async (data) => {
  const formerie = new FormerieRuntimeClient();

  return formerie.submit("example.com", "contact", {
    fields: {
      email: String(data.email ?? ""),
      message: String(data.message ?? "")
    }
  });
});

export default component$(() => {
  const contact = useContact();

  return (
    <Form action={contact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button type="submit">Send</button>
    </Form>
  );
});
```

## Astro

Utilisez `@formerie/astro` pour générer les attributs Formerie de vos formulaires
Astro. Utilisez `@formerie/client` ou un adaptateur de framework dans les îlots qui
soumettent par programmation.

```astro
---
import { createFormerieFormAttributes } from "@formerie/astro";

const attrs = createFormerieFormAttributes({
  workspace: "example.com",
  form: "contact"
});
---

<form {...attrs}>
  <input name="email" type="email" />
</form>
```

## Quand ajouter un paquet dédié

Ajoutez un paquet dédié à un framework seulement s’il élimine un vrai travail
répétitif :

- fonctions utilitaires d’état propres au framework
- configuration automatique de l’environnement d’exécution
- enveloppes d’actions serveur ou d’actions de route qui normalisent les réponses
  de Formerie
- génération native d’attributs de formulaire
- intégration aux conventions de validation ou d’affichage des erreurs du framework

D’ici là, privilégiez `@formerie/client` accompagné d’un guide propre au framework.