Code Review for TypeBox Adapter for client-side form validation library

[lifeiscontent]

Hi there, I've started to build out an adapter for TypeBox and a form validation library called conform, would love some feedback on the PR to see if there are some optimizations that could be done.

Have a look here: edmundhung/conform#368

and thank you for your time!

[sinclairzx81]

@lifeiscontent Hi,

The code looks fine, good work :) The only thing that stood out was maybe the use of Static<T> when decoding via Value.Decode. Note that the Decode function will return instances of StaticDecode<T> (so not Static<T>) with the main difference being that Decode will factor any Transform have applied to types (which may give a different inference type)

I've just quickly updated this code to infer as StaticDecode if you want to give this a test, but you will want to be mindful of pushing out TS inference (as StaticDecode can be a very expensive type to compute (as Transforms are mapped through the Type System)). The following is entirely optional, but if you want to use it, just try and gauge editor performance for large types first.

TypeScript Link Here

Nice work!
S

[lifeiscontent]

@sinclairzx81 thanks for the help! the author of conform wrote up a few comments on the PR about how to do a few different things in TypeBox that can be done in Zod/Yup, do you have a few minutes to take a look and uncover some of those questions? edmundhung/conform#368

Thanks again for your help, and happy new year :)

[sinclairzx81]

@lifeiscontent Hiya,

How do we add custom validation to typebox? For example, it's common to ask for the password twice in a signup form and validated whether both passwords match. How can we implement this using typebox?

A matching password check would need to be handled post validation

Does typebox support async validation? If yes, can we also support it in the integration?

TypeBox does not support async validation, you will need to await values before checking them.

How does the coercion work and how does it handle empty string?

Type coercion is supported via Value.Convert

---

I'm not sure what the requirements of conform are, but if it needs validation libraries to perform additional processing of values (above and beyond just checking the value), you can use additional operators from Value.* to construct a parse pipeline. These functions are typically used for processing values received on the server, but you can use them to parse values on the frontend also.

The following would be a "kitchen sink" setup (the post function is non-typical but added for the password check)

// user defined parse function
function parse<T extends TSchema, R = StaticDecode<T>>(schema: T, value: unknown, post?: (value: R) => void): R  {
  const converted = Value.Convert(schema, value)     // apply type coercion if possible
  const defaulted = Value.Default(schema, converted) // apply defaults to missing properties
  const cleaned = Value.Clean(schema, defaulted)     // omit unknown properties
  const decoded = Value.Decode(schema, cleaned)      // decode the value 
  if(post) post(decoded as R)                        // (optional) post decode check
  return decoded as R
}
// user defined async parse function
async function parseAsync<T extends TSchema, R = StaticDecode<T>>(schema: T, promise: Promise<unknown>, post?: (value: R) => void) {
  return parse(schema, await promise, post)
}

// ---------

const T = Type.Object({
  password: Type.String(),
  confirm: Type.String()
})

const value = parse(T, {
  password: 1234567,
  confirm: 1234567
}, value => {
  if(value.password !== value.password) {
    throw Error('Passwords do not match')
  }
})

console.log(value)

You would likely want to embed the above internal to the plugin to process values on behalf of conform, however you'll have to contrast whether the above will work in the context of the library (as unlike Zod, TypeBox does not use combinators to process values). I got the sense that Zod-like combinators may be a "minimum barrier to entry" based on comments from the conform author, so you'll have to weigh whether the post validation check is tenable given the design of conform.

Hope this helps
S