Feat: Build form with Zod Schema #266

fazzaamiarso · 2023-03-07T13:13:36Z

Fixes #99

Description of changes:

new resolvers package
create zod schema resolver
create a resolver demo page

Tag a reviewer: @ayoayco

Tasks:

I have ran the build command to make sure apps are working: npm run build
I have ran the tests to make sure nothing is broken: npm run test
I have ran the linter to make sure code is clean: npm run lint
I have reviewed my own code to remove changes that are not needed

netlify · 2023-03-07T13:13:42Z

✅ Deploy Preview for astro-reactive-docs canceled.

Name	Link
🔨 Latest commit	`a628f7a`
🔍 Latest deploy log	https://app.netlify.com/sites/astro-reactive-docs/deploys/641859e49acb2e0008ce5ed9

netlify · 2023-03-07T13:14:09Z

✅ Deploy Preview for astro-reactive canceled.

Name	Link
🔨 Latest commit	`a628f7a`
🔍 Latest deploy log	https://app.netlify.com/sites/astro-reactive/deploys/641859e4f3539400089a34f1

fazzaamiarso · 2023-03-07T13:15:31Z

@ayoayco what do you think about this approach?

How about we only use schema builder only in validators field? So, we just use schema builder as validator. This way, our form config could be more flexible.

It looks something like this

const formGroup = new FormGroup([
  {
  name : "firstName",
  label : "First Name",
  validators : zodResolver(z.string().optional().min(3))
 }
])

ayoayco · 2023-03-08T08:20:23Z

@fazzaamiarso thanks for this! I think that suggestion will indeed address the need to keep some props that we need to build the form (like the label). This is great if users are writing from scratch, I think.

I'm just trying to think of a solution for one use case; which is for people who already have their schemas written in zod.

So they might already have objects, and just want to plug that in when building their form and still be able to provide properties like label. How do we implement it so that they don't have to refactor/rewrite a lot? 🤔

fazzaamiarso · 2023-03-08T19:03:49Z

@ayoayco Tried new approach where we can just plug the resolver into FormGroup config.

Also, passing types to FormGroup constructor enable typesafety on the name props when building the FormGroup. I've made an example page on it.

Will clean the code and write tests later.

ayoayco · 2023-03-08T20:13:53Z

Thanks a lot @fazzaamiarso give me until this weekend to review the code 🙏

ayoayco

Hi, @fazzaamiarso thanks for this! It's nice to see some unit tests started, and I think we need more of that for existing classes.

I went from top to bottom putting comments to each file independently. Please read through them so we are in line with some goals the project needs (i.e. reduce package coupling)

However, in the end, I realized it would be good if we can ship the resolver function as part of the validator package as well. We can then remove the need for the transformToValidatorRules if the resolver function is already able to return an object by using the functions in Validators. If this is achievable with having a separate resolver package, then we can move forward with having a new package.

But keep in mind we want to reduce/remove (non-common) package dependencies (more info in one of my comments below)... maybe a Map in the common package can help? ;)

The rough idea is that the resolver function from our validator package will be able to take in the schema and spit out an array of strings using functions in our Validators class that our FormControl constructor can already understand and use.

Let me know if anything is not clear. As always this is already a great exploration, so thank you!

apps/demo/src/pages/experimental/resolver.astro

packages/common/types/validator.types.ts

packages/form/core/form-control.ts

packages/form/core/form-group.ts

apps/demo/src/pages/experimental/resolver.astro

packages/form/core/form-group.ts

packages/resolvers/vitest.config.ts

packages/common/types/resolver.types.ts

ayoayco · 2023-03-14T17:37:44Z

packages/resolvers/zod/index.ts

+import { ZodFirstPartyTypeKind, ZodObject } from "zod";
+import type { ResolvedField, ResolvedValidator } from "@astro-reactive/common";
+
+export function zodResolver(schema: ZodObject<any>) {


Add a return type here, ResolvedField I think. Also, some JSDoc for the function would be nice!

Then I will ask that you start a new page in our docs site as well for resolvers. I don't mind if it is very initial. Just copy-paste the JSDoc 😄

Alright, will do it! 👍

fazzaamiarso · 2023-03-15T16:58:44Z

@ayoayco what do you think about the new implementation?

ayoayco

I think this implementation is a good start and would love to merge this to play around with Zod :) Just a few requests/suggestions left 🙏 Also don't forget to "resolve" previous comments you addressed so I can scan them later. ❤️

ayoayco · 2023-03-17T16:49:06Z

apps/demo/src/pages/examples/form-component.astro

@@ -37,7 +37,7 @@ const nameForm = new FormGroup(
 			value: 'Doe',
 		},
 	],
-	'Name'
+	{ name: 'Name' }


I just realized, because this is a major API change, I would have to ask that you update old examples in existing docs/readme 🙏 @fazzaamiarso

Also maybe this is a good chance to add a changeset! :)

apps/demo/src/pages/experimental/resolver.astro

packages/form/core/form-group.ts

…module

fazzaamiarso · 2023-03-18T19:54:13Z

@ayoayco we're trying changeset now. Could you install changeset bot to this repo?

ayoayco · 2023-03-19T19:33:37Z

Installed changeset bot!

changeset-bot · 2023-03-20T13:04:38Z

🦋 Changeset detected

Latest commit: a628f7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@astro-reactive/resolvers	Minor
@astro-reactive/validator	Minor
@astro-reactive/form	Minor
@astro-reactive/common	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

fazzaamiarso · 2023-03-20T13:24:50Z

@ayoayco currently our repo's Changeset GH action only create a new PR with bumped package version without publising them. That means we must merge PR and publish it manually.

