v5.0.0 - State now available to decorated class methods
New Feature (Breaking Change)
Thanks to @mennenia in #45 π
The signature of decorated class methods changes from:
(props, args) => { }
to:
(props, state, args) => { }
This is so that you can access Class runtime state information within the decorator, like so:
// Reminder, to decorate class methods, you need to decorate the class itself
@track()
export default class FooButton extends React.Component {
// In this case the tracking data depends on
// some unknown (until runtime) value (state and event)
@track((props, state, [event]) => ({
action: 'click',
inModal: state.isModalShowing,
label: event.currentTarget.title || event.currentTarget.textContent
}))
handleClick = (event) => {
if (this.props.onClick) {
this.props.onClick(event);
}
}
render() {
return (
<button onClick={this.handleClick}>
{this.props.children}
</button>
);
}
}
NOTE: This was technically possible in previous versions, but required you to use the imperative this.props.tracking.trackEvent()
API so that you had access to Class state, this.state
. Now it's possible to keep the tracking logic declaratively in the decorator thanks to @mennenia ! πͺ