@conform-to/yup 0.3.0-pre.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Edmund Hung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# @conform-to/yup
+
+> [Yup](https://github.com/jquense/yup) schema resolver for [conform](https://github.com/edmundhung/conform)
+
+## API Reference
+
+- [resolve](#resolve)
+
+### resolve
+
+It resolves yup schema to a conform schema:
+
+```tsx
+import { useForm, useFieldset } from '@conform-to/react';
+import { resolve } from '@conform-to/yup';
+import * as yup from 'yup';
+
+// Define the schema with zod
+const schema = resolve(
+  yup.object({
+    email: yup.string().required(),
+    password: yup.string().required(),
+  })
+);
+
+// When used with `@conform-to/react`:
+function ExampleForm() {
+  const formProps = useForm({
+    // Validating the form with the schema
+    validate: schema.validate
+    onSubmit: event => {
+      // Read the FormData from the from
+      const payload = new FormData(e.target);
+
+      // Parse the data against the zod schema
+      const submission = schema.parse(payload);
+
+      // It could be accepted / rejected / modified
+      console.log(submission.state);
+
+      // Parsed value (Only if accepted)
+      console.log(submission.data);
+
+      // Structured form value
+      console.log(submission.form.value);
+
+      // Structured form error (only if rejected)
+      console.log(submission.form.error);
+    };
+  })
+  const [setupFieldset, { email, password }] = useFieldset({
+    // Inferring the constraint with the schema
+    constraint: schema.constraint
+  });
+
+  // ...
+}
+```
+
+Or parse the request payload on server side (e.g. Remix):
+
+```tsx
+import { resolve } from '@conform-to/yup';
+import * as yup from 'yup';
+
+const schema = resolve(
+  yup.object({
+    // Define the schema with yup
+  }),
+);
+
+export let action = async ({ request }) => {
+  const formData = await request.formData();
+  const submission = schema.parse(formData);
+
+  // Return the current form state if not accepted
+  if (submission.state !== 'accepted') {
+    return json(submission.form);
+  }
+
+  // Do something else
+};
+
+export default function ExampleRoute() {
+  const formState = useActionData();
+
+  // You can then use formState.value / formState.error
+  // to populate inital value of each fields with
+  // the intital error
+}
+```

package/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+exports.defineProperty = _defineProperty;
+exports.objectSpread2 = _objectSpread2;

package/index.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+var yup = require('yup');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+
+function formatError(error) {
+  var result = {};
+
+  var _loop = function _loop(validationError) {
+    dom.setValue(result, dom.getPaths(validationError.path).flatMap(path => ['details', path]).concat('message'), prev => prev ? prev : validationError.message);
+  };
+
+  for (var validationError of error.inner) {
+    _loop(validationError);
+  }
+
+  return result;
+}
+
+function resolve(source) {
+  var description = source.describe();
+  return {
+    source,
+    constraint: Object.fromEntries(Object.entries(description.fields).map(_ref => {
+      var _test$params, _test$params3, _test$params5, _test$params6, _test$params8;
+
+      var [key, def] = _ref;
+      var constraint = {};
+
+      switch (def.type) {
+        case 'string':
+          {
+            for (var test of def.tests) {
+              switch (test.name) {
+                case 'required':
+                  constraint.required = true;
+                  break;
+
+                case 'min':
+                  if (!constraint.minLength || constraint.minLength < Number((_test$params = test.params) === null || _test$params === void 0 ? void 0 : _test$params.min)) {
+                    var _test$params2;
+
+                    constraint.minLength = Number((_test$params2 = test.params) === null || _test$params2 === void 0 ? void 0 : _test$params2.min);
+                  }
+
+                  break;
+
+                case 'max':
+                  if (!constraint.maxLength || constraint.maxLength > Number((_test$params3 = test.params) === null || _test$params3 === void 0 ? void 0 : _test$params3.max)) {
+                    var _test$params4;
+
+                    constraint.maxLength = Number((_test$params4 = test.params) === null || _test$params4 === void 0 ? void 0 : _test$params4.max);
+                  }
+
+                  break;
+
+                case 'matches':
+                  if (!constraint.pattern && ((_test$params5 = test.params) === null || _test$params5 === void 0 ? void 0 : _test$params5.regex) instanceof RegExp) {
+                    constraint.pattern = test.params.regex.source;
+                  }
+
+                  break;
+              }
+            }
+
+            if (!constraint.pattern && def.oneOf.length > 0) {
+              constraint.pattern = def.oneOf.join('|');
+            }
+
+            break;
+          }
+
+        case 'number':
+          for (var _test of def.tests) {
+            switch (_test.name) {
+              case 'required':
+                constraint.required = true;
+                break;
+
+              case 'min':
+                if (!constraint.min || constraint.min < Number((_test$params6 = _test.params) === null || _test$params6 === void 0 ? void 0 : _test$params6.min)) {
+                  var _test$params7;
+
+                  constraint.min = Number((_test$params7 = _test.params) === null || _test$params7 === void 0 ? void 0 : _test$params7.min);
+                }
+
+                break;
+
+              case 'max':
+                if (!constraint.max || constraint.max > Number((_test$params8 = _test.params) === null || _test$params8 === void 0 ? void 0 : _test$params8.max)) {
+                  var _test$params9;
+
+                  constraint.max = Number((_test$params9 = _test.params) === null || _test$params9 === void 0 ? void 0 : _test$params9.max);
+                }
+
+                break;
+            }
+          }
+
+          break;
+      }
+
+      return [key, constraint];
+    })),
+
+    validate(form, submitter) {
+      var payload = dom.getFormData(form, submitter);
+      var submission = dom.createSubmission(payload);
+      var errors = [];
+
+      try {
+        source.validateSync(submission.form.value, {
+          abortEarly: false
+        });
+      } catch (e) {
+        if (e instanceof yup__namespace.ValidationError) {
+          errors.push(...e.inner.map(error => {
+            var _error$path;
+
+            return [(_error$path = error.path) !== null && _error$path !== void 0 ? _error$path : '', error.message];
+          }));
+        } else {
+          throw e;
+        }
+      }
+
+      dom.setFormError(form, errors);
+    },
+
+    parse(payload) {
+      var submission = dom.createSubmission(payload);
+
+      if (submission.state !== 'accepted') {
+        return submission;
+      }
+
+      try {
+        var result = source.validateSync(submission.form.value, {
+          abortEarly: false
+        });
+        return {
+          state: 'accepted',
+          data: result,
+          form: submission.form
+        };
+      } catch (error) {
+        if (error instanceof yup__namespace.ValidationError) {
+          return {
+            state: 'rejected',
+            form: {
+              // @ts-expect-error
+              value: submission.form.value,
+              error: formatError(error)
+            }
+          };
+        }
+
+        throw error;
+      }
+    }
+
+  };
+}
+
+exports.resolve = resolve;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,42 @@
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };

package/module/index.js

@@ -0,0 +1,163 @@
+import { getFormData, createSubmission, setFormError, setValue, getPaths } from '@conform-to/dom';
+import * as yup from 'yup';
+
+function formatError(error) {
+  var result = {};
+
+  var _loop = function _loop(validationError) {
+    setValue(result, getPaths(validationError.path).flatMap(path => ['details', path]).concat('message'), prev => prev ? prev : validationError.message);
+  };
+
+  for (var validationError of error.inner) {
+    _loop(validationError);
+  }
+
+  return result;
+}
+
+function resolve(source) {
+  var description = source.describe();
+  return {
+    source,
+    constraint: Object.fromEntries(Object.entries(description.fields).map(_ref => {
+      var _test$params, _test$params3, _test$params5, _test$params6, _test$params8;
+
+      var [key, def] = _ref;
+      var constraint = {};
+
+      switch (def.type) {
+        case 'string':
+          {
+            for (var test of def.tests) {
+              switch (test.name) {
+                case 'required':
+                  constraint.required = true;
+                  break;
+
+                case 'min':
+                  if (!constraint.minLength || constraint.minLength < Number((_test$params = test.params) === null || _test$params === void 0 ? void 0 : _test$params.min)) {
+                    var _test$params2;
+
+                    constraint.minLength = Number((_test$params2 = test.params) === null || _test$params2 === void 0 ? void 0 : _test$params2.min);
+                  }
+
+                  break;
+
+                case 'max':
+                  if (!constraint.maxLength || constraint.maxLength > Number((_test$params3 = test.params) === null || _test$params3 === void 0 ? void 0 : _test$params3.max)) {
+                    var _test$params4;
+
+                    constraint.maxLength = Number((_test$params4 = test.params) === null || _test$params4 === void 0 ? void 0 : _test$params4.max);
+                  }
+
+                  break;
+
+                case 'matches':
+                  if (!constraint.pattern && ((_test$params5 = test.params) === null || _test$params5 === void 0 ? void 0 : _test$params5.regex) instanceof RegExp) {
+                    constraint.pattern = test.params.regex.source;
+                  }
+
+                  break;
+              }
+            }
+
+            if (!constraint.pattern && def.oneOf.length > 0) {
+              constraint.pattern = def.oneOf.join('|');
+            }
+
+            break;
+          }
+
+        case 'number':
+          for (var _test of def.tests) {
+            switch (_test.name) {
+              case 'required':
+                constraint.required = true;
+                break;
+
+              case 'min':
+                if (!constraint.min || constraint.min < Number((_test$params6 = _test.params) === null || _test$params6 === void 0 ? void 0 : _test$params6.min)) {
+                  var _test$params7;
+
+                  constraint.min = Number((_test$params7 = _test.params) === null || _test$params7 === void 0 ? void 0 : _test$params7.min);
+                }
+
+                break;
+
+              case 'max':
+                if (!constraint.max || constraint.max > Number((_test$params8 = _test.params) === null || _test$params8 === void 0 ? void 0 : _test$params8.max)) {
+                  var _test$params9;
+
+                  constraint.max = Number((_test$params9 = _test.params) === null || _test$params9 === void 0 ? void 0 : _test$params9.max);
+                }
+
+                break;
+            }
+          }
+
+          break;
+      }
+
+      return [key, constraint];
+    })),
+
+    validate(form, submitter) {
+      var payload = getFormData(form, submitter);
+      var submission = createSubmission(payload);
+      var errors = [];
+
+      try {
+        source.validateSync(submission.form.value, {
+          abortEarly: false
+        });
+      } catch (e) {
+        if (e instanceof yup.ValidationError) {
+          errors.push(...e.inner.map(error => {
+            var _error$path;
+
+            return [(_error$path = error.path) !== null && _error$path !== void 0 ? _error$path : '', error.message];
+          }));
+        } else {
+          throw e;
+        }
+      }
+
+      setFormError(form, errors);
+    },
+
+    parse(payload) {
+      var submission = createSubmission(payload);
+
+      if (submission.state !== 'accepted') {
+        return submission;
+      }
+
+      try {
+        var result = source.validateSync(submission.form.value, {
+          abortEarly: false
+        });
+        return {
+          state: 'accepted',
+          data: result,
+          form: submission.form
+        };
+      } catch (error) {
+        if (error instanceof yup.ValidationError) {
+          return {
+            state: 'rejected',
+            form: {
+              // @ts-expect-error
+              value: submission.form.value,
+              error: formatError(error)
+            }
+          };
+        }
+
+        throw error;
+      }
+    }
+
+  };
+}
+
+export { resolve };

package/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "@conform-to/yup",
+	"description": "Conform schema resolver for yup",
+	"license": "MIT",
+	"version": "0.3.0-pre.0",
+	"main": "index.js",
+	"module": "module/index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/edmundhung/conform",
+		"directory": "packages/conform-yup"
+	},
+	"bugs": {
+		"url": "https://github.com/edmundhung/conform/issues"
+	},
+	"peerDependencies": {
+		"@conform-to/dom": "0.3.0-pre.0",
+		"yup": ">=0.32.0"
+	},
+	"devDependencies": {
+		"yup": "^0.32.11"
+	},
+	"sideEffects": false
+}