Support @bound decorator
See original GitHub issueUse of the @bound decorator is important to React people
Instead of having the hack:
…class ... {
clickHandler = e => e.preventDefault() + doRealWork()
…
}
We would want to write, in the name of canonical stack traces:
….class ... {
@bound clickHandler(e) {
e.preventDefault()
doRealWork()
}
…
This is made possible by decorators from the fine @Babel project And we can use @brigand class-bind or other to get this done today
I apologize for this looking like 90s Java code, but it is actually great
Here’s the preparation:
npm install --save class-bind
// if the world had BabelJS 7
//npm install --save-dev babel-plugin-transform-decorators
npm install babel-plugin-transform-decorators-legacy --save-dev
// teach babel-preset-react-app to load the babel plugin transform-decorators-legacy
And here’s a test-patch for src/App.js:
…
import {bound} from 'class-bind'
class App extends Component {
constructor(...args) {
super(...args)
const f = this.boundTest
f(this)
}
@bound boundTest(properThis) {
console.log(this === properThis
? '@bound annotation working correctly'
: 'function was not bound')
}
…
The browser console output:
@bound annotation working correctly
Here’s what it could look like when live:
export default class Parent extends Component {
state = {one: 'One', two: 'Two'}
@bound submit(e) {
e.preventDefault()
const values = {...this.state}
console.log(`${m}.submit:`, values)
}
@bound fieldUpdate({name, value}) {
this.setState({[name]: value})
}
render() {
console.log(`${m}.render`)
const {state, fieldUpdate, submit} = this
const p = {fieldUpdate}
return (
<form onSubmit={submit}> {/* loop removed for clarity */}
<Child name='one' value={state.one} {...p} />
<Child name='two' value={state.two} {...p} />
<input type="submit" />
</form>
)
}
}
Awesomeness and profit…
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
bound-decorator
Decorator for creating bound methods using Babel 7 (sometimes referred to as "autobinding"). Note: This decorator is not compatible with legacy ...
Read more >Alorel/bound-decorator: A TypeScript/ES7 decorator for ...
A TypeScript/ES7 decorator for automatically binding methods to the class instance - GitHub - Alorel/bound-decorator: A TypeScript/ES7 decorator for ...
Read more >Decorators on bound methods with access to class and his ...
When I decorated the bound method in Python class, I need get some info in this decorator from outer class. Is that possible?...
Read more >Decorating bound-methods in Python - Sebastian Ahmed
Decorators in Python can quickly become a complicated matter when dealing with bound-methods (i.e. class-instance bound function calls).
Read more >meta programming - @bound decorator for TypeScript
I'm working on an angular codebase that very frequently uses constructs like: <c-whatever [action]='doSomething.bind(this)'>.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@gaearon Is there a particular stage you guys are waiting for? Not critiquing, just curious.
Dropping this here to watch for everyone interested in decorator support https://github.com/babel/proposals/issues/11
@miraage we generally only accept stage 4 (finalized) or very few stage 3 if they’re known to be exceptionally stable, or we’re willing to provide a code mod migrating people off the specification