@conform-to/react 0.9.1 → 1.0.0-pre.1

package/context.d.ts

@@ -0,0 +1,64 @@
+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 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>;
+    error: Error | undefined;
+    allError: Record<string, Error>;
+    allValid: boolean;
+    valid: boolean;
+    dirty: boolean;
+};
+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>;
+    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 = 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 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<any, any, any>;
+    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 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

@@ -0,0 +1,196 @@
+'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 useRegistry(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 useFormState(form, subjectRef) {
+  var subscribe = react.useCallback(callback => form.subscribe(callback, () => subjectRef === null || subjectRef === void 0 ? void 0 : subjectRef.current), [form, subjectRef]);
+  return react.useSyncExternalStore(subscribe, form.getState, form.getState);
+}
+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 = 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,
+    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 updateSubjectRef(ref, name, subject, scope) {
+  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: state.initialValue[name],
+    value: state.value[name],
+    error: state.error[name],
+    get key() {
+      return state.key[name];
+    },
+    get valid() {
+      return state.valid[name];
+    },
+    get dirty() {
+      return state.dirty[name];
+    },
+    get allValid() {
+      var keys = Object.keys(state.error);
+      if (name === '') {
+        return keys.length === 0;
+      }
+      for (var key of Object.keys(state.error)) {
+        if (dom.isPrefix(key, name) && !state.valid[key]) {
+          return false;
+        }
+      }
+      return true;
+    },
+    get allError() {
+      if (name === '') {
+        return state.error;
+      }
+      var result = {};
+      for (var [key, error] of Object.entries(state.error)) {
+        if (dom.isPrefix(key, name)) {
+          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 'error':
+        case 'initialValue':
+        case 'value':
+        case 'valid':
+        case 'dirty':
+          updateSubjectRef(subjectRef, name, key, 'name');
+          break;
+        case 'allError':
+          updateSubjectRef(subjectRef, name, 'error', 'prefix');
+          break;
+        case 'allValid':
+          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
+          break;
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+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) {
+        case 'formId':
+          return formId;
+        case 'name':
+          return name;
+        case 'constraint':
+          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 '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);
+    }
+  });
+}
+
+exports.FormProvider = FormProvider;
+exports.FormStateInput = FormStateInput;
+exports.Registry = Registry;
+exports.getFieldMetadata = getFieldMetadata;
+exports.getFormMetadata = getFormMetadata;
+exports.getMetadata = getMetadata;
+exports.updateSubjectRef = updateSubjectRef;
+exports.useFormState = useFormState;
+exports.useRegistry = useRegistry;
+exports.useSubjectRef = useSubjectRef;

package/context.mjs

@@ -0,0 +1,183 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+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 useRegistry(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 useFormState(form, subjectRef) {
+  var subscribe = useCallback(callback => form.subscribe(callback, () => subjectRef === null || subjectRef === void 0 ? void 0 : subjectRef.current), [form, subjectRef]);
+  return useSyncExternalStore(subscribe, form.getState, form.getState);
+}
+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 = 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,
+    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 updateSubjectRef(ref, name, subject, scope) {
+  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: state.initialValue[name],
+    value: state.value[name],
+    error: state.error[name],
+    get key() {
+      return state.key[name];
+    },
+    get valid() {
+      return state.valid[name];
+    },
+    get dirty() {
+      return state.dirty[name];
+    },
+    get allValid() {
+      var keys = Object.keys(state.error);
+      if (name === '') {
+        return keys.length === 0;
+      }
+      for (var key of Object.keys(state.error)) {
+        if (isPrefix(key, name) && !state.valid[key]) {
+          return false;
+        }
+      }
+      return true;
+    },
+    get allError() {
+      if (name === '') {
+        return state.error;
+      }
+      var result = {};
+      for (var [key, error] of Object.entries(state.error)) {
+        if (isPrefix(key, name)) {
+          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 'error':
+        case 'initialValue':
+        case 'value':
+        case 'valid':
+        case 'dirty':
+          updateSubjectRef(subjectRef, name, key, 'name');
+          break;
+        case 'allError':
+          updateSubjectRef(subjectRef, name, 'error', 'prefix');
+          break;
+        case 'allValid':
+          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
+          break;
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
+}
+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) {
+        case 'formId':
+          return formId;
+        case 'name':
+          return name;
+        case 'constraint':
+          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 '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, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormState, useRegistry, useSubjectRef };