Upgrade and migrate Valibot to v0.31.0

examples/angular/valibot/angular.json

@@ -74,5 +74,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

examples/angular/valibot/package.json

@@ -22,7 +22,7 @@
     "@angular/router": "^17.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "valibot": "^0.20.1",
+    "valibot": "^0.31.1",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {

examples/angular/valibot/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
 import { valibotValidator } from '@tanstack/valibot-form-adapter'
-import { customAsync, minLength, string, stringAsync } from 'valibot'
+import * as v from 'valibot'
 
 @Component({
   selector: 'app-root',
@@ -57,16 +57,18 @@ import { customAsync, minLength, string, stringAsync } from 'valibot'
   `,
 })
 export class AppComponent {
-  firstNameValidator = string([
-    minLength(3, 'First name must be at least 3 characters'),
-  ])
+  firstNameValidator = v.pipe(
+    v.string(),
+    v.minLength(3, 'You must have a length of at least 3'),
+  )
 
-  firstNameAsyncValidator = stringAsync([
-    customAsync(async (value) => {
+  firstNameAsyncValidator = v.pipeAsync(
+    v.string(),
+    v.checkAsync(async (value) => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
       return !value.includes('error')
     }, "No 'error' allowed in first name"),
-  ])
+  )
 
   form = injectForm({
     defaultValues: {

examples/angular/valibot/tsconfig.json

@@ -18,6 +18,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
+    "skipLibCheck": true,
     "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {

examples/react/valibot/package.json

@@ -13,7 +13,7 @@
     "@tanstack/valibot-form-adapter": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "valibot": "^0.20.1"
+    "valibot": "^0.31.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",

examples/react/valibot/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import { useForm } from '@tanstack/react-form'
 import { valibotValidator } from '@tanstack/valibot-form-adapter'
-import { customAsync, minLength, string, stringAsync } from 'valibot'
+import * as v from 'valibot'
 import type { FieldApi } from '@tanstack/react-form'
 
 function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
@@ -45,16 +45,18 @@ export default function App() {
           <form.Field
             name="firstName"
             validators={{
-              onChange: string([
-                minLength(3, 'First name must be at least 3 characters'),
-              ]),
+              onChange: v.pipe(
+                v.string(),
+                v.minLength(3, 'You must have a length of at least 3'),
+              ),
               onChangeAsyncDebounceMs: 500,
-              onChangeAsync: stringAsync([
-                customAsync(async (value) => {
+              onChangeAsync: v.pipeAsync(
+                v.string(),
+                v.checkAsync(async (value) => {
                   await new Promise((resolve) => setTimeout(resolve, 1000))
                   return !value.includes('error')
                 }, "No 'error' allowed in first name"),
-              ]),
+              ),
             }}
             children={(field) => {
               // Avoid hasty abstractions. Render props are great!

examples/react/valibot/tsconfig.json

@@ -4,6 +4,7 @@
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
+    "skipLibCheck": true,
     "lib": ["DOM", "DOM.Iterable", "ES2020"]
   }
 }

examples/solid/valibot/package.json

@@ -12,7 +12,7 @@
     "@tanstack/solid-form": "^0.20.3",
     "@tanstack/valibot-form-adapter": "^0.20.3",
     "solid-js": "^1.7.8",
-    "valibot": "^0.20.1"
+    "valibot": "^0.31.1"
   },
   "devDependencies": {
     "typescript": "5.4.2",

examples/solid/valibot/src/index.tsx

@@ -3,7 +3,7 @@ import { render } from 'solid-js/web'
 
 import { createForm } from '@tanstack/solid-form'
 import { valibotValidator } from '@tanstack/valibot-form-adapter'
-import { customAsync, minLength, string, stringAsync } from 'valibot'
+import * as v from 'valibot'
 import type { FieldApi } from '@tanstack/solid-form'
 
 interface FieldInfoProps {
@@ -50,16 +50,18 @@ function App() {
           <form.Field
             name="firstName"
             validators={{
-              onChange: string([
-                minLength(3, 'First name must be at least 3 characters'),
-              ]),
+              onChange: v.pipe(
+                v.string(),
+                v.minLength(3, 'You must have a length of at least 3'),
+              ),
               onChangeAsyncDebounceMs: 500,
-              onChangeAsync: stringAsync([
-                customAsync(async (value) => {
+              onChangeAsync: v.pipeAsync(
+                v.string(),
+                v.checkAsync(async (value) => {
                   await new Promise((resolve) => setTimeout(resolve, 1000))
                   return !value.includes('error')
                 }, "No 'error' allowed in first name"),
-              ]),
+              ),
             }}
             children={(field) => {
               // Avoid hasty abstractions. Render props are great!

examples/vue/valibot/package.json

@@ -9,10 +9,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.3",
     "@tanstack/valibot-form-adapter": "^0.20.3",
-    "vue": "^3.3.4",
-    "valibot": "^0.20.1"
+    "@tanstack/vue-form": "^0.20.3",
+    "valibot": "^0.31.1",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

examples/vue/valibot/src/App.vue

@@ -2,7 +2,7 @@
 import { useForm } from '@tanstack/vue-form'
 import FieldInfo from './FieldInfo.vue'
 import { valibotValidator } from '@tanstack/valibot-form-adapter'
-import { customAsync, minLength, string, stringAsync } from 'valibot'
+import * as v from 'valibot'
 
 const form = useForm({
   defaultValues: {
@@ -17,12 +17,13 @@ const form = useForm({
   validatorAdapter: valibotValidator,
 })
 
-const onChangeFirstName = stringAsync([
-  customAsync(async (value) => {
+const onChangeFirstName = v.pipeAsync(
+  v.string(),
+  v.checkAsync(async (value) => {
     await new Promise((resolve) => setTimeout(resolve, 1000))
     return !value.includes('error')
   }, "No 'error' allowed in first name"),
-])
+)
 </script>
 
 <template>
@@ -42,9 +43,10 @@ const onChangeFirstName = stringAsync([
       <form.Field
         name="firstName"
         :validators="{
-          onChange: string([
-            minLength(3, 'First name must be at least 3 characters'),
-          ]),
+          onChange: v.pipe(
+            v.string(),
+            v.minLength(3, 'You must have a length of at least 3'),
+          ),
           onChangeAsyncDebounceMs: 500,
           onChangeAsync: onChangeFirstName,
         }"

packages/valibot-form-adapter/package.json

@@ -35,7 +35,6 @@
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types:versions49": "node ../../node_modules/typescript49/lib/tsc.js --project tsconfig.legacy.json",
     "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js",
     "test:types:versions51": "node ../../node_modules/typescript51/lib/tsc.js",
     "test:types:versions52": "node ../../node_modules/typescript52/lib/tsc.js",
@@ -51,9 +50,9 @@
     "@tanstack/form-core": "workspace:*"
   },
   "peerDependencies": {
-    "valibot": "^0.x"
+    "valibot": ">=0.31.0 <1"
   },
   "devDependencies": {
-    "valibot": "^0.20.1"
+    "valibot": "^0.31.1"
   }
 }

packages/valibot-form-adapter/src/tests/FieldApi.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { FieldApi, FormApi } from '@tanstack/form-core'
-import { customAsync, minLength, string, stringAsync } from 'valibot'
+import * as v from 'valibot'
 import { valibotValidator } from '../validator'
 import { sleep } from './utils'
 
@@ -17,9 +17,10 @@ describe('valibot field api', () => {
       validatorAdapter: valibotValidator,
       name: 'name',
       validators: {
-        onChange: string([
-          minLength(3, 'You must have a length of at least 3'),
-        ]),
+        onChange: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+        ),
       },
     })
 
@@ -71,9 +72,10 @@ describe('valibot field api', () => {
       validatorAdapter: valibotValidator,
       name: 'name',
       validators: {
-        onChangeAsync: stringAsync([
-          customAsync(async (val) => val.length > 3, 'Testing 123'),
-        ]),
+        onChangeAsync: v.pipeAsync(
+          v.string(),
+          v.checkAsync(async (val) => val.length > 3, 'Testing 123'),
+        ),
         onChangeAsyncDebounceMs: 0,
       },
     })

packages/valibot-form-adapter/src/tests/FieldApi.test-d.ts

@@ -1,5 +1,5 @@
 import { assertType, it } from 'vitest'
-import { object, string } from 'valibot'
+import * as v from 'valibot'
 import { FieldApi, FormApi } from '@tanstack/form-core'
 import { valibotValidator } from '../validator'
 
@@ -29,7 +29,7 @@ it('should allow a Valibot validator to handle the correct Valibot type', () =>
     name: 'name',
     validatorAdapter: valibotValidator,
     validators: {
-      onChange: string(),
+      onChange: v.string(),
     },
   } as const)
 })
@@ -46,7 +46,7 @@ it('should allow a Valibot validator to handle the correct Valibot type for an a
     name: 'name',
     validatorAdapter: valibotValidator,
     validators: {
-      onChangeAsync: string(),
+      onChangeAsync: v.string(),
     },
   } as const)
 })
@@ -99,7 +99,7 @@ it.skip('should allow not a Valibot validator with the wrong Valibot type', () =
     name: 'name',
     validatorAdapter: valibotValidator,
     validators: {
-      onChange: object({}),
+      onChange: v.object({}),
     },
   } as const)
 })

packages/valibot-form-adapter/src/tests/FormApi.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { FieldApi, FormApi } from '@tanstack/form-core'
-import { minLength, string } from 'valibot'
+import * as v from 'valibot'
 import { valibotValidator } from '../validator'
 
 describe('valibot form api', () => {
@@ -16,9 +16,10 @@ describe('valibot form api', () => {
       form,
       name: 'name',
       validators: {
-        onChange: string([
-          minLength(3, 'You must have a length of at least 3'),
-        ]),
+        onChange: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+        ),
       },
     })
 

packages/valibot-form-adapter/src/tests/FormApi.test-d.ts

@@ -1,5 +1,5 @@
 import { assertType, it } from 'vitest'
-import { object, string } from 'valibot'
+import * as v from 'valibot'
 import { FieldApi, FormApi } from '@tanstack/form-core'
 import { valibotValidator } from '../validator'
 
@@ -24,7 +24,7 @@ it('should allow a Valibot validator to handle the correct Valibot type', () =>
     form,
     name: 'name',
     validators: {
-      onChange: string(),
+      onChange: v.string(),
     },
   })
 })
@@ -41,7 +41,7 @@ it('should allow a Valibot validator to handle the correct Valibot type on async
     form,
     name: 'name',
     validators: {
-      onChangeAsync: string(),
+      onChangeAsync: v.string(),
     },
   })
 })
@@ -94,7 +94,7 @@ it.skip('should allow not a Valibot validator with the wrong Valibot type', () =
     name: 'name',
     validatorAdapter: valibotValidator,
     validators: {
-      onChange: object({}),
+      onChange: v.object({}),
     },
   })
 })

packages/valibot-form-adapter/src/validator.ts

@@ -1,5 +1,5 @@
 import { safeParse, safeParseAsync } from 'valibot'
-import type { BaseSchema, BaseSchemaAsync } from 'valibot'
+import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
 import type { Validator } from '@tanstack/form-core'
 
 export const valibotValidator = (() => {
@@ -16,4 +16,8 @@ export const valibotValidator = (() => {
       return result.issues.map((i) => i.message).join(', ')
     },
   }
-}) as Validator<unknown, BaseSchema | BaseSchemaAsync>
+}) as Validator<
+  unknown,
+  | BaseSchema<unknown, unknown, BaseIssue<unknown>>
+  | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
+>

packages/valibot-form-adapter/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "moduleResolution": "Bundler",
+    "skipLibCheck": true,
     "paths": {
       "@tanstack/form-core": ["../form-core/src"]
     }