fixup! feat: auto fields management

Author: edmundhung

packages/conform-dom/form.ts

@@ -238,7 +238,8 @@ export type FormContext<
 	onInput(event: Event): void;
 	onBlur(event: Event): void;
 	onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
-	observe(stateSnapshot: FormState<FormError>): () => void;
+	updateFormElement(state: FormState<FormError>): void;
+	observe(): () => void;
 	subscribe(
 		callback: () => void,
 		getSubject?: () => SubscriptionSubject | undefined,
@@ -1119,7 +1120,7 @@ export function createFormContext<
 		}
 	}
 
-	function observe(stateSnapshot: FormState<FormError>) {
+	function observe() {
 		const observer = new MutationObserver((mutations) => {
 			const form = getFormElement();
 
@@ -1155,7 +1156,6 @@ export function createFormContext<
 			attributes: true,
 			attributeFilter: ['form', 'name'],
 		});
-		updateFormElement(stateSnapshot);
 
 		return () => {
 			observer.disconnect();
@@ -1177,6 +1177,7 @@ export function createFormContext<
 		insert: createFormControl('insert'),
 		remove: createFormControl('remove'),
 		reorder: createFormControl('reorder'),
+		updateFormElement,
 		subscribe,
 		getState,
 		getSerializedState,

packages/conform-react/hooks.ts

@@ -74,11 +74,13 @@ export function useForm<
 	);
 
 	useSafeLayoutEffect(() => {
+		const disconnect = context.observe();
 		document.addEventListener('input', context.onInput);
 		document.addEventListener('focusout', context.onBlur);
 		document.addEventListener('reset', context.onReset);
 
 		return () => {
+			disconnect();
 			document.removeEventListener('input', context.onInput);
 			document.removeEventListener('focusout', context.onBlur);
 			document.removeEventListener('reset', context.onReset);
@@ -101,11 +103,7 @@ export function useForm<
 	const form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 
 	useEffect(() => {
-		const disconnect = context.observe(stateSnapshot);
-
-		return () => {
-			disconnect();
-		};
+		context.updateFormElement(stateSnapshot);
 	}, [context, stateSnapshot]);
 
 	return [form, form.getFieldset()];