@octanejs/hook-form 0.1.0

package/src/types/utils.ts

@@ -0,0 +1,125 @@
+// Vendored from react-hook-form@7.81.0 src/types/utils.ts (octane port).
+import type { NestedValue } from './form';
+
+/*
+Projects that React Hook Form installed don't include the DOM library need these interfaces to compile.
+React Native applications is no DOM available. The JavaScript runtime is ES6/ES2015 only.
+These definitions allow such projects to compile with only --lib ES6.
+
+Warning: all of these interfaces are empty.
+If you want type definitions for various properties, you need to add `--lib DOM` (via command line or tsconfig.json).
+*/
+
+export type Noop = () => void;
+
+interface File extends Blob {
+	readonly lastModified: number;
+	readonly name: string;
+}
+
+interface FileList {
+	readonly length: number;
+	item(index: number): File | null;
+	[index: number]: File;
+}
+
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+
+export type BrowserNativeObject = Date | FileList | File;
+
+export type EmptyObject = { [K in string | number]: never };
+
+export type NonUndefined<T> = T extends undefined ? never : T;
+
+export type LiteralUnion<T extends U, U extends Primitive> = T | (U & { _?: never });
+
+export type ExtractObjects<T> = T extends infer U ? (U extends object ? U : never) : never;
+
+type IsPrimitiveLike<T> = T extends Primitive ? true : T extends Primitive & object ? true : false;
+
+export type DeepPartial<T> =
+	IsPrimitiveLike<T> extends true
+		? T
+		: T extends BrowserNativeObject | NestedValue
+			? T
+			: {
+					[K in keyof T]?: ExtractObjects<T[K]> extends never ? T[K] : DeepPartial<T[K]>;
+				};
+
+export type DeepPartialSkipArrayKey<T> =
+	IsPrimitiveLike<T> extends true
+		? T
+		: T extends BrowserNativeObject | NestedValue
+			? T
+			: T extends ReadonlyArray<any>
+				? { [K in keyof T]: DeepPartialSkipArrayKey<T[K]> }
+				: { [K in keyof T]?: DeepPartialSkipArrayKey<T[K]> };
+
+/**
+ * Checks whether the type is any
+ * See {@link https://stackoverflow.com/a/49928360/3406963}
+ * @typeParam T - type which may be any
+ * ```
+ * IsAny<any> = true
+ * IsAny<string> = false
+ * ```
+ */
+export type IsAny<T> = 0 extends 1 & T ? true : false;
+
+/**
+ * Checks whether the type is never
+ * @typeParam T - type which may be never
+ * ```
+ * IsNever<never> = true
+ * IsNever<string> = false
+ * ```
+ */
+export type IsNever<T> = [T] extends [never] ? true : false;
+
+/**
+ * Checks whether T1 can be exactly (mutually) assigned to T2
+ * @typeParam T1 - type to check
+ * @typeParam T2 - type to check against
+ * ```
+ * IsEqual<string, string> = true
+ * IsEqual<'foo', 'foo'> = true
+ * IsEqual<string, number> = false
+ * IsEqual<string, number> = false
+ * IsEqual<string, 'foo'> = false
+ * IsEqual<'foo', string> = false
+ * IsEqual<'foo' | 'bar', 'foo'> = boolean // 'foo' is assignable, but 'bar' is not (true | false) -> boolean
+ * ```
+ */
+export type IsEqual<T1, T2> = T1 extends T2
+	? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2
+		? true
+		: false
+	: false;
+
+export type DeepMap<T, TValue> =
+	IsAny<T> extends true
+		? any
+		: T extends BrowserNativeObject | NestedValue
+			? TValue
+			: T extends ReadonlyArray<infer U>
+				? Array<DeepMap<NonUndefined<U>, TValue> | undefined>
+				: T extends object
+					? { [K in keyof T]: DeepMap<NonUndefined<T[K]>, TValue> }
+					: TValue;
+
+export type IsFlatObject<T extends object> =
+	Extract<Exclude<T[keyof T], NestedValue | Date | FileList>, any[] | object> extends never
+		? true
+		: false;
+
+export type Merge<A, B> = {
+	[K in keyof A | keyof B]?: K extends keyof A & keyof B
+		? [A[K], B[K]] extends [object, object]
+			? Merge<A[K], B[K]>
+			: B[K]
+		: K extends keyof A
+			? A[K]
+			: K extends keyof B
+				? B[K]
+				: never;
+};

