@tanstack/form-core 0.0.1

package/build/esm/index.js

@@ -0,0 +1,634 @@
+/**
+ * form-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { Store } from '@tanstack/store';
+
+function functionalUpdate(updater, input) {
+  return typeof updater === 'function' ? updater(input) : updater;
+}
+function getBy(obj, path) {
+  if (!path) {
+    throw new Error('A path string is required to use getBy');
+  }
+
+  const pathArray = makePathArray(path);
+  const pathObj = pathArray;
+  return pathObj.reduce((current, pathPart) => {
+    if (typeof current !== 'undefined') {
+      return current[pathPart];
+    }
+
+    return undefined;
+  }, obj);
+}
+function setBy(obj, _path, updater) {
+  const path = makePathArray(_path);
+
+  function doSet(parent) {
+    if (!path.length) {
+      return functionalUpdate(updater, parent);
+    }
+
+    const key = path.shift();
+
+    if (typeof key === 'string') {
+      if (typeof parent === 'object') {
+        return { ...parent,
+          [key]: doSet(parent[key])
+        };
+      }
+
+      return {
+        [key]: doSet()
+      };
+    }
+
+    if (typeof key === 'number') {
+      if (Array.isArray(parent)) {
+        const prefix = parent.slice(0, key);
+        return [...(prefix.length ? prefix : new Array(key)), doSet(parent[key]), ...parent.slice(key + 1)];
+      }
+
+      return [...new Array(key), doSet()];
+    }
+
+    throw new Error('Uh oh!');
+  }
+
+  return doSet(obj);
+}
+const reFindNumbers0 = /^(\d*)$/gm;
+const reFindNumbers1 = /\.(\d*)\./gm;
+const reFindNumbers2 = /^(\d*)\./gm;
+const reFindNumbers3 = /\.(\d*$)/gm;
+const reFindMultiplePeriods = /\.{2,}/gm;
+
+function makePathArray(str) {
+  return str.replace('[', '.').replace(']', '').replace(reFindNumbers0, '__int__$1').replace(reFindNumbers1, '.__int__$1.').replace(reFindNumbers2, '__int__$1.').replace(reFindNumbers3, '.__int__$1').replace(reFindMultiplePeriods, '.').split('.').map(d => {
+    if (d.indexOf('__int__') === 0) {
+      return parseInt(d.substring('__int__'.length), 10);
+    }
+
+    return d;
+  });
+}
+
+function getDefaultFormState(defaultState) {
+  return {
+    values: {},
+    fieldMeta: {},
+    canSubmit: true,
+    isFieldsValid: false,
+    isFieldsValidating: false,
+    isFormValid: false,
+    isFormValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isTouched: false,
+    isValid: false,
+    isValidating: false,
+    submissionAttempts: 0,
+    formValidationCount: 0,
+    ...defaultState
+  };
+}
+class FormApi {
+  // // This carries the context for nested fields
+  constructor(_opts) {
+    var _opts$defaultValues, _opts$defaultState;
+
+    this.options = {};
+    this.fieldInfo = {};
+    this.validationMeta = {};
+
+    this.update = options => {
+      this.store.batch(() => {
+        if (options.defaultState && options.defaultState !== this.options.defaultState) {
+          this.store.setState(prev => ({ ...prev,
+            ...options.defaultState
+          }));
+        }
+
+        if (options.defaultValues !== this.options.defaultValues) {
+          this.store.setState(prev => ({ ...prev,
+            values: options.defaultValues
+          }));
+        }
+      });
+      this.options = options;
+    };
+
+    this.reset = () => this.store.setState(() => getDefaultFormState(this.options.defaultValues));
+
+    this.validateAllFields = async () => {
+      const fieldValidationPromises = [];
+      this.store.batch(() => {
+        void Object.values(this.fieldInfo).forEach(field => {
+          Object.values(field.instances).forEach(instance => {
+            // If any fields are not touched
+            if (!instance.state.meta.isTouched) {
+              // Mark them as touched
+              instance.setMeta(prev => ({ ...prev,
+                isTouched: true
+              })); // Validate the field
+
+              if (instance.options.validate) {
+                fieldValidationPromises.push(instance.validate());
+              }
+            }
+          });
+        });
+      });
+      return Promise.all(fieldValidationPromises);
+    };
+
+    this.validateForm = async () => {
+      const {
+        validate
+      } = this.options;
+
+      if (!validate) {
+        return;
+      } // Use the formValidationCount for all field instances to
+      // track freshness of the validation
+
+
+      this.store.setState(prev => ({ ...prev,
+        isValidating: true,
+        formValidationCount: prev.formValidationCount + 1
+      }));
+      const formValidationCount = this.state.formValidationCount;
+
+      const checkLatest = () => formValidationCount === this.state.formValidationCount;
+
+      if (!this.validationMeta.validationPromise) {
+        this.validationMeta.validationPromise = new Promise((resolve, reject) => {
+          this.validationMeta.validationResolve = resolve;
+          this.validationMeta.validationReject = reject;
+        });
+      }
+
+      const doValidation = async () => {
+        try {
+          const error = await validate(this.state.values, this);
+
+          if (checkLatest()) {
+            var _this$validationMeta$, _this$validationMeta;
+
+            this.store.setState(prev => ({ ...prev,
+              isValidating: false,
+              error: error ? typeof error === 'string' ? error : 'Invalid Form Values' : null
+            }));
+            (_this$validationMeta$ = (_this$validationMeta = this.validationMeta).validationResolve) == null ? void 0 : _this$validationMeta$.call(_this$validationMeta, error);
+          }
+        } catch (err) {
+          if (checkLatest()) {
+            var _this$validationMeta$2, _this$validationMeta2;
+
+            (_this$validationMeta$2 = (_this$validationMeta2 = this.validationMeta).validationReject) == null ? void 0 : _this$validationMeta$2.call(_this$validationMeta2, err);
+          }
+        } finally {
+          delete this.validationMeta.validationPromise;
+        }
+      };
+
+      doValidation();
+      return this.validationMeta.validationPromise;
+    };
+
+    this.handleSubmit = async e => {
+      e.preventDefault();
+      e.stopPropagation(); // Check to see that the form and all fields have been touched
+      // If they have not, touch them all and run validation
+      // Run form validation
+      // Submit the form
+
+      this.store.setState(old => ({ ...old,
+        // Submittion attempts mark the form as not submitted
+        isSubmitted: false,
+        // Count submission attempts
+        submissionAttempts: old.submissionAttempts + 1
+      })); // Don't let invalid forms submit
+
+      if (!this.state.canSubmit) return;
+      this.store.setState(d => ({ ...d,
+        isSubmitting: true
+      }));
+
+      const done = () => {
+        this.store.setState(prev => ({ ...prev,
+          isSubmitting: false
+        }));
+      }; // Validate all fields
+
+
+      await this.validateAllFields(); // Fields are invalid, do not submit
+
+      if (!this.state.isFieldsValid) {
+        var _this$options$onInval, _this$options;
+
+        done();
+        (_this$options$onInval = (_this$options = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval.call(_this$options, this.state.values, this);
+        return;
+      } // Run validation for the form
+
+
+      await this.validateForm();
+
+      if (!this.state.isValid) {
+        var _this$options$onInval2, _this$options2;
+
+        done();
+        (_this$options$onInval2 = (_this$options2 = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval2.call(_this$options2, this.state.values, this);
+        return;
+      }
+
+      try {
+        var _this$options$onSubmi, _this$options3;
+
+        // Run the submit code
+        await ((_this$options$onSubmi = (_this$options3 = this.options).onSubmit) == null ? void 0 : _this$options$onSubmi.call(_this$options3, this.state.values, this));
+        this.store.batch(() => {
+          this.store.setState(prev => ({ ...prev,
+            isSubmitted: true
+          }));
+          done();
+        });
+      } catch (err) {
+        done();
+        throw err;
+      }
+    };
+
+    this.getFieldValue = field => getBy(this.state.values, field);
+
+    this.getFieldMeta = field => {
+      return this.state.fieldMeta[field];
+    };
+
+    this.getFieldInfo = field => {
+      var _this$fieldInfo;
+
+      return (_this$fieldInfo = this.fieldInfo)[field] || (_this$fieldInfo[field] = {
+        instances: {}
+      });
+    };
+
+    this.setFieldMeta = (field, updater) => {
+      this.store.setState(prev => {
+        return { ...prev,
+          fieldMeta: { ...prev.fieldMeta,
+            [field]: functionalUpdate(updater, prev.fieldMeta[field])
+          }
+        };
+      });
+    };
+
+    this.setFieldValue = (field, updater, opts) => {
+      var _opts$touch;
+
+      const touch = (_opts$touch = opts == null ? void 0 : opts.touch) != null ? _opts$touch : true;
+      this.store.batch(() => {
+        this.store.setState(prev => {
+          return { ...prev,
+            values: setBy(prev.values, field, updater)
+          };
+        });
+
+        if (touch) {
+          this.setFieldMeta(field, prev => ({ ...prev,
+            isTouched: true
+          }));
+        }
+      });
+    };
+
+    this.pushFieldValue = (field, value, opts) => {
+      return this.setFieldValue(field, prev => [...(Array.isArray(prev) ? prev : []), value], opts);
+    };
+
+    this.insertFieldValue = (field, index, value, opts) => {
+      this.setFieldValue(field, prev => {
+        // invariant( // TODO: bring in invariant
+        //   Array.isArray(prev),
+        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+        // )
+        return prev.map((d, i) => i === index ? value : d);
+      }, opts);
+    };
+
+    this.spliceFieldValue = (field, index, opts) => {
+      this.setFieldValue(field, prev => {
+        // invariant( // TODO: bring in invariant
+        //   Array.isArray(prev),
+        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+        // )
+        return prev.filter((_d, i) => i !== index);
+      }, opts);
+    };
+
+    this.swapFieldValues = (field, index1, index2) => {
+      this.setFieldValue(field, prev => {
+        const prev1 = prev[index1];
+        const prev2 = prev[index2];
+        return setBy(setBy(prev, [index1], prev2), [index2], prev1);
+      });
+    };
+
+    this.store = new Store(getDefaultFormState({ ...(_opts == null ? void 0 : _opts.defaultState),
+      values: (_opts$defaultValues = _opts == null ? void 0 : _opts.defaultValues) != null ? _opts$defaultValues : _opts == null ? void 0 : (_opts$defaultState = _opts.defaultState) == null ? void 0 : _opts$defaultState.values,
+      isFormValid: !(_opts != null && _opts.validate)
+    }), {
+      onUpdate: next => {
+        // Computed state
+        const fieldMetaValues = Object.values(next.fieldMeta);
+        const isFieldsValidating = fieldMetaValues.some(field => field == null ? void 0 : field.isValidating);
+        const isFieldsValid = !fieldMetaValues.some(field => field == null ? void 0 : field.error);
+        const isTouched = fieldMetaValues.some(field => field == null ? void 0 : field.isTouched);
+        const isValidating = isFieldsValidating || next.isFormValidating;
+        const isFormValid = !next.formError;
+        const isValid = isFieldsValid && isFormValid;
+        const canSubmit = next.submissionAttempts === 0 && !isTouched || !isValidating && !next.isSubmitting && isValid;
+        next = { ...next,
+          isFieldsValidating,
+          isFieldsValid,
+          isFormValid,
+          isValid,
+          canSubmit,
+          isTouched
+        }; // Create a shortcut for the state
+        // Write it back to the store
+
+        this.store.state = next;
+        this.state = next;
+      }
+    });
+    this.state = this.store.state;
+    this.update(_opts || {});
+  }
+
+}
+
+var id = 0;
+
+function _classPrivateFieldLooseKey(name) {
+  return "__private_" + id++ + "_" + name;
+}
+
+function _classPrivateFieldLooseBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+
+  return receiver;
+}
+
+let uid = 0;
+
+var _updateStore = /*#__PURE__*/_classPrivateFieldLooseKey("updateStore");
+
+var _validate = /*#__PURE__*/_classPrivateFieldLooseKey("validate");
+
+class FieldApi {
+  constructor(_opts) {
+    var _this$getMeta;
+
+    this.options = {};
+
+    this.mount = () => {
+      const info = this.getInfo();
+      info.instances[this.uid] = this;
+      const unsubscribe = this.form.store.subscribe(() => {
+        _classPrivateFieldLooseBase(this, _updateStore)[_updateStore]();
+      });
+      return () => {
+        unsubscribe();
+        delete info.instances[this.uid];
+
+        if (!Object.keys(info.instances).length) {
+          delete this.form.fieldInfo[this.name];
+        }
+      };
+    };
+
+    Object.defineProperty(this, _updateStore, {
+      writable: true,
+      value: () => {
+        this.store.batch(() => {
+          const nextValue = this.getValue();
+          const nextMeta = this.getMeta();
+
+          if (nextValue !== this.state.value) {
+            this.store.setState(prev => ({ ...prev,
+              value: nextValue
+            }));
+          }
+
+          if (nextMeta !== this.state.meta) {
+            this.store.setState(prev => ({ ...prev,
+              meta: nextMeta
+            }));
+          }
+        });
+      }
+    });
+
+    this.update = opts => {
+      this.options = {
+        validateOn: 'change',
+        validateAsyncOn: 'blur',
+        validateAsyncDebounceMs: 0,
+        ...opts
+      }; // Default Value
+
+      if (this.state.value === undefined && this.options.defaultValue !== undefined) {
+        this.setValue(this.options.defaultValue);
+      } // Default Meta
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+
+      if (this.getMeta() === undefined) {
+        this.setMeta(this.state.meta);
+      }
+    };
+
+    this.getValue = () => this.form.getFieldValue(this.name);
+
+    this.setValue = (updater, options) => this.form.setFieldValue(this.name, updater, options);
+
+    this.getMeta = () => this.form.getFieldMeta(this.name);
+
+    this.setMeta = updater => this.form.setFieldMeta(this.name, updater);
+
+    this.getInfo = () => this.form.getFieldInfo(this.name);
+
+    this.pushValue = value => this.form.pushFieldValue(this.name, value);
+
+    this.insertValue = (index, value) => this.form.insertFieldValue(this.name, index, value);
+
+    this.removeValue = index => this.form.spliceFieldValue(this.name, index);
+
+    this.swapValues = (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex);
+
+    this.getSubField = name => new FieldApi({
+      name: this.name + "." + name,
+      form: this.form
+    });
+
+    Object.defineProperty(this, _validate, {
+      writable: true,
+      value: async isAsync => {
+        if (!this.options.validate) {
+          return;
+        }
+
+        this.setMeta(prev => ({ ...prev,
+          isValidating: true
+        })); // Use the validationCount for all field instances to
+        // track freshness of the validation
+
+        const validationCount = (this.getInfo().validationCount || 0) + 1;
+        this.getInfo().validationCount = validationCount;
+
+        const checkLatest = () => validationCount === this.getInfo().validationCount;
+
+        if (!this.getInfo().validationPromise) {
+          this.getInfo().validationPromise = new Promise((resolve, reject) => {
+            this.getInfo().validationResolve = resolve;
+            this.getInfo().validationReject = reject;
+          });
+        }
+
+        try {
+          const rawError = await this.options.validate(this.state.value, this);
+
+          if (checkLatest()) {
+            var _this$getInfo$validat, _this$getInfo;
+
+            const error = (() => {
+              if (rawError) {
+                if (typeof rawError !== 'string') {
+                  return 'Invalid Form Values';
+                }
+
+                return rawError;
+              }
+
+              return undefined;
+            })();
+
+            this.setMeta(prev => ({ ...prev,
+              isValidating: false,
+              error
+            }));
+            (_this$getInfo$validat = (_this$getInfo = this.getInfo()).validationResolve) == null ? void 0 : _this$getInfo$validat.call(_this$getInfo, error);
+          }
+        } catch (error) {
+          if (checkLatest()) {
+            var _this$getInfo$validat2, _this$getInfo2;
+
+            (_this$getInfo$validat2 = (_this$getInfo2 = this.getInfo()).validationReject) == null ? void 0 : _this$getInfo$validat2.call(_this$getInfo2, error);
+            throw error;
+          }
+        } finally {
+          if (checkLatest()) {
+            this.setMeta(prev => ({ ...prev,
+              isValidating: false
+            }));
+            delete this.getInfo().validationPromise;
+          }
+        }
+
+        return this.getInfo().validationPromise;
+      }
+    });
+
+    this.validate = () => _classPrivateFieldLooseBase(this, _validate)[_validate](false);
+
+    this.validateAsync = () => _classPrivateFieldLooseBase(this, _validate)[_validate](true);
+
+    this.getChangeProps = (props = {}) => {
+      return { ...props,
+        value: this.state.value,
+        onChange: value => {
+          this.setValue(value);
+          props.onChange == null ? void 0 : props.onChange(value);
+        },
+        onBlur: e => {
+          this.setMeta(prev => ({ ...prev,
+            isTouched: true
+          }));
+          const {
+            validateOn
+          } = this.options;
+
+          if (validateOn === 'blur' || validateOn.split('-')[0] === 'blur') {
+            this.validate();
+          }
+
+          props.onBlur == null ? void 0 : props.onBlur(e);
+        }
+      };
+    };
+
+    this.getInputProps = (props = {}) => {
+      return { ...props,
+        value: String(this.state.value),
+        onChange: e => {
+          this.setValue(e.target.value);
+          props.onChange == null ? void 0 : props.onChange(e.target.value);
+        },
+        onBlur: this.getChangeProps(props).onBlur
+      };
+    };
+
+    this.form = _opts.form;
+    this.uid = uid++; // Support field prefixing from FieldScope
+
+    let fieldPrefix = '';
+
+    if (this.form.fieldName) {
+      fieldPrefix = this.form.fieldName + ".";
+    }
+
+    this.name = fieldPrefix + _opts.name;
+    this.store = new Store({
+      value: this.getValue(),
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      meta: (_this$getMeta = this.getMeta()) != null ? _this$getMeta : {
+        isValidating: false,
+        isTouched: false,
+        ...this.options.defaultMeta
+      }
+    }, {
+      onUpdate: next => {
+        next.meta.touchedError = next.meta.isTouched ? next.meta.error : undefined; // Do not validate pristine fields
+
+        if (!this.options.validatePristine && !next.meta.isTouched) return; // If validateOn is set to a variation of change, run the validation
+
+        if (this.options.validateOn === 'change' || this.options.validateOn.split('-')[0] === 'change') {
+          try {
+            this.validate();
+          } catch (err) {
+            console.error('An error occurred during validation', err);
+          }
+        }
+
+        this.state = next;
+      }
+    });
+    this.state = this.store.state;
+    this.update(_opts);
+  }
+
+}
+
+export { FieldApi, FormApi, functionalUpdate, getBy, getDefaultFormState, setBy };
+//# sourceMappingURL=index.js.map