Although, we can set up a GH action that automate the release too. https://github.com/changesets/action#with-publishing.

ayoayco · 2023-03-20T13:27:30Z

@fazzaamiarso Ah no worries, we can set that up in another time. Thanks for entertaining my request to add a changesets entry

ayoayco · 2023-09-26T12:07:57Z

Sorry it took a while, I updated the dependencies. I'll pick this up next ;)

fazzaamiarso added 2 commits February 2, 2023 21:51

chore: try out zod

b829c09

feat: create initial zod resolver package

62dd394

feat: try validation on field level

b9122f8

chore: try out different resolver approach

f1d4ba8

fazzaamiarso added 15 commits March 9, 2023 21:10

fix: hopefully fix package-lock conflict

1ca6453

fix: refactor FormGroup second argument to optional

2a6552f

fix: fix package-lock

2de11df

Merge branch 'main' into schema-builder

d80277f

fix: reinstall with package-lock from main

f4428e9

fix(types): set default value for generic on FormGroup

6a0d14b

chore: use tsup to build resolvers

ee9f687

chore(test): implement simple unit test for zod resolver

147a567

fix(test): fix broken test

0749926

chore: configure package configuration

3cae598

build: add treeshaking to resolver build

7e9e2c5

fix: wrong import

af80dd6

ci: remove clean step on test

6a8dc06

chore: add public access to resolver package

ab8c248

ci: remove clean step on test because depends on dist

dc60209

ayoayco requested changes Mar 14, 2023

View reviewed changes

fazzaamiarso added 4 commits March 15, 2023 05:11

chore: refactor ValidatorRules to become single types instead of array

2c7a323

fix: minor type improvements

0c458db

chore: remove package coupling and import/export improvements

da65802

fix: minor type improvements

d6bf206

fazzaamiarso added 2 commits March 15, 2023 23:44

test: rewrite resolver test

6360119

fix: ignore dist when linting

05327ef

ayoayco marked this pull request as ready for review March 15, 2023 17:24

ayoayco requested changes Mar 17, 2023

View reviewed changes

fazzaamiarso added 9 commits March 18, 2023 20:39

Merge branch 'main' into schema-builder

6f67f10

fix: update vitest to latest because of breaking deps when resolving …

285ddc6

…module

chore: minor improvements

80ab894

docs: add initial documentation for resolvers

d9f0d31

chore: move transformValidatorRules to resolvers instead of validators

edcc326

chore: update docs and example with new API

3677c97

docs: add guide on strictly types a form

441760a

fix: fix import from validator package

d099443

chore: add changeset

8f15957

fazzaamiarso requested a review from ayoayco March 18, 2023 19:53

fix: fix linting issue

0d67c5c

chore: modify changeset

a628f7a

ayoayco marked this pull request as draft March 24, 2023 08:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Build form with Zod Schema #266

Feat: Build form with Zod Schema #266

fazzaamiarso commented Mar 7, 2023 •

edited

netlify bot commented Mar 7, 2023 •

edited

netlify bot commented Mar 7, 2023 •

edited

fazzaamiarso commented Mar 7, 2023 •

edited

ayoayco commented Mar 8, 2023 •

edited

fazzaamiarso commented Mar 8, 2023

ayoayco commented Mar 8, 2023

ayoayco left a comment •

edited

ayoayco Mar 14, 2023

fazzaamiarso Mar 14, 2023

fazzaamiarso commented Mar 15, 2023

ayoayco left a comment •

edited

ayoayco Mar 17, 2023

fazzaamiarso commented Mar 18, 2023

ayoayco commented Mar 19, 2023

changeset-bot bot commented Mar 20, 2023

fazzaamiarso commented Mar 20, 2023

ayoayco commented Mar 20, 2023

ayoayco commented Sep 26, 2023 •

edited

Feat: Build form with Zod Schema #266

Are you sure you want to change the base?

Feat: Build form with Zod Schema #266

Conversation

fazzaamiarso commented Mar 7, 2023 • edited

netlify bot commented Mar 7, 2023 • edited

✅ Deploy Preview for astro-reactive-docs canceled.

netlify bot commented Mar 7, 2023 • edited

✅ Deploy Preview for astro-reactive canceled.

fazzaamiarso commented Mar 7, 2023 • edited

ayoayco commented Mar 8, 2023 • edited

fazzaamiarso commented Mar 8, 2023

ayoayco commented Mar 8, 2023

ayoayco left a comment • edited

Choose a reason for hiding this comment

ayoayco Mar 14, 2023

Choose a reason for hiding this comment

fazzaamiarso Mar 14, 2023

Choose a reason for hiding this comment

fazzaamiarso commented Mar 15, 2023

ayoayco left a comment • edited

Choose a reason for hiding this comment

ayoayco Mar 17, 2023

Choose a reason for hiding this comment

fazzaamiarso commented Mar 18, 2023

ayoayco commented Mar 19, 2023

changeset-bot bot commented Mar 20, 2023

🦋 Changeset detected

fazzaamiarso commented Mar 20, 2023

ayoayco commented Mar 20, 2023

ayoayco commented Sep 26, 2023 • edited

fazzaamiarso commented Mar 7, 2023 •

edited

netlify bot commented Mar 7, 2023 •

edited

netlify bot commented Mar 7, 2023 •

edited

fazzaamiarso commented Mar 7, 2023 •

edited

ayoayco commented Mar 8, 2023 •

edited

ayoayco left a comment •

edited

ayoayco left a comment •

edited

ayoayco commented Sep 26, 2023 •

edited