@thomasfosterau/effect-forms-svelte 0.2.0 → 0.3.1

package/dist/FormStore.svelte.d.ts

@@ -108,7 +108,9 @@ export interface FormOptions<S extends Schema.Top, A, Message, R = never> {
   /**
    * The builder itself, set automatically when {@link createForm} is given a
    * {@link FormBuilder}. Its `refineEffect` refinements run client-side as a
-   * whole-form async validator whenever {@link FormStore.validate} runs.
+   * whole-form async validator whenever {@link FormStore.validate} runs, on the
+   * form data decoded through the builder's schema (as on the server); while
+   * the data doesn't decode they don't run, and the field errors say why.
    */
   readonly builder?: FormBuilder.FormBuilder<Field.FieldsRecord, R>;
   /** The action URL the form posts to (defaults to the current page's action). */
@@ -346,7 +348,12 @@ export declare class FormStore<S extends Schema.Top, A = S["Type"], Message = un
   enhance: (node: HTMLFormElement) => {
     destroy: () => void;
   };
-  /** Build a {@link FormData} body from the current data (SPA / manual submit). */
+  /**
+   * Build a {@link FormData} body from the current data (SPA / manual submit).
+   *
+   * Each value is encoded as `objectToFormData` encodes it: a `File` or
+   * `Blob` is appended as a file and a `Date` as its UTC `YYYY-MM-DD`.
+   */
   toFormData(): FormData;
 }
 /** A schema plus its blank-form defaults — what {@link createForm} wraps `Form.make` over. */
@@ -377,4 +384,5 @@ export declare function createForm<TFields extends Field.FieldsRecord, R, Messag
 export declare function createForm<S extends Schema.Top, Message = unknown, R = never>(seed: FormSeed<S>, options?: FormOptions<S, S["Type"], Message, R>): FormStore<S, S["Type"], Message, R>;
 export declare function createForm<S extends Schema.Top, A = S["Type"], Message = unknown, R = never>(initial: FormState<A, Message>, options: FormOptions<S, A, Message, R>): FormStore<S, A, Message, R>;
 //#endregion
+export {};
 //# sourceMappingURL=FormStore.svelte.d.ts.map

package/dist/FormStore.svelte.js

