[✨] complex form should not flatten errors

[tzdesign]

Is your feature request related to a problem?

We have a complex Zod Type for cart.

If an error occurs in one of the fields at the lowest level like:

cart.invoiceAddress.firstName

The errors are flatten within cart:

invoiceAddress: string[]

Example multiple fields:

{
  "invoiceAddress": [
    "String must contain at least 2 character(s)",
    "String must contain at least 2 character(s)",
    "String must contain at least 2 character(s)",
    "String must contain at least 1 character(s)",
    "String must contain at least 2 character(s)",
    "String must contain at least 2 character(s)",
  ]
}[]

 {
    code: 'too_small',
    minimum: 2,
    type: 'string',
    inclusive: true,
    exact: false,
    message: 'String must contain at least 2 character(s)',
    path: [ 'invoiceAddress', 'street' ]
  },
  {
    code: 'too_small',
    minimum: 1,
    type: 'string',
    inclusive: true,
    exact: false,
    message: 'String must contain at least 1 character(s)',
    path: [ 'invoiceAddress', 'streetNumber' ]
  },
  {
    code: 'too_small',
    minimum: 2,
    type: 'string',
    inclusive: true,
    exact: false,
    message: 'String must contain at least 2 character(s)',
    path: [ 'invoiceAddress', 'zip' ]
  },

SEE: #4634

Describe the solution you'd like

We need to access the specific fields with the path.

action.fieldErrors.cart.invoiceAddress.firstName 
// or
action.fieldErrors.get('cart.invoiceAddress.firstName)

Describe alternatives you've considered

We either have to overwrite the types so that the errors are not flattened for complex forms or we send the errors unflattened in a second field.

Additional context

No response

[tzdesign]

@ulic75 I created an issue so maybe someone can check this out.

[mhevery]

@wmertens do you have an opinion on this?

[tzdesign]

@mhevery @wmertens

What we are doing is skipping zod and doing this:

export const useMyCoolAction = routeAction$(async (rawData, event) => {
  try {
    const data = someSchema.parse(rawData);
  } catch (error) {
    if (error instanceof z.ZodError) {
      event.fail(400, flattenZodIssues(error.issues));
    }
  }
});

The flattenZodIssue:

export default function flattenZodIssues(issues: z.ZodIssue | z.ZodIssue[]) {
  issues = Array.isArray(issues) ? issues : [issues];

  return issues.reduce((acc, issue) => {
    acc[issue.path.join('.')] = issue.message;
    return acc;
  }, {} as Record<string, string>);
}

export type FlattenZodIssues = ReturnType<typeof flattenZodIssues>;