chore: add json example

[lifeiscontent]

@edmundhung can you explain to me how I might be able to get a JSON field working with conform? I've setup this example, but the .defaultValue of the input renders as a blank input value

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3c043ee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[edmundhung]

Just pushed a commit to your PR.

There is no JSON field in Conform. Conform only understand string or File in an input. You will need to serialize it manually and make sure it to be serialized again when you access and update the field value (e.g. control.change(JSON.serialize(value)) or JSON.parse(control.value))

It might be worth adding an option to the useControl hook to handle the serialziation for you 🤔

[lifeiscontent]

@edmundhung is there anyway to use the jsonSchema type I had? for my use case I want to allow someone to add any JSON data because we're mapping it back to a users DB so we don't know the shape of the data.

[edmundhung]

I have tested it once with your original type and it seems to recursively looping over and over again and crash. I am not sure why. It might be either a bug on the enableTypeCoercion helper in the conform zod package or something wrong with zod itself? Can you verify if the JSON schema works without passing to Conform?

[lifeiscontent]

@edmundhung yep the jsonSchema type is in the GitHub docs of zod and works as expected https://github.com/colinhacks/zod?tab=readme-ov-file#json-type

[edmundhung]

@lifeiscontent I have pushed up a fix to your branch. Let me know if this is what you were looking for.

[lifeiscontent]

@edmundhung is there a way I can try a prerelease version of this quickly? I can try it in the project I'm working in and get back to you.

[pkg-pr-new]

commit: 3c043ee

@conform-to/dom

pnpm add https://pkg.pr.new/@conform-to/dom@686

@conform-to/react

pnpm add https://pkg.pr.new/@conform-to/react@686

@conform-to/validitystate

pnpm add https://pkg.pr.new/@conform-to/validitystate@686

@conform-to/yup

pnpm add https://pkg.pr.new/@conform-to/yup@686

@conform-to/zod

pnpm add https://pkg.pr.new/@conform-to/zod@686

Open in Stackblitz

More templates

• @conform-example/chakra-ui
• @conform-example/headless-ui
• @conform-example/material-ui
• @conform-example/nextjs
• @conform-example/radix-ui
• @conform-example/react-router
• @conform-example/remix
• @conform-example/shadcn-ui

[edmundhung]

@edmundhung is there a way I can try a prerelease version of this quickly? I can try it in the project I'm working in and get back to you.

Here you go ☝🏼

[lifeiscontent]

@edmundhung it works perfectly! :)

[lifeiscontent]

@edmundhung any chance the work you did here could get merged?

[edmundhung]

Just following up on this. It seems like this implementation will break people using union for other cases. But we have a solution that is actually working already: z.custom.

For example, we can create a JSON schema like this:

// Copied from https://github.com/colinhacks/zod?tab=readme-ov-file#json-type
function getJsonSchema() {
  const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
  type Literal = z.infer<typeof literalSchema>;
  type Json = Literal | { [key: string]: Json } | Json[];
  const jsonSchema: z.ZodType<Json> = z.lazy(() =>
    z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)])
  );

  // Wrap the JSON schema in `z.custom`
  return z.custom<Json>(json => jsonSchema.safeParse(json).success, 'Invalid JSON');
}

This works because Conform will no longer try to reconstruct the JSON schema with the additional coercion logic and so it should works as zod normally does.

I will update this PR to add some tests for z.custom with a tips on the docs. 👍🏼

[edmundhung]

@lifeiscontent Just curious if #871 solves what you need, or is there anything else you want there. Let me know.

[lifeiscontent]

@edmundhung yes, I think it should be fine

[edmundhung]

Closing as this is already addressed with #871.