package/src/types/validator.ts

@@ -0,0 +1,94 @@
+// Vendored from react-hook-form@7.81.0 src/types/validator.ts (octane port).
+import type { EVENTS, INPUT_VALIDATION_RULES } from '../constants';
+
+import type { Message } from './errors';
+import type { FieldValues } from './fields';
+import type { FormState } from './form';
+import type { FieldPath, FieldPathValue } from './path';
+
+export type ValidationValue = boolean | number | string | RegExp;
+
+export type ValidationRule<TValidationValue extends ValidationValue = ValidationValue> =
+	| TValidationValue
+	| ValidationValueMessage<TValidationValue>;
+
+export type ValidationValueMessage<TValidationValue extends ValidationValue = ValidationValue> = {
+	value: TValidationValue;
+	message: Message;
+};
+
+export type ValidateResult = Message | Message[] | boolean | undefined;
+
+export type FormValidateResult<T> =
+	| Partial<
+			Record<
+				keyof T,
+				{
+					message: Message | Message[] | boolean | undefined;
+					type: string;
+				}
+			>
+	  >
+	| string
+	| boolean;
+
+export type Validate<TFieldValue, TFormValues> = (
+	value: TFieldValue,
+	formValues: TFormValues,
+) => ValidateResult | Promise<ValidateResult>;
+
+export type ValidateFormEventType = (typeof EVENTS)[keyof typeof EVENTS];
+
+export type ValidateForm<
+	TFormValues extends FieldValues,
+	TFieldName extends FieldPath<TFormValues> = FieldPath<TFormValues>,
+> = (props: {
+	formValues: TFormValues;
+	formState: FormState<TFormValues>;
+	eventType?: ValidateFormEventType;
+	name?: TFieldName | TFieldName[];
+}) => FormValidateResult<TFormValues> | Promise<FormValidateResult<TFormValues>>;
+
+export type RegisterOptions<
+	TFieldValues extends FieldValues = FieldValues,
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Partial<{
+	required: Message | ValidationRule<boolean>;
+	min: ValidationRule<number | string>;
+	max: ValidationRule<number | string>;
+	maxLength: ValidationRule<number>;
+	minLength: ValidationRule<number>;
+	validate:
+		| Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>
+		| Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
+	value: FieldPathValue<TFieldValues, TFieldName>;
+	setValueAs: (value: any) => any;
+	shouldUnregister?: boolean;
+	onChange?: (event: any) => void;
+	onBlur?: (event: any) => void;
+	disabled: boolean;
+	deps: FieldPath<TFieldValues> | FieldPath<TFieldValues>[];
+}> &
+	(
+		| {
+				pattern?: ValidationRule<RegExp>;
+				valueAsNumber?: false;
+				valueAsDate?: false;
+		  }
+		| {
+				pattern?: undefined;
+				valueAsNumber?: false;
+				valueAsDate?: true;
+		  }
+		| {
+				pattern?: undefined;
+				valueAsNumber?: true;
+				valueAsDate?: false;
+		  }
+	);
+
+export type InputValidationRules = typeof INPUT_VALIDATION_RULES;
+
+export type MaxType = InputValidationRules['max'] | InputValidationRules['maxLength'];
+
+export type MinType = InputValidationRules['min'] | InputValidationRules['minLength'];

package/src/types/watch.ts

