@octanejs/hook-form 0.1.0

package/src/useFormContext.ts

@@ -0,0 +1,47 @@
+// Vendored from react-hook-form@7.81.0 src/useFormContext.tsx (octane port).
+// Upstream's file holds both useFormContext and the FormProvider component;
+// the component half lives in FormProvider.tsrx here (octane components with
+// JSX are authored in .tsrx), and the shared contexts in useFormControlContext.
+import { useContext } from 'octane';
+
+import type { FieldValues, UseFormReturn } from './types';
+import { HookFormContext } from './useFormControlContext';
+
+/**
+ * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
+export const useFormContext = <
+	TFieldValues extends FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+>(): UseFormReturn<TFieldValues, TContext, TTransformedValues> =>
+	useContext(HookFormContext) as UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
+export { FormProvider } from './FormProvider.tsrx';

package/src/useFormControlContext.ts

@@ -0,0 +1,25 @@
+// Vendored from react-hook-form@7.81.0 src/useFormControlContext.ts (octane port).
+// octane: HookFormContext (module-local in upstream's useFormContext.tsx) also
+// lives here so FormProvider.tsrx can import it — this module is internal (not
+// star-exported from index.ts), so neither context leaks into the public API.
+import { createContext, useContext } from 'octane';
+
+import type { Control, FieldValues, UseFormReturn } from './types';
+
+export const HookFormContext = createContext<UseFormReturn | null>(null);
+
+/**
+ * Separate context for `control` to prevent unnecessary rerenders.
+ * Internal hooks that only need control use this instead of full form context.
+ */
+export const HookFormControlContext = createContext<Control | null>(null);
+
+/**
+ * @internal Internal hook to access only control from context.
+ */
+export const useFormControlContext = <
+	TFieldValues extends FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+>(): Control<TFieldValues, TContext, TTransformedValues> =>
+	useContext(HookFormControlContext) as Control<TFieldValues, TContext, TTransformedValues>;

package/src/useFormState.ts

