@conform-to/react 1.1.4 → 1.1.5

package/context.d.ts

@@ -1,72 +1,200 @@
-import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
-import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
+import {
+	type Constraint,
+	type Combine,
+	type FormId,
+	type FieldName,
+	type FormContext as BaseFormContext,
+	type FormValue,
+	type FormState,
+	type Intent,
+	type SubscriptionScope,
+	type SubscriptionSubject,
+	type FormOptions as BaseFormOptions,
+} from '@conform-to/dom';
+import {
+	type FormEvent,
+	type ReactElement,
+	type ReactNode,
+	type MutableRefObject,
+} from 'react';
 export type Pretty<T> = {
-    [K in keyof T]: T[K];
+	[K in keyof T]: T[K];
 } & {};
-export type Primitive = string | number | bigint | boolean | Date | File | null | undefined;
-export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormError = string[]> = {
-    key: string | undefined;
-    id: string;
-    errorId: string;
-    descriptionId: string;
-    name: FieldName<Schema, FormSchema, FormError>;
-    initialValue: FormValue<Schema>;
-    value: FormValue<Schema>;
-    errors: FormError | undefined;
-    allErrors: Record<string, FormError>;
-    valid: boolean;
-    dirty: boolean;
+export type Primitive =
+	| string
+	| number
+	| bigint
+	| boolean
+	| Date
+	| File
+	| null
+	| undefined;
+export type Metadata<
+	Schema,
+	FormSchema extends Record<string, unknown>,
+	FormError = string[],
+> = {
+	key: string | undefined;
+	id: string;
+	errorId: string;
+	descriptionId: string;
+	name: FieldName<Schema, FormSchema, FormError>;
+	initialValue: FormValue<Schema>;
+	value: FormValue<Schema>;
+	errors: FormError | undefined;
+	allErrors: Record<string, FormError>;
+	valid: boolean;
+	dirty: boolean;
 };
-export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, Schema, FormError>, 'id'> & Pick<FormContext<Schema, FormError>, Intent['type']> & {
-    id: FormId<Schema, FormError>;
-    context: Wrapped<FormContext<Schema, FormError>>;
-    status?: 'success' | 'error';
-    getFieldset: () => Required<{
-        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], Schema, FormError>;
-    }>;
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-    noValidate: boolean;
-};
-type SubfieldMetadata<Schema, FormSchema extends Record<string, any>, FormError> = [Schema] extends [Primitive] ? {} : [Schema] extends [Array<infer Item> | null | undefined] ? {
-    getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
-} : [Schema] extends [Record<string, any> | null | undefined] ? {
-    getFieldset: () => Required<{
-        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], FormSchema, FormError>;
-    }>;
-} : {};
-export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
-    formId: FormId<FormSchema, FormError>;
-} & SubfieldMetadata<Schema, FormSchema, FormError>;
-export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
+export type FormMetadata<
+	Schema extends Record<string, unknown> = Record<string, unknown>,
+	FormError = string[],
+> = Omit<Metadata<Schema, Schema, FormError>, 'id'> &
+	Pick<FormContext<Schema, FormError>, Intent['type']> & {
+		id: FormId<Schema, FormError>;
+		context: Wrapped<FormContext<Schema, FormError>>;
+		status?: 'success' | 'error';
+		getFieldset: () => Required<{
+			[Key in keyof Combine<Schema>]: FieldMetadata<
+				Combine<Schema>[Key],
+				Schema,
+				FormError
+			>;
+		}>;
+		onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+		noValidate: boolean;
+	};
+type SubfieldMetadata<
+	Schema,
+	FormSchema extends Record<string, any>,
+	FormError,
+> = [Schema] extends [Primitive]
+	? {}
+	: [Schema] extends [Array<infer Item> | null | undefined]
+		? {
+				getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
+			}
+		: [Schema] extends [Record<string, any> | null | undefined]
+			? {
+					getFieldset: () => Required<{
+						[Key in keyof Combine<Schema>]: FieldMetadata<
+							Combine<Schema>[Key],
+							FormSchema,
+							FormError
+						>;
+					}>;
+				}
+			: {};
+export type FieldMetadata<
+	Schema = unknown,
+	FormSchema extends Record<string, any> = Record<string, unknown>,
+	FormError = string[],
+> = Metadata<Schema, FormSchema, FormError> &
+	Constraint & {
+		formId: FormId<FormSchema, FormError>;
+	} & SubfieldMetadata<Schema, FormSchema, FormError>;
+export declare const Form: import('react').Context<
+	FormContext<any, string[], any>[]
+>;
 declare const wrappedSymbol: unique symbol;
 export type Wrapped<Type> = {
-    [wrappedSymbol]: Type;
+	[wrappedSymbol]: Type;
 };
