@octanejs/hook-form 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @octanejs/hook-form
+
+React Hook Form for the [octane](https://github.com/octanejs/octane) renderer —
+the complete react-hook-form 7.81.0 source ported onto octane's hooks:
+performant, flexible forms with native-event validation, field arrays, schema
+resolvers, `Controller`/`FormProvider`, and SSR.
+
+```tsx
+import { useForm } from '@octanejs/hook-form';
+
+export function App() @{
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm({ mode: 'onChange' });
+
+	<form onSubmit={handleSubmit((data) => console.log(data))}>
+		<input {...register('email', { required: 'required' })} />
+		@if (errors.email) {
+			<span role="alert">{errors.email.message as string}</span>
+		}
+		<button>{'Submit'}</button>
+	</form>
+}
+```
+
+## The one API difference: `onInput`
+
+Octane has **native, delegated events** — no synthetic event layer. The
+per-keystroke text event on the platform is `input` (native `change` fires on
+blur/commit), so the handler upstream calls `onChange` is exposed as
+**`onInput`**:
+
+- `register(name)` returns `{ name, ref, onInput, onBlur }` (upstream:
+  `onChange`). `{...register('x')}` spreads work unchanged.
+- `useController`'s `field` is `{ value, name, ref, onInput, onBlur, … }`.
+  `field.onInput` doubles as the programmatic setter (accepts an event or a
+  raw value), exactly like upstream's `field.onChange`.
+- `mode: 'onChange'` / `reValidateMode: 'onChange'` option VALUES are
+  unchanged — validation still runs per keystroke (driven by native `input`).
+- Register OPTIONS keep their upstream names: `register('x', { onChange, onBlur })`
+  callbacks are invoked as before.
+
+Everything else — validation modes, `formState` proxy subscriptions,
+`useFieldArray`, `useWatch`/`Watch`, `FormStateSubscribe`, `reset`/`setValue`/
+`trigger` semantics, SSR via `octane/server` — matches upstream behavior; the
+port runs react-hook-form's own ~1,200-test suite (see
+`packages/hook-form/tests/`) plus differential tests asserting byte-identical
+DOM against the real react-hook-form.
+
+## License
+
+MIT — contains source derived from
+[react-hook-form](https://github.com/react-hook-form/react-hook-form)
+(MIT, © Beier (Bill) Luo), adapted for octane.
+
+## Status
+
+Current scope, known divergences, and verification status are tracked in the
+generated [bindings status table](../../docs/bindings-status.md), sourced from
+this package's [`status.json`](./status.json).

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@octanejs/hook-form",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "description": "React Hook Form for the octane renderer — the full react-hook-form 7.81.0 source ported onto octane's hooks: performant, flexible forms with native-event validation (onInput), field arrays, and schema resolvers.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/hook-form"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "octane": "0.1.3"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "7.81.0",
+    "vitest": "^4.1.9",
+    "zod": "^3.25.76",
+    "@octanejs/testing-library": "0.1.0"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/FormProvider.tsrx

@@ -0,0 +1,76 @@
+// Vendored from react-hook-form@7.81.0 src/useFormContext.tsx (octane port) —
+// the FormProvider component half of upstream's file. Propagates the useForm
+// methods to all children via context; the memoized value keeps context
+// identity stable across parent re-renders (same deps as upstream).
+import { useMemo } from 'octane';
+import { HookFormContext, HookFormControlContext } from './useFormControlContext.ts';
+
+export function FormProvider(props) @{
+	const {
+		children,
+		watch,
+		getValues,
+		getFieldState,
+		setError,
+		clearErrors,
+		setValue,
+		setValues,
+		trigger,
+		formState,
+		resetField,
+		reset,
+		handleSubmit,
+		unregister,
+		control,
+		register,
+		setFocus,
+		subscribe,
+	} = props;
+
+	const memoizedValue = useMemo(
+		() => ({
+			watch,
+			getValues,
+			getFieldState,
+			setError,
+			clearErrors,
+			setValue,
+			setValues,
+			trigger,
+			formState,
+			resetField,
+			reset,
+			handleSubmit,
+			unregister,
+			control,
+			register,
+			setFocus,
+			subscribe,
+		}),
+		[
+			clearErrors,
+			control,
+			formState,
+			getFieldState,
+			getValues,
+			handleSubmit,
+			register,
+			reset,
+			resetField,
+			setError,
+			setFocus,
+			setValue,
+			setValues,
+			subscribe,
+			trigger,
+			unregister,
+			watch,
+		],
+	);
+
+	<HookFormContext.Provider value={memoizedValue}>
+		<HookFormControlContext.Provider
+			value={memoizedValue.control}
+		>{children}</HookFormControlContext.Provider>
+	</HookFormContext.Provider>
+}

package/src/FormProvider.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { FieldValues, FormProviderProps } from './types';
+
+export declare const FormProvider: <
+	TFieldValues extends FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+>(
+	props: FormProviderProps<TFieldValues, TContext, TTransformedValues>,
+) => unknown;

package/src/constants.ts

@@ -0,0 +1,31 @@
+// Vendored from react-hook-form@7.81.0 src/constants.ts (octane port).
+export const EVENTS = {
+	BLUR: 'blur',
+	FOCUS_OUT: 'focusout',
+	CHANGE: 'change',
+	SUBMIT: 'submit',
+	TRIGGER: 'trigger',
+	VALID: 'valid',
+} as const;
+
+export const VALIDATION_MODE = {
+	onBlur: 'onBlur',
+	onChange: 'onChange',
+	onSubmit: 'onSubmit',
+	onTouched: 'onTouched',
+	all: 'all',
+} as const;
+
+export const INPUT_VALIDATION_RULES = {
+	max: 'max',
+	min: 'min',
+	maxLength: 'maxLength',
+	minLength: 'minLength',
+	pattern: 'pattern',
+	required: 'required',
+	validate: 'validate',
+} as const;
+
+export const ROOT_ERROR_TYPE = 'root';
+
+export const PROTOTYPE_KEYWORDS = ['__proto__', 'constructor', 'prototype'];

package/src/controller.tsrx

@@ -0,0 +1,8 @@
+// Vendored from react-hook-form@7.81.0 src/controller.tsx (octane port).
+// Component based on `useController` to work with controlled components.
+// Authored as .tsrx (full compile) — a component in binding src must have its
+// custom-hook call slot-wrapped by the compiler; the plain-.ts slotting pass
+// only slots BASE octane hooks (see compiler/slot-hooks.js).
+import { useController } from './useController.ts';
+
+export const Controller = (props) => props.render(useController(props));

package/src/controller.tsrx.d.ts

@@ -0,0 +1,52 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { ControllerProps, FieldPath, FieldValues } from './types';
+
+/**
+ * Component based on `useController` hook to work with controlled component.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns provide field handler functions, field and form state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: ""
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <Controller
+ *         control={control}
+ *         name="test"
+ *         render={({ field: { onInput, onBlur, value, ref }, formState, fieldState }) => (
+ *           <>
+ *             <input
+ *               onInput={onInput} // send value to hook form
+ *               onBlur={onBlur} // notify when input is touched
+ *               value={value} // return updated value
+ *               ref={ref} // set ref for focus management
+ *             />
+ *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+ *           </>
+ *         )}
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export declare const Controller: <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+>(
+	props: ControllerProps<TFieldValues, TName, TTransformedValues>,
+) => unknown;

package/src/form.tsrx

@@ -0,0 +1,119 @@
+// Vendored from react-hook-form@7.81.0 src/form.tsx (octane port).
+// Form component to manage submission — renders a real <form> (or the headless
+// render prop) and posts via fetch. Same submission/error semantics as
+// upstream; the submit handler receives the NATIVE submit event.
+import { useState, useCallback, useEffect } from 'octane';
+import { flatten } from './utils/flatten.ts';
+import { useFormContext } from './useFormContext.ts';
+
+const POST_REQUEST = 'post';
+
+export function Form(props) {
+	const methods = useFormContext();
+	const [mounted, setMounted] = useState(false);
+	const {
+		control = methods.control,
+		onSubmit,
+		children,
+		action,
+		method = POST_REQUEST,
+		headers,
+		encType,
+		onError,
+		render,
+		onSuccess,
+		validateStatus,
+		...rest
+	} = props;
+
+	const submit = useCallback(async (event) => {
+		let hasError = false;
+		let type = '';
+
+		await control.handleSubmit(async (data) => {
+			const formData = new FormData();
+			let formDataJson = '';
+
+			try {
+				formDataJson = JSON.stringify(data);
+			} catch {
+			}
+
+			const flattenFormValues = flatten(data);
+
+			for (const key in flattenFormValues) {
+				formData.append(key, flattenFormValues[key]);
+			}
+
+			if (onSubmit) {
+				await onSubmit({
+					data,
+					event,
+					method,
+					formData,
+					formDataJson,
+				});
+			}
+
+			if (action) {
+				try {
+					const shouldStringifySubmissionData = [
+						headers && headers['Content-Type'],
+						encType,
+					].some((value) => value && value.includes('json'));
+
+					const response = await fetch(String(action), {
+						method,
+						headers: {
+							...headers,
+							...(encType && encType !== 'multipart/form-data' ? { 'Content-Type': encType } : {}),
+						},
+						body: shouldStringifySubmissionData ? formDataJson : formData,
+					});
+
+					if (
+						response &&
+							(validateStatus
+								? !validateStatus(response.status)
+								: response.status < 200 || response.status >= 300)
+					) {
+						hasError = true;
+						onError && onError({ response });
+						type = String(response.status);
+					} else {
+						onSuccess && onSuccess({ response });
+					}
+				} catch (error) {
+					hasError = true;
+					onError && onError({ error });
+				}
+			}
+		})(event);
+
+		if (hasError && control) {
+			control._subjects.state.next({
+				isSubmitSuccessful: false,
+			});
+			control.setError('root.server', {
+				type,
+			});
+		}
+	}, [control, onSubmit, method, action, headers, encType, validateStatus, onError, onSuccess]);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (render) {
+		return render({ submit });
+	}
+
+	return <form
+		noValidate={mounted}
+		action={action}
+		method={method}
+		encType={encType}
+		onSubmit={submit}
+		{...rest}
+	>{children}</form>;
+}

package/src/form.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { FieldValues, FormProps } from './types';
+
+export declare function Form<TFieldValues extends FieldValues, TTransformedValues = TFieldValues>(
+	props: FormProps<TFieldValues, TTransformedValues>,
+): unknown;

package/src/formStateSubscribe.tsrx

@@ -0,0 +1,10 @@
+// Vendored from react-hook-form@7.81.0 src/formStateSubscribe.tsx (octane port).
+// FormStateSubscribe component — render-prop subscription to form state.
+// Authored as .tsrx (full compile) so the useFormState call is slot-wrapped
+// (see controller.tsrx note).
+import { useFormState } from './useFormState.ts';
+
+export const FormStateSubscribe = (props) => {
+	const { control, disabled, exact, name, render } = props;
+	return render(useFormState({ control, name, disabled, exact }));
+};

package/src/formStateSubscribe.tsrx.d.ts

@@ -0,0 +1,16 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { FieldValues, UseFormStateProps, UseFormStateReturn } from './types';
+
+export type FormStateSubscribeProps<
+	TFieldValues extends FieldValues,
+	TTransformedValues = TFieldValues,
+> = UseFormStateProps<TFieldValues, TTransformedValues> & {
+	render: (values: UseFormStateReturn<TFieldValues>) => unknown;
+};
+
+export declare const FormStateSubscribe: <
+	TFieldValues extends FieldValues,
+	TTransformedValues = TFieldValues,
+>(
+	props: FormStateSubscribeProps<TFieldValues, TTransformedValues>,
+) => unknown;

package/src/index.ts

@@ -0,0 +1,19 @@
+// Vendored from react-hook-form@7.81.0 src/index.ts (octane port).
+// Same public surface as upstream (pinned by tests/conformance/exports.test.ts);
+// upstream's `./form` and the FormProvider half of `./useFormContext` are .tsrx
+// components here. index.react-server.ts is not ported (octane has no server
+// components).
+export { Controller } from './controller.tsrx';
+export { Form } from './form.tsrx';
+export { FormStateSubscribe } from './formStateSubscribe.tsrx';
+export type { FormStateSubscribeProps } from './formStateSubscribe.tsrx';
+export * from './logic';
+export * from './types';
+export * from './useController';
+export * from './useFieldArray';
+export * from './useForm';
+export * from './useFormContext';
+export * from './useFormState';
+export * from './useWatch';
+export * from './utils';
+export { Watch } from './watch.tsrx';

package/src/logic/appendErrors.ts

@@ -0,0 +1,19 @@
+// Vendored from react-hook-form@7.81.0 src/logic/appendErrors.ts (octane port).
+import type { InternalFieldErrors, InternalFieldName, ValidateResult } from '../types';
+
+export default (
+	name: InternalFieldName,
+	validateAllFieldCriteria: boolean,
+	errors: InternalFieldErrors,
+	type: string,
+	message: ValidateResult,
+) =>
+	validateAllFieldCriteria
+		? {
+				...errors[name],
+				types: {
+					...(errors[name] && errors[name]!.types ? errors[name]!.types : {}),
+					[type]: message || true,
+				},
+			}
+		: {};