@@ -0,0 +1,66 @@
+// Vendored from react-hook-form@7.81.0 src/types/watch.ts.
+// octane: upstream's ReactNode becomes `unknown` — any octane renderable.
+type ReactNode = unknown;
+
+import type { FieldValues } from './fields';
+import type { Control } from './form';
+import type { FieldPath, FieldPathValue, FieldPathValues } from './path';
+import type { DeepPartialSkipArrayKey } from './utils';
+
+export type UseWatchProps<TFieldValues extends FieldValues = FieldValues> = {
+	defaultValue?: unknown;
+	disabled?: boolean;
+	name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
+	control?: Control<TFieldValues>;
+	exact?: boolean;
+	compute?: (formValues: TFieldValues) => TFieldValues;
+};
+
+export type WatchDefaultValue<TFieldName, TFieldValues extends FieldValues = FieldValues> =
+	TFieldName extends FieldPath<TFieldValues>
+		? FieldPathValue<TFieldValues, TFieldName>
+		: DeepPartialSkipArrayKey<TFieldValues>;
+
+export type WatchName<TFieldValues extends FieldValues> =
+	| FieldPath<TFieldValues>
+	| FieldPath<TFieldValues>[]
+	| readonly FieldPath<TFieldValues>[]
+	| undefined;
+
+export type WatchValue<
+	TFieldName,
+	TFieldValues extends FieldValues = FieldValues,
+> = TFieldName extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[]
+	? FieldPathValues<TFieldValues, TFieldName>
+	: TFieldName extends FieldPath<TFieldValues>
+		? FieldPathValue<TFieldValues, TFieldName>
+		: TFieldValues;
+
+export type WatchRenderValue<
+	TFieldName,
+	TFieldValues extends FieldValues,
+	TComputeValue,
+> = TComputeValue extends undefined ? WatchValue<TFieldName, TFieldValues> : TComputeValue;
+
+export type WatchProps<
+	TFieldName extends WatchName<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+	TComputeValue = undefined,
+> = {
+	control?: Control<TFieldValues, TContext, TTransformedValues>;
+	/**
+	 * @deprecated This prop will be renamed to `name` in the next major release.
+	 * Use `name` instead.
+	 */
+	names?: TFieldName;
+	name?: TFieldName;
+	disabled?: boolean;
+	exact?: boolean;
+	defaultValue?: WatchDefaultValue<TFieldName, TFieldValues>;
+	compute?: (value: WatchValue<TFieldName, TFieldValues>) => TComputeValue;
+	render: (
+		value: WatchRenderValue<TFieldName, TFieldValues, TComputeValue>,
+	) => ReactNode | ReactNode[];
+};

package/src/useController.ts

