Infer string union in default values

[jansedlon]

Hey 👋

Is it possible to infer string union in default values?

Let's say there's a zod schema

const Schema = z.object({
  value: z.enum(['typeA', 'typeB'])
})

And then

useForm({
  defaultValue: {
    value: // Only accepts 'typeA' | 'typeB' | undefined
  }
})

And if used conform.input() (yeah, i'm still not on version 1, it's honestly quite painful to upgrade 😅) the default value would be also 'typeA' | 'typeB' | undefined.

Why am I proposing this?

I have a big form with a "live preview" window which is real time shows what you're typing. I'm moving the form variables around and some of them are string union and I lose the type safety

[edmundhung]

Is it possible to infer string union in default values?

I am not sure. It should be possible, but I would need to find out some examples to learn from 😅 If anyone figure
it out and create a PR, I am happy to merge it too.

yeah, i'm still not on version 1, it's honestly quite painful to upgrade

What's the blocker? If it is because of useInputEvent() -> useInputControl, I can get you an implementation of useInputEvent() that you can continue to use in v1. The useInputControl hook works almost identical except providing an additional value state. I would expect the old useInputEvent() work fine even on v1.

[jansedlon]

I am not sure. It should be possible, but I would need to find out some examples to learn from 😅 If anyone figure
it out and create a PR, I am happy to merge it too.

I'll give it a try but not sure what i'll break :D It's definitely a breaking change

What's the blocker? If it is because of useInputEvent() -> useInputControl, I can get you an implementation of useInputEvent() that you can continue to use in v1. The useInputControl hook works almost identical except providing an additional value state. I would expect the old useInputEvent() work fine even on v1.

Nah not really, it's probably everything else :D I have a medium sized (60k LOC) codebase with lots of nested data, eg. user can sell online meetings and they enter their availability time. So in a form, it's a fieldlist for week days, each week day is a fieldset, each day has multiple availability times (eg. 6 AM - 10 AM, 11 AM - 4PM, etc) and each availability time has two inputs (start, end). So the transition is quite hard to V1. Also when I was looking at the migration guide 2 weeks ago, there was:

1. No mention about missing refine function
2. No mention about replacement types for FieldConfig
3. No hidden prop in getInputProps
4. Has defaultValue changed to initialValue?
5. Get input props erroring for z.preprocess( (v) => (v === "on" ? true : false), z.boolean().default(false), )
6. error prop in field disappeared
   Fixed by

export function getInputError<Schema extends Primitive | File[]>(
  metadata: FieldMetadata<Schema>,
): string | undefined {
  return metadata.errors?.[0];
}

However, I mean no harm! 😅 The V1 overall looks great and I think it's a way go to forward so good job! Really!
PS: I will probably add more when i get to field sets and field lists

[jansedlon]

@edmundhung What do you think? 😅

[edmundhung]

I think making it more specific on the defaultValue should be fine. But it might be not ideal with conform.input() or probably field.initialValue. The reason here is that Conform has limited control on the actual type of the form value as it have no control over the dom (The source of truth of your form). What Conform provides is more a type that's most likely correct but ... could be wrong 😅. That's why some people called this type-faith instead of type-safe.

[jansedlon]

I meant about the upgrade notes to v1 in the previous message 😁

[edmundhung]

1. No mention about missing refine function

I removed it because I don't feel like it's a good abstraction. But the way it was implemented still works with v1. Feel free to use this:

import { conformZodMessage } from '@conform-to/zod';
import {
    type ZodCustomIssue,
    type IssueData,
    type RefinementCtx,
    ZodIssueCode,
} from 'zod';

export function refine(
    ctx: RefinementCtx,
    options: {
        /**
         * A validate function. If the function returns `undefined`,
         * it will fallback to server validation.
         */
        validate: () => boolean | Promise<boolean> | undefined;
        /**
         * Define when the validation should be run. If the value is `false`,
         * the validation will be skipped.
         */
        when?: boolean;
        /**
         * The message displayed when the validation fails.
         */
        message?: string;
        /**
         * The path set to the zod issue.
         */
        path?: IssueData['path'];
        /**
         * Custom parameters
         */
        params?: ZodCustomIssue['params'];
    },
): void | Promise<void> {
    if (typeof options.when !== 'undefined' && !options.when) {
        ctx.addIssue({
            code: ZodIssueCode.custom,
            message: conformZodMessage.VALIDATION_SKIPPED,
            path: options.path,
            fatal: true,
        });
        return;
    }

    // Run the validation
    const result = options.validate();

    if (typeof result === 'undefined') {
        // Validate only if the constraint is defined
        ctx.addIssue({
            code: ZodIssueCode.custom,
            message: conformZodMessage.VALIDATION_UNDEFINED,
            path: options.path,
        });
        return;
    }

    const reportInvalid = (valid: boolean) => {
        if (valid) {
            return;
        }

        ctx.addIssue({
            code: ZodIssueCode.custom,
            message: options.message,
            path: options.path,
            params: options.params,
        });
    };

    return typeof result === 'boolean'
        ? reportInvalid(result)
        : result.then(reportInvalid);
}

2. No mention about replacement types for FieldConfig

FieldConfig is renamed to FieldMetadata.

3. No hidden prop in getInputProps

Correct. You are use the sr-only class from tailwind or anything similar from your preferred styling solution.

4. Has defaultValue changed to initialValue?

Yes. It is renamed to differentiate it from the defaultValue you set on useForm. They look the same initially, but the initialValue might change over time. e.g. If you type something on the field and the document is reloaded, the initialValue will be the value you previously typed. Also, if you update the field value through an intent, it will also be updated.

5. Get input props erroring for z.preprocess( (v) => (v === "on" ? true : false), z.boolean().default(false), )

What do you mean?

6. error prop in field disappeared

Yep. Feel free to use field.errors?.[0] if you want to display the first error only. But I think this is a bad UX if there could be more than one error 😓 I rather people do field.errors?.join(', ').