@conform-to/yup 0.5.0 → 0.6.0-pre.0

package/README.md

@@ -6,92 +6,11 @@
 
 ## API Reference
 
-- [formatError](#formatError)
 - [getFieldsetConstraint](#getfieldsetconstraint)
-- [validate](#validate)
+- [parse](#parse)
 
 <!-- /aside -->
 
-### formatError
-
-This formats Yup **ValidationError** to conform's error structure (i.e. A set of key/value pairs).
-
-If an error is received instead of the Yup **ValidationError**, it will be treated as a form level error with message set to **error.messages**.
-
-```tsx
-import { useForm, parse } from '@conform-to/react';
-import { formatError } from '@conform-to/yup';
-import * as yup from 'yup';
-
-const schema = yup.object({
-  email: yup.string().required(),
-  password: yup.string().required(),
-});
-
-function ExampleForm() {
-  const [form] = useForm<yup.InferType<typeof schema>>({
-    onValidate({ formData }) {
-      const submission = parse(formData);
-
-      try {
-        // Only sync validation is allowed on the client side
-        schema.validateSync(submission.value, {
-          abortEarly: false,
-        });
-      } catch (error) {
-        submission.error.push(...formatError(error));
-      }
-
-      return submission;
-    },
-  });
-
-  // ...
-}
-```
-
-Or when validating the formData on server side (e.g. Remix):
-
-```tsx
-import { useForm, parse } from '@conform-to/react';
-import { formatError } from '@conform-to/yup';
-import * as yup from 'yup';
-
-const schema = yup.object({
-  // Define the schema with yup
-});
-
-export let action = async ({ request }) => {
-  const formData = await request.formData();
-  const submission = parse(formData);
-
-  try {
-    // You can extends the schema with async validation as well
-    const data = await schema.validate(submission.value, {
-      abortEarly: false,
-    });
-
-    if (submission.type !== 'validate') {
-      return await handleFormData(data);
-    }
-  } catch (error) {
-    submission.error.push(...formatError(error));
-  }
-
-  return submission;
-};
-
-export default function ExampleRoute() {
-  const state = useActionData();
-  const [form] = useForm({
-    mode: 'server-validation',
-    state,
-  });
-
-  // ...
-}
-```
-
 ### getFieldsetConstraint
 
 This tries to infer constraint of each field based on the yup schema. This is useful for:
@@ -118,13 +37,13 @@ function Example() {
 }
 ```
 
-### validate
+### parse
 
-It parses the formData and returns a [submission](/docs/submission.md) object with the validation error, which removes the boilerplate code shown on the [formatError](#formaterror) example.
+It parses the formData and returns a submission result with the validation error. If no error is found, the parsed data will also be populated as `submission.value`.
 
 ```tsx
 import { useForm } from '@conform-to/react';
-import { validate } from '@conform-to/yup';
+import { parse } from '@conform-to/yup';
 import * as yup from 'yup';
 
 const schema = yup.object({
@@ -135,10 +54,39 @@ const schema = yup.object({
 function ExampleForm() {
   const [form] = useForm({
     onValidate({ formData }) {
-      return validate(formData, schema);
+      return parse(formData, { schema });
     },
   });
 
   // ...
 }
 ```
+
+Or when parsing the formData on server side (e.g. Remix):
+
+```tsx
+import { useForm } from '@conform-to/react';
+import { parse } from '@conform-to/yup';
+import * as yup from 'yup';
+
+const schema = yup.object({
+  // Define the schema with yup
+});
+
+export let action = async ({ request }) => {
+  const formData = await request.formData();
+  const submission = parse(formData, {
+    // If you need extra validation on server side
+    schema: schema.test(/* ... */),
+
+    // If the schema definition includes async validation
+    async: true,
+  });
+
+  if (!submission.value || submission.intent !== 'submit') {
+    return submission;
+  }
+
+  // ...
+};
+```

package/_virtual/_rollupPluginBabelHelpers.js

@@ -4,17 +4,14 @@ 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] : {};
@@ -24,10 +21,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -39,7 +34,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 

package/index.js

@@ -88,30 +88,50 @@ function getFieldsetConstraint(source) {
     return [key, constraint];
   }));
 }
-function formatError(error) {
-  var fallbackMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Oops! Something went wrong.';
-  if (error instanceof yup__namespace.ValidationError) {
-    return error.inner.reduce((result, e) => {
-      var _e$path;
-      result.push([(_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '', e.message]);
-      return result;
-    }, []);
-  }
-  return [['', error instanceof Error ? error.message : fallbackMessage]];
-}
-function validate(formData, schema) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var submission = dom.parse(formData);
-  try {
-    schema.validateSync(submission.value, {
-      abortEarly: false
-    });
-  } catch (error) {
-    submission.error.push(...formatError(error, options.fallbackMessage));
-  }
-  return submission;
+function parse(payload, config) {
+  return dom.parse(payload, {
+    resolve(payload, intent) {
+      var schema = typeof config.schema === 'function' ? config.schema(intent) : config.schema;
+      var resolveData = value => ({
+        value
+      });
+      var resolveError = error => {
+        if (error instanceof yup__namespace.ValidationError) {
+          return {
+            error: error.inner.reduce((result, e) => {
+              var _e$path, _config$acceptMultipl;
+              var name = (_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '';
+              if (typeof result[name] === 'undefined') {
+                result[name] = e.message;
+              } else if ((_config$acceptMultipl = config.acceptMultipleErrors) !== null && _config$acceptMultipl !== void 0 && _config$acceptMultipl.call(config, {
+                name,
+                intent,
+                payload
+              })) {
+                result[name] = [].concat(result[name], e.message);
+              }
+              return result;
+            }, {})
+          };
+        }
+        throw error;
+      };
+      if (!config.async) {
+        try {
+          var data = schema.validateSync(payload, {
+            abortEarly: false
+          });
+          return resolveData(data);
+        } catch (error) {
+          return resolveError(error);
+        }
+      }
+      return schema.validate(payload, {
+        abortEarly: false
+      }).then(resolveData).catch(resolveError);
+    }
+  });
 }
 
-exports.formatError = formatError;
 exports.getFieldsetConstraint = getFieldsetConstraint;
-exports.validate = validate;
+exports.parse = parse;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -1,16 +1,13 @@
 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] : {};
@@ -20,10 +17,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -35,7 +30,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 

package/module/index.js

@@ -1,4 +1,4 @@
-import { parse } from '@conform-to/dom';
+import { parse as parse$1 } from '@conform-to/dom';
 import * as yup from 'yup';
 
 function getFieldsetConstraint(source) {
@@ -64,28 +64,49 @@ function getFieldsetConstraint(source) {
     return [key, constraint];
   }));
 }
-function formatError(error) {
-  var fallbackMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Oops! Something went wrong.';
-  if (error instanceof yup.ValidationError) {
-    return error.inner.reduce((result, e) => {
-      var _e$path;
-      result.push([(_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '', e.message]);
-      return result;
-    }, []);
-  }
-  return [['', error instanceof Error ? error.message : fallbackMessage]];
-}
-function validate(formData, schema) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var submission = parse(formData);
-  try {
-    schema.validateSync(submission.value, {
-      abortEarly: false
-    });
-  } catch (error) {
-    submission.error.push(...formatError(error, options.fallbackMessage));
-  }
-  return submission;
+function parse(payload, config) {
+  return parse$1(payload, {
+    resolve(payload, intent) {
+      var schema = typeof config.schema === 'function' ? config.schema(intent) : config.schema;
+      var resolveData = value => ({
+        value
+      });
+      var resolveError = error => {
+        if (error instanceof yup.ValidationError) {
+          return {
+            error: error.inner.reduce((result, e) => {
+              var _e$path, _config$acceptMultipl;
+              var name = (_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '';
+              if (typeof result[name] === 'undefined') {
+                result[name] = e.message;
+              } else if ((_config$acceptMultipl = config.acceptMultipleErrors) !== null && _config$acceptMultipl !== void 0 && _config$acceptMultipl.call(config, {
+                name,
+                intent,
+                payload
+              })) {
+                result[name] = [].concat(result[name], e.message);
+              }
+              return result;
+            }, {})
+          };
+        }
+        throw error;
+      };
+      if (!config.async) {
+        try {
+          var data = schema.validateSync(payload, {
+            abortEarly: false
+          });
+          return resolveData(data);
+        } catch (error) {
+          return resolveError(error);
+        }
+      }
+      return schema.validate(payload, {
+        abortEarly: false
+      }).then(resolveData).catch(resolveError);
+    }
+  });
 }
 
-export { formatError, getFieldsetConstraint, validate };
+export { getFieldsetConstraint, parse };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/yup",
 	"description": "Conform helpers for integrating with yup",
 	"license": "MIT",
-	"version": "0.5.0",
+	"version": "0.6.0-pre.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -14,7 +14,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"peerDependencies": {
-		"@conform-to/dom": "0.5.0",
+		"@conform-to/dom": "0.6.0-pre.0",
 		"yup": ">=0.32.0"
 	},
 	"devDependencies": {