edmundhung / conform

A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
https://conform.guide
MIT License
1.8k stars 101 forks source link

Better support for exactOptionalPropertyTypes: true #697

Open jakubmazanec opened 2 months ago

jakubmazanec commented 2 months ago

Describe the bug and the expected behavior

When TypeScript compiler option exactOptionalPropertyTypes is set to true, you cannot pass undefined as a value to an object property that is marked as optional. While IMO very useful option, it can lead to bad DX, because it can cause TypeScript errors:

import {useForm} from '@conform-to/react';

type CustomComponentProps = {
  onSubmit?: Parameters<typeof useForm>[0]['onSubmit'] | undefined;
}

let CustomComponent = ({onSubmit}: CustomComponentProps ) => {
  let [form] = useForm({
    onSubmit // error here, because `onSubmit` prop can be `undefined`
  });

 // rest of the component
}

I therefore prefer that "input" types (like function parameters, properties in options objects, etc.) have explicit undefined added to them; e.g. here I would like to have this:

export type FormOptions<
    Schema extends Record<string, any> = any,
    FormError = string[],
    FormValue = Schema,
> = BaseFormOptions<Schema, FormError, FormValue> & {
    /**
     * A function to be called before the form is submitted.
     */
    onSubmit?: ((
        event: FormEvent<HTMLFormElement>,
        context: ReturnType<
            BaseFormContext<Schema, FormError, FormValue>['submit']
        >,
    ) => void) | undefined; // here I added explicit `undefined` to the type ⚠️
};

Would it be possible to add undefined to all input types? Thank you.

Conform version

v1.1.5

Steps to Reproduce the Bug or Issue

-

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response