feat: implement standard schema support

Author: logaretm

package.json

@@ -68,7 +68,8 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0",
     "vue": "^3.4.26",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "vue": "^3.4.26"

packages/joi/package.json

@@ -39,6 +39,7 @@
     "dist/*.mjs"
   ],
   "dependencies": {
+    "@standard-schema/spec": "^1.0.0",
     "joi": "17.11.0",
     "type-fest": "^4.8.3",
     "vee-validate": "workspace:*"

packages/joi/src/index.ts

@@ -1,7 +1,7 @@
-import type { TypedSchema, TypedSchemaError } from 'vee-validate';
 import { AsyncValidationOptions, Schema, ValidationError } from 'joi';
-import { merge, normalizeFormPath } from '../../shared';
+import { merge } from '../../shared';
 import { PartialDeep } from 'type-fest';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 
 /**
  * Gets the type of data from the schema
@@ -19,64 +19,42 @@ export function toTypedSchema<
   TSchema extends Schema,
   TOutput = DataTypeOf<TSchema>,
   TInput = PartialDeep<DataTypeOf<TSchema>>,
->(joiSchema: TSchema, opts?: AsyncValidationOptions): TypedSchema<TInput, TOutput> {
+>(joiSchema: TSchema, opts?: AsyncValidationOptions): StandardSchemaV1<TInput, TOutput> {
   const validationOptions: AsyncValidationOptions = merge({ abortEarly: false }, opts || {});
 
-  const schema: TypedSchema = {
-    __type: 'VVTypedSchema',
-    async parse(value) {
-      try {
-        const result = await joiSchema.validateAsync(value, validationOptions);
-
-        return {
-          value: result,
-          errors: [],
-        };
-      } catch (err) {
-        if (!(err instanceof ValidationError)) {
-          throw err;
+  const schema: StandardSchemaV1<TInput, TOutput> = {
+    '~standard': {
+      vendor: 'vee-validate/joi',
+      version: 1,
+      async validate(value) {
+        try {
+          const result = await joiSchema.validateAsync(value, validationOptions);
+
+          return {
+            value: result,
+            issues: undefined,
+          };
+        } catch (err) {
+          if (!(err instanceof ValidationError)) {
+            throw err;
+          }
+
+          return {
+            issues: processIssues(err),
+          };
         }
-
-        const error = err as ValidationError;
-
-        return {
-          errors: processIssues(error),
-          rawError: err,
-        };
-      }
-    },
-    cast(values) {
-      // Joi doesn't allow us to cast without validating
-      const result = joiSchema.validate(values);
-
-      if (result.error) {
-        return values;
-      }
-
-      return result.value;
+      },
     },
   };
 
   return schema;
 }
 
-function processIssues(error: ValidationError): TypedSchemaError[] {
-  const errors: Record<string, TypedSchemaError> = {};
-
-  error.details.forEach(detail => {
-    const path = normalizeFormPath(detail.path.join('.'));
-
-    if (errors[path]) {
-      errors[path].errors.push(detail.message);
-
-      return;
-    }
-
-    errors[path] = {
-      path,
-      errors: [detail.message],
+function processIssues(error: ValidationError): StandardSchemaV1.Issue[] {
+  return error.details.map<StandardSchemaV1.Issue>(detail => {
+    return {
+      path: detail.path,
+      message: detail.message,
     };
   });
-
-  return Object.values(errors);
 }

packages/joi/tests/joi.spec.ts

@@ -209,118 +209,6 @@ test('validates typed schema form with joi', async () => {
   expect(passwordError.textContent).toBe('');
 });
 
-test('uses joi default values for submission', async () => {
-  const submitSpy = vi.fn();
-
-  mountWithHoc({
-    setup() {
-      const schema = toTypedSchema(
-        Joi.object({
-          age: Joi.number().default(11),
-        }),
-      );
-
-      const { handleSubmit } = useForm({
-        validationSchema: schema,
-      });
-
-      // submit now
-      handleSubmit(submitSpy)();
-
-      return {
-        schema,
-      };
-    },
-    template: `<div></div>`,
-  });
-
-  await flushPromises();
-  expect(submitSpy).toHaveBeenCalledTimes(1);
-  expect(submitSpy).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      age: 11,
-    }),
-    expect.anything(),
-  );
-});
-
-test('uses joi default values for initial values', async () => {
-  const initialSpy = vi.fn();
-  mountWithHoc({
-    setup() {
-      const schema = toTypedSchema(
-        Joi.object({
-          name: Joi.string().default('test'),
-          age: Joi.number().default(11),
-          unknownKey: Joi.string(),
-          object: Joi.object({
-            nestedKey: Joi.string(),
-            nestedDefault: Joi.string().default('nested'),
-          }).default(),
-        }),
-      );
-
-      const { values } = useForm({
-        validationSchema: schema,
-      });
-
-      // submit now
-      initialSpy(values);
-
-      return {
-        schema,
-      };
-    },
-    template: `<div></div>`,
-  });
-
-  await flushPromises();
-  expect(initialSpy).toHaveBeenCalledTimes(1);
-  expect(initialSpy).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      age: 11,
-      name: 'test',
-      object: {
-        nestedDefault: 'nested',
-      },
-    }),
-  );
-});
-
-test('reset form should cast the values', async () => {
-  const valueSpy = vi.fn();
-  mountWithHoc({
-    setup() {
-      const schema = toTypedSchema(
-        Joi.object({
-          age: Joi.number(),
-        }),
-      );
-
-      const { values, resetForm } = useForm({
-        validationSchema: schema,
-      });
-
-      resetForm({ values: { age: '12' } });
-      // submit now
-      valueSpy(values);
-
-      return {
-        schema,
-      };
-    },
-    template: `<div></div>`,
-  });
-
-  await flushPromises();
-  expect(valueSpy).toHaveBeenCalledTimes(1);
-  expect(valueSpy).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      age: 12,
-    }),
-  );
-});
-
 // #4186
 test('default values should not be undefined', async () => {
   const initialSpy = vi.fn();

packages/nuxt/src/module.ts

@@ -1,6 +1,5 @@
-import { defineNuxtModule, addComponent, addImports, logger, resolveModule } from '@nuxt/kit';
+import { defineNuxtModule, addComponent, addImports, resolveModule } from '@nuxt/kit';
 import type { Nuxt, NuxtModule } from '@nuxt/schema';
-import { isPackageExists } from 'local-pkg';
 
 type ComponentName = 'Field' | 'Form' | 'ErrorMessage' | 'FieldArray';
 type TypedSchemaPackage = 'yup' | 'zod' | 'valibot' | 'none';
@@ -37,13 +36,6 @@ const composables = [
   'useValidateForm',
 ];
 
-const schemaProviders = ['zod', 'yup', 'valibot'] as const;
-const schemaProviderResolvers: Record<(typeof schemaProviders)[number], string> = {
-  zod: '@vee-validate/zod',
-  yup: '@vee-validate/yup',
-  valibot: '@vee-validate/valibot',
-};
-
 export default defineNuxtModule<VeeValidateNuxtOptions>({
   meta: {
     name: 'vee-validate',
@@ -78,106 +70,9 @@ export default defineNuxtModule<VeeValidateNuxtOptions>({
     if (options.typedSchemaPackage === 'none') {
       return;
     }
-
-    if (options.typedSchemaPackage === 'yup') {
-      checkForYup(options, nuxt);
-      return;
-    }
-
-    if (options.typedSchemaPackage === 'zod') {
-      checkForZod(options, nuxt);
-      return;
-    }
-
-    if (options.typedSchemaPackage === 'valibot') {
-      checkForValibot(options, nuxt);
-      return;
-    }
-
-    if (!checkForYup(options, nuxt)) {
-      if (!checkForZod(options, nuxt)) {
-        checkForValibot(options, nuxt);
-      }
-    }
   },
 }) as NuxtModule<VeeValidateNuxtOptions>;
 
-function checkSchemaResolverDependencies(pkgName: (typeof schemaProviders)[number]) {
-  const makeMsg = (installed: string, uninstalled: string) =>
-    `You seem to be using ${installed}, but you have not installed ${uninstalled}. Please install it to use ${pkgName} with vee-validate.`;
-
-  const resolverPkg = schemaProviderResolvers[pkgName];
-  if (isPackageExists(pkgName) && !isPackageExists(resolverPkg)) {
-    logger.warn(makeMsg(pkgName, resolverPkg));
-    return true;
-  }
-
-  if (isPackageExists(resolverPkg) && !isPackageExists(pkgName)) {
-    logger.warn(makeMsg(resolverPkg, pkgName));
-    return true;
-  }
-}
-
-function checkForValibot(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
-  checkSchemaResolverDependencies('valibot');
-  if (isPackageExists('@vee-validate/valibot') && isPackageExists('valibot')) {
-    logger.info('Using valibot with vee-validate');
-    if (options.autoImports) {
-      addImports({
-        name: 'toTypedSchema',
-        as: 'toTypedSchema',
-        from: '@vee-validate/valibot',
-      });
-    }
-
-    addMjsAlias('@vee-validate/valibot', 'vee-validate-valibot', nuxt);
-
-    return true;
-  }
-
-  return false;
-}
-
-function checkForZod(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
-  checkSchemaResolverDependencies('zod');
-  if (isPackageExists('@vee-validate/zod') && isPackageExists('zod')) {
-    logger.info('Using zod with vee-validate');
-    if (options.autoImports) {
-      addImports({
-        name: 'toTypedSchema',
-        as: 'toTypedSchema',
-        from: '@vee-validate/zod',
-      });
-    }
-
-    addMjsAlias('@vee-validate/zod', 'vee-validate-zod', nuxt);
-
-    return true;
-  }
-
-  return false;
-}
-
-function checkForYup(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
-  checkSchemaResolverDependencies('yup');
-  if (isPackageExists('@vee-validate/yup') && isPackageExists('yup')) {
-    logger.info('Using yup with vee-validate');
-    if (options.autoImports) {
-      addImports({
-        name: 'toTypedSchema',
-        as: 'toTypedSchema',
-        from: '@vee-validate/yup',
-      });
-    }
-
-    addMjsAlias('@vee-validate/yup', 'vee-validate-yup', nuxt);
-
-    return true;
-  }
-
-  return false;
-}
-
 function addMjsAlias(pkgName: string, fileName: string, nuxt: Nuxt) {
   // FIXME: Deprecated, idk why since it duplicate imports
   nuxt.options.alias[pkgName] =

packages/rules/package.json

@@ -38,6 +38,7 @@
     "dist/*.mjs"
   ],
   "dependencies": {
+    "@standard-schema/spec": "^1.0.0",
     "vee-validate": "workspace:*"
   }
 }