New Feature (Breaking Change)
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 ! 💪