Skip to content

Commit

Permalink
feat(module): export boundMethod and boundClass as modules
Browse files Browse the repository at this point in the history
Better for tree shaking, more explicit than use using autobind

tweak docs

ignore package-lock.json since its a lib
  • Loading branch information
stevemao committed Nov 2, 2018
1 parent 2cbf1e0 commit 9edeabf
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 4,719 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/
lib/
package-lock.json
3 changes: 1 addition & 2 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
src/
lib/__tests__
**/*/__tests__
2 changes: 1 addition & 1 deletion LICENCE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2017 Andrey Popp
Copyright (c) Andrey Popp

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
51 changes: 48 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ A class or method decorator which binds methods to the instance so `this` is alw

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

`autobind` is lazy and is only bound once. :thumbsup:

```js
// Before:
<button onClick={ this.handleClick.bind(this) }></button>
Expand All @@ -30,6 +32,31 @@ npm install autobind-decorator

## Examples:

### Recommended way to bind a method:

```js
import {boundMethod} from 'autobind-decorator'

class Component {
constructor(value) {
this.value = value
}

@boundMethod
method() {
return this.value
}
}

let component = new Component(42)
let method = component.method // .bind(component) isn't needed!
method() // returns 42
```

`@boundMethod` makes `method` into an auto-bound method, replacing the explicit bind call later.

### Legacy approaches:

```js
import autobind from 'autobind-decorator'

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


// Also usable on the class to bind all methods
// Please see performance if you decide to autobind your class
@autobind
class Component { }
```

```js
import {boundClass} from 'autobind-decorator'

@boundClass
class Component {
constructor(value) {
this.value = value
}

method() {
return this.value
}
}

let component = new Component(42)
let method = component.method // .bind(component) isn't needed!
method() // returns 42
```

## Performance

`autobind` on a method is lazy and is only bound once. :thumbsup:
`autobind` (`boundMethod`) on a method is lazy and is only bound once. :thumbsup:

However,

> 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)`
-- Dan Abramov‏

You should avoid using `autobind` on a class. :thumbsdown:
You should avoid using `autobind` (`boundClass`) on a class. :thumbsdown:

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

0 comments on commit 9edeabf

Please sign in to comment.