ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
863 stars 125 forks source link

allows `addEventListener` to use `handleEvent` syntax while re-using the object for `options` #341

Closed titoBouzout closed 5 days ago

titoBouzout commented 4 weeks ago

This solves in a simple way the common need of wanting to use passive/once/capture events.

addEventListener has an "obscure" feature of allowing the listener to be in an object with key handleEvent

This PR allows this syntax:

<div on:click={ {
  handleEvent(e) {
    console.log("clicked", e)
  },
  once:true
}/>

I haven't tested this but it should work https://playground.solidjs.com/anonymous/df01ffcb-e7dc-4a36-b80d-51a398c02689

This is what pota does https://github.com/potahtml/pota/blob/master/src/lib/reactive.js#L1372

titoBouzout commented 4 weeks ago

Probably oncapture: can be removed here, but that would be a breaking change https://github.com/search?q=repo%3Aryansolid%2Fdom-expressions%20oncapture&type=code

lxsmnsyc commented 4 weeks ago

This is actually an interesting feature to put in.

ryansolid commented 2 weeks ago

Yeah I like the implications of this. Not needing oncapture: etc and allowing full config of native events seems a real win. I might be releasing one more minor of Solid 1.x and I'd like to see this get in.

davedbase commented 1 week ago

@titoBouzout I hope we don't forget to add this to the docs. :)

titoBouzout commented 1 week ago

@davedbase already on my mind, I will look if typings need updates and how to add tests so gets ready for merging, stay tuned

titoBouzout commented 1 week ago

ok if I am not missing anything I think this is ready for review

Considerations:

should close: https://github.com/solidjs/solid/issues/2210 https://github.com/solidjs/solid/issues/1939 https://github.com/solidjs/solid/issues/1786

Thanks!

titoBouzout commented 1 week ago

@ryansolid pinging as it was noted the desired to include it on next release

titoBouzout commented 1 week ago

docs update at https://github.com/solidjs/solid-docs-next/pull/866