WIP: Array paths only in FormPath-related types.

Author: ciscoheat

src/lib/stringPath.ts

@@ -21,8 +21,8 @@ export function mergePath(path: (string | number | symbol)[]) {
 /**
  * Lists all paths in an object as string accessors.
  */
-export type FormPath<T extends object> =
-  | (string & StringPath<T>)
+export type FormPath<T extends object, OnlyArrays extends boolean = false> =
+  | (string & StringPath<T, OnlyArrays>)
   | FormPathLeaves<T>;
 
 /**
@@ -31,7 +31,10 @@ export type FormPath<T extends object> =
  */
 export type FormPathLeaves<T extends object> = string & StringPathLeaves<T>;
 
-export type StringPath<T extends object> = NonNullable<T> extends (infer U)[]
+export type StringPath<
+  T extends object,
+  OnlyArrays extends boolean = false
+> = NonNullable<T> extends (infer U)[]
   ? NonNullable<U> extends object
     ?
         | `[${number}]`
@@ -40,10 +43,20 @@ export type StringPath<T extends object> = NonNullable<T> extends (infer U)[]
             : '.'}${NonNullable<U> extends Date | Set<unknown>
             ? never
             : StringPath<NonNullable<U>> & string}`
-    : `[${number}]` | `[${number}].${U & string}`
+    : `[${number}]` /*| `[${number}].${U & string}`*/
   : NonNullable<T> extends object
   ?
-      | keyof T
+      | (OnlyArrays extends false
+          ? keyof T
+          : {
+              [K in keyof T]-?: K extends string
+                ? NonNullable<T[K]> extends (infer U2)[]
+                  ? U2 extends object
+                    ? never
+                    : K
+                  : never
+                : never;
+            }[keyof T])
       | {
           [K in keyof T]-?: K extends string
             ? NonNullable<T[K]> extends object

src/routes/tests/array-component/+page.server.ts

@@ -0,0 +1,22 @@
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+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!');
+  }
+};

src/routes/tests/array-component/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import AutoComplete from './AutoComplete.svelte';
+
+  import type { FormPath, FormPathLeaves } from '$lib';
+  import type { schema } from './schema';
+  import type { z } from 'zod';
+
+  export let data: PageData;
+
+  type FP = FormPath<z.infer<typeof schema>, true>;
+  type FPL = FormPathLeaves<z.infer<typeof schema>>;
+
+  type OK = Exclude<FP, FPL>;
+
+  const pageForm = superForm(data.form, {
+    //dataType: 'json',
+    //validators: schema
+  });
+  const { form, errors, message, enhance } = pageForm;
+
+  const options = [
+    { value: 'A', label: 'Aldebaran' },
+    { value: 'B', label: 'Betelgeuse' }
+  ];
+</script>
+
+<SuperDebug data={{ $form, $errors }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+  <AutoComplete form={pageForm} field="tags2" {options} />
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+
+    input {
+      background-color: #dedede;
+    }
+
+    .invalid {
+      color: crimson;
+    }
+  }
+</style>

src/routes/tests/array-component/AutoComplete.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" context="module">
+  import type { AnyZodObject } from 'zod';
+  type T = AnyZodObject;
+</script>
+
+<script lang="ts" generics="T extends AnyZodObject">
+  import type { z } from 'zod';
+  import type { ZodValidation, FormPath, FormPathLeaves } from '$lib';
+  import type { Writable } from 'svelte/store';
+  import { fieldProxy, type SuperForm } from '$lib/client';
+
+  export let form: SuperForm<ZodValidation<T>, unknown>;
+  export let field: Exclude<
+    FormPath<z.infer<T>>,
+    FormPathLeaves<z.infer<T>>
+  >;
+  export let options: { value: string; label: string }[];
+  export let label = '';
+
+  const value = fieldProxy(form.form, field) as Writable<unknown[]>;
+  const errors = fieldProxy(
+    form.errors,
+    `${field}._errors` as FormPath<z.infer<T>>
+  );
+</script>
+
+{#if label}<label for={field}>{label}</label>{/if}
+
+<!-- Note that the selected attribute is required for this to work without JS -->
+<select multiple name={field} bind:value={$value}>
+  {#each options as option}
+    <option value={option.value} selected={$value.includes(option.value)}
+      >{option.label}</option
+    >
+  {/each}
+</select>
+
+{#if $errors}<p class="invalid">{$errors}</p>{/if}
+
+<style>
+  .invalid {
+    color: crimson;
+  }
+</style>

src/routes/tests/array-component/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  tags: z.string().min(1).array().min(1),
+  tags2: z
+    .object({
+      id: z.number().int(),
+      name: z.string().min(1)
+    })
+    .array()
+    .min(1)
+});