Finalizing effect adapter

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,10 @@ 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]
+
+- New validation library: [Effect](https://effect.website/)!
+
 ## [2.19.1]
 
 ### Added

README.md

@@ -20,7 +20,7 @@
 
 # Feature list
 
-- Server- and client-side validation with your favorite validation libraries, and more to come: 💥 [Arktype](https://arktype.io/) 💥 [class-validator](https://github.com/typestack/class-validator) 💥 [Joi](https://joi.dev/) 💥 [Superstruct](https://docs.superstructjs.org/) 💥 [TypeBox](https://github.com/sinclairzx81/typebox) 💥 [Valibot](https://valibot.dev/) 💥 [VineJS](https://vinejs.dev/) 💥 [Yup](https://github.com/jquense/yup) 💥 [Zod](https://zod.dev/) 💥 or use [JSON Schema](https://json-schema.org/) directly.
+- Server- and client-side validation with your favorite validation libraries, and more to come: 💥 [Arktype](https://arktype.io/) 💥 [class-validator](https://github.com/typestack/class-validator) 💥 [Effect](https://effect.website/) 💥 [Joi](https://joi.dev/) 💥 [Superstruct](https://docs.superstructjs.org/) 💥 [TypeBox](https://github.com/sinclairzx81/typebox) 💥 [Valibot](https://valibot.dev/) 💥 [VineJS](https://vinejs.dev/) 💥 [Yup](https://github.com/jquense/yup) 💥 [Zod](https://zod.dev/) 💥 or use [JSON Schema](https://json-schema.org/) directly.
 - Seamless merging of `PageData` and `ActionData` - Forget about how to combine them, just focus on your form data, always strongly typed.
 - [Auto-centering and focusing](https://superforms.rocks/concepts/error-handling#usage-client) on invalid form fields.
 - [Tainted form detection](https://superforms.rocks/concepts/tainted), prevents the user from losing data if navigating away from an unsaved form. Or use [snapshots](https://superforms.rocks/concepts/snapshots) to save the form state.

package.json

@@ -102,7 +102,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"@effect/schema": "^0.73.4",
+		"@effect/schema": "^0.75.3",
 		"@exodus/schemasafe": "^1.3.0",
 		"@sinclair/typebox": ">=0.32.30 <1",
 		"@sveltejs/kit": "1.x || 2.x",
@@ -160,15 +160,15 @@
 		}
 	},
 	"optionalDependencies": {
-		"@effect/schema": "^0.73.4",
+		"@effect/schema": "^0.75.3",
 		"@exodus/schemasafe": "^1.3.0",
 		"@gcornut/valibot-json-schema": "^0.31.0",
 		"@sinclair/typebox": "^0.32.35",
 		"@typeschema/class-validator": "^0.2.0",
 		"@vinejs/vine": "^1.8.0",
 		"arktype": "2.0.0-rc.8",
 		"class-validator": "^0.14.1",
-		"effect": "^3.8.2",
+		"effect": "^3.9.1",
 		"joi": "^17.13.3",
 		"json-schema-to-ts": "^3.1.1",
 		"superstruct": "^2.0.2",

pnpm-lock.yaml

@@ -47,7 +47,6 @@ function _effect<T extends AnySchema>(
 	schema: T,
 	options?: AdapterOptions<Infer<T>> & { parseOptions?: ParseOptions }
 ): ValidationAdapter<Infer<T>, InferIn<T>> {
-	// @ts-expect-error idk why this happens, it seems to happen in other adapters too
 	return createAdapter({
 		superFormValidationLibrary: 'effect',
 		validate: async (data) => validate(schema, data, options),

src/lib/adapters/effect.ts

@@ -2,6 +2,7 @@ export type { ValidationAdapter, ClientValidationAdapter, Infer, InferIn } from
 
 export { arktype, arktypeClient } from './arktype.js';
 export { classvalidator, classvalidatorClient } from './classvalidator.js';
+export { effect, effectClient } from './effect.js';
 export { joi, joiClient } from './joi.js';
 export { superformClient } from './superform.js';
 export { typebox, typeboxClient } from './typebox.js';

src/lib/adapters/index.ts

@@ -68,7 +68,9 @@
 		'issue-470',
 		'issue-484',
 		'component-regen',
-		'issue-485'
+		'issue-485',
+		'arktype',
+		'effect'
 	].sort();
 </script>
 

src/routes/(v2)/v2/Navigation.svelte

@@ -0,0 +1,23 @@
+import { effect } from '$lib/adapters/effect.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(effect(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, effect(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/effect/+page.server.ts

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false
+		//dataType: 'json',
+		//validators: zod(schema)
+	});
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/effect/+page.svelte

@@ -0,0 +1,12 @@
+import { Schema } from '@effect/schema';
+
+const emailRegex = /^[^@]+@[^@]+\.[^@]+$/;
+
+export const schema = Schema.Struct({
+	name: Schema.String.annotations({ default: 'Hello world!' }),
+	email: Schema.String.pipe(
+		Schema.filter((s) => emailRegex.test(s) || 'must be a valid email', {
+			jsonSchema: {}
+		})
+	)
+});