Type error with formFieldProxy when using a strongly typed status message.

Fixes #260.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased] - 2023-09-11
+
+### Fixed
+
+- Type error with `formFieldProxy` when using a strongly typed status message. ([#260](https://github.com/ciscoheat/sveltekit-superforms/issues/260))
+
 ## [1.6.1] - 2023-08-22
 
 ### Fixed

src/lib/client/proxies.ts

@@ -237,7 +237,8 @@ export function formFieldProxy<
   T extends ZodValidation<AnyZodObject>,
   Path extends FormPathLeaves<z.infer<UnwrapEffects<T>>>
 >(
-  form: SuperForm<T, unknown>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: SuperForm<T, any>,
   path: Path
 ): {
   path: Path;

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

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

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { formFieldProxy, superForm, type SuperForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import type { schema } from './utils';
+
+  export let data;
+
+  const formData = superForm(data.form);
+  const { message, enhance } = formData;
+
+  const { errors, value } = formFieldProxy(formData, 'name');
+  // This type cast should not be necessary, it should infer the type SuperForm<typeof schema, Message>
+  //const x = formFieldProxy(formData as SuperForm<typeof schema, unknown>, 'name');
+</script>
+
+<SuperDebug data={formData.form} />
+
+<h3>Superforms testing ground</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message.type}: {$message.text}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Name<br />
+    <input
+      name="name"
+      aria-invalid={$errors ? 'true' : undefined}
+      bind:value={$value}
+    />
+    {#if $errors}<span class="invalid">{$errors}</span>{/if}
+  </label>
+
+  <button>Submit</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/issue-260/utils.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1)
+});
+
+export type Message = {
+  type: 'success' | 'error';
+  text: string;
+};