nteract / vdom

🎄 Virtual DOM for Python
https://github.com/nteract/vdom/blob/master/docs/mimetype-spec.md
BSD 3-Clause "New" or "Revised" License
222 stars 35 forks source link

Avoid Serializing Whole Event Objects #89

Closed rmorshea closed 5 years ago

rmorshea commented 5 years ago

Summary

In my own front end implementation I found that it would be tedious to determine how to serialize every possible event.

Instead of doing this you could define the exact attributes of the event object that need to be sent back to the handler. The new spec for event handlers might look something like this:

{
    "<targetName>": "<hash>_<eventName>_<eventProp1>;<eventProp2>;..."
}

Consider one possible API that could leverage this:

@events.on("keyDown")
def handle_key_down(key, shiftKey):  # <-- 'key' and 'shiftKey' are event props.
    print(key)

The serialized event handler might then looks like this:

{
    "9k3df9kdf51": "as9j8fasd_keyDown_key;shiftKey"
}

Special Case

If you are defining a callback for an "input" element you may want to know the current value contained in the input. At the moment there is no way to do this. However, you could leverage this new event handler design to specify a path to an attribute:

{
    "<targetName>": "<hash>_<eventName>_<parentProp>.<childProp>;...."
}

We could capture the name of the pressed key and the current input value with the following spec:

{
    "98asdjkas65": "87sdjf8bk_onKeyDown_key;target.value"
}
rmorshea commented 5 years ago

@gnestor thoughts?

gnestor commented 5 years ago

This has been specified in https://github.com/nteract/vdom/blob/master/docs/event-spec.md. You can see it in action in the curren @nteract/transform-vdom implementation: https://github.com/nteract/nteract/blob/master/packages/transform-vdom/src/event-to-object.ts#L17.

rmorshea commented 5 years ago

@gnestor it seems like you special cased grabbing target.value for the "submit" event in vdom-transform, however there might be more cases in which you might want to grab an arbitrary property on the target, or grab target.value on other events (e.g. onKeyDown).

gnestor commented 5 years ago

Totally. This event spec was based largely on React's SyntheticEvent spec. If it doesn't cover an obvious use case, then we can modify it.