-export declare function getWrappedFormContext(context: Wrapped<FormContext>): FormContext;
-export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
-export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
+export declare function getWrappedFormContext(
+	context: Wrapped<FormContext>,
+): FormContext;
+export declare function useFormContext<
+	Schema extends Record<string, any>,
+	FormError,
+>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
+export declare function useFormState<FormError>(
+	form: FormContext<any, FormError>,
+	subjectRef?: MutableRefObject<SubscriptionSubject>,
+): FormState<FormError>;
 export declare function FormProvider(props: {
-    context: Wrapped<FormContext<any, any>>;
-    children: ReactNode;
+	context: Wrapped<FormContext<any, any>>;
+	children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
-    formId?: string;
+	formId?: string;
 }): React.ReactElement;
-export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
-export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: 'status' | 'formId'): void;
-export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>, scope: keyof SubscriptionScope, name: string): void;
-export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
-export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
-export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
-    /**
-     * A function to be called before the form is submitted.
-     */
-    onSubmit?: (event: FormEvent<HTMLFormElement>, context: ReturnType<BaseFormContext<Schema, FormError, FormValue>['submit']>) => void;
+export declare function useSubjectRef(
+	initialSubject?: SubscriptionSubject,
+): MutableRefObject<SubscriptionSubject>;
+export declare function updateSubjectRef(
+	ref: MutableRefObject<SubscriptionSubject>,
+	subject: 'status' | 'formId',
+): void;
+export declare function updateSubjectRef(
+	ref: MutableRefObject<SubscriptionSubject>,
+	subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>,
+	scope: keyof SubscriptionScope,
+	name: string,
+): void;
+export declare function getMetadata<
+	Schema,
+	FormError,
+	FormSchema extends Record<string, any>,
+>(
+	context: FormContext<FormSchema, FormError, any>,
+	subjectRef: MutableRefObject<SubscriptionSubject>,
+	stateSnapshot: FormState<FormError>,
+	name?: FieldName<Schema, FormSchema, FormError>,
+): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<
+	Schema,
+	FormSchema extends Record<string, any>,
+	FormError,
+>(
+	context: FormContext<FormSchema, FormError, any>,
+	subjectRef: MutableRefObject<SubscriptionSubject>,
+	stateSnapshot: FormState<FormError>,
+	prefix?: string,
+	key?: string | number,
+): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<
+	Schema extends Record<string, any>,
+	FormError = string[],
+	FormValue = Schema,
+>(
+	context: FormContext<Schema, FormError, FormValue>,
+	subjectRef: MutableRefObject<SubscriptionSubject>,
+	stateSnapshot: FormState<FormError>,
+	noValidate: boolean,
+): FormMetadata<Schema, FormError>;
+export type FormOptions<
+	Schema extends Record<string, any> = any,
+	FormError = string[],
+	FormValue = Schema,
+> = BaseFormOptions<Schema, FormError, FormValue> & {
+	/**
+	 * A function to be called before the form is submitted.
+	 */
+	onSubmit?: (
+		event: FormEvent<HTMLFormElement>,
+		context: ReturnType<
+			BaseFormContext<Schema, FormError, FormValue>['submit']
+		>,
+	) => void;
 };
