Framework packages reference

Every public function, class and type, as published at version 0.1.0-alpha.7. The JavaScript SDK page has the overview and examples.

Each package is a thin layer over @formerie/client, so its types, such as FormerieTarget, are in the client reference.

React

@formerie/react

React: useFormerieClient

A FormerieRuntimeClient for a component.

TypeScript

function useFormerieClient(config?: FormerieClientConfig): FormerieClient;

React: useFormerieSubmit

Submits to a target, tracks the status and result, and can also check answers and read the schema.

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

A FormerieRuntimeClient as a computed ref.

TypeScript

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

Vue: useFormerieSubmit

Submits to a target and tracks the status and result in refs. It can also check answers and read the schema.

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

A FormerieRuntimeClient.

TypeScript

function createFormerieClient(config?: FormerieClientConfig): FormerieClient;

Svelte: createFormerieRenderModel

A store of the fields and steps to draw, which follows the schema and answers.

TypeScript

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

Svelte: createFormerieSubmit

Submits to a target and tracks the status and result in stores. It can also check answers and read the schema.

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

A FormerieRuntimeClient as an accessor.

TypeScript

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

Solid: createFormerieSubmit

Submits to a target and tracks the status and result in accessors. It can also check answers and read the schema.

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

The injection token for the client’s settings. Optional.

TypeScript

const FORMERIE_CLIENT_CONFIG: InjectionToken<FormerieClientConfig>;

Angular: FormerieService

An injectable service that reads the schema, checks answers and submits, for a target. getClient() returns a 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

A FormerieRuntimeClient.

TypeScript

function createFormerieClient(config?: FormerieClientConfig): FormerieClient;

Astro: createFormerieFormAttributes

The data-formerie-* attributes for a <form>, with its target’s addresses.

TypeScript

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

Astro: FormerieAstroFormAttributesOptions

TypeScript

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

@formerie/next

Next: createFormerieNextAction

A server action that submits FormData to a target. See the server path for its limits.

TypeScript

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

Next: createFormerieNextServerHelpers

The client, schema and validate calls, and a submit action, for one target.

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

The same as in @formerie/react, re-exported.

Next: FormerieSubmitStatus

The same as in @formerie/react, re-exported.

Next: useFormerieClient

The same as in @formerie/react, re-exported.

Next: useFormerieSubmit

The same as in @formerie/react, re-exported.

Next: UseFormerieSubmitResult

The same as in @formerie/react, re-exported.

Nuxt

@formerie/nuxt

Nuxt: createFormerieNuxtClient

A FormerieRuntimeClient, with its address from your Nuxt runtime config.

TypeScript

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

Nuxt: createFormerieNuxtSubmitHandler

A server handler that submits the form data your readFormData returns to a target.

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

The same as in @formerie/vue, re-exported.

Nuxt: useFormerieClient

The same as in @formerie/vue, re-exported.

Nuxt: useFormerieSubmit

The same as in @formerie/vue, re-exported.

Nuxt: UseFormerieSubmitResult

The same as in @formerie/vue, re-exported.

Remix

@formerie/remix

Remix: createFormerieRemixAction

A Remix action that submits the request’s form data to a target.

TypeScript

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

Remix: jsonFormerieRemixResponse

A JSON Response from a submit result, with HTTP 202 on success and 400 on failure unless you set them.

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

The same as in @formerie/react, re-exported.

Remix: FormerieSubmitStatus

The same as in @formerie/react, re-exported.

Remix: useFormerieClient

The same as in @formerie/react, re-exported.

Remix: useFormerieSubmit

The same as in @formerie/react, re-exported.

Remix: UseFormerieSubmitResult

The same as in @formerie/react, re-exported.