cferdinandi / reef

A lightweight library for creating reactive, state-based components and UI.
https://reefjs.com
MIT License
1.16k stars 76 forks source link

Value Attribute on Input Fields Not Updating with Component() #209

Closed briangrider closed 1 month ago

briangrider commented 2 months ago

Test case: https://codepen.io/scmrecordings/pen/JjQeerv?editors=1111

Hi Chris,

I just started diving into reef earlier today and it's really fantastic. Super light, easy to work with, etc. Amazing how much can be done with so little! I've also created a really small abstraction for some react hooks which has made the transition feel right at home for me - I'll reach out at some point and share it so you can see if you'd want me to go further with it or make it available for others as an extension of reef.

Ok, my issue - I can't figure out how to make two input fields which should have the same synced state reactive to one another. I know that the value attribute is supposed to be for initial values and as such, it seems to be the only thing I've tested so far that component() won't update on state changes. Are there any tricks to get this working? For example, with lit-element, you use .value instead of value, and this will make the input fields change on property changes.

A separate question, I'm getting used to using event delegation for all event listeners but I just wanted to make sure there are no directives like @click or @input in lit-element. Is there any plan to add something like that down the road or would that go against your goal of keeping reef as light as can be?

Thank you in advance!

cferdinandi commented 1 month ago

That requires a special @ prefix: https://reefjs.com/advanced/html-attributes/#form-field-values