oxform-core 0.1.0 → 0.1.1

package/dist/index.js

@@ -0,0 +1,747 @@
+import { isDeepEqual, isFunction, mergeDeep, setPath, stringToPath } from "remeda";
+import { Derived, Store, batch } from "@tanstack/store";
+
+//#region src/field-api.constants.ts
+const defaultMeta = {
+	blurred: false,
+	touched: false,
+	dirty: false
+};
+const defaultStatus = {
+	submits: 0,
+	submitting: false,
+	validating: false,
+	successful: false,
+	dirty: false
+};
+
+//#endregion
+//#region src/utils/get.ts
+const get = (data, path) => {
+	return path.reduce((acc, key) => {
+		if (acc === void 0) return void 0;
+		if (acc === null) return null;
+		return acc[key];
+	}, data);
+};
+
+//#endregion
+//#region src/utils/update.ts
+function update(updater, input) {
+	return typeof updater === "function" ? updater(input) : updater;
+}
+
+//#endregion
+//#region src/form-array-field-api.ts
+var FormArrayFieldApi = class {
+	context;
+	field;
+	constructor({ field, context }) {
+		this.context = context;
+		this.field = field;
+	}
+	insert = (name, index, value, options) => {
+		if (index < 0) index = 0;
+		this.field.change(name, (current) => {
+			const array = current ?? [];
+			return [
+				...array.slice(0, index),
+				...Array.from({ length: index - array.length }, () => void 0),
+				update(value, current),
+				...array.slice(index)
+			];
+		}, options);
+		this.context.persisted.setState((current) => {
+			const fields = { ...current.fields };
+			const length = get(current.values, stringToPath(name))?.length;
+			if (length === void 0) return current;
+			for (let i = index; i < length; i++) {
+				const moving = current.fields[`${name}.${i}`];
+				fields[`${name}.${i + 1}`] = moving ?? defaultMeta;
+			}
+			fields[`${name}.${index}`] = defaultMeta;
+			return {
+				...current,
+				fields
+			};
+		});
+	};
+	append = (name, value, options) => {
+		const current = this.field.get(name);
+		return this.insert(name, current?.length ?? 0, value, options);
+	};
+	prepend = (name, value, options) => {
+		return this.insert(name, 0, value, options);
+	};
+	swap = (name, from, to, options) => {
+		const start = from >= 0 ? from : 0;
+		const end = to >= 0 ? to : 0;
+		this.field.change(name, (current) => {
+			const array = current ?? [];
+			if (start === end) return array;
+			const a = array[start];
+			const b = array[end];
+			return [
+				...array.slice(0, start),
+				b,
+				...array.slice(start + 1, end),
+				a,
+				...array.slice(end + 1)
+			];
+		}, options);
+		this.context.persisted.setState((current) => {
+			const fields = { ...current.fields };
+			fields[`${name}.${start}`] = current.fields[`${name}.${end}`] ?? defaultMeta;
+			fields[`${name}.${end}`] = current.fields[`${name}.${start}`] ?? defaultMeta;
+			return {
+				...current,
+				fields
+			};
+		});
+	};
+	move(name, _from, _to, options) {
+		const from = Math.max(_from, 0);
+		const to = Math.max(_to, 0);
+		const backwards = from > to;
+		this.field.change(name, (current) => {
+			const array = current ? [...current] : [];
+			if (from === to) return array;
+			const moved = array[from];
+			return array.toSpliced(backwards ? to : to + 1, 0, moved).toSpliced(backwards ? from + 1 : from, 1);
+		}, options);
+		this.context.persisted.setState((current) => {
+			const fields = { ...current.fields };
+			const length = get(current.values, stringToPath(name))?.length;
+			const start = Math.min(from, to);
+			const end = Math.max(from, to);
+			if (length === void 0) return current;
+			if (!backwards) fields[`${name}.${to}`] = current.fields[`${name}.${from}`] ?? defaultMeta;
+			for (let i = backwards ? start + 1 : start; i < end; i++) {
+				const shift = backwards ? -1 : 1;
+				const moving = current.fields[`${name}.${i + shift}`];
+				fields[`${name}.${i}`] = moving ?? defaultMeta;
+			}
+			return {
+				...current,
+				fields
+			};
+		});
+	}
+	update = (name, index, value, options) => {
+		this.field.change(name, (current) => {
+			const array = current ?? [];
+			const position = Math.max(Math.min(index, array.length - 1), 0);
+			return [
+				...array.slice(0, position),
+				update(value, current),
+				...array.slice(position + 1)
+			];
+		}, options);
+		this.context.resetFieldMeta(`${name}.${index}`);
+		this.context.setFieldMeta(`${name}.${index}`, {
+			dirty: options?.should?.dirty !== false,
+			touched: options?.should?.touch !== false
+		});
+	};
+	remove(name, index, options) {
+		let position = index;
+		this.field.change(name, (current) => {
+			const array = current ?? [];
+			position = Math.max(Math.min(index, array.length - 1), 0);
+			return [...array.slice(0, position), ...array.slice(position + 1)];
+		}, {
+			...options,
+			should: {
+				...options?.should,
+				validate: false
+			}
+		});
+		this.context.persisted.setState((current) => {
+			const fields = { ...current.fields };
+			const length = get(current.values, stringToPath(name))?.length ?? 0;
+			for (let i = position; i < length; i++) {
+				const moving = current.fields[`${name}.${i + 1}`];
+				fields[`${name}.${i}`] = moving ?? defaultMeta;
+			}
+			delete fields[`${name}.${length}`];
+			return {
+				...current,
+				fields
+			};
+		});
+		if (options?.should?.validate !== false) this.context.validate(name, { type: "change" });
+	}
+	replace(name, value, options) {
+		this.context.resetFieldMeta(name);
+		this.field.change(name, value, options);
+	}
+};
+
+//#endregion
+//#region src/utils/validate.ts
+const validate = async (schema, input) => {
+	let result = schema["~standard"].validate(input);
+	if (result instanceof Promise) result = await result;
+	return result;
+};
+
+//#endregion
+//#region src/form-context-api.ts
+var FormContextApi = class {
+	options;
+	persisted;
+	store;
+	constructor(options) {
+		const values = mergeDeep(options.defaultValues, options.values ?? {});
+		this.options = options;
+		this.persisted = new Store({
+			values,
+			fields: {},
+			refs: {},
+			status: defaultStatus,
+			errors: {}
+		});
+		this.store = new Derived({
+			deps: [this.persisted],
+			fn: ({ currDepVals }) => {
+				const persisted = currDepVals[0];
+				const invalid = Object.values(persisted.errors).some((issues) => issues.length > 0);
+				const dirty = Object.values(persisted.fields).some((meta) => meta.dirty);
+				const fields = Object.fromEntries(Object.entries(persisted.fields).map(([key, meta]) => {
+					return [key, this.buildFieldMeta(key, meta, persisted.values, persisted.errors)];
+				}));
+				return {
+					...persisted,
+					fields,
+					status: {
+						...persisted.status,
+						submitted: persisted.status.submits > 0,
+						valid: !invalid,
+						dirty: persisted.status.dirty || dirty
+					}
+				};
+			}
+		});
+	}
+	get status() {
+		return this.store.state.status;
+	}
+	get values() {
+		return this.store.state.values;
+	}
+	get validator() {
+		const store = this.store.state;
+		const validate$1 = this.options.validate;
+		return {
+			change: isFunction(validate$1?.change) ? validate$1.change(store) : validate$1?.change,
+			submit: isFunction(validate$1?.submit) ? validate$1.submit(store) : validate$1?.submit ?? this.options.schema,
+			blur: isFunction(validate$1?.blur) ? validate$1.blur(store) : validate$1?.blur,
+			focus: isFunction(validate$1?.focus) ? validate$1.focus(store) : validate$1?.focus
+		};
+	}
+	buildFieldMeta = (fieldName, persistedMeta, values, errors) => {
+		const path = stringToPath(fieldName);
+		const value = get(values, path);
+		const defaultValue = get(this.options.defaultValues, path);
+		const invalid = errors[fieldName]?.length > 0;
+		const baseMeta = persistedMeta ?? defaultMeta;
+		return {
+			...baseMeta,
+			default: isDeepEqual(value, defaultValue),
+			pristine: !baseMeta.dirty,
+			valid: !invalid
+		};
+	};
+	setFieldMeta = (name, meta) => {
+		this.persisted.setState((current) => {
+			return {
+				...current,
+				fields: {
+					...current.fields,
+					[name]: {
+						...defaultMeta,
+						...this.persisted.state.fields[name],
+						...meta
+					}
+				}
+			};
+		});
+	};
+	resetFieldMeta = (name) => {
+		this.persisted.setState((current) => {
+			const fields = { ...current.fields };
+			const affected = Object.keys(current.fields).filter((key) => key.startsWith(name));
+			for (const key of affected) delete fields[key];
+			return {
+				...current,
+				fields
+			};
+		});
+	};
+	recomputeFieldMeta = (name) => {
+		this.persisted.setState((current) => {
+			const related = this.options.related?.[name] ?? [];
+			const updated = Object.keys(current.fields).filter((key) => key.startsWith(name) || related.includes(key)).reduce((acc, key) => {
+				return {
+					...acc,
+					[key]: this.buildFieldMeta(key, current.fields[key], current.values, current.errors)
+				};
+			}, {});
+			return {
+				...current,
+				fields: {
+					...current.fields,
+					...updated
+				}
+			};
+		});
+	};
+	setStatus = (status) => {
+		this.persisted.setState((current) => {
+			return {
+				...current,
+				status: {
+					...current.status,
+					...status
+				}
+			};
+		});
+	};
+	validate = async (field, options) => {
+		const validator = options?.type ? this.validator[options.type] : this.options.schema;
+		if (!validator) return [];
+		this.setStatus({ validating: true });
+		const { issues: allIssues } = await validate(validator, this.store.state.values);
+		if (!allIssues) {
+			this.persisted.setState((current) => {
+				return {
+					...current,
+					errors: {},
+					status: {
+						...current.status,
+						validating: false
+					}
+				};
+			});
+			return [];
+		}
+		const fields = field ? Array.isArray(field) ? field : [field] : void 0;
+		const related = fields?.flatMap((field$1) => this.options.related?.[field$1] ?? []) ?? [];
+		const affected = [...fields ?? [], ...related];
+		const issues = allIssues.filter((issue) => {
+			const path = issue.path?.join(".") ?? "root";
+			return !fields || affected.some((key) => path.startsWith(key));
+		});
+		const errors = issues.reduce((acc, issue) => {
+			const path = issue.path?.join(".") ?? "root";
+			return {
+				...acc,
+				[path]: [...acc[path] ?? [], issue]
+			};
+		}, {});
+		this.persisted.setState((current) => {
+			const existing = { ...current.errors };
+			for (const key of affected) delete existing[key];
+			return {
+				...current,
+				errors: {
+					...fields ? existing : {},
+					...errors
+				}
+			};
+		});
+		this.setStatus({ validating: false });
+		return issues;
+	};
+};
+
+//#endregion
+//#region src/form-field-api.ts
+var FormFieldApi = class {
+	constructor(context) {
+		this.context = context;
+	}
+	/**
+	* Changes the value of a specific field with optional control over side effects.
+	* @param name - The name of the field to change
+	* @param value - The new value to set for the field
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	change = (name, updater, options) => {
+		const shouldDirty = options?.should?.dirty !== false;
+		const shouldTouch = options?.should?.touch !== false;
+		const shouldValidate = options?.should?.validate !== false;
+		this.context.persisted.setState((current) => {
+			const value = get(current.values, stringToPath(name));
+			const values = setPath(current.values, stringToPath(name), update(updater, value));
+			return {
+				...current,
+				values
+			};
+		});
+		if (shouldValidate) this.context.validate(name, { type: "change" });
+		batch(() => {
+			if (shouldDirty) this.context.setFieldMeta(name, { dirty: true });
+			if (shouldTouch) this.context.setFieldMeta(name, { touched: true });
+		});
+	};
+	focus = (name) => {
+		const ref = this.context.store.state.refs[name];
+		if (ref) ref.focus();
+		this.context.setFieldMeta(name, { touched: true });
+		this.context.validate(name, { type: "focus" });
+	};
+	blur = (name) => {
+		const ref = this.context.store.state.refs[name];
+		if (ref) ref.blur();
+		this.context.setFieldMeta(name, { blurred: true });
+		this.context.validate(name, { type: "blur" });
+	};
+	get = (name) => {
+		return get(this.context.store.state.values, stringToPath(name));
+	};
+	meta = (name) => {
+		const meta = this.context.store.state.fields[name];
+		if (meta) return meta;
+		const updated = this.context.buildFieldMeta(name, void 0, this.context.store.state.values, this.context.store.state.errors);
+		this.context.setFieldMeta(name, updated);
+		return updated;
+	};
+	register = (name) => {
+		return (element) => {
+			if (!element) return;
+			this.context.persisted.setState((current) => {
+				return {
+					...current,
+					refs: {
+						...current.refs,
+						[name]: element
+					}
+				};
+			});
+		};
+	};
+	errors = (name) => {
+		return this.context.store.state.errors[name] ?? [];
+	};
+	setErrors = (name, errors, options) => {
+		this.context.persisted.setState((current) => {
+			const existing = current.errors[name] ?? [];
+			let updated;
+			switch (options?.mode) {
+				case "append":
+					updated = [...existing, ...errors];
+					break;
+				case "keep":
+					updated = existing.length > 0 ? existing : errors;
+					break;
+				case "replace":
+				default:
+					updated = errors;
+					break;
+			}
+			return {
+				...current,
+				errors: {
+					...current.errors,
+					[name]: updated
+				}
+			};
+		});
+	};
+	reset = (name, options) => {
+		const path = stringToPath(name);
+		const defaultValue = get(this.context.options.defaultValues, path);
+		const value = options?.value ?? defaultValue;
+		this.context.persisted.setState((current) => {
+			const values = setPath(current.values, path, value);
+			const fields = { ...current.fields };
+			const refs = { ...current.refs };
+			const errors = { ...current.errors };
+			if (options?.meta) fields[name] = {
+				...options?.keep?.meta ? fields[name] ?? defaultMeta : defaultMeta,
+				...options.meta
+			};
+			else if (!options?.keep?.meta) delete fields[name];
+			if (!options?.keep?.refs) delete refs[name];
+			if (!options?.keep?.errors) delete errors[name];
+			return {
+				...current,
+				values,
+				fields,
+				refs,
+				errors
+			};
+		});
+	};
+};
+
+//#endregion
+//#region src/form-api.ts
+var FormApi = class {
+	context;
+	field;
+	array;
+	constructor(options) {
+		this.context = new FormContextApi(options);
+		this.field = new FormFieldApi(this.context);
+		this.array = new FormArrayFieldApi({
+			field: this.field,
+			context: this.context
+		});
+	}
+	"~mount" = () => {
+		return this.context.store.mount();
+	};
+	"~update" = (options) => {
+		this.context.options = options;
+	};
+	store = () => {
+		return this.context.store;
+	};
+	status = () => {
+		return this.context.store.state.status;
+	};
+	values = () => {
+		return this.context.store.state.values;
+	};
+	options = () => {
+		return this.context.options;
+	};
+	get validate() {
+		return this.context.validate;
+	}
+	submit = (onSuccess, onError) => async () => {
+		this.context.setStatus({
+			submitting: true,
+			dirty: true
+		});
+		const issues = await this.context.validate(void 0, { type: "submit" });
+		const valid = issues.length === 0;
+		if (valid) await onSuccess(this.context.store.state.values, this);
+		else await onError?.(issues, this);
+		this.context.setStatus({
+			submits: this.context.persisted.state.status.submits + 1,
+			submitting: false,
+			successful: valid
+		});
+	};
+	reset = (options) => {
+		this.context.persisted.setState((current) => {
+			return {
+				values: options?.values ?? this.context.options.defaultValues,
+				fields: options?.keep?.fields ? current.fields : {},
+				refs: options?.keep?.refs ? current.refs : {},
+				errors: options?.keep?.errors ? current.errors : {},
+				status: {
+					...defaultStatus,
+					...options?.status
+				}
+			};
+		});
+	};
+};
+
+//#endregion
+//#region src/field-api.ts
+var FieldApi = class {
+	_options;
+	form;
+	_store;
+	constructor(options) {
+		this._options = options;
+		this.form = options.form;
+		this._store = new Derived({
+			deps: [this.form.store()],
+			fn: ({ prevVal }) => {
+				const previous = prevVal;
+				const updated = {
+					value: this.form.field.get(this._options.name),
+					defaultValue: get(this.form.options().defaultValues, stringToPath(this._options.name)),
+					meta: this.form.field.meta(this._options.name),
+					errors: this.form.field.errors(this._options.name)
+				};
+				if (previous && isDeepEqual(previous, updated)) return previous;
+				return updated;
+			}
+		});
+	}
+	"~mount" = () => {
+		return this._store.mount();
+	};
+	"~update" = (options) => {
+		this._options = options;
+	};
+	options = () => {
+		return this._options;
+	};
+	store = () => {
+		return this._store;
+	};
+	state = () => {
+		return this._store.state;
+	};
+	focus = () => {
+		return this.form.field.focus(this._options.name);
+	};
+	blur = () => {
+		return this.form.field.blur(this._options.name);
+	};
+	/**
+	* Changes the value of this field with optional control over side effects.
+	* @param value - The new value to set for the field
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	change = (value, options) => {
+		return this.form.field.change(this._options.name, value, options);
+	};
+	register = () => this.form.field.register(this._options.name);
+	/**
+	* Validates this specific field using the specified validation type.
+	* @param options - Optional validation options specifying the validation type ('change' | 'submit' | 'blur' | 'focus')
+	* @returns Promise resolving to an array of validation issues for this field
+	*/
+	validate = (options) => {
+		return this.form.validate(this._options.name, options);
+	};
+	/**
+	* Resets this field to its default value and optionally resets metadata and errors.
+	* @param options - Reset options for controlling what gets reset and what gets kept
+	*/
+	reset = (options) => {
+		return this.form.field.reset(this._options.name, options);
+	};
+	/**
+	* Sets validation errors for this specific field.
+	* @param errors - Array of validation errors to set
+	* @param mode - How to handle existing errors: 'replace' (default), 'append', or 'keep'
+	*/
+	setErrors = (errors, options) => {
+		return this.form.field.setErrors(this._options.name, errors, options);
+	};
+};
+const createFieldApi = (options) => {
+	return new FieldApi(options);
+};
+
+//#endregion
+//#region src/array-field-api.ts
+var ArrayFieldApi = class {
+	field;
+	constructor(options) {
+		this.field = new FieldApi(options);
+	}
+	get _options() {
+		return this.field.options();
+	}
+	"~mount" = () => {
+		return this.field.store().mount();
+	};
+	"~update" = (options) => {
+		this.field["~update"](options);
+	};
+	store = () => {
+		return this.field.store();
+	};
+	state = () => {
+		return this.field.store().state;
+	};
+	/**
+	* Appends a new item to the end of the array.
+	* @param value - The value to append to the array
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	append = (value, options) => {
+		return this._options.form.array.append(this._options.name, value, options);
+	};
+	/**
+	* Prepends a new item to the beginning of the array.
+	* @param value - The value to prepend to the array
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	prepend = (value, options) => {
+		return this._options.form.array.prepend(this._options.name, value, options);
+	};
+	/**
+	* Inserts a new item at the specified index in the array.
+	* @param index - The index at which to insert the value
+	* @param value - The value to insert into the array
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	insert = (index, value, options) => {
+		return this._options.form.array.insert(this._options.name, index, value, options);
+	};
+	/**
+	* Updates an item at the specified index in the array.
+	* @param index - The index of the item to update
+	* @param value - The new value or updater function
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	update = (index, value, options) => {
+		return this._options.form.array.update(this._options.name, index, value, options);
+	};
+	/**
+	* Removes an item at the specified index from the array.
+	* @param index - The index of the item to remove
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	remove = (index, options) => {
+		return this._options.form.array.remove(this._options.name, index, options);
+	};
+	/**
+	* Swaps two items in the array by their indices.
+	* @param from - The index of the first item
+	* @param to - The index of the second item
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	swap = (from, to, options) => {
+		return this._options.form.array.swap(this._options.name, from, to, options);
+	};
+	/**
+	* Moves an item from one index to another in the array.
+	* @param from - The index of the item to move
+	* @param to - The target index
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	move = (from, to, options) => {
+		return this._options.form.array.move(this._options.name, from, to, options);
+	};
+	/**
+	* Replaces the entire array with a new value.
+	* @param value - The new array value or updater function
+	* @param options - Optional configuration for controlling validation, dirty state, and touched state
+	*/
+	replace = (value, options) => {
+		return this._options.form.array.replace(this._options.name, value, options);
+	};
+	/**
+	* Validates this specific array field using the specified validation type.
+	* @param options - Optional validation options specifying the validation type ('change' | 'submit' | 'blur' | 'focus')
+	* @returns Promise resolving to an array of validation issues for this field
+	*/
+	validate = (options) => {
+		return this._options.form.validate(this._options.name, options);
+	};
+	/**
+	* Resets this array field to its default value and optionally resets metadata and errors.
+	* @param options - Reset options for controlling what gets reset and what gets kept
+	*/
+	reset = (options) => {
+		return this._options.form.field.reset(this._options.name, options);
+	};
+	/**
+	* Sets validation errors for this specific array field.
+	* @param errors - Array of validation errors to set
+	* @param mode - How to handle existing errors: 'replace' (default), 'append', or 'keep'
+	*/
+	setErrors = (errors, options) => {
+		return this._options.form.field.setErrors(this._options.name, errors, options);
+	};
+};
+const createArrayFieldApi = (options) => {
+	return new ArrayFieldApi(options);
+};
+
+//#endregion
+export { ArrayFieldApi, FieldApi, FormApi, createArrayFieldApi, createFieldApi };
+//# sourceMappingURL=index.js.map