Add support for standard schema

.changeset/shaggy-toes-attack.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+feat: add standard schema support

packages/core/package.json

@@ -41,6 +41,8 @@
     "dist/*.d.ts"
   ],
   "dependencies": {
+    "@standard-schema/spec": "1.0.0-beta.1",
+    "@standard-schema/utils": "^0.1.1",
     "klona": "^2.0.6",
     "type-fest": "^4.26.0",
     "vue": ">=3.5.0"

packages/core/src/types/forms.ts

@@ -1,18 +1,29 @@
 import { Schema, Simplify } from 'type-fest';
+import type { v1 } from '@standard-schema/spec';
 import { FormObject } from './common';
 import { Path } from './paths';
-import { TypedSchemaError } from './typedSchema';
 import { FormValidationMode } from '../useForm/formContext';
 
+export type StandardIssue = v1.StandardIssue;
+
+export type StandardSchema<TInput = unknown, TOutput = TInput> = v1.StandardSchema<TInput, TOutput>;
+
+export type FormSchema = StandardSchema<FormObject>;
+
 export type TouchedSchema<TForm extends FormObject> = Simplify<Schema<TForm, boolean>>;
 
 export type DisabledSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, boolean>>;
 
 export type ErrorsSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, string[]>>;
 
+export type IssueCollection = {
+  path: string;
+  messages: string[];
+};
+
 type BaseValidationResult = {
   isValid: boolean;
-  errors: TypedSchemaError[];
+  errors: IssueCollection[];
 };
 
 export interface ValidationResult<TValue = unknown> extends BaseValidationResult {

packages/core/src/types/index.ts

@@ -1,4 +1,3 @@
 export * from './common';
 export * from './paths';
 export * from './forms';
-export * from './typedSchema';

packages/core/src/useCheckbox/useCheckbox.ts

@@ -14,7 +14,7 @@ import {
   NormalizedProps,
   Reactivify,
   RovingTabIndex,
-  TypedSchema,
+  StandardSchema,
 } from '../types';
 import { useLabel } from '../a11y/useLabel';
 import { CheckboxGroupContext, CheckboxGroupKey } from './useCheckboxGroup';
@@ -38,7 +38,7 @@ export interface CheckboxProps<TValue = string> {
   indeterminate?: boolean;
   standalone?: boolean;
 
-  schema?: TypedSchema<TValue>;
+  schema?: StandardSchema<TValue>;
 
   disableHtmlValidation?: boolean;
 }

packages/core/src/useCheckbox/useCheckboxGroup.spec.ts

@@ -4,9 +4,7 @@ import { CheckboxProps, useCheckbox } from './useCheckbox';
 import { fireEvent, render, screen } from '@testing-library/vue';
 import { axe } from 'vitest-axe';
 import { describe } from 'vitest';
-import { flush } from '@test-utils/flush';
-import { TypedSchema } from '../types';
-import { renderSetup } from '../../../test-utils/src';
+import { flush, renderSetup, defineStandardSchema } from '@test-utils/index';
 
 const createGroup = (
   props: CheckboxGroupProps,
@@ -224,16 +222,13 @@ describe('validation', () => {
   });
 
   test('should revalidate when value changes', async () => {
-    const schema: TypedSchema<string[]> = {
-      parse: value => {
-        return value?.length >= 2
-          ? Promise.resolve({ output: value, errors: [] })
-          : Promise.resolve({
-              output: value,
-              errors: [{ messages: ['You must select two or more options'], path: '' }],
-            });
-      },
-    };
+    const schema = defineStandardSchema<any, any>(async ({ value }) => {
+      return (value as any)?.length >= 2
+        ? Promise.resolve({ value: value })
+        : Promise.resolve({
+            issues: [{ message: 'You must select two or more options', path: [''] }],
+          });
+    });
 
     const CheckboxGroup = createGroup({ label: 'Group', schema });
     const Checkbox = createCheckbox(CustomBase);

packages/core/src/useCheckbox/useCheckboxGroup.ts

@@ -8,7 +8,7 @@ import {
   Direction,
   Reactivify,
   Arrayable,
-  TypedSchema,
+  StandardSchema,
 } from '../types';
 import {
   useUniqId,
@@ -72,7 +72,7 @@ export interface CheckboxGroupProps<TCheckbox = unknown> {
   readonly?: boolean;
   required?: boolean;
 
-  schema?: TypedSchema<CheckboxGroupValue<TCheckbox>>;
+  schema?: StandardSchema<CheckboxGroupValue<TCheckbox>>;
 
   disableHtmlValidation?: boolean;
 }

packages/core/src/useForm/formContext.ts

@@ -6,9 +6,9 @@ import {
   Path,
   PathValue,
   TouchedSchema,
-  TypedSchema,
+  StandardSchema,
   ErrorsSchema,
-  TypedSchemaError,
+  IssueCollection,
 } from '../types';
 import { cloneDeep, isEqual, normalizeArrayable } from '../utils/common';
 import { escapePath, findLeaf, getFromPath, isPathSet, setInPath, unsetPath as unsetInObject } from '../utils/path';
@@ -36,7 +36,7 @@ export interface BaseFormContext<TForm extends FormObject = FormObject> {
   getFieldErrors<TPath extends Path<TForm>>(path: TPath): string[];
   setFieldErrors<TPath extends Path<TForm>>(path: TPath, message: Arrayable<string>): void;
   getValidationMode(): FormValidationMode;
-  getErrors: () => TypedSchemaError[];
+  getErrors: () => IssueCollection[];
   clearErrors: (path?: string) => void;
   hasErrors: () => boolean;
   getValues: () => TForm;
@@ -55,7 +55,7 @@ export interface FormContextCreateOptions<TForm extends FormObject = FormObject,
   touched: TouchedSchema<TForm>;
   disabled: DisabledSchema<TForm>;
   errors: Ref<ErrorsSchema<TForm>>;
-  schema: TypedSchema<TForm, TOutput> | undefined;
+  schema: StandardSchema<TForm, TOutput> | undefined;
   snapshots: {
     values: FormSnapshot<TForm>;
     touched: FormSnapshot<TouchedSchema<TForm>>;
@@ -134,9 +134,9 @@ export function createFormContext<TForm extends FormObject = FormObject, TOutput
     return !!findLeaf(errors.value, l => Array.isArray(l) && l.length > 0);
   }
 
-  function getErrors(): TypedSchemaError[] {
+  function getErrors(): IssueCollection[] {
     return Object.entries(errors.value)
-      .map<TypedSchemaError>(([key, value]) => ({ path: key, messages: value as string[] }))
+      .map<IssueCollection>(([key, value]) => ({ path: key, messages: value as string[] }))
       .filter(e => e.messages.length > 0);
   }
 

packages/core/src/useForm/formSnapshot.ts

@@ -1,10 +1,10 @@
 import { Ref, shallowRef, toValue } from 'vue';
-import { FormObject, MaybeGetter, MaybeAsync, TypedSchema } from '../types';
+import { FormObject, MaybeGetter, MaybeAsync, StandardSchema } from '../types';
 import { cloneDeep, isPromise } from '../utils/common';
 
 interface FormSnapshotOptions<TForm extends FormObject, TOutput extends FormObject = TForm> {
   onAsyncInit?: (values: TForm) => void;
-  schema?: TypedSchema<TForm, TOutput>;
+  schema?: StandardSchema<TForm, TOutput>;
 }
 
 export interface FormSnapshot<TForm extends FormObject> {
@@ -23,13 +23,13 @@ export function useFormSnapshots<TForm extends FormObject, TOutput extends FormO
   const provided = toValue(provider);
   if (isPromise(provided)) {
     provided.then(resolved => {
-      const inits = opts?.schema?.defaults?.(resolved) ?? resolved;
+      const inits = resolved;
       initials.value = cloneDeep(inits || {}) as TForm;
       originals.value = cloneDeep(inits || {}) as TForm;
       opts?.onAsyncInit?.(cloneDeep(inits));
     });
   } else {
-    const inits = opts?.schema?.defaults?.(provided || ({} as TForm)) ?? provided;
+    const inits = provided;
     initials.value = cloneDeep(inits || {}) as TForm;
     originals.value = cloneDeep(inits || {}) as TForm;
   }