@@ -3,11 +3,16 @@ import { computeDataApplication, objectToFormData, parseActionResult, resultToUp
 import { computeTainted, isAnyTainted, isTaintedAt, taintedLeafPaths } from "./Tainted.js";
 import { dispatchChange } from "./Listeners.js";
 import { Constraints, Errors, Field, Form, FormBuilder, Mode, Path, Validate } from "@thomasfosterau/effect-forms";
+import * as Arr from "effect/Array";
+import * as Predicate from "effect/Predicate";
+import * as R from "effect/Record";
+import * as Option from "effect/Option";
 import * as Duration from "effect/Duration";
 import * as Effect from "effect/Effect";
 import * as Fiber from "effect/Fiber";
 import * as Layer from "effect/Layer";
 import * as ManagedRuntime from "effect/ManagedRuntime";
+import * as SchemaParser from "effect/SchemaParser";
 import { createAttachmentKey } from "svelte/attachments";
 //#region src/FormStore.svelte.ts
 /**
@@ -56,6 +61,14 @@ import { createAttachmentKey } from "svelte/attachments";
 const { clearSourceAt, emptySourced, hasErrors, mergeSourced, noErrors, replaceAt, setSourceAt } = Errors;
 const { getAt, setAt } = Path;
 const makeForm = Form.make;
+/** View a runtime {@link FormErrors} tree through the data-shaped {@link TypedFormErrors} lens. */
+const typedErrors = (errors) => {
+	return errors;
+};
+/** Forget the data-shaped typing of a {@link TypedFormErrors} tree, back to the runtime {@link FormErrors}. */
+const untypedErrors = (errors) => {
+	return errors;
+};
 /**
 * A typed, reactive handle to one field, returned by {@link FormStore.field}.
 * Bundles everything a single input needs — `bind:value={field.value}`,
@@ -115,17 +128,18 @@ const defaultSubmit = async (body, action) => {
 		body,
 		headers: { accept: "application/json" }
 	});
-	let parsed;
-	try {
-		parsed = await response.json();
-	} catch {
-		return {
-			_tag: "Error",
-			status: response.status,
-			message: response.statusText || "Request failed"
-		};
-	}
-	return parseActionResult(parsed, response.status);
+	return response.json().then((parsed) => parseActionResult(parsed, response.status), () => ({
+		_tag: "Error",
+		status: response.status,
+		message: response.statusText || "Request failed"
+	}));
+};
+/**
+* Erase a store's type parameters for {@link FieldHandle}, which only calls
+* its path-addressed methods.
+*/
+const eraseStore = (store) => {
+	return store;
 };
 /** Whether `index` is a valid position in an array of `length`. */
 const inRange = (index, length) => index >= 0 && index < length;
@@ -185,23 +199,29 @@ var FormStore = class {
 	#autoSubmitNode;
 	#validateTimer;
 	/** Per-field-listener debounce timers, keyed by `"change:<path>"` / `"blur:<path>"`. */
-	#listenerTimers = /* @__PURE__ */ new Map();
+	#listenerTimers = {};
 	/** Per-field validators, keyed by {@link Path.toString}; seeded from `options.validators`. */
 	#fieldValidators;
 	/** In-flight async-validator fibers, keyed by `"<path>:<trigger>"` (fields) or `""` (whole-form `refineEffect`). */
 	#fibers = {};
 	/** The error paths the last `refineEffect` run set, so the next run can clear exactly those before merging fresh ones. */
 	#lastRefinementPaths = [];
+	/**
+	* The decoder that turns the form data into the builder's decoded values
+	* before its `refineEffect` refinements see them — `None` unless the store
+	* was seeded from a {@link FormBuilder}.
+	*/
+	#decodeForRefinements;
 	/** The data snapshot the field-tracking watcher last diffed against. */
 	#previousData;
 	/** The current nested error tree (server errors merged with client errors), typed to the form data's shape. */
-	errors = $derived.by(() => mergeSourced(this.#sourced));
+	errors = $derived.by(() => typedErrors(mergeSourced(this.#sourced)));
 	/** Client-side-sourced errors only (schema, per-field validators, `refineEffect`). */
-	clientErrors = $derived.by(() => this.#sourced.client);
+	clientErrors = $derived.by(() => typedErrors(this.#sourced.client));
 	/** Server-sourced errors only (the last submission's response). */
-	serverErrors = $derived.by(() => this.#sourced.server);
+	serverErrors = $derived.by(() => typedErrors(this.#sourced.server));
 	/** Whether any async field validator or `refineEffect` run is currently in flight. */
-	isValidating = $derived(Object.values(this.#validating).some(Boolean));
+	isValidating = $derived(Arr.some(R.values(this.#validating), Boolean));
 	/** Whether the form has ever been submitted (attempted). */
 	isSubmitted = $derived(this.submissionAttempts > 0);
 	/** Whether the most recently *completed* submission succeeded. `false` before any submit completes. */
@@ -229,6 +249,7 @@ var FormStore = class {
 		this.#mode = Mode.parse(options.mode);
 		this.#runtime = ManagedRuntime.make(options.layer ?? Layer.empty);
 		this.#fieldValidators = { ...options.validators };
+		this.#decodeForRefinements = Option.map(Option.fromUndefinedOr(options.builder), (builder) => SchemaParser.decodeUnknownEffect(FormBuilder.buildSchema(builder), { errors: "all" }));
 		this.data = structuredClone(initial.data);
 		this.#sourced = {
 			client: noErrors,
@@ -246,9 +267,13 @@ var FormStore = class {
 	* progressive-enhancement submit handler via a Svelte attachment.
 	*/
 	get props() {
-		return {
+		const action = this.#options.action;
+		return action === void 0 ? {
+			method: "post",
+			[this.#attachmentKey]: this.#enhanceAttachment
+		} : {
 			method: "post",
-			...this.#options.action !== void 0 ? { action: this.#options.action } : {},
+			action,
 			[this.#attachmentKey]: this.#enhanceAttachment
 		};
 	}
@@ -258,7 +283,7 @@ var FormStore = class {
 	}
 	/** The messages currently attached to `path` (for dynamic / nested paths). */
 	errorsAt(path) {
-		return Errors.getError(this.errors, path) ?? [];
+		return Errors.getError(untypedErrors(this.errors), path) ?? [];
 	}
 	/** Whether the async validator(s) at `path` are currently running. */
 	isValidatingAt(path) {
@@ -350,7 +375,7 @@ var FormStore = class {
 	* Path.FieldPath}); a typo'd segment or wrong-shaped path is a compile error.
 	*/
 	field(path) {
-		return new FieldHandle(this, Path.fromString(path));
+		return new FieldHandle(eraseStore(this), Path.fromString(path));
 	}
 	/**
 	* Handle a field losing focus: mark it touched, run its `onBlur` /
@@ -383,11 +408,11 @@ var FormStore = class {
 			run();
 			return;
 		}
-		clearTimeout(this.#listenerTimers.get(key));
-		this.#listenerTimers.set(key, setTimeout(() => {
-			this.#listenerTimers.delete(key);
+		clearTimeout(this.#listenerTimers[key]);
+		this.#listenerTimers[key] = setTimeout(() => {
+			delete this.#listenerTimers[key];
 			run();
-		}, Duration.toMillis(debounce)));
+		}, Duration.toMillis(debounce));
 	}
 	/**
 	* The listeners table to dispatch change events against, with each field's
@@ -401,11 +426,10 @@ var FormStore = class {
 		const listeners = this.#options.listeners;
 		if (!listeners || listeners.onChange === void 0 && !listeners.fields) return void 0;
 		if (!listeners.fields) return listeners;
-		const fields = {};
-		for (const [key, field] of Object.entries(listeners.fields)) fields[key] = field.onChange ? {
+		const fields = R.fromEntries(Arr.map(R.toEntries(listeners.fields), ([key, field]) => [key, field.onChange ? {
 			...field,
 			onChange: (input) => this.#scheduleListener(`change:${key}`, field.debounce, () => field.onChange?.(input))
-		} : field;
+		} : field]));
 		return {
 			...listeners,
 			fields
@@ -553,7 +577,7 @@ var FormStore = class {
 	#defaultItem(path) {
 		if (this.#options.schema) return Field.defaultItemAt(this.#options.schema, path);
 		const fields = this.#options.fields;
-		if (fields && path.length === 1 && typeof path[0] === "string") {
+		if (fields && path.length === 1 && Predicate.isString(path[0])) {
 			const def = fields[path[0]];
 			if (def && Field.isArrayFieldDef(def)) return Field.defaultValue(def.itemSchema);
 		}
@@ -702,11 +726,15 @@ var FormStore = class {
 	*/
 	#runRefineEffect() {
 		const builder = this.#options.builder;
-		if (!builder || FormBuilder.asyncRefinements(builder).length === 0) return;
-		this.#runValidatorFiber("", FormBuilder.runAsyncRefinements(builder, this.data).pipe(Effect.tap((issues) => Effect.sync(() => {
-			let client = this.#sourcedSnapshot().client;
-			for (const path of this.#lastRefinementPaths) client = replaceAt(client, path, []);
-			client = Errors.mergeErrors(client, Errors.issuesToErrors(issues));
+		if (!builder || Arr.isReadonlyArrayEmpty(FormBuilder.asyncRefinements(builder))) return;
+		if (Option.isNone(this.#decodeForRefinements)) return;
+		const decoded = this.#decodeForRefinements.value(this.#detachedData());
+		this.#runValidatorFiber("", decoded.pipe(Effect.matchEffect({
+			onFailure: () => Effect.succeed([]),
+			onSuccess: (values) => FormBuilder.runAsyncRefinements(builder, values)
+		}), Effect.tap((issues) => Effect.sync(() => {
+			const cleared = Arr.reduce(this.#lastRefinementPaths, this.#sourcedSnapshot().client, (client, path) => replaceAt(client, path, []));
+			const client = Errors.mergeErrors(cleared, Errors.issuesToErrors(issues));
 			this.#lastRefinementPaths = issues.map((issue) => issue.path);
 			this.#sourced = {
 				...this.#sourced,
@@ -722,7 +750,7 @@ var FormStore = class {
 	*/
 	reset(values) {
 		if (values !== void 0) this.#initial = structuredClone(values);
-		for (const key of Object.keys(this.#fibers)) this.#interruptFiber(key);
+		Arr.forEach(R.keys(this.#fibers), (key) => this.#interruptFiber(key));
 		this.data = structuredClone(this.#initial);
 		this.#previousData = this.#detachedData();
 		this.#sourced = emptySourced;
@@ -745,7 +773,7 @@ var FormStore = class {
 			valid: this.valid,
 			posted: this.posted,
 			data: this.#detachedData(),
-			errors: this.errors,
+			errors: untypedErrors(this.errors),
 			message: this.message,
 			constraints: this.constraints
 		};
@@ -812,14 +840,14 @@ var FormStore = class {
 		this.posted = true;
 		this.#options.onUpdated?.({ form: {
 			data: this.data,
-			errors: this.errors,
+			errors: untypedErrors(this.errors),
 			valid: this.valid
 		} });
 	}
 	#applyRedirect(location) {
 		this.#lastSubmitOutcome = "success";
 		if (this.#options.onRedirect) this.#options.onRedirect({ location });
-		else if (typeof window !== "undefined") window.location.assign(location);
+		else if (!Predicate.isUndefined(globalThis.window)) window.location.assign(location);
 	}
 	#applyError(error) {
 		this.#lastSubmitOutcome = "failure";
@@ -838,11 +866,12 @@ var FormStore = class {
 	* actually just saved, not the original seed.
 	*/
 	#applySubmittedData(data, result) {
+		const submittedData = $state.snapshot(this.#lastSubmitted ?? this.data);
 		const applied = computeDataApplication({
-			isSuccess: result._tag === "Success",
+			isSuccess: Predicate.isTagged(result, "Success"),
 			appliedData: data,
 			initial: this.#initial,
-			submittedData: $state.snapshot(this.#lastSubmitted ?? this.data),
+			submittedData,
 			resetForm: this.#options.resetForm ?? false,
 			autoSubmit: this.#mode.autoSubmit
 		});
@@ -879,7 +908,7 @@ var FormStore = class {
 		}, delayMs);
 		try {
 			const submit = this.#options.submit ?? defaultSubmit;
-			const action = node.action || (typeof location !== "undefined" ? location.href : "");
+			const action = node.action || (Predicate.isUndefined(globalThis.location) ? "" : location.href);
 			let result;
 			if (resolved !== void 0) result = resolved;
 			else if (this.#options.handler) result = await this.#options.handler(this.data);
@@ -887,7 +916,7 @@ var FormStore = class {
 			this.#options.onResult?.({ result });
 			this.#applyUpdate(resultToUpdate(result), result);
 		} catch (cause) {
-			const message = cause instanceof Error ? cause.message : "Submission failed";
+			const message = Predicate.isError(cause) ? cause.message : "Submission failed";
 			this.#lastSubmitOutcome = "failure";
 			this.#options.onError?.({ error: message });
 		} finally {
@@ -911,7 +940,7 @@ var FormStore = class {
 		const beforeUnload = (event) => {
 			if (this.#options.taintedMessage && this.isTainted) event.preventDefault();
 		};
-		if (this.#options.taintedMessage && typeof window !== "undefined") window.addEventListener("beforeunload", beforeUnload);
+		if (this.#options.taintedMessage && !Predicate.isUndefined(globalThis.window)) window.addEventListener("beforeunload", beforeUnload);
 		this.#autoSubmitNode = node;
 		this.#options.listeners?.onMount?.({ data: $state.snapshot(this.data) });
 		const dispatchListeners = this.#buildDispatchListeners();
@@ -932,24 +961,31 @@ var FormStore = class {
 				const snapshot = $state.snapshot(this.data);
 				const changed = taintedLeafPaths(computeTainted(this.#previousData, snapshot));
 				this.#previousData = snapshot;
-				for (const path of changed) this.#onFieldChanged(path);
+				Arr.forEach(changed, (path) => this.#onFieldChanged(path));
 			});
 		});
 		return { destroy: () => {
 			node.removeEventListener("submit", handleSubmit);
-			if (typeof window !== "undefined") window.removeEventListener("beforeunload", beforeUnload);
+			if (!Predicate.isUndefined(globalThis.window)) window.removeEventListener("beforeunload", beforeUnload);
 			stopWatching?.();
 			stopFieldWatching?.();
 			clearTimeout(this.#validateTimer);
-			for (const timer of this.#listenerTimers.values()) clearTimeout(timer);
-			this.#listenerTimers.clear();
-			for (const key of Object.keys(this.#fibers)) this.#interruptFiber(key);
+			Arr.forEach(R.values(this.#listenerTimers), (timer) => clearTimeout(timer));
+			this.#listenerTimers = {};
+			Arr.forEach(R.keys(this.#fibers), (key) => this.#interruptFiber(key));
 			if (this.#autoSubmitNode === node) this.#autoSubmitNode = void 0;
 		} };
 	};
 	/** Attachment form of {@link FormStore.enhance} for {@link FormStore.props}. */
-	#enhanceAttachment = (node) => this.enhance(node).destroy;
-	/** Build a {@link FormData} body from the current data (SPA / manual submit). */
+	#enhanceAttachment = (node) => {
+		return this.enhance(node).destroy;
+	};
+	/**
+	* Build a {@link FormData} body from the current data (SPA / manual submit).
+	*
+	* Each value is encoded as `objectToFormData` encodes it: a `File` or
+	* `Blob` is appended as a file and a `Date` as its UTC `YYYY-MM-DD`.
+	*/
 	toFormData() {
 		return objectToFormData(this.data);
 	}
@@ -957,10 +993,10 @@ var FormStore = class {
 function createForm(source, options = {}) {
 	if (FormBuilder.isFormBuilder(source)) {
 		const schema = FormBuilder.buildSchema(source);
-		return new FormStore(Form.fromBuilder(source, {
-			...options.defaults !== void 0 ? { defaults: options.defaults } : {},
-			...options.id !== void 0 ? { id: options.id } : {}
-		}).empty(), {
+		const builderOptions = {};
+		if (options.defaults !== void 0) builderOptions.defaults = options.defaults;
+		if (options.id !== void 0) builderOptions.id = options.id;
+		return new FormStore(Form.fromBuilder(source, builderOptions).empty(), {
 			...options,
 			schema,
 			fields: source.fields,
@@ -968,13 +1004,11 @@ function createForm(source, options = {}) {
 		});
 	}
 	if ("defaults" in source && "schema" in source) {
-		const seed = source;
-		return new FormStore(makeForm(seed.schema, {
-			defaults: seed.defaults,
-			...seed.id !== void 0 ? { id: seed.id } : {}
-		}).empty(), {
+		const makeOptions = { defaults: source.defaults };
+		if (source.id !== void 0) makeOptions.id = source.id;
+		return new FormStore(makeForm(source.schema, makeOptions).empty(), {
 			...options,
-			schema: seed.schema
+			schema: source.schema
 		});
 	}
 	return new FormStore(source, options);