@conform-to/yup - npm Package Compare versions

Comparing version 0.4.0-pre.2 to 0.4.0-pre.3

index.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var dom = require('@conform-to/dom');
 var yup = require('yup');
@@ -126,4 +127,19 @@
 }
+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;
+}
+
 exports.formatError = formatError;
 exports.getFieldsetConstraint = getFieldsetConstraint;
+exports.validate = validate;

module/index.js

@@ -0,1 +1,2 @@
+import { parse } from '@conform-to/dom';
 import * as yup from 'yup';
@@ -101,3 +102,17 @@
 }
+function validate(formData, schema) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var submission = parse(formData);
 
-export { formatError, getFieldsetConstraint };
+  try {
+    schema.validateSync(submission.value, {
+      abortEarly: false
+    });
+  } catch (error) {
+    submission.error.push(...formatError(error, options.fallbackMessage));
+  }
+
+  return submission;
+}
+
+export { formatError, getFieldsetConstraint, validate };

package.json

@@ -5,3 +5,3 @@ {
 	"license": "MIT",
-	"version": "0.4.0-pre.2",
+	"version": "0.4.0-pre.3",
 	"main": "index.js",
@@ -18,3 +18,3 @@ "module": "module/index.js",
 	"peerDependencies": {
-		"@conform-to/dom": "0.4.0-pre.2",
+		"@conform-to/dom": "0.4.0-pre.3",
 		"yup": ">=0.32.0"
@@ -21,0 +21,0 @@ },

README.md

@@ -10,2 +10,4 @@ # @conform-to/yup
 - [formatError](#formatError)
+- [getFieldsetConstraint](#getfieldsetconstraint)
+- [validate](#validate)
 
@@ -21,3 +23,3 @@ <!-- /aside -->
 ```tsx
-import { useForm } from '@conform-to/react';
+import { useForm, parse } from '@conform-to/react';
 import { formatError } from '@conform-to/yup';
@@ -34,3 +36,5 @@ import * as yup from 'yup';
   const formProps = useForm<yup.InferType<typeof schema>>({
-    onValidate({ form, submission }) {
+    onValidate({ formData }) {
+      const submission = parse(formData);
+
       try {
@@ -42,5 +46,5 @@ // Only sync validation is allowed on the client side
       } catch (error) {
-        submission.error = submission.error.concat(
+        submission.error.push(
           // The 2nd argument is an optional fallback message
-          formatError(
+          ...formatError(
             error,
@@ -52,3 +56,3 @@ 'The application has encountered an unknown error.',
 
-      setFormError(form, submission);
+      return submission;
     },
@@ -82,13 +86,7 @@ });
 
-    if (submission.context !== 'validate') {
+    if (submission.type !== 'validate') {
       return await handleFormData(data);
     }
   } catch (error) {
-    if (error instanceof yup.ValidationError) {
-      submission.error = submission.error.concat(formatError(error));
-    } else {
-      submission.error = submission.error.concat([
-        ['', 'Sorry, something went wrong.'],
-      ]);
-    }
+    submission.error.push(...formatError(error));
   }
@@ -109,1 +107,50 @@
 ```
+
+### getFieldsetConstraint
+
+This tries to infer constraint of each field based on the yup schema. This is useful only for:
+
+1. Make it easy to style input using CSS, e.g. `:required`
+2. Have some basic validation working before/without JS. But the message is not customizable and it might be simpler and cleaner relying on server validation.
+
+```tsx
+import { getFieldsetConstraint } from '@conform-to/yup';
+
+function LoginFieldset() {
+  const form = useForm();
+  const { email, password } = useFieldset(ref, {
+    ...form.config,
+    constraint: getFieldsetConstraint(schema),
+  });
+
+  // ...
+}
+```
+
+### validate
+
+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.
+
+```tsx
+import { useForm } from '@conform-to/react';
+import { validate } from '@conform-to/yup';
+import * as yup from 'yup';
+
+const schema = yup.object({
+  email: yup.string().required(),
+  password: yup.string().required(),
+});
+
+function ExampleForm() {
+  const formProps = useForm({
+    onValidate({ formData }) {
+      return validate(formData, schema, {
+        // Optional
+        fallbackMessage: 'The application has encountered an unknown error.',
+      });
+    },
+  });
+
+  // ...
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16312

increased by14.37%

Lines of code

273

increased by10.98%

Number of lines in readme file

150

increased by45.63%

No dependency changes