cross-state 0.53.3 → 0.54.0

package/dist/react/index.js

@@ -0,0 +1,590 @@
+import { autobind, calcDuration, createStore, debounce, queue, throttle } from "../store-Dr8gM3lq.js";
+import { castArrayPath, deepEqual, get, isObject, join, set } from "../propAccess-DGchzVfy.js";
+import { simpleHash } from "../hash-BV06P7va.js";
+import { fromExtendedJsonString, toExtendedJsonString } from "../extendedJson-BZkQBXEv.js";
+import { LoadingBoundary, ScopeProvider, cacheMethods, scopeMethods, storeMethods, useCache, useLoadingBoundary, useProp, useScope, useStore } from "../storeMethods-AIJSwxHz.js";
+import React, { Fragment, createContext, createElement, startTransition, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/form/customInput.tsx
+function CustomInput({ name, children,...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		style: {
+			position: "relative",
+			...props.style
+		},
+		children: [children, /* @__PURE__ */ jsx("input", {
+			name,
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				opacity: 0,
+				width: "100%",
+				height: "100%",
+				pointerEvents: "none"
+			}
+		})]
+	});
+}
+
+//#endregion
+//#region src/lib/wildcardMatch.ts
+function getWildCardMatches(object, path) {
+	const matches = {};
+	const [first, second, ...rest] = castArrayPath(path);
+	if (first === void 0) throw new Error("Path is empty");
+	if (!Array.isArray(object) && !isObject(object)) object = {};
+	for (const [key, value] of first !== "*" ? [[first, object[first]]] : Object.entries(object)) {
+		if (first !== "*" && first !== key) continue;
+		if (second === void 0) {
+			matches[key] = value;
+			continue;
+		}
+		for (const [subKey, subValue] of Object.entries(getWildCardMatches(value, [second, ...rest]))) matches[`${key}.${subKey}`] = subValue;
+	}
+	return matches;
+}
+
+//#endregion
+//#region src/react/form/formField.tsx
+function FormField({ name = "", component, commitOnBlur, commitDebounce, render, inputFilter, defaultValue, serialize, deserialize = (x) => x, onChange, onBlur,...restProps }) {
+	const form = this.useForm();
+	const getFormState = () => ({
+		...form,
+		...getDerivedState(form)
+	});
+	const [localValue, setLocalValue] = useState();
+	const value = this.useFormState((form$1) => {
+		const value$1 = form$1.getField(name).value;
+		if (serialize) return serialize(value$1, getFormState());
+		if (value$1 !== void 0) return value$1;
+		return defaultValue;
+	});
+	const setValue = (x) => form.getField(name).setValue(deserialize(x, getFormState()));
+	const hasTriggeredValidations = this.useFormState((form$1) => form$1.hasTriggeredValidations);
+	useEffect(() => {
+		if (localValue === void 0 || !commitDebounce) return;
+		const timeout = setTimeout(() => {
+			setValue(localValue);
+			setLocalValue(void 0);
+		}, commitDebounce);
+		return () => clearTimeout(timeout);
+	}, [localValue, commitDebounce]);
+	const props = {
+		name,
+		value: localValue ?? value,
+		onChange: (event, ...moreArgs) => {
+			const value$1 = typeof event === "object" && event !== null && "target" in event ? event.target.value : event;
+			if (inputFilter && !inputFilter(value$1)) return;
+			if (commitOnBlur || commitDebounce) setLocalValue(value$1);
+			else setValue(value$1);
+			onChange?.(event, ...moreArgs);
+		},
+		onBlur(...args) {
+			if (localValue !== void 0) {
+				setValue(localValue);
+				setLocalValue(void 0);
+			}
+			onBlur?.(...args);
+		}
+	};
+	if (render) return /* @__PURE__ */ jsx(Fragment$1, { children: render(props, {
+		...form.getField(name),
+		hasTriggeredValidations
+	}, form) ?? null });
+	if (component) return createElement(component, {
+		...restProps,
+		...props
+	});
+	return null;
+}
+
+//#endregion
+//#region src/react/form/formForEach.tsx
+function FormForEach({ name, renderElement, children }) {
+	const form = this.useForm();
+	const names = this.useFormState(() => {
+		const field = form.getField(name);
+		return field.names;
+	});
+	const add = useCallback((...args) => {
+		const field = form.getField(name);
+		field.add(...args);
+	}, [form]);
+	const remove = useCallback((key) => {
+		const field = form.getField(name);
+		field.remove(key);
+	}, [form]);
+	const setValue = useCallback((value) => {
+		const field = form.getField(name);
+		field.setValue(value);
+	}, [form]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderElement && names.map((name$1, index) => {
+		const key = name$1.split(".").pop();
+		return /* @__PURE__ */ jsx(Fragment, { children: renderElement({
+			name: name$1,
+			key,
+			index,
+			remove: () => remove(key)
+		}) }, key);
+	}), children?.({
+		names,
+		add,
+		remove,
+		setValue
+	})] });
+}
+
+//#endregion
+//#region src/react/form/useFormAutosave.ts
+function useFormAutosave(form) {
+	const { formState, options, getDraft } = form;
+	const debounceTime = calcDuration(options.autoSave?.debounce ?? 2e3);
+	const latestRef = useRef({ options });
+	const lastValue = useRef(void 0);
+	const q = useMemo(() => queue(), []);
+	const run = useMemo(() => debounce(async () => {
+		const { options: options$1 } = latestRef.current;
+		const save = options$1.autoSave?.save;
+		const draft = getDraft();
+		lastValue.current = draft;
+		q.clear();
+		q(async () => {
+			try {
+				formState.set("saveInProgress", true);
+				await save?.(draft, form);
+				if (q.size === 0 && options$1.autoSave?.resetAfterSave) form.reset();
+			} finally {
+				formState.set("saveInProgress", false);
+				if (q.size === 0) formState.set("saveScheduled", false);
+			}
+		});
+	}, debounceTime), [formState, debounceTime]);
+	useEffect(() => {
+		if (!options.autoSave?.save) return;
+		return formState.map((state) => state.draft).subscribe(() => {
+			if (deepEqual(getDraft(), lastValue.current)) return;
+			run();
+			formState.set("saveScheduled", true);
+		}, { runNow: false });
+	}, [formState]);
+	useEffect(() => {
+		latestRef.current = { options };
+	});
+}
+
+//#endregion
+//#region src/react/form/form.tsx
+function FormContainer({ form,...formProps }) {
+	const formInstance = form.useForm();
+	const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);
+	const formRef = useRef(null);
+	function updateValidity(errors, buttonElement) {
+		const formElement = formRef.current;
+		if (!formElement) return;
+		const localizedErrors = new Map([...errors.entries()].map(([field, errors$1]) => [field, errors$1.map((error) => formInstance.options.localizeError?.(error, field) ?? error)]));
+		for (const element of Array.from(formElement.elements)) if ("name" in element && "setCustomValidity" in element) element.setCustomValidity(localizedErrors.get(element.name)?.join("\n") ?? "");
+		if (buttonElement && "setCustomValidity" in buttonElement) {
+			const errorString = [...errors.values()].flat().join("\n");
+			buttonElement.setCustomValidity(errorString);
+		}
+	}
+	useEffect(() => {
+		return formInstance.formState.map(() => formInstance.getErrors()).subscribe((errors) => updateValidity(errors));
+	}, []);
+	return /* @__PURE__ */ jsx("form", {
+		ref: formRef,
+		noValidate: true,
+		...formProps,
+		className: [formProps.className, hasTriggeredValidations ? formInstance.options.validatedClass ?? "validated" : void 0].filter(Boolean).join(" "),
+		onSubmit: async (event) => {
+			if (formInstance.saveInProgress()) return;
+			try {
+				formInstance.formState.set("saveInProgress", true);
+				event.preventDefault();
+				const formElement = event.currentTarget;
+				const buttonElement = event.nativeEvent instanceof SubmitEvent && event.nativeEvent.submitter instanceof HTMLButtonElement ? event.nativeEvent.submitter : void 0;
+				updateValidity(formInstance.getErrors(), buttonElement);
+				formElement.reportValidity();
+				const isValid = formInstance.validate();
+				if (isValid) await formProps.onSubmit?.(event, {
+					...formInstance,
+					...getDerivedState(formInstance)
+				});
+			} finally {
+				formInstance.formState.set("saveInProgress", false);
+			}
+		}
+	});
+}
+function getField(form, path) {
+	const field = {
+		get originalValue() {
+			return form.original !== void 0 ? get(form.original, path) : void 0;
+		},
+		get value() {
+			const draft = form.getDraft();
+			return get(draft ?? form.original ?? form.options.defaultValue, path);
+		},
+		setValue(update) {
+			form.formState.set("draft", (draft = form.original ?? form.options.defaultValue) => {
+				if (update instanceof Function) update = update(get(draft, path));
+				return set(draft, path, update);
+			});
+		},
+		get hasChange() {
+			return !deepEqual(this.originalValue, this.value);
+		},
+		get errors() {
+			const errors = form.getErrors();
+			return errors.get(path) ?? [];
+		},
+		get names() {
+			const { value } = this;
+			if (Array.isArray(value)) return value.map((_, index) => join(path, String(index)));
+			if (isObject(value)) return Object.keys(value).map((key) => join(path, key));
+			return [];
+		},
+		add(...args) {
+			this.setValue((value) => {
+				if (!value) throw new Error(`Cannot add element to ${JSON.stringify(value)}`);
+				if (Array.isArray(value)) return [...value ?? [], args[0]];
+				if (isObject(value)) return {
+					...value,
+					[args[0]]: args[1]
+				};
+				throw new Error(`Cannot add element to ${JSON.stringify(value)}`);
+			});
+		},
+		remove(key) {
+			this.setValue((value) => {
+				if (!value) throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);
+				if (Array.isArray(value)) return value.filter((_, index) => index !== Number(key));
+				if (isObject(value)) {
+					const { [key]: _,...rest } = value;
+					return rest;
+				}
+				throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);
+			});
+		}
+	};
+	return field;
+}
+function getErrors(draft, original, validations) {
+	const errors = /* @__PURE__ */ new Map();
+	for (const [path, block] of Object.entries(validations ?? {})) for (const [validationName, validate] of Object.entries(block)) {
+		let matched = false;
+		for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {
+			matched = true;
+			if (!validate(value, {
+				draft,
+				original,
+				field
+			})) {
+				const fieldErrors = errors.get(field) ?? [];
+				fieldErrors.push(validationName);
+				errors.set(field, fieldErrors);
+			}
+		}
+		if (!matched && !path.includes("*")) {
+			if (!validate(void 0, {
+				draft,
+				original,
+				field: path
+			})) {
+				const fieldErrors = errors.get(path) ?? [];
+				fieldErrors.push(validationName);
+				errors.set(path, fieldErrors);
+			}
+		}
+	}
+	return errors;
+}
+function getDerivedState(instance) {
+	return {
+		draft: instance.getDraft(),
+		hasTriggeredValidations: instance.hasTriggeredValidations(),
+		saveScheduled: instance.saveScheduled(),
+		saveInProgress: instance.saveInProgress(),
+		hasChanges: instance.hasChanges(),
+		errors: instance.getErrors(),
+		isValid: instance.isValid()
+	};
+}
+var Form = class Form {
+	constructor(options) {
+		this.options = options;
+		this.context = createContext(null);
+		autobind(Form);
+	}
+	useForm() {
+		const context = useContext(this.context);
+		if (!context) throw new Error("Form context not found");
+		return context;
+	}
+	useFormState(selector, useStoreOptions) {
+		const form = this.useForm();
+		return useStore(form.formState, () => selector({
+			...form,
+			...getDerivedState(form)
+		}), useStoreOptions);
+	}
+	useField(path, useStoreOptions) {
+		const form = this.useForm();
+		this.useFormState((form$1) => [form$1.getField(path).value, form$1.original], useStoreOptions);
+		return form.getField(path);
+	}
+	Form({ original, defaultValue, validations, localizeError, autoSave, transform, validatedClass,...formProps }) {
+		const options = {
+			defaultValue: {
+				...this.options.defaultValue,
+				...defaultValue
+			},
+			validations: {
+				...this.options.validations,
+				...validations
+			},
+			localizeError: localizeError ?? this.options.localizeError,
+			autoSave: autoSave ?? this.options.autoSave,
+			transform: transform ?? this.options.transform,
+			validatedClass: validatedClass ?? this.options.validatedClass
+		};
+		const formState = useMemo(() => {
+			return createStore({
+				draft: void 0,
+				hasTriggeredValidations: false,
+				saveScheduled: false,
+				saveInProgress: false
+			});
+		}, []);
+		let lastDraft;
+		const cache = /* @__PURE__ */ new Map();
+		function lazy(key, fn) {
+			if (lastDraft !== formState.get().draft) {
+				cache.clear();
+				lastDraft = formState.get().draft;
+			}
+			let value = cache.get(key);
+			if (!cache.has(key)) {
+				value = fn();
+				cache.set(key, value);
+			}
+			return value;
+		}
+		const context = {
+			formState,
+			options,
+			original,
+			getField() {
+				throw new Error("Not implemented");
+			},
+			getDraft() {
+				return formState.get().draft ?? original ?? options.defaultValue;
+			},
+			hasTriggeredValidations() {
+				return formState.get().hasTriggeredValidations;
+			},
+			saveScheduled() {
+				return formState.get().saveScheduled;
+			},
+			saveInProgress() {
+				return formState.get().saveInProgress;
+			},
+			hasChanges() {
+				return lazy("hasChanges", () => !deepEqual(this.getDraft(), original ?? options.defaultValue));
+			},
+			getErrors() {
+				return lazy("getErrors", () => getErrors(this.getDraft(), original, options.validations));
+			},
+			isValid() {
+				return lazy("isValid", () => this.getErrors().size === 0);
+			},
+			validate() {
+				formState.set("hasTriggeredValidations", true);
+				return this.isValid();
+			},
+			reset() {
+				formState.set("draft", void 0);
+				formState.set("hasTriggeredValidations", false);
+			}
+		};
+		context.getField = (path) => lazy(path, () => getField(context, path));
+		useFormAutosave(context);
+		return /* @__PURE__ */ jsx(this.context.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx(FormContainer, {
+				...formProps,
+				form: this
+			})
+		});
+	}
+	FormState({ selector, children }) {
+		const selectedState = this.useFormState(selector);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: children(selectedState) });
+	}
+	Field(props) {
+		return Reflect.apply(FormField, this, [{
+			component: "input",
+			...props
+		}]);
+	}
+	ForEach(props) {
+		return Reflect.apply(FormForEach, this, [props]);
+	}
+	withForm(Component$1, formProps) {
+		const { Form: Form$1 } = this;
+		return function FormWrapper(props) {
+			return /* @__PURE__ */ jsx(Form$1, {
+				...formProps,
+				children: /* @__PURE__ */ jsx(Component$1, { ...props })
+			});
+		};
+	}
+};
+function createForm(options) {
+	return new Form(options);
+}
+
+//#endregion
+//#region src/react/url/urlContext.tsx
+const UrlContext = createContext(void 0);
+function UrlProvider({ children,...props }) {
+	const location = "location" in props ? props.location : props.locationHook();
+	const navigate = "navigate" in props ? props.navigate : props.navigateHook();
+	return /* @__PURE__ */ jsx(UrlContext.Provider, {
+		value: {
+			location,
+			navigate
+		},
+		children
+	});
+}
+function useUrlContext() {
+	const context = useContext(UrlContext);
+	if (!context) throw new Error("useUrlContext must be used within a UrlContextProvider");
+	return context;
+}
+
+//#endregion
+//#region src/react/url/urlOptions.ts
+function createUrlOptions(options) {
+	return {
+		...options,
+		defaultValue: options.defaultValue
+	};
+}
+
+//#endregion
+//#region src/react/url/urlHelpers.ts
+function defaultDeserializer(value) {
+	if (value === void 0) return void 0;
+	try {
+		return fromExtendedJsonString(value);
+	} catch {
+		return void 0;
+	}
+}
+function defaultSerializer(value) {
+	return toExtendedJsonString(value);
+}
+function parseLocation(location) {
+	if (typeof location !== "string") location = `${location.pathname}${location.search}${location.hash}`;
+	return new URL(location, window.location.origin);
+}
+function createStorageKey(id, key) {
+	return `cross-state:url:${id}:${key}`;
+}
+
+//#endregion
+//#region src/react/url/useUrlParam.ts
+function useUrlParam(input) {
+	const { key, type = "hash", serialize = defaultSerializer, deserialize = defaultDeserializer, defaultValue, writeDefaultValue, onCommit, persist } = "options" in input ? input.options : input;
+	const { location, navigate } = useUrlContext();
+	const url = parseLocation(location);
+	const params = new URLSearchParams(url[type].slice(1));
+	const urlValue = params.get(key);
+	const storageKey = persist && createStorageKey(persist.id, key);
+	const storageValue = storageKey ? localStorage.getItem(storageKey) : null;
+	const value = useMemo(() => urlValue !== null ? deserialize(urlValue) : storageValue !== null ? deserialize(storageValue) : defaultValue, [urlValue]);
+	function commit(value$1) {
+		const serializedValue = serialize(value$1);
+		navigate((location$1) => {
+			const url$1 = parseLocation(location$1);
+			const params$1 = new URLSearchParams(url$1[type].slice(1));
+			if (!writeDefaultValue && serializedValue === serialize(defaultValue)) params$1.delete(key);
+			else params$1.set(key, serializedValue);
+			url$1[type] = params$1.toString();
+			return url$1.toString().replace(window.location.origin, "");
+		});
+		if (storageKey) localStorage.setItem(storageKey, serializedValue);
+		onCommit?.(value$1);
+	}
+	function update(update$1) {
+		if (update$1 instanceof Function) update$1 = update$1(value);
+		commit(update$1);
+	}
+	useEffect(() => {
+		if (urlValue !== null) commit(deserialize(urlValue));
+	}, [urlValue]);
+	useEffect(() => {
+		if (urlValue === null && storageValue !== null) commit(deserialize(storageValue));
+		else if (urlValue === null && writeDefaultValue) commit(defaultValue);
+	}, []);
+	return [value, update];
+}
+
+//#endregion
+//#region src/react/url/urlStore.ts
+var UrlStore = class {
+	constructor(options) {
+		this.options = options;
+	}
+	useStore() {
+		return useUrlParam(this)[0];
+	}
+	useProp() {
+		return useUrlParam(this);
+	}
+};
+function createUrlStore(options) {
+	return new UrlStore(createUrlOptions(options));
+}
+
+//#endregion
+//#region src/react/useDecoupledState.ts
+function useDecoupledState(value, onChange, options = {}) {
+	const [dirty, setDirty] = useState();
+	const ref = useRef({
+		onChange,
+		onCommit: options.onCommit
+	});
+	useEffect(() => {
+		ref.current = {
+			onChange,
+			onCommit: options.onCommit
+		};
+	}, [onChange]);
+	const update = useMemo(() => {
+		const { onChange: onChange$1, onCommit } = ref.current;
+		const update$1 = (value$1) => {
+			onChange$1(value$1);
+			setDirty(void 0);
+			onCommit?.(value$1);
+		};
+		let delayedUpdate;
+		if (options.debounce) delayedUpdate = debounce(update$1, options.debounce);
+		else if (options.throttle) delayedUpdate = throttle(update$1, options.throttle);
+		else delayedUpdate = (value$1) => startTransition(() => update$1(value$1));
+		return (value$1) => {
+			setDirty({ v: value$1 });
+			delayedUpdate(value$1);
+		};
+	}, [simpleHash([options.debounce, options.throttle])]);
+	return [dirty ? dirty.v : value, update];
+}
+
+//#endregion
+export { CustomInput, Form, LoadingBoundary, ScopeProvider, UrlContext, UrlProvider, cacheMethods, createForm, createUrlOptions, createUrlStore, scopeMethods, storeMethods, useCache, useDecoupledState, useLoadingBoundary, useProp, useScope, useStore, useUrlContext, useUrlParam };
+//# sourceMappingURL=index.js.map