@@ -0,0 +1,86 @@
+// Vendored from react-hook-form@7.81.0 src/useFormState.ts (octane port).
+import { useState, useRef, useEffect, useMemo } from 'octane';
+
+import getProxyFormState from './logic/getProxyFormState';
+import type { FieldValues, FormState, UseFormStateProps, UseFormStateReturn } from './types';
+import { useFormControlContext } from './useFormControlContext';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+/**
+ * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+ *
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, control } = useForm({
+ *     defaultValues: {
+ *     firstName: "firstName"
+ *   }});
+ *   const { dirtyFields } = useFormState({
+ *     control
+ *   });
+ *   const onSubmit = (data) => console.log(data);
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register("firstName")} placeholder="First Name" />
+ *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export function useFormState<
+	TFieldValues extends FieldValues = FieldValues,
+	TTransformedValues = TFieldValues,
+>(props?: UseFormStateProps<TFieldValues, TTransformedValues>): UseFormStateReturn<TFieldValues> {
+	const formControl = useFormControlContext<TFieldValues, any, TTransformedValues>();
+	const { control = formControl, disabled, name, exact } = props || {};
+	const [formState, updateFormState] = useState<FormState<TFieldValues>>(() => ({
+		...control._formState,
+		defaultValues: control._defaultValues as FormState<TFieldValues>['defaultValues'],
+	}));
+	const _localProxyFormState = useRef({
+		isDirty: false,
+		isLoading: false,
+		dirtyFields: false,
+		touchedFields: false,
+		validatingFields: false,
+		isValidating: false,
+		isValid: false,
+		errors: false,
+	});
+
+	useIsomorphicLayoutEffect(
+		() =>
+			control._subscribe({
+				name,
+				formState: _localProxyFormState.current,
+				exact,
+				callback: (formState) => {
+					!disabled &&
+						updateFormState({
+							...control._formState,
+							...formState,
+							defaultValues: control._defaultValues as FormState<TFieldValues>['defaultValues'],
+						});
+				},
+			}),
+		[name, disabled, exact],
+	);
+
+	useEffect(() => {
+		_localProxyFormState.current.isValid && control._setValid(true);
+	}, [control]);
+
+	return useMemo(
+		() => getProxyFormState(formState, control, _localProxyFormState.current, false),
+		[formState, control],
+	);
+}

package/src/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+// Vendored from react-hook-form@7.81.0 src/useIsomorphicLayoutEffect.ts (octane port).
+import { useEffect, useLayoutEffect } from 'octane';
+
+import isWeb from './utils/isWeb';
+
+export const useIsomorphicLayoutEffect = isWeb ? useLayoutEffect : useEffect;

package/src/useWatch.ts

@@ -0,0 +1,356 @@
+// Vendored from react-hook-form@7.81.0 src/useWatch.ts (octane port).
+import { useState, useRef, useEffect, useMemo, useCallback } from 'octane';
+
+import generateWatchOutput from './logic/generateWatchOutput';
+import deepEqual from './utils/deepEqual';
+import type {
+	Control,
+	DeepPartialSkipArrayKey,
+	FieldPath,
+	FieldPathValue,
+	FieldPathValues,
+	FieldValues,
+	InternalFieldName,
+	UseWatchProps,
+} from './types';
+import { useFormControlContext } from './useFormControlContext';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+/**
+ * Subscribe to the entire form values change and re-render at the hook level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   defaultValue: {
+ *     name: "data"
+ *   },
+ *   exact: false,
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TTransformedValues = TFieldValues,
+>(props: {
+	name?: undefined;
+	defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute?: undefined;
+}): DeepPartialSkipArrayKey<TFieldValues>;
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   name: "fieldA",
+ *   defaultValue: "default value",
+ *   exact: false,
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+>(props: {
+	name: TFieldName;
+	defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute?: undefined;
+}): FieldPathValue<TFieldValues, TFieldName>;
+/**
+ * Custom hook to subscribe to field change and compute function to produce state update
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   compute: (formValues) => formValues.fieldA
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TTransformedValues = TFieldValues,
+	TComputeValue = unknown,
+>(props: {
+	name?: undefined;
+	defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute: (formValues: TFieldValues) => TComputeValue;
+}): TComputeValue;
+/**
+ * Custom hook to subscribe to field change and compute function to produce state update
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   name: "fieldA",
+ *   defaultValue: "default value",
+ *   exact: false,
+ *   compute: (fieldValue) => fieldValue === "data" ? fieldValue : null,
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+	TComputeValue = unknown,
+>(props: {
+	name: TFieldName;
+	defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute: (fieldValue: FieldPathValue<TFieldValues, TFieldName>) => TComputeValue;
+}): TComputeValue;
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   name: ["fieldA", "fieldB"],
+ *   defaultValue: {
+ *     fieldA: "data",
+ *     fieldB: "data"
+ *   },
+ *   exact: false,
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+	TTransformedValues = TFieldValues,
+>(props: {
+	name: readonly [...TFieldNames];
+	defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute?: undefined;
+}): FieldPathValues<TFieldValues, TFieldNames>;
+/**
+ * Custom hook to subscribe to field change and compute function to produce state update
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch)
+ *
+ * @param props - defaultValue, disable subscription and match exact name.
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   control,
+ *   name: ["fieldA", "fieldB"],
+ *   defaultValue: {
+ *     fieldA: "data",
+ *     fieldB: 0
+ *   },
+ *   compute: ([fieldAValue, fieldBValue]) => fieldB === 2 ? fieldA : null,
+ *   exact: false,
+ * })
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+	TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+	TTransformedValues = TFieldValues,
+	TComputeValue = unknown,
+>(props: {
+	name: readonly [...TFieldNames];
+	defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+	compute: (fieldValue: FieldPathValues<TFieldValues, TFieldNames>) => TComputeValue;
+}): TComputeValue;
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider
+ * const values = useWatch()
+ * ```
+ */
+export function useWatch<
+	TFieldValues extends FieldValues = FieldValues,
+>(): DeepPartialSkipArrayKey<TFieldValues>;
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   name: "fieldName"
+ *   control,
+ * })
+ * ```
+ */
+export function useWatch<TFieldValues extends FieldValues>(props?: UseWatchProps<TFieldValues>) {
+	const formControl = useFormControlContext<TFieldValues>();
+	const { control = formControl, name, defaultValue, disabled, exact, compute } = props || {};
+	const _defaultValue = useRef(defaultValue);
+	const _compute = useRef(compute);
+	const _computeFormValues = useRef<undefined | unknown>(undefined);
+
+	const _prevControl = useRef(control);
+	const _prevName = useRef(name);
+
+	_compute.current = compute;
+
+	const [value, updateValue] = useState(() => {
+		const defaultValue = control._getWatch(
+			name as InternalFieldName,
+			_defaultValue.current as DeepPartialSkipArrayKey<TFieldValues>,
+		);
+
+		return _compute.current ? _compute.current(defaultValue) : defaultValue;
+	});
+
+	const getCurrentOutput = useCallback(
+		(values?: TFieldValues) => {
+			const formValues = generateWatchOutput(
+				name as InternalFieldName | InternalFieldName[],
+				control._names,
+				values || control._formValues,
+				false,
+				_defaultValue.current,
+			);
+
+			return _compute.current ? _compute.current(formValues) : formValues;
+		},
+		[control._formValues, control._names, name],
+	);
+
+	const refreshValue = useCallback(
+		(values?: TFieldValues) => {
+			if (!disabled) {
+				const formValues = generateWatchOutput(
+					name as InternalFieldName | InternalFieldName[],
+					control._names,
+					values || control._formValues,
+					false,
+					_defaultValue.current,
+				);
+
+				if (_compute.current) {
+					const computedFormValues = _compute.current(formValues);
+
+					if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+						updateValue(computedFormValues);
+						_computeFormValues.current = computedFormValues;
+					}
+				} else {
+					updateValue(formValues);
+				}
+			}
+		},
+		[control._formValues, control._names, disabled, name],
+	);
+
+	useIsomorphicLayoutEffect(() => {
+		if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+			_prevControl.current = control;
+			_prevName.current = name;
+			refreshValue();
+		}
+
+		return control._subscribe({
+			name,
+			formState: {
+				values: true,
+			},
+			exact,
+			callback: (formState) => {
+				refreshValue(formState.values);
+			},
+		});
+	}, [control, exact, name, refreshValue]);
+
+	useEffect(() => control._removeUnmounted());
+
+	// If name or control changed for this render, synchronously reflect the
+	// latest value so callers (like useController) see the correct value
+	// immediately on the same render.
+
+	// Optimize: Check control reference first before expensive deepEqual
+	const controlChanged = _prevControl.current !== control;
+	const prevName = _prevName.current;
+
+	// Cache the computed output to avoid duplicate calls within the same render
+	// We include shouldReturnImmediate in deps to ensure proper recomputation
+	const computedOutput = useMemo(() => {
+		if (disabled) {
+			return null;
+		}
+
+		const nameChanged = !controlChanged && !deepEqual(prevName, name);
+		const shouldReturnImmediate = controlChanged || nameChanged;
+
+		return shouldReturnImmediate ? getCurrentOutput() : null;
+	}, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+
+	return computedOutput !== null ? computedOutput : value;
+}

package/src/utils/append.ts

@@ -0,0 +1,4 @@
+// Vendored from react-hook-form@7.81.0 src/utils/append.ts (octane port).
+import convertToArrayPayload from './convertToArrayPayload';
+
+export default <T>(data: T[], value: T | T[]): T[] => [...data, ...convertToArrayPayload(value)];

package/src/utils/cloneObject.ts

@@ -0,0 +1,32 @@
+// Vendored from react-hook-form@7.81.0 src/utils/cloneObject.ts (octane port).
+import isObject from './isObject';
+import isPlainObject from './isPlainObject';
+import isWeb from './isWeb';
+
+export default function cloneObject<T>(data: T): T {
+	if (data instanceof Date) {
+		return new Date(data) as any;
+	}
+
+	const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
+
+	if (isWeb && (data instanceof Blob || isFileListInstance)) {
+		return data;
+	}
+
+	const isArray = Array.isArray(data);
+
+	if (!isArray && !(isObject(data) && isPlainObject(data))) {
+		return data;
+	}
+
+	const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+
+	for (const key in data) {
+		if (Object.prototype.hasOwnProperty.call(data, key)) {
+			copy[key] = cloneObject(data[key]);
+		}
+	}
+
+	return copy;
+}

package/src/utils/compact.ts

@@ -0,0 +1,2 @@
+// Vendored from react-hook-form@7.81.0 src/utils/compact.ts (octane port).
+export default <TValue>(value: TValue[]) => (Array.isArray(value) ? value.filter(Boolean) : []);

package/src/utils/convertToArrayPayload.ts

@@ -0,0 +1,2 @@
+// Vendored from react-hook-form@7.81.0 src/utils/convertToArrayPayload.ts (octane port).
+export default <T>(value: T) => (Array.isArray(value) ? value : [value]);

package/src/utils/createSubject.ts

@@ -0,0 +1,48 @@
+// Vendored from react-hook-form@7.81.0 src/utils/createSubject.ts (octane port).
+import type { Noop } from '../types';
+
+export type Observer<T> = {
+	next: (value: T) => void;
+};
+
+export type Subscription = {
+	unsubscribe: Noop;
+};
+
+export type Subject<T> = {
+	readonly observers: Observer<T>[];
+	subscribe: (value: Observer<T>) => Subscription;
+	unsubscribe: Noop;
+} & Observer<T>;
+
+export default <T>(): Subject<T> => {
+	let _observers: Observer<T>[] = [];
+
+	const next = (value: T) => {
+		for (const observer of _observers) {
+			observer.next && observer.next(value);
+		}
+	};
+
+	const subscribe = (observer: Observer<T>): Subscription => {
+		_observers.push(observer);
+		return {
+			unsubscribe: () => {
+				_observers = _observers.filter((o) => o !== observer);
+			},
+		};
+	};
+
+	const unsubscribe = () => {
+		_observers = [];
+	};
+
+	return {
+		get observers() {
+			return _observers;
+		},
+		next,
+		subscribe,
+		unsubscribe,
+	};
+};

package/src/utils/deepEqual.ts

@@ -0,0 +1,81 @@
+// Vendored from react-hook-form@7.81.0 src/utils/deepEqual.ts (octane port).
+import isDateObject from './isDateObject';
+import isObject from './isObject';
+import isPlainObject from './isPlainObject';
+import isPrimitive from './isPrimitive';
+
+const isEmptyObjectWithCustomPrototype = (object: object, keys: string[]) =>
+	keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
+
+export default function deepEqual(
+	object1: any,
+	object2: any,
+	visited = new WeakMap<object, WeakSet<object>>(),
+) {
+	if (object1 === object2) {
+		return true;
+	}
+
+	if (isPrimitive(object1) || isPrimitive(object2)) {
+		return Object.is(object1, object2);
+	}
+
+	if (isDateObject(object1) && isDateObject(object2)) {
+		return Object.is(object1.getTime(), object2.getTime());
+	}
+
+	const keys1 = Object.keys(object1);
+	const keys2 = Object.keys(object2);
+
+	if (keys1.length !== keys2.length) {
+		return false;
+	}
+
+	if (
+		isEmptyObjectWithCustomPrototype(object1, keys1) ||
+		isEmptyObjectWithCustomPrototype(object2, keys2)
+	) {
+		return Object.is(object1, object2);
+	}
+
+	if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
+		return false;
+	}
+
+	const visitedPairs = visited.get(object1);
+
+	if (visitedPairs && visitedPairs.has(object2)) {
+		return true;
+	}
+
+	if (visitedPairs) {
+		visitedPairs.add(object2);
+	} else {
+		const ws = new WeakSet();
+		ws.add(object2);
+		visited.set(object1, ws);
+	}
+
+	for (const key of keys1) {
+		const val1 = object1[key];
+
+		if (!(key in object2)) {
+			return false;
+		}
+
+		if (key !== 'ref') {
+			const val2 = object2[key];
+
+			if (
+				(isDateObject(val1) && isDateObject(val2)) ||
+				((isObject(val1) || Array.isArray(val1)) && (isObject(val2) || Array.isArray(val2)))
+					? !deepEqual(val1, val2, visited)
+					: !Object.is(val1, val2)
+			) {
+				return false;
+			}
+		}
+	}
+
+	return true;
+}