Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

FormKit: Form building framework for Vue 3

formkit.com

Post reply on HN
Print view View original

11–20 of 69 posts

Re: FormKit: Form building framework for Vue 3

#11

Post by pmx »

ramraj07 wrote: post #6

I used vue for a project and encountered a gnarly bug - I have a component which can embed itself recursively, and I pass some variables through the stack to communicate to the root. But if I nest 3 components deep, it actually hangs the tab and crashes chrome! Can’t even debug! Not sure how to even recreate it in a way that’s not proprietary and hence can’t file a bug as well.

I'd be interested in seeing your code for this. I'm 99% certain it's something in your code rather than in Vue itself. I've done recursive nesting myself plenty of times and as long as you limit the depth so it doesn't go infinite you're fine.

Re: FormKit: Form building framework for Vue 3

#13

Post by whizzter »

ramraj07 wrote: post #9
__ryan__ wrote: post #8

Earlier quoted context omitted.

Why can’t you debug?

Because it doesn’t throw an error, and it hands deep inside the vue code when an even to add one more nested component is triggered.

iirc Chrome sometimes handles stack-overflows and/or out of memory conditions badly. If you have any function there that is called try making an entry/exit counter and log/throw if it goes above some threshold.

Re: FormKit: Form building framework for Vue 3

#14

Post by aabhay »

skybrian wrote: post #12
ramraj07 wrote: post #9

Earlier quoted context omitted.

Because it doesn’t throw an error, and it hands deep inside the vue code when an even to add one more nested component is triggered.

Maybe try console logging?

But what if the component is a recursively nested logging tool?

Re: FormKit: Form building framework for Vue 3

#17

Post by bpicolo »

msoad wrote: post #15

Why people keep inventing new schema formats? JSON Schema is not perfect but you can extend it to achieve all of what's in this schema format.

Well, they're not validating JSON. Forms are text value fields that aren't always sent as JSON later, or necessarily sent over the wire at all.

They definitely are using their DSL for things far out of the scope of JSON schema. The builtin debouncing is pretty neat: https://formkit.com/essentials/validation#debounce-milli

Forms in UI code also tend to have a bunch of business-logic type validation (e.g. "there's already a user with that email address") which schemas alone are unsuitable for.

Re: FormKit: Form building framework for Vue 3

#18

Post by Jarvy »

I love these sorts of frameworks! Makes doing forms a lot nicer, especially the live validation.

I feel like the next evolution is automatically generating a whole form from selecting a schema in an OpenAPI spec.

In a lot of specs, the type (string, email, phone, int, etc) is present along with any constraints (min/max length). Depending on the language/OpenAPI generator, it even preserves field order. It could massively speed up a lot of the more generic forms that happen in frontend.

Re: FormKit: Form building framework for Vue 3

#19

Post by AlbinoDrought »

ramraj07 wrote: post #6

I used vue for a project and encountered a gnarly bug - I have a component which can embed itself recursively, and I pass some variables through the stack to communicate to the root. But if I nest 3 components deep, it actually hangs the tab and crashes chrome! Can’t even debug! Not sure how to even recreate it in a way that’s not proprietary and hence can’t file a bug as well.

If it could help, I have a demo project that has recursive components (comments) [1]. It can be seen in action on GitHub Pages [2].

The only issue I encountered is that recursive components must be named since they can't import themselves. This is covered in the official Vue docs [3]

[1] https://github.com/AlbinoDrought/vue-dit/blob/master/src/com...

[2] https://albinodrought.github.io/vue-dit/#/sub/technology/uom...

[3] https://v2.vuejs.org/v2/guide/components-edge-cases.html#Rec...

Re: FormKit: Form building framework for Vue 3

#20

Post by ramraj07 »

pmx wrote: post #11
ramraj07 wrote: post #6

I used vue for a project and encountered a gnarly bug - I have a component which can embed itself recursively, and I pass some variables through the stack to communicate to the root. But if I nest 3 components deep, it actually hangs the tab and crashes chrome! Can’t even debug! Not sure how to even recreate it in a way that’s not proprietary and hence can’t file a bug as well.

I'd be interested in seeing your code for this. I'm 99% certain it's something in your code rather than in Vue itself. I've done recursive nesting myself plenty of times and as long as you limit the depth so it doesn't go infinite you're fine.

Absolutely sure I’m doing something wrong but why would vue allow any case that hangs the entire tab? I’ve never seen that in any website ever!
Post reply on HN