WIP: Schema transform works but should only update on submit.

Author: ciscoheat

src/lib/client/clientValidation.ts

@@ -282,6 +282,12 @@ export async function validateObjectErrors<T extends AnyZodObject, M>(
   }
 }
 
+type ValidationResult<T extends ZodValidation<AnyZodObject>> = {
+  validated: boolean | 'all';
+  errors: string[] | undefined;
+  data: SuperForm<T, unknown>['form'] | undefined;
+};
+
 /**
  * Validate a specific form field.
  * @DCI-context
@@ -296,7 +302,7 @@ export async function validateField<
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
   options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
-): Promise<string[] | undefined> {
+): Promise<ValidationResult<T>> {
   function Errors_clear() {
     clearErrors(Errors, { undefinePath: path, clearFormLevelErrors: true });
   }
@@ -352,16 +358,18 @@ export async function validateField<
       // the tainted+error check in oninput.
       Errors_clear();
     } else {
-      return Errors_update(errors.errors);
+      errors.errors = Errors_update(errors.errors);
+      return errors;
     }
   } else if (
     errors.validated === false &&
     formOptions.defaultValidator == 'clear'
   ) {
-    return Errors_update(undefined);
+    errors.errors = Errors_update(errors.errors);
+    return errors;
   }
 
-  return errors.errors;
+  return errors;
 }
 
 // @DCI-context
@@ -372,7 +380,7 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
   options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
-): Promise<{ validated: boolean | 'all'; errors: string[] | undefined }> {
+): Promise<ValidationResult<T>> {
   if (options.update === undefined) options.update = true;
   if (options.taint === undefined) options.taint = false;
   if (typeof options.errors == 'string') options.errors = [options.errors];
@@ -386,7 +394,7 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
   };
 
   async function defaultValidate() {
-    return { validated: false, errors: undefined } as const;
+    return { validated: false, errors: undefined, data: undefined } as const;
   }
 
   ///// Roles ///////////////////////////////////////////////////////
@@ -516,11 +524,16 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
 
       return {
         validated: true,
-        errors: options.errors ?? current?.value
+        errors: options.errors ?? current?.value,
+        data: undefined
       };
     } else {
       Errors_clearAll();
-      return { validated: true, errors: undefined };
+      return {
+        validated: true,
+        errors: undefined,
+        data: result.data // For a successful Zod result, return the possibly transformed data.
+      };
     }
   } else {
     // SuperForms validator
@@ -539,7 +552,8 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
 
       return {
         validated: true,
-        errors: result ? options.errors ?? result : result
+        errors: result ? options.errors ?? result : result,
+        data: undefined // No transformation for Superforms validators
       };
     }
   }

src/lib/client/formEnhance.ts

@@ -153,7 +153,7 @@ export function formEnhance<T extends AnyZodObject, M>(
         else validityEl = null;
     }
 
-    const newErrors = await validateField(
+    const result = await validateField(
       change,
       options,
       data,
@@ -162,7 +162,11 @@ export function formEnhance<T extends AnyZodObject, M>(
     );
 
     if (validityEl) {
-      setCustomValidity(validityEl as any, newErrors);
+      setCustomValidity(validityEl as HTMLInputElement, result.errors);
+    }
+
+    if (result.data) {
+      data.set(result.data);
     }
   }
 
@@ -226,6 +230,7 @@ export function formEnhance<T extends AnyZodObject, M>(
       );
       if (!validityEl) continue;
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const hadErrors = traversePath(get(errors), change as any);
       if (hadErrors && hadErrors.key in hadErrors.parent) {
         // Problem - store hasn't updated here with new value yet.

src/lib/client/index.ts

@@ -191,9 +191,9 @@ const defaultFormOptions = {
   validateMethod: 'auto'
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type SuperFormSnapshot<
   T extends AnyZodObject,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   M = Superforms.Message extends never ? any : Superforms.Message
 > = SuperValidated<T, M> & { tainted: TaintedFields<T> | undefined };
 
@@ -203,9 +203,9 @@ export type TaintOption<T extends AnyZodObject = AnyZodObject> =
   | 'untaint-all'
   | { fields: FormPathLeaves<z.infer<T>> | FormPathLeaves<z.infer<T>>[] };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type SuperForm<
   T extends ZodValidation<AnyZodObject>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   M = Superforms.Message extends never ? any : Superforms.Message
 > = {
   form: {
@@ -909,7 +909,9 @@ export function superForm<
     })
   ) as unknown as FormFields<UnwrappedT>;
 
-  function validate<Path extends FormPathLeaves<z.infer<UnwrapEffects<T>>>>(
+  async function validate<
+    Path extends FormPathLeaves<z.infer<UnwrapEffects<T>>>
+  >(
     path?: Path,
     opts?: ValidateOptions<
       FormPathType<z.infer<UnwrapEffects<T>>, Path>,
@@ -925,14 +927,15 @@ export function superForm<
         false
       );
     }
-    return validateField<UnwrapEffects<T>, M>(
+    const result = await validateField<UnwrapEffects<T>, M>(
       splitPath(path) as string[],
       options,
       Form,
       Errors,
       Tainted,
       opts
     );
+    return result.errors;
   }
 
   return {

src/routes/tests/spa-schema-transform/+page.server.ts

@@ -0,0 +1,28 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema';
+
+import type { Actions, PageServerLoad } from './$types';
+
+///// Load function /////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions /////
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    form.data.email = '[email protected]';
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/spa-schema-transform/+page.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+
+  export let data;
+
+  let SPA = $page.url.searchParams.has('SPA') || undefined;
+
+  const { form, errors, message, enhance, validate } = superForm(data.form, {
+    SPA,
+    taintedMessage: null,
+    validators: schema,
+    onUpdate({ form }) {
+      if (SPA && form.valid) form.message = 'SPA form posted OK';
+    }
+  });
+
+  let customCheck = '';
+
+  async function validateCheck() {
+    const result = (await validate()).data;
+    customCheck = `${result.name} - ${result.email} - ${await validate(
+      'email'
+    )}`;
+  }
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>Superforms client-side validation</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<p>{customCheck}</p>
+
+<form method="POST" use:enhance>
+  <label>
+    Name<br />
+    <input
+      name="name"
+      aria-invalid={$errors.name ? 'true' : undefined}
+      bind:value={$form.name}
+    />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+
+  <label>
+    Email<br />
+    <input
+      name="email"
+      aria-invalid={$errors.email ? 'true' : undefined}
+      bind:value={$form.email}
+    />
+    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+  </label>
+
+  <button>Submit</button>
+  <button type="button" on:click={validateCheck}>Manual validate</button>
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.rocks/api">API Reference</a>
+</p>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  .status {
+    color: white;
+    padding: 4px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/routes/tests/spa-schema-transform/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1),
+  email: z
+    .string()
+    .email()
+    .transform((email) => {
+      console.log('Transforming email:', email);
+      return '[email protected]';
+    })
+});