From 809c08673ed9fb95afad930a17e0bc58b2ad7d43 Mon Sep 17 00:00:00 2001 From: Robin Hos <454303+rehos@users.noreply.github.com> Date: Sun, 9 Mar 2025 13:13:02 +0100 Subject: [PATCH 1/2] Update validation.md Effect Schema also supports Standard Schema --- docs/framework/react/guides/validation.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md index dbfd70da8..343edb9d9 100644 --- a/docs/framework/react/guides/validation.md +++ b/docs/framework/react/guides/validation.md @@ -446,6 +446,7 @@ TanStack Form natively supports all libraries following the [Standard Schema spe - [Zod](https://zod.dev/) - [Valibot](https://valibot.dev/) - [ArkType](https://arktype.io/) +- [Effect/Schema](https://effect.website/docs/schema/standard-schema/) _Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet. From 6d386e724c7479f6d3d98c05f55f3e9eeee7b275 Mon Sep 17 00:00:00 2001 From: Robin Hos <454303+rehos@users.noreply.github.com> Date: Mon, 10 Mar 2025 18:16:32 +0100 Subject: [PATCH 2/2] Add validation by Effect/Schema to react example --- examples/react/standard-schema/package.json | 1 + examples/react/standard-schema/src/index.tsx | 19 +++++++++++++ pnpm-lock.yaml | 29 ++++++++++++++++++++ 3 files changed, 49 insertions(+) diff --git a/examples/react/standard-schema/package.json b/examples/react/standard-schema/package.json index 469ac1d3e..82315c102 100644 --- a/examples/react/standard-schema/package.json +++ b/examples/react/standard-schema/package.json @@ -11,6 +11,7 @@ "dependencies": { "@tanstack/react-form": "^1.0.5", "arktype": "^2.0.0", + "effect": "^3.13.8", "react": "^19.0.0", "react-dom": "^19.0.0", "valibot": "^1.0.0-beta.9", diff --git a/examples/react/standard-schema/src/index.tsx b/examples/react/standard-schema/src/index.tsx index d3500b4ad..a50aa6ea5 100644 --- a/examples/react/standard-schema/src/index.tsx +++ b/examples/react/standard-schema/src/index.tsx @@ -4,6 +4,7 @@ import * as React from 'react' import { createRoot } from 'react-dom/client' import * as v from 'valibot' import { z } from 'zod' +import { Schema as S } from 'effect' import type { AnyFieldApi } from '@tanstack/react-form' function FieldInfo({ field }: { field: AnyFieldApi }) { @@ -42,6 +43,23 @@ const ArkTypeSchema = type({ lastName: 'string >= 3', }) +const EffectSchema = S.standardSchemaV1( + S.Struct({ + firstName: S.String.pipe( + S.minLength(3), + S.annotations({ + message: () => '[Effect/Schema] You must have a length of at least 3', + }) + ), + lastName: S.String.pipe( + S.minLength(3), + S.annotations({ + message: () => '[Effect/Schema] You must have a length of at least 3', + }) + ), + }) +); + export default function App() { const form = useForm({ defaultValues: { @@ -53,6 +71,7 @@ export default function App() { onChange: ZodSchema, // onChange: ValibotSchema, // onChange: ArkTypeSchema, + // onChange: EffectSchema, }, onSubmit: async ({ value }) => { // Do something with form data diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d0150aec1..b40340cc7 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -464,6 +464,9 @@ importers: arktype: specifier: ^2.0.0 version: 2.0.4 + effect: + specifier: ^3.13.8 + version: 3.13.8 react: specifier: ^19.0.0 version: 19.0.0 @@ -4069,6 +4072,9 @@ packages: '@solidjs/router': optional: true + '@standard-schema/spec@1.0.0': + resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==} + '@stylistic/eslint-plugin-js@4.0.1': resolution: {integrity: sha512-2EGKM6WHnZSidWKCu6ePJCqdpgWiEU1Bt26ktWEfTpCmRP+2vRQ6ViK8X6DLwu4+F0zPLy/Txe2HhI3qJFUvqA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -5824,6 +5830,9 @@ packages: ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} + effect@3.13.8: + resolution: {integrity: sha512-v4659n0zzu9UEbbs7wrsQyrWl4yaqSPQDVVMCUVtiOp54zqzIw3HK4FUr7peOkmx63aXRHofiXpmY8GXDeez+g==} + electron-to-chromium@1.5.102: resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==} @@ -6218,6 +6227,10 @@ packages: resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==} engines: {node: '>=4'} + fast-check@3.23.2: + resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==} + engines: {node: '>=8.0.0'} + fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -8526,6 +8539,9 @@ packages: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} + pure-rand@6.1.0: + resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==} + qs@6.13.0: resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==} engines: {node: '>=0.6'} @@ -13722,6 +13738,8 @@ snapshots: '@testing-library/dom': 10.4.0 solid-js: 1.9.4 + '@standard-schema/spec@1.0.0': {} + '@stylistic/eslint-plugin-js@4.0.1(eslint@9.18.0(jiti@2.4.2))': dependencies: eslint: 9.18.0(jiti@2.4.2) @@ -16342,6 +16360,11 @@ snapshots: ee-first@1.1.1: {} + effect@3.13.8: + dependencies: + '@standard-schema/spec': 1.0.0 + fast-check: 3.23.2 + electron-to-chromium@1.5.102: {} emoji-regex@10.4.0: {} @@ -17036,6 +17059,10 @@ snapshots: iconv-lite: 0.4.24 tmp: 0.0.33 + fast-check@3.23.2: + dependencies: + pure-rand: 6.1.0 + fast-deep-equal@3.1.3: {} fast-fifo@1.3.2: {} @@ -19777,6 +19804,8 @@ snapshots: punycode@2.3.1: {} + pure-rand@6.1.0: {} + qs@6.13.0: dependencies: side-channel: 1.0.6