@conform-to/react 1.0.0-pre.0 → 1.0.0-pre.2

package/context.d.ts

@@ -1,40 +1,54 @@
-import { type Constraint, type FieldName, type Form, type FormValue, type FormContext, type SubscriptionSubject } from '@conform-to/dom';
+import { type Constraint, type FormId, type FieldName, type Form, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
 import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
     [K in keyof T]: T[K];
 } & {};
-export type BaseMetadata<Schema> = {
+export type Primitive = string | number | boolean | Date | File | null | undefined;
+export type FieldProps<FieldSchema, Error = unknown, FormSchema extends Record<string, unknown> = Record<string, unknown>> = {
+    formId: FormId<FormSchema, Error>;
+    name: FieldName<FieldSchema>;
+} | {
+    formId: FieldSchema extends Record<string, unknown> ? FormId<FieldSchema, Error> : never;
+    name?: undefined;
+};
+export type Metadata<Schema, Error> = {
     key?: string;
     id: string;
     errorId: string;
     descriptionId: string;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
-    errors: string[] | undefined;
-    allErrors: Record<string, string[]>;
+    error: Error | undefined;
+    allError: Record<string, Error>;
     allValid: boolean;
     valid: boolean;
     dirty: boolean;
 };
-export type Field<Schema> = {
-    name: FieldName<Schema>;
-    formId: string;
-};
-export type FormMetadata<Schema extends Record<string, any>> = BaseMetadata<Schema> & {
+export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, Error = unknown> = Omit<Metadata<Schema, Error>, 'id'> & {
+    id: FormId<Schema, Error>;
+    context: Form<Schema, Error>;
+    status?: 'success' | 'error';
+    getFieldset: () => {
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
+    };
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<Form<Schema>['submit']>;
     onReset: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema> = BaseMetadata<Schema> & {
-    formId: string;
+export type FieldMetadata<Schema = unknown, Error = unknown, FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, Error> & {
+    formId: FormId<FormSchema, Error>;
     name: FieldName<Schema>;
     constraint?: Constraint;
+    getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error>;
+    };
+    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, Error>> : never;
 };
 export declare const Registry: import("react").Context<Record<string, Form>>;
-export declare function useFormStore(formId: string, context?: Form): Form;
-export declare function useFormContext(form: Form, subjectRef?: MutableRefObject<SubscriptionSubject>): FormContext;
+export declare function useRegistry<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: Form<Schema, Error, Value>): Form<Schema, Error, Value>;
+export declare function useFormState<Error>(form: Form<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
 export declare function FormProvider(props: {
-    context: Form;
+    context: Form<any, any, any>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
@@ -45,12 +59,7 @@ export declare function FormStateInput(props: {
     context: Form;
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
-export declare function getBaseMetadata<Schema>(formId: string, context: FormContext, options: {
-    name?: string;
-    subjectRef: MutableRefObject<SubscriptionSubject>;
-}): BaseMetadata<Schema>;
-export declare function getFieldMetadata<Schema>(formId: string, context: FormContext, options: {
-    name?: string;
-    key?: string | number;
-    subjectRef: MutableRefObject<SubscriptionSubject>;
-}): FieldMetadata<Schema>;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
+export declare function getMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema>): Metadata<Schema, Error>;
+export declare function getFieldMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, Error, FormSchema>;
+export declare function getFormMetadata<Schema extends Record<string, any>, Error>(formId: FormId<Schema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, form: Form<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;

package/context.js

@@ -8,7 +8,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Registry = /*#__PURE__*/react.createContext({});
-function useFormStore(formId, context) {
+function useRegistry(formId, context) {
   var registry = react.useContext(Registry);
   var form = context !== null && context !== void 0 ? context : registry[formId];
   if (!form) {
@@ -16,10 +16,9 @@ function useFormStore(formId, context) {
   }
   return form;
 }
-function useFormContext(form, subjectRef) {
+function useFormState(form, subjectRef) {
   var subscribe = react.useCallback(callback => form.subscribe(callback, () => subjectRef === null || subjectRef === void 0 ? void 0 : subjectRef.current), [form, subjectRef]);
-  var result = react.useSyncExternalStore(subscribe, form.getContext, form.getContext);
-  return result;
+  return react.useSyncExternalStore(subscribe, form.getState, form.getState);
 }
 function FormProvider(props) {
   var registry = react.useContext(Registry);
@@ -33,7 +32,7 @@ function FormProvider(props) {
 }
 function FormStateInput(props) {
   var _props$formId;
-  var form = useFormStore((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
+  var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     type: "hidden",
     name: dom.STATE,
@@ -50,85 +49,96 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function getBaseMetadata(formId, context, options) {
-  var _options$name;
-  var name = (_options$name = options.name) !== null && _options$name !== void 0 ? _options$name : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
-  var updateSubject = (subject, scope) => {
-    var _options$subjectRef$c, _options$subjectRef$c2;
-    options.subjectRef.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options.subjectRef.current[subject]), {}, {
-      [scope]: ((_options$subjectRef$c = (_options$subjectRef$c2 = options.subjectRef.current[subject]) === null || _options$subjectRef$c2 === void 0 ? void 0 : _options$subjectRef$c2[scope]) !== null && _options$subjectRef$c !== void 0 ? _options$subjectRef$c : []).concat(name)
+function updateSubjectRef(ref, name, subject, scope) {
+  if (subject === 'status') {
+    ref.current[subject] = true;
+  } else {
+    var _ref$current$subject$, _ref$current$subject;
+    ref.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, ref.current[subject]), {}, {
+      [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
     });
-  };
+  }
+}
+function getMetadata(formId, state, subjectRef) {
+  var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var id = name ? "".concat(formId, "-").concat(name) : formId;
   return new Proxy({
     id,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: context.initialValue[name],
-    value: context.value[name],
-    errors: context.error[name],
+    initialValue: state.initialValue[name],
+    value: state.value[name],
+    error: state.error[name],
     get key() {
-      return context.state.key[name];
+      return state.key[name];
     },
     get valid() {
-      return context.state.valid[name];
+      return state.valid[name];
     },
     get dirty() {
-      return context.state.dirty[name];
+      return state.dirty[name];
     },
     get allValid() {
-      var keys = Object.keys(context.error);
+      var keys = Object.keys(state.error);
       if (name === '') {
         return keys.length === 0;
       }
-      for (var key of Object.keys(context.error)) {
-        if (dom.isPrefix(key, name) && !context.state.valid[key]) {
+      for (var key of Object.keys(state.error)) {
+        if (dom.isPrefix(key, name) && !state.valid[key]) {
           return false;
         }
       }
       return true;
     },
-    get allErrors() {
+    get allError() {
       if (name === '') {
-        return context.error;
+        return state.error;
       }
       var result = {};
-      for (var [key, errors] of Object.entries(context.error)) {
+      for (var [key, error] of Object.entries(state.error)) {
         if (dom.isPrefix(key, name)) {
-          result[key] = errors;
+          result[key] = error;
         }
       }
       return result;
+    },
+    get getFieldset() {
+      return () => new Proxy({}, {
+        get(target, key, receiver) {
+          if (typeof key === 'string') {
+            return getFieldMetadata(formId, state, subjectRef, name, key);
+          }
+          return Reflect.get(target, key, receiver);
+        }
+      });
     }
   }, {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'errors':
+        case 'error':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubject(key === 'errors' ? 'error' : key, 'name');
+          updateSubjectRef(subjectRef, name, key, 'name');
           break;
-        case 'allErrors':
-          updateSubject('error', 'prefix');
+        case 'allError':
+          updateSubjectRef(subjectRef, name, 'error', 'prefix');
           break;
         case 'allValid':
-          updateSubject('valid', 'prefix');
+          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
           break;
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, context, options) {
-  var _options$name2, _options$name3;
-  var name = typeof options.key !== 'undefined' ? dom.formatPaths([...dom.getPaths((_options$name2 = options.name) !== null && _options$name2 !== void 0 ? _options$name2 : ''), options.key]) : (_options$name3 = options.name) !== null && _options$name3 !== void 0 ? _options$name3 : '';
-  var metadata = getBaseMetadata(formId, context, {
-    subjectRef: options.subjectRef,
-    name
-  });
+function getFieldMetadata(formId, state, subjectRef) {
+  var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var key = arguments.length > 4 ? arguments[4] : undefined;
+  var name = typeof key === 'undefined' ? prefix : dom.formatPaths([...dom.getPaths(prefix), key]);
+  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy(metadata, {
     get(target, key, receiver) {
       switch (key) {
@@ -137,7 +147,43 @@ function getFieldMetadata(formId, context, options) {
         case 'name':
           return name;
         case 'constraint':
-          return context.constraint[name];
+          return state.constraint[name];
+        case 'getFieldList':
+          {
+            return () => {
+              var _state$initialValue$n;
+              var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
+              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (!Array.isArray(initialValue)) {
+                throw new Error('The initial value at the given name is not a list');
+              }
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+            };
+          }
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+function getFormMetadata(formId, state, subjectRef, form, noValidate) {
+  var metadata = getMetadata(formId, state, subjectRef);
+  return new Proxy(metadata, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'context':
+          return form;
+        case 'status':
+          return state.submissionStatus;
+        case 'onSubmit':
+          return event => {
+            var submitEvent = event.nativeEvent;
+            form.submit(submitEvent);
+            if (submitEvent.defaultPrevented) {
+              event.preventDefault();
+            }
+          };
+        case 'noValidate':
+          return noValidate;
       }
       return Reflect.get(target, key, receiver);
     }
@@ -147,8 +193,10 @@ function getFieldMetadata(formId, context, options) {
 exports.FormProvider = FormProvider;
 exports.FormStateInput = FormStateInput;
 exports.Registry = Registry;
-exports.getBaseMetadata = getBaseMetadata;
 exports.getFieldMetadata = getFieldMetadata;
-exports.useFormContext = useFormContext;
-exports.useFormStore = useFormStore;
+exports.getFormMetadata = getFormMetadata;
+exports.getMetadata = getMetadata;
+exports.updateSubjectRef = updateSubjectRef;
+exports.useFormState = useFormState;
+exports.useRegistry = useRegistry;
 exports.useSubjectRef = useSubjectRef;

package/context.mjs

@@ -1,10 +1,10 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, isPrefix, formatPaths, getPaths } from '@conform-to/dom';
+import { STATE, formatPaths, getPaths, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var Registry = /*#__PURE__*/createContext({});
-function useFormStore(formId, context) {
+function useRegistry(formId, context) {
   var registry = useContext(Registry);
   var form = context !== null && context !== void 0 ? context : registry[formId];
   if (!form) {
@@ -12,10 +12,9 @@ function useFormStore(formId, context) {
   }
   return form;
 }
-function useFormContext(form, subjectRef) {
+function useFormState(form, subjectRef) {
   var subscribe = useCallback(callback => form.subscribe(callback, () => subjectRef === null || subjectRef === void 0 ? void 0 : subjectRef.current), [form, subjectRef]);
-  var result = useSyncExternalStore(subscribe, form.getContext, form.getContext);
-  return result;
+  return useSyncExternalStore(subscribe, form.getState, form.getState);
 }
 function FormProvider(props) {
   var registry = useContext(Registry);
@@ -29,7 +28,7 @@ function FormProvider(props) {
 }
 function FormStateInput(props) {
   var _props$formId;
-  var form = useFormStore((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
+  var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
   return /*#__PURE__*/jsx("input", {
     type: "hidden",
     name: STATE,
@@ -46,85 +45,96 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function getBaseMetadata(formId, context, options) {
-  var _options$name;
-  var name = (_options$name = options.name) !== null && _options$name !== void 0 ? _options$name : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
-  var updateSubject = (subject, scope) => {
-    var _options$subjectRef$c, _options$subjectRef$c2;
-    options.subjectRef.current[subject] = _objectSpread2(_objectSpread2({}, options.subjectRef.current[subject]), {}, {
-      [scope]: ((_options$subjectRef$c = (_options$subjectRef$c2 = options.subjectRef.current[subject]) === null || _options$subjectRef$c2 === void 0 ? void 0 : _options$subjectRef$c2[scope]) !== null && _options$subjectRef$c !== void 0 ? _options$subjectRef$c : []).concat(name)
+function updateSubjectRef(ref, name, subject, scope) {
+  if (subject === 'status') {
+    ref.current[subject] = true;
+  } else {
+    var _ref$current$subject$, _ref$current$subject;
+    ref.current[subject] = _objectSpread2(_objectSpread2({}, ref.current[subject]), {}, {
+      [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
     });
-  };
+  }
+}
+function getMetadata(formId, state, subjectRef) {
+  var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var id = name ? "".concat(formId, "-").concat(name) : formId;
   return new Proxy({
     id,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: context.initialValue[name],
-    value: context.value[name],
-    errors: context.error[name],
+    initialValue: state.initialValue[name],
+    value: state.value[name],
+    error: state.error[name],
     get key() {
-      return context.state.key[name];
+      return state.key[name];
     },
     get valid() {
-      return context.state.valid[name];
+      return state.valid[name];
     },
     get dirty() {
-      return context.state.dirty[name];
+      return state.dirty[name];
     },
     get allValid() {
-      var keys = Object.keys(context.error);
+      var keys = Object.keys(state.error);
       if (name === '') {
         return keys.length === 0;
       }
-      for (var key of Object.keys(context.error)) {
-        if (isPrefix(key, name) && !context.state.valid[key]) {
+      for (var key of Object.keys(state.error)) {
+        if (isPrefix(key, name) && !state.valid[key]) {
           return false;
         }
       }
       return true;
     },
-    get allErrors() {
+    get allError() {
       if (name === '') {
-        return context.error;
+        return state.error;
       }
       var result = {};
-      for (var [key, errors] of Object.entries(context.error)) {
+      for (var [key, error] of Object.entries(state.error)) {
         if (isPrefix(key, name)) {
-          result[key] = errors;
+          result[key] = error;
         }
       }
       return result;
+    },
+    get getFieldset() {
+      return () => new Proxy({}, {
+        get(target, key, receiver) {
+          if (typeof key === 'string') {
+            return getFieldMetadata(formId, state, subjectRef, name, key);
+          }
+          return Reflect.get(target, key, receiver);
+        }
+      });
     }
   }, {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'errors':
+        case 'error':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubject(key === 'errors' ? 'error' : key, 'name');
+          updateSubjectRef(subjectRef, name, key, 'name');
           break;
-        case 'allErrors':
-          updateSubject('error', 'prefix');
+        case 'allError':
+          updateSubjectRef(subjectRef, name, 'error', 'prefix');
           break;
         case 'allValid':
-          updateSubject('valid', 'prefix');
+          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
           break;
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, context, options) {
-  var _options$name2, _options$name3;
-  var name = typeof options.key !== 'undefined' ? formatPaths([...getPaths((_options$name2 = options.name) !== null && _options$name2 !== void 0 ? _options$name2 : ''), options.key]) : (_options$name3 = options.name) !== null && _options$name3 !== void 0 ? _options$name3 : '';
-  var metadata = getBaseMetadata(formId, context, {
-    subjectRef: options.subjectRef,
-    name
-  });
+function getFieldMetadata(formId, state, subjectRef) {
+  var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var key = arguments.length > 4 ? arguments[4] : undefined;
+  var name = typeof key === 'undefined' ? prefix : formatPaths([...getPaths(prefix), key]);
+  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy(metadata, {
     get(target, key, receiver) {
       switch (key) {
@@ -133,11 +143,47 @@ function getFieldMetadata(formId, context, options) {
         case 'name':
           return name;
         case 'constraint':
-          return context.constraint[name];
+          return state.constraint[name];
+        case 'getFieldList':
+          {
+            return () => {
+              var _state$initialValue$n;
+              var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
+              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (!Array.isArray(initialValue)) {
+                throw new Error('The initial value at the given name is not a list');
+              }
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+            };
+          }
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+function getFormMetadata(formId, state, subjectRef, form, noValidate) {
+  var metadata = getMetadata(formId, state, subjectRef);
+  return new Proxy(metadata, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'context':
+          return form;
+        case 'status':
+          return state.submissionStatus;
+        case 'onSubmit':
+          return event => {
+            var submitEvent = event.nativeEvent;
+            form.submit(submitEvent);
+            if (submitEvent.defaultPrevented) {
+              event.preventDefault();
+            }
+          };
+        case 'noValidate':
+          return noValidate;
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
 
-export { FormProvider, FormStateInput, Registry, getBaseMetadata, getFieldMetadata, useFormContext, useFormStore, useSubjectRef };
+export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormState, useRegistry, useSubjectRef };