Passer au contenu

Référence des paquets de framework

Chaque fonction, classe et type publics, tels que publiés à la version 0.1.0-alpha.7. La page SDK JavaScript présente l’aperçu et les exemples.

Chaque paquet est une mince couche au-dessus de @formerie/client, alors ses types, comme FormerieTarget, sont dans la référence du client.

React

@formerie/react

React: useFormerieClient

Un FormerieRuntimeClient pour un composant.

TypeScript
function useFormerieClient(config?: FormerieClientConfig): FormerieClient;

React: useFormerieSubmit

Soumet à une cible, suit l’état et le résultat, et peut aussi vérifier des réponses et lire le schéma.

TypeScript
function useFormerieSubmit(target: FormerieTarget, config?: FormerieClientConfig): UseFormerieSubmitResult;

React: FormerieSubmitState

TypeScript
interface FormerieSubmitState {
    status: FormerieSubmitStatus;
    result: SubmitResponse | null;
}

React: FormerieSubmitStatus

TypeScript
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";

React: UseFormerieSubmitResult

TypeScript
interface UseFormerieSubmitResult {
    client: FormerieClient;
    state: FormerieSubmitState;
    isSubmitting: boolean;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}

Vue

@formerie/vue

Vue: useFormerieClient

Un FormerieRuntimeClient sous forme de référence calculée.

TypeScript
function useFormerieClient(config?: MaybeRef<FormerieClientConfig>): ComputedRef<FormerieClient>;

Vue: useFormerieSubmit

Soumet à une cible et suit l’état et le résultat dans des références. Peut aussi vérifier des réponses et lire le schéma.

TypeScript
function useFormerieSubmit(target: MaybeRef<FormerieTarget>, config?: MaybeRef<FormerieClientConfig>): UseFormerieSubmitResult;

Vue: FormerieSubmitStatus

TypeScript
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";

Vue: UseFormerieSubmitResult

TypeScript
interface UseFormerieSubmitResult {
    client: ComputedRef<FormerieClient>;
    status: Ref<FormerieSubmitStatus>;
    result: ShallowRef<SubmitResponse | null>;
    isSubmitting: ComputedRef<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}

Svelte

@formerie/svelte

Svelte: createFormerieClient

Un FormerieRuntimeClient.

TypeScript
function createFormerieClient(config?: FormerieClientConfig): FormerieClient;

Svelte: createFormerieRenderModel

Un magasin des champs et des étapes à afficher, qui suit le schéma et les réponses.

TypeScript
function createFormerieRenderModel(schema: FormerieReadableInput<PublicSchemaInput>, values?: FormerieReadableInput<Record<string, unknown>>, options?: FormerieReadableInput<DescribeFormerieRenderModelOptions>): Readable<FormerieRenderModel>;

Svelte: createFormerieSubmit

Soumet à une cible et suit l’état et le résultat dans des magasins. Peut aussi vérifier des réponses et lire le schéma.

TypeScript
function createFormerieSubmit(target: FormerieTarget, config?: FormerieClientConfig): FormerieSubmitStore;

Svelte: FormerieReadableInput

TypeScript
type FormerieReadableInput<T> = T | Readable<T>;

Svelte: FormerieSubmitStatus

TypeScript
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";

Svelte: FormerieSubmitStore

TypeScript
interface FormerieSubmitStore {
    client: FormerieClient;
    status: Writable<FormerieSubmitStatus>;
    result: Writable<SubmitResponse | null>;
    isSubmitting: Readable<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}

Solid

@formerie/solid

Solid: createFormerieClient

Un FormerieRuntimeClient sous forme d’accesseur.

TypeScript
function createFormerieClient(config?: MaybeAccessor<FormerieClientConfig>): Accessor<FormerieClient>;

Solid: createFormerieSubmit

Soumet à une cible et suit l’état et le résultat dans des accesseurs. Peut aussi vérifier des réponses et lire le schéma.

TypeScript
function createFormerieSubmit(target: MaybeAccessor<FormerieTarget>, config?: MaybeAccessor<FormerieClientConfig>): CreateFormerieSubmitResult;

Solid: CreateFormerieSubmitResult

TypeScript
interface CreateFormerieSubmitResult {
    client: Accessor<FormerieClient>;
    status: Accessor<FormerieSubmitStatus>;
    result: Accessor<SubmitResponse | null>;
    isSubmitting: Accessor<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}

Solid: FormerieSubmitStatus

TypeScript
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";

Solid: MaybeAccessor

TypeScript
type MaybeAccessor<T> = T | Accessor<T>;

Angular

@formerie/angular

Angular: FORMERIE_CLIENT_CONFIG

Le jeton d’injection des réglages du client. Facultatif.

TypeScript
const FORMERIE_CLIENT_CONFIG: InjectionToken<FormerieClientConfig>;

Angular: FormerieService

Un service injectable qui lit le schéma, vérifie les réponses et soumet, pour une cible. getClient() renvoie un FormerieRuntimeClient.

TypeScript
class FormerieService {
    getClient(): FormerieClient;
    submit(target: FormerieTarget, payload: SubmitPayload, options?: SubmitRequestOptions): Promise<SubmitResponse>;
    validate(target: FormerieTarget, payload: ValidatePayload, options?: SubmitRequestOptions): Promise<ValidateResponse>;
    schema(target: FormerieTarget, options?: SubmitRequestOptions): Promise<PublicFormSchemaResult>;
}

