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

package/README.md

@@ -350,7 +350,7 @@ function Example() {
         form={title.form}
         defaultValue={title.defaultValue}
         autoFocus={title.initialError ? true : undefined}
-        requried={title.required}
+        required={title.required}
         minLength={title.minLength}
         maxLength={title.maxLength}
         min={title.min}

package/context.d.ts

@@ -0,0 +1,56 @@
+import { type Constraint, type FieldName, type Form, type FormValue, type FormContext, type SubscriptionSubject } 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> = {
+    key?: string;
+    id: string;
+    errorId: string;
+    descriptionId: string;
+    initialValue: FormValue<Schema>;
+    value: FormValue<Schema>;
+    errors: string[] | undefined;
+    allErrors: Record<string, string[]>;
+    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> & {
+    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;
+    name: FieldName<Schema>;
+    constraint?: Constraint;
+};
+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 FormProvider(props: {
+    context: Form;
+    children: ReactNode;
+}): ReactElement;
+export declare function FormStateInput(props: {
+    formId: string;
+    context?: undefined;
+} | {
+    formId?: undefined;
+    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>;

package/context.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var dom = require('@conform-to/dom');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Registry = /*#__PURE__*/react.createContext({});
+function useFormStore(formId, context) {
+  var registry = react.useContext(Registry);
+  var form = context !== null && context !== void 0 ? context : registry[formId];
+  if (!form) {
+    throw new Error('Form context is not available');
+  }
+  return form;
+}
+function useFormContext(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;
+}
+function FormProvider(props) {
+  var registry = react.useContext(Registry);
+  var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
+    [props.context.id]: props.context
+  }), [registry, props.context]);
+  return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
+    value: value,
+    children: props.children
+  });
+}
+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);
+  return /*#__PURE__*/jsxRuntime.jsx("input", {
+    type: "hidden",
+    name: dom.STATE,
+    value: form.getSerializedState(),
+    form: props.formId
+  });
+}
+function useSubjectRef() {
+  var initialSubject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var subjectRef = react.useRef(initialSubject);
+
+  // Reset the subject everytime the component is rerendered
+  // This let us subscribe to data used in the last render only
+  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)
+    });
+  };
+  return new Proxy({
+    id,
+    errorId: "".concat(id, "-error"),
+    descriptionId: "".concat(id, "-description"),
+    initialValue: context.initialValue[name],
+    value: context.value[name],
+    errors: context.error[name],
+    get key() {
+      return context.state.key[name];
+    },
+    get valid() {
+      return context.state.valid[name];
+    },
+    get dirty() {
+      return context.state.dirty[name];
+    },
+    get allValid() {
+      var keys = Object.keys(context.error);
+      if (name === '') {
+        return keys.length === 0;
+      }
+      for (var key of Object.keys(context.error)) {
+        if (dom.isPrefix(key, name) && !context.state.valid[key]) {
+          return false;
+        }
+      }
+      return true;
+    },
+    get allErrors() {
+      if (name === '') {
+        return context.error;
+      }
+      var result = {};
+      for (var [key, errors] of Object.entries(context.error)) {
+        if (dom.isPrefix(key, name)) {
+          result[key] = errors;
+        }
+      }
+      return result;
+    }
+  }, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'key':
+        case 'errors':
+        case 'initialValue':
+        case 'value':
+        case 'valid':
+        case 'dirty':
+          updateSubject(key === 'errors' ? 'error' : key, 'name');
+          break;
+        case 'allErrors':
+          updateSubject('error', 'prefix');
+          break;
+        case 'allValid':
+          updateSubject('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
+  });
+  return new Proxy(metadata, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'formId':
+          return formId;
+        case 'name':
+          return name;
+        case 'constraint':
+          return context.constraint[name];
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+
+exports.FormProvider = FormProvider;
+exports.FormStateInput = FormStateInput;
+exports.Registry = Registry;
+exports.getBaseMetadata = getBaseMetadata;
+exports.getFieldMetadata = getFieldMetadata;
+exports.useFormContext = useFormContext;
+exports.useFormStore = useFormStore;
+exports.useSubjectRef = useSubjectRef;

package/context.mjs

@@ -0,0 +1,143 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { STATE, isPrefix, formatPaths, getPaths } 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) {
+  var registry = useContext(Registry);
+  var form = context !== null && context !== void 0 ? context : registry[formId];
+  if (!form) {
+    throw new Error('Form context is not available');
+  }
+  return form;
+}
+function useFormContext(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;
+}
+function FormProvider(props) {
+  var registry = useContext(Registry);
+  var value = useMemo(() => _objectSpread2(_objectSpread2({}, registry), {}, {
+    [props.context.id]: props.context
+  }), [registry, props.context]);
+  return /*#__PURE__*/jsx(Registry.Provider, {
+    value: value,
+    children: props.children
+  });
+}
+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);
+  return /*#__PURE__*/jsx("input", {
+    type: "hidden",
+    name: STATE,
+    value: form.getSerializedState(),
+    form: props.formId
+  });
+}
+function useSubjectRef() {
+  var initialSubject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var subjectRef = useRef(initialSubject);
+
+  // Reset the subject everytime the component is rerendered
+  // This let us subscribe to data used in the last render only
+  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)
+    });
+  };
+  return new Proxy({
+    id,
+    errorId: "".concat(id, "-error"),
+    descriptionId: "".concat(id, "-description"),
+    initialValue: context.initialValue[name],
+    value: context.value[name],
+    errors: context.error[name],
+    get key() {
+      return context.state.key[name];
+    },
+    get valid() {
+      return context.state.valid[name];
+    },
+    get dirty() {
+      return context.state.dirty[name];
+    },
+    get allValid() {
+      var keys = Object.keys(context.error);
+      if (name === '') {
+        return keys.length === 0;
+      }
+      for (var key of Object.keys(context.error)) {
+        if (isPrefix(key, name) && !context.state.valid[key]) {
+          return false;
+        }
+      }
+      return true;
+    },
+    get allErrors() {
+      if (name === '') {
+        return context.error;
+      }
+      var result = {};
+      for (var [key, errors] of Object.entries(context.error)) {
+        if (isPrefix(key, name)) {
+          result[key] = errors;
+        }
+      }
+      return result;
+    }
+  }, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'key':
+        case 'errors':
+        case 'initialValue':
+        case 'value':
+        case 'valid':
+        case 'dirty':
+          updateSubject(key === 'errors' ? 'error' : key, 'name');
+          break;
+        case 'allErrors':
+          updateSubject('error', 'prefix');
+          break;
+        case 'allValid':
+          updateSubject('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
+  });
+  return new Proxy(metadata, {
+    get(target, key, receiver) {
+      switch (key) {
+        case 'formId':
+          return formId;
+        case 'name':
+          return name;
+        case 'constraint':
+          return context.constraint[name];
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+
+export { FormProvider, FormStateInput, Registry, getBaseMetadata, getFieldMetadata, useFormContext, useFormStore, useSubjectRef };

package/helpers.d.ts

@@ -1,42 +1,40 @@
-import { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from '@conform-to/dom';
-import type { FieldConfig, Primitive } from './hooks.js';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
-interface FormElementProps {
-    id?: string;
+import type { FormMetadata, FieldMetadata, Pretty } from './context';
+type FormControlProps = {
+    id: string;
     name: string;
-    form?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
-}
-interface FormControlProps extends FormElementProps {
+    form: string;
     required?: boolean;
     autoFocus?: boolean;
     tabIndex?: number;
     style?: CSSProperties;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
     'aria-hidden'?: boolean;
-}
-interface InputProps<Schema> extends FormControlProps {
-    type?: HTMLInputTypeAttribute;
+};
+type InputProps = Pretty<FormControlProps & {
+    type?: Exclude<HTMLInputTypeAttribute, 'submit' | 'reset' | 'button'>;
     minLength?: number;
     maxLength?: number;
-    min?: Schema extends number ? number : string | number;
-    max?: Schema extends number ? number : string | number;
-    step?: Schema extends number ? number : string | number;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
     pattern?: string;
     multiple?: boolean;
     value?: string;
     defaultChecked?: boolean;
     defaultValue?: string;
-}
-interface SelectProps extends FormControlProps {
+}>;
+type SelectProps = Pretty<FormControlProps & {
     defaultValue?: string | number | readonly string[] | undefined;
     multiple?: boolean;
-}
-interface TextareaProps extends FormControlProps {
+}>;
+type TextareaProps = Pretty<FormControlProps & {
     minLength?: number;
     maxLength?: number;
     defaultValue?: string;
-}
+}>;
+type Primitive = string | number | boolean | Date | null | undefined;
 type BaseOptions = {
     ariaAttributes?: true;
     description?: boolean;
@@ -46,6 +44,10 @@ type BaseOptions = {
 type ControlOptions = BaseOptions & {
     hidden?: boolean;
 };
+type FormOptions<Schema extends Record<string, any>> = BaseOptions & {
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>, context: ReturnType<FormMetadata<Schema>['onSubmit']>) => void;
+    onReset?: (event: React.FormEvent<HTMLFormElement>) => void;
+};
 type InputOptions = ControlOptions & ({
     type: 'checkbox' | 'radio';
     value?: string;
@@ -58,15 +60,25 @@ export declare const hiddenProps: {
     tabIndex: number;
     'aria-hidden': boolean;
 };
-export declare function input<Schema extends Primitive | unknown>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
-export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: InputOptions & {
+export declare function input<Schema extends Primitive | unknown>(field: FieldMetadata<Schema>, options?: InputOptions): InputProps;
+export declare function input<Schema extends File | File[]>(field: FieldMetadata<Schema>, options: InputOptions & {
     type: 'file';
-}): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): SelectProps;
-export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): TextareaProps;
-export declare function fieldset<Schema extends Record<string, unknown> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
-export declare function collection<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(config: FieldConfig<Schema>, options: BaseOptions & {
+}): InputProps;
+export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(metadata: FieldMetadata<Schema>, options?: ControlOptions): SelectProps;
+export declare function textarea<Schema extends Primitive | undefined | unknown>(metadata: FieldMetadata<Schema>, options?: ControlOptions): TextareaProps;
+export declare function form<Schema extends Record<string, any>>(metadata: FormMetadata<Schema>, options?: FormOptions<Schema>): {
+    id: string;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    onReset: (event: import("react").FormEvent<HTMLFormElement>) => void;
+    noValidate: boolean;
+};
+export declare function fieldset<Schema extends Record<string, any> | undefined | unknown>(metadata: FieldMetadata<Schema>, options?: BaseOptions): {
+    id: string;
+    name: import("@conform-to/dom").FieldName<Schema>;
+    form: string;
+};
+export declare function collection<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(metadata: FieldMetadata<Schema>, options: BaseOptions & {
     type: 'checkbox' | 'radio';
     options: string[];
-}): Array<InputProps<Schema> & Pick<Required<InputProps<Schema>>, 'type' | 'value'>>;
-export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };
+}): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
+export {};

package/helpers.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 
 /**
  * Cleanup `undefined` from the dervied props
@@ -17,31 +16,25 @@ function cleanup(props) {
   }
   return props;
 }
-function getFormElementProps(config) {
-  var _options$ariaAttribut, _config$error, _config$error2;
+function getAriaAttributes(metadata) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var hasAriaAttributes = (_options$ariaAttribut = options.ariaAttributes) !== null && _options$ariaAttribut !== void 0 ? _options$ariaAttribut : true;
+  if (typeof options.ariaAttributes !== 'undefined' && !options.ariaAttributes) {
+    return {};
+  }
   return cleanup({
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    'aria-invalid': hasAriaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
-    'aria-describedby': hasAriaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options.ariaAttributes !== false && options.description ? config.descriptionId : undefined].reduce((result, id) => {
-      if (!result) {
-        return id;
-      }
-      if (!id) {
-        return result;
-      }
-      return "".concat(result, " ").concat(id);
-    }) : undefined
+    'aria-invalid': !metadata.valid || undefined,
+    'aria-describedby': metadata.valid ? options.description ? metadata.descriptionId : undefined : "".concat(metadata.errorId, " ").concat(options.description ? metadata.descriptionId : '').trim()
   });
 }
-function getFormControlProps(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormElementProps(config, options)), {}, {
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+function getFormControlProps(metadata, options) {
+  var _metadata$constraint;
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    id: metadata.id,
+    name: metadata.name,
+    form: metadata.formId,
+    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined,
+    autoFocus: !metadata.valid || undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined), getAriaAttributes(metadata, options)));
 }
 var hiddenProps = {
   /**
@@ -62,70 +55,88 @@ var hiddenProps = {
   tabIndex: -1,
   'aria-hidden': true
 };
-function input(config) {
+function input(field) {
+  var _field$constraint, _field$constraint2, _field$constraint3, _field$constraint4, _field$constraint5, _field$constraint6, _field$constraint7;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(field, options)), {}, {
     type: options.type,
-    minLength: config.minLength,
-    maxLength: config.maxLength,
-    min: config.min,
-    max: config.max,
-    step: config.step,
-    pattern: config.pattern,
-    multiple: config.multiple
+    minLength: (_field$constraint = field.constraint) === null || _field$constraint === void 0 ? void 0 : _field$constraint.minLength,
+    maxLength: (_field$constraint2 = field.constraint) === null || _field$constraint2 === void 0 ? void 0 : _field$constraint2.maxLength,
+    min: (_field$constraint3 = field.constraint) === null || _field$constraint3 === void 0 ? void 0 : _field$constraint3.min,
+    max: (_field$constraint4 = field.constraint) === null || _field$constraint4 === void 0 ? void 0 : _field$constraint4.max,
+    step: (_field$constraint5 = field.constraint) === null || _field$constraint5 === void 0 ? void 0 : _field$constraint5.step,
+    pattern: (_field$constraint6 = field.constraint) === null || _field$constraint6 === void 0 ? void 0 : _field$constraint6.pattern,
+    multiple: (_field$constraint7 = field.constraint) === null || _field$constraint7 === void 0 ? void 0 : _field$constraint7.multiple
   });
   if (options.type === 'checkbox' || options.type === 'radio') {
     var _options$value;
     props.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
-    props.defaultChecked = config.defaultValue === props.value;
+    props.defaultChecked = typeof field.initialValue === 'boolean' ? field.initialValue : field.initialValue === props.value;
   } else if (options.type !== 'file') {
-    props.defaultValue = config.defaultValue;
+    var _field$initialValue;
+    props.defaultValue = (_field$initialValue = field.initialValue) === null || _field$initialValue === void 0 ? void 0 : _field$initialValue.toString();
   }
   return cleanup(props);
 }
-function select(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    multiple: config.multiple
+function select(metadata, options) {
+  var _metadata$initialValu, _metadata$constraint2;
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+    defaultValue: (_metadata$initialValu = metadata.initialValue) === null || _metadata$initialValu === void 0 ? void 0 : _metadata$initialValu.toString(),
+    multiple: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.multiple
   }));
 }
-function textarea(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    minLength: config.minLength,
-    maxLength: config.maxLength
+function textarea(metadata, options) {
+  var _metadata$initialValu2, _metadata$constraint3, _metadata$constraint4;
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+    defaultValue: (_metadata$initialValu2 = metadata.initialValue) === null || _metadata$initialValu2 === void 0 ? void 0 : _metadata$initialValu2.toString(),
+    minLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.minLength,
+    maxLength: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.maxLength
   }));
 }
-function fieldset(config, options) {
-  return getFormElementProps(config, options);
+function form(metadata, options) {
+  var onSubmit = options === null || options === void 0 ? void 0 : options.onSubmit;
+  var onReset = options === null || options === void 0 ? void 0 : options.onReset;
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2({
+    id: metadata.id,
+    onSubmit: typeof onSubmit !== 'function' ? metadata.onSubmit : event => {
+      var context = metadata.onSubmit(event);
+      if (!event.defaultPrevented) {
+        onSubmit(event, context);
+      }
+    },
+    onReset: typeof onReset !== 'function' ? metadata.onReset : event => {
+      metadata.onReset(event);
+      onReset(event);
+    },
+    noValidate: metadata.noValidate
+  }, getAriaAttributes(metadata, options)));
 }
-function collection(config, options) {
-  return options.options.map(value => cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    id: config.id ? "".concat(config.id, "-").concat(value) : undefined,
-    type: options.type,
-    value,
-    defaultChecked: options.type === 'checkbox' && Array.isArray(config.defaultValue) ? config.defaultValue.includes(value) : config.defaultValue === value,
-    // The required attribute doesn't make sense for checkbox group
-    // As it would require all checkboxes to be checked instead of at least one
-    // overriden with `undefiend` so it gets cleaned up
-    required: options.type === 'checkbox' ? undefined : config.required
-  })));
+function fieldset(metadata, options) {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2({
+    id: metadata.id,
+    name: metadata.name,
+    form: metadata.formId
+  }, getAriaAttributes(metadata, options)));
+}
+function collection(metadata, options) {
+  return options.options.map(value => {
+    var _metadata$constraint5;
+    return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+      id: "".concat(metadata.id, "-").concat(value),
+      type: options.type,
+      value,
+      defaultChecked: options.type === 'checkbox' && Array.isArray(metadata.initialValue) ? metadata.initialValue.includes(value) : metadata.initialValue === value,
+      // The required attribute doesn't make sense for checkbox group
+      // As it would require all checkboxes to be checked instead of at least one
+      // It is overriden with `undefiend` so it could be cleaned upW properly
+      required: options.type === 'checkbox' ? undefined : (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.required
+    }));
+  });
 }
 
-Object.defineProperty(exports, 'INTENT', {
-	enumerable: true,
-	get: function () { return dom.INTENT; }
-});
-Object.defineProperty(exports, 'VALIDATION_SKIPPED', {
-	enumerable: true,
-	get: function () { return dom.VALIDATION_SKIPPED; }
-});
-Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
-	enumerable: true,
-	get: function () { return dom.VALIDATION_UNDEFINED; }
-});
 exports.collection = collection;
 exports.fieldset = fieldset;
+exports.form = form;
 exports.hiddenProps = hiddenProps;
 exports.input = input;
 exports.select = select;