WIP: Support for sets.

FormPath needs to be updated.

Author: ciscoheat

src/lib/client/clientValidation.ts

@@ -7,7 +7,8 @@ import {
   type ZodValidation,
   type FormPathLeaves,
   SuperFormError,
-  type TaintedFields
+  type TaintedFields,
+  type UnwrapEffects
 } from '../index.js';
 import type { z, AnyZodObject, ZodError, ZodTypeAny } from 'zod';
 import {
@@ -23,10 +24,13 @@ import type { FormPathType } from '../stringPath.js';
 import { clone } from '../utils.js';
 import { get } from 'svelte/store';
 
-export type ValidateOptions<V> = Partial<{
+export type ValidateOptions<
+  V,
+  T extends AnyZodObject = AnyZodObject
+> = Partial<{
   value: V;
   update: boolean | 'errors' | 'value';
-  taint: TaintOption;
+  taint: TaintOption<T>;
   errors: string | string[];
 }>;
 
@@ -43,14 +47,16 @@ export function validateForm<T extends AnyZodObject>(): Promise<
 export function validateForm<T extends AnyZodObject>(
   path: FormPathLeaves<z.infer<T>>,
   opts?: ValidateOptions<
-    FormPathType<z.infer<T>, FormPathLeaves<z.infer<T>>>
+    FormPathType<z.infer<T>, FormPathLeaves<z.infer<T>>>,
+    T
   >
 ): Promise<string[] | undefined>;
 
 export function validateForm<T extends AnyZodObject>(
   path?: FormPathLeaves<z.infer<T>>,
   opts?: ValidateOptions<
-    FormPathType<z.infer<T>, FormPathLeaves<z.infer<T>>>
+    FormPathType<z.infer<T>, FormPathLeaves<z.infer<T>>>,
+    T
   >
 ) {
   // See the validate function inside superForm for implementation.
@@ -254,13 +260,16 @@ export async function validateObjectErrors<T extends AnyZodObject, M>(
  * Validate a specific form field.
  * @DCI-context
  */
-export async function validateField<T extends AnyZodObject, M>(
+export async function validateField<
+  T extends ZodValidation<AnyZodObject>,
+  M
+>(
   path: string[],
   formOptions: FormOptions<T, M>,
   data: SuperForm<T, M>['form'],
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
-  options: ValidateOptions<unknown> = {}
+  options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
 ): Promise<string[] | undefined> {
   function Errors_clear() {
     clearErrors(Errors, { undefinePath: path, clearFormLevelErrors: true });
@@ -330,13 +339,13 @@ export async function validateField<T extends AnyZodObject, M>(
 }
 
 // @DCI-context
-async function _validateField<T extends AnyZodObject, M>(
+async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
   path: string[],
   validators: FormOptions<T, M>['validators'],
   data: SuperForm<T, M>['form'],
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
-  options: ValidateOptions<unknown> = {}
+  options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
 ): Promise<{ validated: boolean | 'all'; errors: string[] | undefined }> {
   if (options.update === undefined) options.update = true;
   if (options.taint === undefined) options.taint = false;

src/lib/client/index.ts

@@ -188,7 +188,11 @@ type SuperFormSnapshot<T extends AnyZodObject, M = any> = SuperValidated<
   M
 > & { tainted: TaintedFields<T> | undefined };
 
-export type TaintOption = boolean | 'untaint' | 'untaint-all';
+export type TaintOption<T extends AnyZodObject = AnyZodObject> =
+  | boolean
+  | 'untaint'
+  | '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>, M = any> = {
@@ -197,12 +201,12 @@ export type SuperForm<T extends ZodValidation<AnyZodObject>, M = any> = {
     set(
       this: void,
       value: z.infer<UnwrapEffects<T>>,
-      options?: { taint?: TaintOption }
+      options?: { taint?: TaintOption<UnwrapEffects<T>> }
     ): void;
     update(
       this: void,
       updater: Updater<z.infer<UnwrapEffects<T>>>,
-      options?: { taint?: TaintOption }
+      options?: { taint?: TaintOption<UnwrapEffects<T>> }
     ): void;
   };
   formId: Writable<string | undefined>;
@@ -417,7 +421,7 @@ export function superForm<
       subscribe: _formData.subscribe,
       set: (
         value: Parameters<typeof _formData.set>[0],
-        options: { taint?: TaintOption } = {}
+        options: { taint?: TaintOption<UnwrappedT> } = {}
       ) => {
         Tainted_update(
           value,
@@ -429,7 +433,7 @@ export function superForm<
       },
       update: (
         updater: Parameters<typeof _formData.update>[0],
-        options: { taint?: TaintOption } = {}
+        options: { taint?: TaintOption<UnwrappedT> } = {}
       ) => {
         return _formData.update((value) => {
           const output = updater(value);
@@ -593,7 +597,10 @@ export function superForm<
     return obj === true;
   }
 
-  async function Tainted__validate(path: string[], taint: TaintOption) {
+  async function Tainted__validate(
+    path: string[],
+    taint: TaintOption<UnwrappedT>
+  ) {
     if (
       options.validationMethod == 'onblur' ||
       options.validationMethod == 'submit-only'
@@ -641,7 +648,7 @@ export function superForm<
   async function Tainted_update(
     newObj: unknown,
     compareAgainst: unknown,
-    taintOptions: TaintOption
+    taintOptions: TaintOption<UnwrappedT>
   ) {
     if (taintOptions === false) {
       return;
@@ -650,7 +657,18 @@ export function superForm<
       return;
     }
 
-    const paths = comparePaths(newObj, compareAgainst);
+    let paths = comparePaths(newObj, compareAgainst);
+
+    if (typeof taintOptions === 'object') {
+      if (typeof taintOptions.fields === 'string')
+        taintOptions.fields = [taintOptions.fields];
+
+      paths = taintOptions.fields.map((path) =>
+        splitPath(path)
+      ) as string[][];
+
+      taintOptions = true;
+    }
 
     if (taintOptions === true) {
       LastChanges.set(paths);
@@ -827,7 +845,10 @@ export function superForm<
 
   function validate<Path extends FormPathLeaves<z.infer<UnwrapEffects<T>>>>(
     path?: Path,
-    opts?: ValidateOptions<FormPathType<z.infer<UnwrapEffects<T>>, Path>>
+    opts?: ValidateOptions<
+      FormPathType<z.infer<UnwrapEffects<T>>, Path>,
+      UnwrapEffects<T>
+    >
   ) {
     if (path === undefined) {
       return clientValidation<UnwrapEffects<T>, M>(
@@ -881,7 +902,7 @@ export function superForm<
       return rebind(snapshot, snapshot.tainted ?? true);
     },
 
-    validate: validate as typeof validateForm<UnwrapEffects<T>>,
+    validate: validate as typeof validateForm<UnwrappedT>,
 
     enhance: (
       el: HTMLFormElement,

src/lib/schemaEntity.ts

@@ -242,8 +242,10 @@ export function valueOrDefault(
     // Cannot add default for ZodDate due to https://github.com/Rich-Harris/devalue/issues/51
     //if (zodType._def.typeName == "ZodDate") return new Date(NaN);
     if (zodType._def.typeName == 'ZodArray') return [];
-    if (zodType._def.typeName == 'ZodObject')
+    if (zodType._def.typeName == 'ZodObject') {
       return defaultValues(zodType as AnyZodObject);
+    }
+    if (zodType._def.typeName == 'ZodSet') return new Set();
     if (zodType._def.typeName == 'ZodRecord') return {};
     if (zodType._def.typeName == 'ZodBigInt') return BigInt(0);
     if (zodType._def.typeName == 'ZodSymbol') return Symbol();

src/lib/traversal.ts

@@ -197,20 +197,31 @@ export function comparePaths(newObj: unknown, oldObj: unknown) {
   const diffPaths = new Map<string, string[]>();
 
   function checkPath(data: PathData, compareTo: object) {
-    if (data.isLeaf) {
-      const exists = traversePath(compareTo, data.path as FieldPath<object>);
+    const exists = traversePath(compareTo, data.path as FieldPath<object>);
+
+    function addDiff() {
+      diffPaths.set(data.path.join(' '), data.path);
+    }
 
+    if (data.isLeaf) {
       if (!exists) {
-        diffPaths.set(data.path.join(' '), data.path);
+        addDiff();
       } else if (
         data.value instanceof Date &&
         exists.value instanceof Date &&
         data.value.getTime() != exists.value.getTime()
       ) {
-        diffPaths.set(data.path.join(' '), data.path);
+        addDiff();
       } else if (data.value !== exists.value) {
-        diffPaths.set(data.path.join(' '), data.path);
+        addDiff();
       }
+    } else if (
+      exists &&
+      data.value instanceof Set &&
+      exists.value instanceof Set &&
+      data.value !== exists.value
+    ) {
+      addDiff();
     }
   }
 

src/routes/tests/_empty/+page.server.ts

@@ -11,8 +11,9 @@ export const load = (async () => {
 export const actions = {
   default: async ({ request }) => {
     const formData = await request.formData();
-    const form = await superValidate(formData, schema);
+    console.log(formData);
 
+    const form = await superValidate(formData, schema);
     console.log('POST', form);
 
     if (!form.valid) return fail(400, { form });

src/routes/tests/issue-194/+page.server.ts

@@ -0,0 +1,25 @@
+import type { Actions, PageServerLoad } from './$types';
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = (async () => {
+  const form = await superValidate(schema);
+  console.log('🚀 ~ file: +page.server.ts:8 ~ load ~ form:', form);
+
+  return { form };
+}) satisfies PageServerLoad;
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    console.log(formData);
+
+    const form = await superValidate(formData, schema);
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Posted OK!');
+  }
+} satisfies Actions;

src/routes/tests/issue-194/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  //import { schema } from './schema';
+
+  export let data: PageData;
+
+  const { form, errors, tainted, message, enhance } = superForm(data.form, {
+    dataType: 'json'
+    //validators: schema
+  });
+</script>
+
+<SuperDebug data={{ things: Array.from($form.things), $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+  <div>
+    <button
+      type="button"
+      on:click={() =>
+        form.update(
+          ($form) => {
+            $form.things.add(1);
+            return $form;
+          },
+          { taint: { fields: 'things' } }
+        )}>Add 1</button
+    >
+    <button
+      type="button"
+      on:click={() => {
+        $form.things = new Set([2, 3, 4]);
+      }}>Set 2,3,4</button
+    >
+    <button>Submit</button>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+
+    input {
+      background-color: #dedede;
+    }
+  }
+</style>

src/routes/tests/issue-194/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  things: z.set(z.number()).default(new Set([2, 3]))
+});