Two way data transforms?

[scamden]

What's the recommended approach for data transforms? For example, I have a z.number() field and my component is just a text editor (say with masking to add a $ or something), my current approach is to stringify / format the number on the way to the input and then parse it with a separate zod schema on the way out to turn it back into a number (z.string().regex(/^\d+$/).optional().transform(Number);). Is this the recommended approach? Just handle it one off in each mapped component? I'd love to be able to define two way transforms in the schema but not sure if that would be possible with zod.. Just thought I'd ask in here for thoughts.

Thanks for all your work on this great library!

[iway1]

I think you can use zod.preprocess() for this although I haven't tried it myself with this library. Should work 😃 (if not feel free to open an issue)

[scamden]

that sounds promising! fwiw neither of these work for me. I get a error:

No matching zod schema for type `ZodEffects` found in mapping for property `ghgScope`. Make sure there's a matching zod schema for every property in your schema.

const baseEditSchema = z.object({
  ghgScope: z.preprocess((v) => Number(v), z.number()),
  ghgScope3Category: z.number().nullish(),
  minimumFidelity: z.string(),

const baseEditSchema = z.object({
  ghgScope: z.number().transform((v) => v),
  ghgScope3Category: z.number().nullish(),
  minimumFidelity: z.string(),

[iway1]

hmm yeah might want to improve support for ZodEffects here I think we just need to unwrap it which is pretty easy to do

[iway1]

adding this now

[iway1]

I was wrong

TLDR: Right now the lib isn't going to work with any transforms or preprocessing (wasn't aware of this til I tried to fix it just now).

Not 100% sure if there's an easy fix for this with how things are currently working... it's kind of an indirect side effect with some limitations with react-hook-form. RHF doesn't allows calling onChange with an undefined value which doesn't play well with the fact that people want to use .optional() with zod for optional fields and with how default values work.

To get the desired behavior the current implementation is calling the zod resolver twice on the same data, and if the data is being transformed it's going to fail the second time around because it's been transformed.

I think the long term solution might be to ditch RHF versus implementing more hacks? I was already having to do some weird workarounds to deal with the fact that onChange(undefined) isn't supported ( the library currently has a sort of internal representation of whether a field is undefined, separate from react-hook-forms state, which allows for actually setting fields to undefined which is desirable ).

Would also reduce the size of dependencies required which would be cool, but I do like the fact that react hook form has great rendering performance by default

Thanks for bringing this up!

[iway1]

gonna need a new logo if we do that though lol

[scamden]

he library currently has a sort of internal representation of whether a field is undefined,

ya i noticed that! wasn't sure why. TIL

is calling the zod resolver twice on the same data

that's interesting. i wonder if there's another work around here..

I think the long term solution might be to ditch RHF versus implementing more hacks?

has anyone already filed an issue with them to allow undefined maybe? i agree that it's nice to use something tried and true and not have to own the responsibility for actually doing the form. not the biggest deal but it's also nice if people are already familiar with the hooks needed.

gonna need a new logo if we do that though lol

could also swap names to zod-form if you want! haha happy to give you write access to it if so