@conform-to/yup - npm Package Compare versions

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

index.js

@@ -5,2 +5,24 @@ 'use strict';
 
+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 getFieldsetConstraint(source) {
@@ -90,14 +112,18 @@ var description = source.describe();
 }
-function getError(error) {
-  var _error$inner$reduce;
+function formatError(error) {
+  var fallbackMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Oops! Something went wrong.';
 
-  return (_error$inner$reduce = error === null || error === void 0 ? void 0 : error.inner.reduce((result, e) => {
-    var _e$path;
+  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;
-  }, [])) !== null && _error$inner$reduce !== void 0 ? _error$inner$reduce : [];
+      result.push([(_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '', e.message]);
+      return result;
+    }, []);
+  }
+
+  return [['', error instanceof Error ? error.message : fallbackMessage]];
 }
 
-exports.getError = getError;
+exports.formatError = formatError;
 exports.getFieldsetConstraint = getFieldsetConstraint;

module/index.js

@@ -0,1 +1,3 @@
+import * as yup from 'yup';
+
 function getFieldsetConstraint(source) {
@@ -85,13 +87,17 @@ var description = source.describe();
 }
-function getError(error) {
-  var _error$inner$reduce;
+function formatError(error) {
+  var fallbackMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Oops! Something went wrong.';
 
-  return (_error$inner$reduce = error === null || error === void 0 ? void 0 : error.inner.reduce((result, e) => {
-    var _e$path;
+  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;
-  }, [])) !== null && _error$inner$reduce !== void 0 ? _error$inner$reduce : [];
+      result.push([(_e$path = e.path) !== null && _e$path !== void 0 ? _e$path : '', e.message]);
+      return result;
+    }, []);
+  }
+
+  return [['', error instanceof Error ? error.message : fallbackMessage]];
 }
 
-export { getError, getFieldsetConstraint };
+export { formatError, getFieldsetConstraint };

package.json

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

README.md

@@ -9,51 +9,43 @@ # @conform-to/yup
 
-- [resolve](#resolve)
+- [formatError](#formatError)
 
 <!-- /aside -->
 
-### resolve
+### formatError
 
-It resolves yup schema to a conform schema:
+This formats Yup `ValidationError` to the **conform** error structure (i.e. A set of key/value pairs).
 
+If the error received is not provided by Yup, it will be treated as a form level error with message set to **error.messages** or **Oops! Something went wrong.** if no fallback message is provided.
+
 ```tsx
-import { useForm, useFieldset } from '@conform-to/react';
-import { resolve } from '@conform-to/yup';
+import { useForm } from '@conform-to/react';
+import { formatError } from '@conform-to/yup';
 import * as yup from 'yup';
 
 // Define the schema with yup
-const schema = resolve(
-  yup.object({
-    email: yup.string().required(),
-    password: yup.string().required(),
-  })
-);
+const schema = 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);
+  const formProps = useForm<yup.InferType<typeof schema>>({
+    onValidate({ form, submission }) {
+      try {
+        // Only sync validation is allowed on the client side
+        schema.validateSync(submission.value, {
+          abortEarly: false,
+        });
+      } catch (error) {
+        submission.error = submission.error.concat(
+          // The 2nd argument is an optional fallback message
+          formatError(
+            error,
+            'The application has encountered an unknown error.',
+          ),
+        );
+      }
 
-      // Parse the data against the yup 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({
-    // Optional: setup native constraint inferred from the schema
-    constraint: schema.constraint
+      setFormError(form, submission);
+    },
   });
@@ -65,33 +57,48 @@
 
-Or parse the request payload on server side (e.g. Remix):
+Or when validating the formData on server side (e.g. Remix):
 
 ```tsx
-import { resolve } from '@conform-to/yup';
+import { useForm, parse } from '@conform-to/react';
+import { formatError } from '@conform-to/yup';
 import * as yup from 'yup';
 
-const schema = resolve(
-  yup.object({
-    // Define the schema with yup
-  }),
-);
+const schema = yup.object({
+  // Define the schema with yup
+});
 
 export let action = async ({ request }) => {
   const formData = await request.formData();
-  const submission = schema.parse(formData);
+  const submission = parse(formData);
 
-  // Return the current form state if not accepted
-  if (submission.state !== 'accepted') {
-    return json(submission.form);
+  try {
+    // You can extends the schema with async validation as well
+    const data = await schema.validate(submission.value, {
+      abortEarly: false,
+    });
+
+    if (submission.context !== '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.'],
+      ]);
+    }
   }
 
-  // Do something else
+  return submission;
 };
 
 export default function ExampleRoute() {
-  const formState = useActionData();
+  const state = useActionData();
+  const form = useForm({
+    mode: 'server-validation',
+    state,
+  });
 
-  // You can then use formState.value / formState.error
-  // to populate inital value of each fields with
-  // the intital 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

14263

increased by8.11%

Lines of code

246

increased by11.82%

Number of lines in readme file

103

increased by7.29%

No dependency changes