-export type FormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = Omit<BaseFormContext<Schema, FormError, FormValue>, 'submit' | 'onUpdate'> & {
-    submit: (event: FormEvent<HTMLFormElement>) => void;
-    onUpdate: (options: Partial<FormOptions<Schema, FormError, FormValue>>) => void;
+export type FormContext<
+	Schema extends Record<string, any> = any,
+	FormError = string[],
+	FormValue = Schema,
+> = Omit<
+	BaseFormContext<Schema, FormError, FormValue>,
+	'submit' | 'onUpdate'
+> & {
+	submit: (event: FormEvent<HTMLFormElement>) => void;
+	onUpdate: (
+		options: Partial<FormOptions<Schema, FormError, FormValue>>,
+	) => void;
 };
-export declare function createFormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema>(options: FormOptions<Schema, FormError, FormValue>): FormContext<Schema, FormError, FormValue>;
+export declare function createFormContext<
+	Schema extends Record<string, any> = any,
+	FormError = string[],
+	FormValue = Schema,
+>(
+	options: FormOptions<Schema, FormError, FormValue>,
+): FormContext<Schema, FormError, FormValue>;
 export {};

package/context.js

@@ -7,7 +7,6 @@ var dom = require('@conform-to/dom');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/react.createContext([]);
 
 // To hide the FormContext type from the public API
@@ -220,10 +219,9 @@ function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
 }
 function createFormContext(options) {
   var {
-      onSubmit
-    } = options,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
-  var context = dom.unstable_createFormContext(rest);
+    onSubmit
+  } = options;
+  var context = dom.unstable_createFormContext(options);
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, context), {}, {
     submit(event) {
       var submitEvent = event.nativeEvent;

package/context.mjs

@@ -1,9 +1,8 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { STATE, formatPaths, getPaths, unstable_createFormContext, INTENT, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/createContext([]);
 
 // To hide the FormContext type from the public API
@@ -216,10 +215,9 @@ function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
 }
 function createFormContext(options) {
   var {
-      onSubmit
-    } = options,
-    rest = _objectWithoutProperties(options, _excluded);
-  var context = unstable_createFormContext(rest);
+    onSubmit
+  } = options;
+  var context = unstable_createFormContext(options);
   return _objectSpread2(_objectSpread2({}, context), {}, {
     submit(event) {
       var submitEvent = event.nativeEvent;

package/hooks.d.ts

@@ -1,34 +1,63 @@
 import { type FormId, type FieldName } from '@conform-to/dom';
 import { useEffect } from 'react';
-import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions } from './context';
+import {
+	type FormMetadata,
+	type FieldMetadata,
+	type Pretty,
+	type FormOptions,
+} from './context';
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
  */
 export declare const useSafeLayoutEffect: typeof useEffect;
-export declare function useFormId<Schema extends Record<string, unknown>, FormError>(preferredId?: string): FormId<Schema, FormError>;
+export declare function useFormId<
+	Schema extends Record<string, unknown>,
+	FormError,
+>(preferredId?: string): FormId<Schema, FormError>;
 export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
-export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
-    /**
-     * The form id. If not provided, a random id will be generated.
-     */
-    id?: string;
-    /**
-     * Enable constraint validation before the dom is hydated.
-     *
-     * Default to `true`.
-     */
-    defaultNoValidate?: boolean;
-}>): [
-    FormMetadata<Schema, FormError>,
-    ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
+export declare function useForm<
+	Schema extends Record<string, any>,
+	FormValue = Schema,
+	FormError = string[],
+>(
+	options: Pretty<
+		Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
+			/**
+			 * The form id. If not provided, a random id will be generated.
+			 */
+			id?: string;
+			/**
+			 * Enable constraint validation before the dom is hydated.
+			 *
+			 * Default to `true`.
+			 */
+			defaultNoValidate?: boolean;
+		}
+	>,
+): [
+	FormMetadata<Schema, FormError>,
+	ReturnType<FormMetadata<Schema, FormError>['getFieldset']>,
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId?: FormId<Schema, FormError>, options?: {
-    defaultNoValidate?: boolean;
-}): FormMetadata<Schema, FormError>;
-export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {
-    formId?: FormId<FormSchema, FormError>;
-}): [
-    FieldMetadata<FieldSchema, FormSchema, FormError>,
-    FormMetadata<FormSchema, FormError>
+export declare function useFormMetadata<
+	Schema extends Record<string, any>,
+	FormError = string[],
+>(
+	formId?: FormId<Schema, FormError>,
+	options?: {
+		defaultNoValidate?: boolean;
+	},
+): FormMetadata<Schema, FormError>;
+export declare function useField<
+	FieldSchema,
+	FormSchema extends Record<string, unknown> = Record<string, unknown>,
+	FormError = string[],
+>(
+	name: FieldName<FieldSchema, FormSchema, FormError>,
+	options?: {
+		formId?: FormId<FormSchema, FormError>;
+	},
+): [
+	FieldMetadata<FieldSchema, FormSchema, FormError>,
+	FormMetadata<FormSchema, FormError>,
 ];

package/index.d.ts

@@ -1,5 +1,29 @@
-export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
-export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
+export {
+	type Submission,
+	type SubmissionResult,
+	type DefaultValue,
+	type Intent,
+	type FormId,
+	type FieldName,
+	parse,
+} from '@conform-to/dom';
+export {
+	type FieldMetadata,
+	type FormMetadata,
+	FormProvider,
+	FormStateInput,
+} from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
-export { Control as unstable_Control, useControl as unstable_useControl, useInputControl, } from './integrations';
-export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';
+export {
+	Control as unstable_Control,
+	useControl as unstable_useControl,
+	useInputControl,
+} from './integrations';
+export {
+	getFormProps,
+	getFieldsetProps,
+	getInputProps,
+	getSelectProps,
+	getTextareaProps,
+	getCollectionProps,
+} from './helpers';

package/integrations.js

@@ -216,8 +216,21 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
+  var refCallback = element => {
+    var _meta$key;
+    register(element);
+    if (!element) {
+      return;
+    }
+    var prevKey = element.dataset.conform;
+    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
+    if (prevKey !== nextKey) {
+      element.dataset.conform = nextKey;
+      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
+    }
+  };
   return {
-    register,
+    register: refCallback,
     value,
     change: handleChange,
     focus,

package/integrations.mjs

@@ -212,8 +212,21 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
+  var refCallback = element => {
+    var _meta$key;
+    register(element);
+    if (!element) {
+      return;
+    }
+    var prevKey = element.dataset.conform;
+    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
+    if (prevKey !== nextKey) {
+      element.dataset.conform = nextKey;
+      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
+    }
+  };
   return {
-    register,
+    register: refCallback,
     value,
     change: handleChange,
     focus,

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",
@@ -30,7 +30,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.1.4"
+    "@conform-to/dom": "1.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",

package/rollup.config.js

@@ -1,102 +0,0 @@
-import path from 'node:path';
-import babel from '@rollup/plugin-babel';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import copy from 'rollup-plugin-copy';
-
-/** @returns {import("rollup").RollupOptions[]} */
-function configurePackage() {
-	let sourceDir = '.';
-	let outputDir = sourceDir;
-
-	/** @type {import("rollup").RollupOptions} */
-	let ESM = {
-		external(id) {
-			return !id.startsWith('.') && !path.isAbsolute(id);
-		},
-		input: `${sourceDir}/index.ts`,
-		output: {
-			dir: outputDir,
-			format: 'esm',
-			preserveModules: true,
-			entryFileNames: '[name].mjs',
-		},
-		plugins: [
-			babel({
-				babelrc: false,
-				configFile: false,
-				presets: [
-					[
-						'@babel/preset-env',
-						{
-							targets: {
-								node: '16',
-								esmodules: true,
-							},
-						},
-					],
-					['@babel/preset-react', { runtime: 'automatic' }],
-					'@babel/preset-typescript',
-				],
-				plugins: [],
-				babelHelpers: 'bundled',
-				exclude: /node_modules/,
-				extensions: ['.ts', '.tsx'],
-			}),
-			nodeResolve({
-				extensions: ['.ts', '.tsx'],
-			}),
-			copy({
-				targets: [
-					{ src: `../../README`, dest: sourceDir },
-					{ src: `../../LICENSE`, dest: sourceDir },
-				],
-			}),
-		],
-	};
-
-	/** @type {import("rollup").RollupOptions} */
-	let CJS = {
-		external(id) {
-			return !id.startsWith('.') && !path.isAbsolute(id);
-		},
-		input: `${sourceDir}/index.ts`,
-		output: {
-			dir: outputDir,
-			format: 'cjs',
-			preserveModules: true,
-			exports: 'auto',
-		},
-		plugins: [
-			babel({
-				babelrc: false,
-				configFile: false,
-				presets: [
-					[
-						'@babel/preset-env',
-						{
-							targets: {
-								node: '16',
-								esmodules: true,
-							},
-						},
-					],
-					['@babel/preset-react', { runtime: 'automatic' }],
-					'@babel/preset-typescript',
-				],
-				plugins: [],
-				babelHelpers: 'bundled',
-				exclude: /node_modules/,
-				extensions: ['.ts', '.tsx'],
-			}),
-			nodeResolve({
-				extensions: ['.ts', '.tsx'],
-			}),
-		],
-	};
-
-	return [ESM, CJS];
-}
-
-export default function rollup() {
-	return configurePackage();
-}