@@ -0,0 +1,268 @@
+// Vendored from react-hook-form@7.81.0 src/useController.ts (octane port).
+import { useRef, useEffect, useMemo, useCallback } from 'octane';
+
+import getEventValue from './logic/getEventValue';
+import isNameInFieldArray from './logic/isNameInFieldArray';
+import cloneObject from './utils/cloneObject';
+import get from './utils/get';
+import isBoolean from './utils/isBoolean';
+import isFunction from './utils/isFunction';
+import isUndefined from './utils/isUndefined';
+import set from './utils/set';
+import { EVENTS } from './constants';
+import type {
+	ControllerFieldState,
+	Field,
+	FieldPath,
+	FieldPathValue,
+	FieldValues,
+	InternalFieldName,
+	UseControllerProps,
+	UseControllerReturn,
+} from './types';
+import { useFormControlContext } from './useFormControlContext';
+import { useFormState } from './useFormState';
+import { useWatch } from './useWatch';
+
+/**
+ * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns field properties, field and form state. {@link UseControllerReturn}
+ *
+ * @example
+ * ```tsx
+ * function Input(props) {
+ *   const { field, fieldState, formState } = useController(props);
+ *   return (
+ *     <div>
+ *       <input {...field} placeholder={props.name} />
+ *       <p>{fieldState.isTouched && "Touched"}</p>
+ *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useController<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+>(
+	props: UseControllerProps<TFieldValues, TName, TTransformedValues>,
+): UseControllerReturn<TFieldValues, TName> {
+	const formControl = useFormControlContext<TFieldValues, any, TTransformedValues>();
+	const {
+		name,
+		disabled,
+		control = formControl,
+		shouldUnregister,
+		defaultValue,
+		exact = true,
+	} = props;
+	const isArrayField = isNameInFieldArray(control._names.array, name);
+
+	const defaultValueMemo = useMemo(
+		() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)),
+		[control, name, defaultValue],
+	);
+
+	const value = useWatch({
+		control,
+		name,
+		defaultValue: defaultValueMemo,
+		exact,
+	}) as FieldPathValue<TFieldValues, TName>;
+
+	const formState = useFormState({
+		control,
+		name,
+		exact,
+	});
+
+	const _props = useRef(props);
+	const _proxyRef = useRef<any>(null);
+
+	const _registerProps = useRef(
+		control.register(name, {
+			...props.rules,
+			value,
+			...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+		}),
+	);
+
+	_props.current = props;
+
+	const fieldState = useMemo(
+		() =>
+			Object.defineProperties(
+				{},
+				{
+					invalid: {
+						enumerable: true,
+						get: () => !!get(formState.errors, name),
+					},
+					isDirty: {
+						enumerable: true,
+						get: () => !!get(formState.dirtyFields, name),
+					},
+					isTouched: {
+						enumerable: true,
+						get: () => !!get(formState.touchedFields, name),
+					},
+					isValidating: {
+						enumerable: true,
+						get: () => !!get(formState.validatingFields, name),
+					},
+					error: {
+						enumerable: true,
+						get: () => get(formState.errors, name),
+					},
+				},
+			) as ControllerFieldState,
+		[formState, name],
+	);
+
+	// octane: upstream names this `onChange` — exposed as `onInput` because
+	// octane events are native (input = per-keystroke). Still accepts an event
+	// OR a raw value (getEventValue unwraps), and programmatic calls keep the
+	// upstream 'change' event type.
+	const onInput = useCallback(
+		(event: any) => {
+			const value = getEventValue(event);
+
+			if (!get(control._fields, name)) {
+				_registerProps.current = control.register(name, {
+					..._props.current.rules,
+					value,
+				});
+			}
+
+			return _registerProps.current.onInput({
+				target: {
+					value: getEventValue(event),
+					name: name as InternalFieldName,
+				},
+				type: EVENTS.CHANGE,
+			});
+		},
+		[name, control],
+	);
+
+	const onBlur = useCallback(
+		() =>
+			_registerProps.current.onBlur({
+				target: {
+					value: get(control._formValues, name),
+					name: name as InternalFieldName,
+				},
+				type: EVENTS.BLUR,
+			}),
+		[name, control._formValues],
+	);
+
+	const ref = useCallback(
+		(elm: any) => {
+			if (elm) {
+				_proxyRef.current = {
+					focus: () => isFunction(elm.focus) && elm.focus(),
+					select: () => isFunction(elm.select) && elm.select(),
+					setCustomValidity: (message: string) =>
+						isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+					reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
+				};
+			}
+
+			const field = get(control._fields, name);
+
+			if (field && field._f && elm) {
+				field._f.ref = _proxyRef.current;
+			}
+		},
+		[control._fields, name],
+	);
+
+	const field = useMemo(
+		() => ({
+			name,
+			value,
+			...(isBoolean(disabled) || formState.disabled
+				? { disabled: formState.disabled || disabled }
+				: {}),
+			onInput,
+			onBlur,
+			ref,
+		}),
+		[name, disabled, formState.disabled, onInput, onBlur, ref, value],
+	);
+
+	useEffect(() => {
+		const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+
+		control.register(name, {
+			..._props.current.rules,
+			...(isBoolean(_props.current.disabled) ? { disabled: _props.current.disabled } : {}),
+		});
+
+		const updateMounted = (name: InternalFieldName, value: boolean) => {
+			const field: Field = get(control._fields, name);
+
+			if (field && field._f) {
+				field._f.mount = value;
+			}
+		};
+
+		updateMounted(name, true);
+
+		if (_shouldUnregisterField) {
+			const value = cloneObject(
+				get(
+					shouldUnregister
+						? control._defaultValues
+						: control._options.values || control._defaultValues,
+					name,
+					get(control._options.defaultValues, name, _props.current.defaultValue),
+				),
+			);
+			set(control._defaultValues, name, value);
+			if (isUndefined(get(control._formValues, name))) {
+				set(control._formValues, name, value);
+			}
+		}
+
+		!isArrayField && control.register(name);
+
+		if (_proxyRef.current) {
+			const field: Field = get(control._fields, name);
+			if (field && field._f) {
+				field._f.ref = _proxyRef.current;
+			}
+		}
+
+		return () => {
+			(isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField)
+				? control.unregister(name)
+				: updateMounted(name, false);
+		};
+	}, [name, control, isArrayField, shouldUnregister]);
+
+	useEffect(() => {
+		control._setDisabledField({
+			disabled,
+			name,
+		});
+	}, [disabled, name, control]);
+
+	return useMemo(
+		() => ({
+			field,
+			formState,
+			fieldState,
+		}),
+		[field, formState, fieldState],
+	);
+}