Merge pull request #52 from esafak/refine

.changeset/hip-eggs-wave.md

@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Add FormValidation to Field.config.schema's type

.gitignore

@@ -4,6 +4,7 @@ node_modules
 /dist
 /.svelte-kit
 /package
+.cache
 .env
 .env.*
 !.env.example

package.json

@@ -47,7 +47,7 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sveltekit-superforms": "^1.6.1",
+		"sveltekit-superforms": "^1.7.1",
 		"zod": "^3.22.2"
 	},
 	"devDependencies": {

src/lib/components/form-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getFormField } from "@/lib/index.js";
-	import type { DescriptionProps } from "../types.js";
+	import type { DescriptionProps } from "$lib";
 
 	type $$Props = DescriptionProps;
 	export let tag = "p";

src/lib/components/form-field.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { createFormField, type Form, type FormFieldName } from "@/lib/internal/index.js";
+	import { createFormField } from "@/lib/internal/index.js";
+	import type { Form, FormFieldName, FormValidation} from "@/lib/internal/index.js";
 	import type { AnyZodObject } from "zod";
 
-	type T = $$Generic<AnyZodObject>;
+	type T = $$Generic<AnyZodObject | FormValidation>;
 	type Path = $$Generic<FormFieldName<T>>;
 
 	export let config: Form<T>;

src/lib/components/form.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
 	import type { ZodValidation } from "sveltekit-superforms";
 	import type { AnyZodObject } from "zod";
+	import type { Form } from "@/lib/internal/index.js";
 
 	type Validation = ZodValidation<AnyZodObject>;
 </script>
@@ -64,7 +65,7 @@
 		capture
 	} = superFrm;
 
-	const config = {
+	const config: Form<T> = {
 		form: superFrm,
 		schema
 	};

src/lib/internal/form-field/create-field.ts

@@ -32,7 +32,7 @@ export function createFormField<
 
 	const setValue = (v: unknown) => {
 		//@ts-expect-error - do we leave this as is, or do we want to force the type to match the schema?
-		// Pros: we don't have to deal with type narrowing inside the `setValue` function and we're runtime validating the type with zod anyways.
+		// Pros: we don't have to deal with type narrowing inside the `setValue` function, and we're runtime validating the type with zod anyways.
 		// Cons: we're not forcing the type to match the schema so more issues could occur.
 		value.set(v);
 	};
@@ -65,7 +65,7 @@ export function createFormField<
 		return {
 			"aria-invalid": errors ? true : undefined,
 			"aria-describedby": describedBy,
-			"aria-required": constraints?.required ? true : false,
+			"aria-required": !!constraints?.required,
 			"data-invalid": errors ? true : undefined,
 			"data-valid": errors ? undefined : true,
 			name,

src/lib/internal/types.ts

@@ -21,7 +21,7 @@ export type ExpandDeep<T> = T extends object
 
 export type Form<T extends FormValidation> = {
 	schema: T;
-	form: SuperForm<T, unknown>;
+	form: SuperForm<T>;
 };
 
 export type Arrayable<T> = T | T[];

tests/RefinedValidation.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { Root, Field } from "$lib/components";
+    import type { SuperValidated } from "sveltekit-superforms";
+    import { z } from "zod";
+
+    export const schema = z.object({
+        name: z.string().min(1),
+        secondName: z.string().min(1)
+    })
+    .refine(({ name, secondName }) => name === secondName, {
+        message: 'Names must be the same',
+        path: ['secondName']
+    })
+    ;
+    export let form: SuperValidated<typeof schema>;
+</script>
+
+<Root method="POST" {form} {schema} let:config>
+    <Field {config} name="name" />
+    <Field {config} name="secondName" />
+</Root>