Astro

@formerie/astro

Astro: createFormerieClient

Un FormerieRuntimeClient.

TypeScript
function createFormerieClient(config?: FormerieClientConfig): FormerieClient;

Astro: createFormerieFormAttributes

Les attributs data-formerie-* d’un <form>, avec les adresses de sa cible.

TypeScript
function createFormerieFormAttributes(target: FormerieTarget, options?: FormerieAstroFormAttributesOptions): Record<string, string>;

Astro: FormerieAstroFormAttributesOptions

TypeScript
interface FormerieAstroFormAttributesOptions {
    endpoint?: string;
    includeSchemaUrl?: boolean;
    includeValidateUrl?: boolean;
}

Next

@formerie/next

Next: createFormerieNextAction

Une action serveur qui soumet FormData à une cible. Consultez l’approche serveur pour ses limites.

TypeScript
function createFormerieNextAction(target: FormerieTarget, options?: CreateFormerieNextActionOptions): (formData: FormData) => Promise<SubmitResponse>;

Next: createFormerieNextServerHelpers

Le client, les appels de schéma et de validation, et une action de soumission, pour une cible.

TypeScript
function createFormerieNextServerHelpers(target: FormerieTarget, options?: CreateFormerieNextActionOptions): FormerieNextServerHelpers;

Next: CreateFormerieNextActionOptions

TypeScript
interface CreateFormerieNextActionOptions {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    submitOptions?: SubmitRequestOptions;
}

Next: FormerieNextServerHelpers

TypeScript
interface FormerieNextServerHelpers {
    client: FormerieClient;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    submitAction: (formData: FormData) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
}

Next: FormerieSubmitState

Le même que dans @formerie/react, réexporté.

Next: FormerieSubmitStatus

Le même que dans @formerie/react, réexporté.

Next: useFormerieClient

Le même que dans @formerie/react, réexporté.

Next: useFormerieSubmit

Le même que dans @formerie/react, réexporté.

Next: UseFormerieSubmitResult

Le même que dans @formerie/react, réexporté.

Nuxt

@formerie/nuxt

Nuxt: createFormerieNuxtClient

Un FormerieRuntimeClient, avec son adresse tirée de la configuration d’exécution de Nuxt.

TypeScript
function createFormerieNuxtClient(runtimeConfig?: FormerieNuxtRuntimeConfig, config?: FormerieClientConfig): FormerieClient;

Nuxt: createFormerieNuxtSubmitHandler

Un gestionnaire serveur qui soumet à une cible les données de formulaire que renvoie votre readFormData.

TypeScript
function createFormerieNuxtSubmitHandler<Event = unknown>(target: FormerieTarget, options: CreateFormerieNuxtSubmitHandlerOptions<Event>): (event: Event) => Promise<SubmitResponse>;

Nuxt: CreateFormerieNuxtSubmitHandlerOptions

TypeScript
interface CreateFormerieNuxtSubmitHandlerOptions<Event = unknown> {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    readFormData: (event: Event) => Promise<FormData> | FormData;
    submitOptions?: SubmitRequestOptions;
}

Nuxt: FormerieNuxtRuntimeConfig

TypeScript
interface FormerieNuxtRuntimeConfig {
    formerie?: {
        endpoint?: string;
    };
    public?: {
        formerie?: {
            endpoint?: string;
        };
    };
}

Nuxt: FormerieSubmitStatus

Le même que dans @formerie/vue, réexporté.

Nuxt: useFormerieClient

Le même que dans @formerie/vue, réexporté.

Nuxt: useFormerieSubmit

Le même que dans @formerie/vue, réexporté.

Nuxt: UseFormerieSubmitResult

Le même que dans @formerie/vue, réexporté.

Remix

@formerie/remix

Remix: createFormerieRemixAction

Une action Remix qui soumet les données de formulaire de la requête à une cible.

TypeScript
function createFormerieRemixAction(target: FormerieTarget, options?: CreateFormerieRemixActionOptions): (args: FormerieRemixActionArgs) => Promise<Response>;

Remix: jsonFormerieRemixResponse

Une Response JSON à partir d’un résultat de soumission, avec l’état HTTP 202 en cas de réussite et 400 en cas d’échec, sauf si vous les définissez.

TypeScript
function jsonFormerieRemixResponse(result: SubmitResponse, options?: Pick<CreateFormerieRemixActionOptions, "errorStatus" | "successStatus">): Response;

Remix: CreateFormerieRemixActionOptions

TypeScript
interface CreateFormerieRemixActionOptions {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    errorStatus?: number;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    submitOptions?: SubmitRequestOptions;
    successStatus?: number;
}

Remix: FormerieRemixActionArgs

TypeScript
interface FormerieRemixActionArgs {
    request: Request;
}

Remix: FormerieSubmitState

Le même que dans @formerie/react, réexporté.

Remix: FormerieSubmitStatus

Le même que dans @formerie/react, réexporté.

Remix: useFormerieClient

Le même que dans @formerie/react, réexporté.

Remix: useFormerieSubmit

Le même que dans @formerie/react, réexporté.

Remix: UseFormerieSubmitResult

Le même que dans @formerie/react, réexporté.