Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zod > yup? #6

Closed
websocket98765 opened this issue Mar 21, 2021 · 8 comments
Closed

zod > yup? #6

websocket98765 opened this issue Mar 21, 2021 · 8 comments
Labels
enhancement New feature or request

Comments

@websocket98765
Copy link

To check the production build size consequence of using yup (with DOM reporter), I built 3 ways:

Felte with no validation:
.svelte/output/client/_app/pages/contact.svelte-1a0155d9.js        27.72kb / brotli: 8.37kb

Felte + yup & @felte/validator-yup imported:
.svelte/output/client/_app/pages/contact.svelte-f4df8f52.js          77.59kb / brotli: 20.89kb

Felte + only @felte/validator-yup imported (to check size):
.svelte/output/client/_app/pages/contact.svelte-ccc585dd.js         59.51kb / brotli: 16.80kb

Yup adds >200% to Felte's size. After exploring bundlephobia, I found zod.

  • 50% smaller than Yup
  • v3 Zod is tree shakeable
  • contains URL, email, regex, etc too
z.string().min(5);
z.string().max(5);
z.string().length(5);
z.string().email();
z.string().url();
z.string().uuid();
z.string().regex(regex);
z.string().nonempty();

What do you think about zod?

@websocket98765
Copy link
Author

Looks really great, but one downside is that it doesn't work if the SvelteKit project doesn't use typescript:
ENOENT: no such file or directory, open '/Users/me/my-app/node_modules/zod/src/index.ts'

@pablo-abc
Copy link
Owner

To be honest with you I had never of Zod. I've only used Yup and Superstruct. But I see it's quite popular with 2.4k stars. It seems a similar logic to what I did for @felte/validator-yup could be done for this 🤔. Why doesn't it work with a JS SvelteKit project? Is the distributable not bundled into JS?

@websocket98765
Copy link
Author

Is the distributable not bundled into JS?

Corrrect, seems to be distributed as typescript. If I create a new SvelteKit project using typescript, it'd probably work. I wish the author published it to NPM as JS.

I'll close this because there isn't really an action item here. Given Zod only works with typescript, yup is still a better general recommendation.

@websocket98765
Copy link
Author

Despite the error message, it turns out that Zod uses a JS entry point. I confirmed with the dev.

The issue is apparently Vite attempting to import the wrong file:
vitejs/vite#2639
sveltejs/kit#581 (comment)

I'll follow up if I get Zod working, to see how much Kb size it saves over Yup.

@pablo-abc pablo-abc added the enhancement New feature or request label Mar 26, 2021
@pablo-abc pablo-abc reopened this Mar 26, 2021
@pablo-abc
Copy link
Owner

Since the changes between Zod and Yup aren't that drastic, I've added a validator package for Zod. I'll update the docs site in a bit.

Thanks a lot for your interest in Felte!

@websocket98765
Copy link
Author

Fantastic! Thanks! Can't wait to try it in SvelteKit when Vite fixes the import issue.

@websocket98765
Copy link
Author

websocket98765 commented Mar 30, 2021

Update: Must install zod as a devDependency to get around vite error: npm i -D zod. It will still work for client & server when using Svelte Kit.

Size comparison:

Felte, yup, & @felte/validator-yup imported:
.svelte/output/client/_app/pages/contact.svelte-f4df8f52.js            77.59kb / brotli: 20.89kb

Felte, yup, & @felte/validator-zod:
.svelte/output/client/_app/pages/demo/contact.svelte-fa381adb.js       56.93kb / brotli: 13.47kb

Savings of ~20kb (7.42kb brotli) for a similar API.

TBD if more can be saved using zod differently. The above used import { * as z } from 'zod';. I also tried import { object, string } from 'zod'; to hopefully allow for tree shaking, but the kb size remained the same.

@pablo-abc
Copy link
Owner

Installing as a devDependency for it to work seems to be a common solution for Vite dependency related errors. I should read more on Vite's docs to understand why. Thanks a lot for your research! I'll make sure to add a note about that in the docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants