Skip to content

Commit 9edeabf

Browse files
committed
feat(module): export boundMethod and boundClass as modules
Better for tree shaking, more explicit than use using autobind tweak docs ignore package-lock.json since its a lib
1 parent 2cbf1e0 commit 9edeabf

File tree

7 files changed

+94
-4719
lines changed

7 files changed

+94
-4719
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
22
lib/
3+
package-lock.json

.npmignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
src/
2-
lib/__tests__
1+
**/*/__tests__

LICENCE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2017 Andrey Popp
3+
Copyright (c) Andrey Popp
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

+48-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ A class or method decorator which binds methods to the instance so `this` is alw
44

55
This is particularly useful for situations like React components, where you often pass methods as event handlers and would otherwise need to `.bind(this)`.
66

7+
`autobind` is lazy and is only bound once. :thumbsup:
8+
79
```js
810
// Before:
911
<button onClick={ this.handleClick.bind(this) }></button>
@@ -30,6 +32,31 @@ npm install autobind-decorator
3032

3133
## Examples:
3234

35+
### Recommended way to bind a method:
36+
37+
```js
38+
import {boundMethod} from 'autobind-decorator'
39+
40+
class Component {
41+
constructor(value) {
42+
this.value = value
43+
}
44+
45+
@boundMethod
46+
method() {
47+
return this.value
48+
}
49+
}
50+
51+
let component = new Component(42)
52+
let method = component.method // .bind(component) isn't needed!
53+
method() // returns 42
54+
```
55+
56+
`@boundMethod` makes `method` into an auto-bound method, replacing the explicit bind call later.
57+
58+
### Legacy approaches:
59+
3360
```js
3461
import autobind from 'autobind-decorator'
3562

@@ -48,23 +75,41 @@ let component = new Component(42)
4875
let method = component.method // .bind(component) isn't needed!
4976
method() // returns 42
5077

51-
5278
// Also usable on the class to bind all methods
5379
// Please see performance if you decide to autobind your class
5480
@autobind
5581
class Component { }
5682
```
5783

84+
```js
85+
import {boundClass} from 'autobind-decorator'
86+
87+
@boundClass
88+
class Component {
89+
constructor(value) {
90+
this.value = value
91+
}
92+
93+
method() {
94+
return this.value
95+
}
96+
}
97+
98+
let component = new Component(42)
99+
let method = component.method // .bind(component) isn't needed!
100+
method() // returns 42
101+
```
102+
58103
## Performance
59104

60-
`autobind` on a method is lazy and is only bound once. :thumbsup:
105+
`autobind` (`boundMethod`) on a method is lazy and is only bound once. :thumbsup:
61106

62107
However,
63108

64109
> It is unnecessary to do that to every function. This is just as bad as autobinding (on a class). You only need to bind functions that you pass around. e.g. `onClick={this.doSomething}`. Or `fetch.then(this.handleDone)`
65110
-- Dan Abramov‏
66111

67-
You should avoid using `autobind` on a class. :thumbsdown:
112+
You should avoid using `autobind` (`boundClass`) on a class. :thumbsdown:
68113

69114
> I was the guy who came up with
70115
autobinding in older Reacts and I'm glad

0 commit comments

Comments
 (0)