All about macros
with babel-plugin-macros 🎣
Kent C. Dodds
Utah
1 wife, 4 kids
PayPal, Inc.
@kentcdodds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/2504801/slides-logo-black-1400x550-e5784ee4ba30e28a9b9ddf59ca5651a6.png)
Please Stand...
if you are able
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237297/smile.png)
What this talk is
- Supposed to get you super excited about babel-plugin-macros!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237299/grinning.png)
What this talk is not
- Meh
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237298/neutral_face.png)
Let's
Get
STARTED!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174548/car.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174549/dash.png)
What is babel? 🐠
What is a babel plugin? 🐡
if (
props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends
) {
console.log('this user has friends!')
}
if (idx(props, p => p.user.friends[0].friends)) {
console.log('this user has friends!')
}
if (
props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends
) {
console.log('this user has friends!')
}
{
plugins: [
"idx"
]
}
import _ from 'lodash'
import { add } from 'lodash/fp'
const addOne = add(1)
_.map([1, 2, 3], addOne)
import _add from 'lodash/fp/add'
import _map from 'lodash/map'
const addOne = _add(1)
_map([1, 2, 3], addOne)
{
plugins: [
"idx",
"lodash"
]
}
const x = preval`module.exports = 1`
const fileLastModifiedDate = preval.require(
'./get-last-modified-date'
)
const x = 1
const fileLastModifiedDate = '2017-07-05'
const x = 1
const fileLastModifiedDate = '2017-07-05'
{
plugins: [
"idx",
"lodash",
"preval"
]
}
What is a macro? 🤖
What's a
babel-plugin-macros
macro? 🎣
import idx from 'idx.macro'
import _ from 'lodash.macro' // this doesn't exist yet
import { add } from 'lodash.macro/fp.macro' // this either
import preval from 'preval.macro'
if (idx(props, _ => _.user.friends[0].friends)) {
console.log('this user has friends!')
}
const addOne = add(1)
_.map([1, 2, 3], addOne)
const x = preval`module.exports = 1`
const fileLastModifiedDate = preval.require(
'./get-last-modified-date'
)
{"plugins": ["macros"]}
Config is simple
But impossible with CRA*
Unless you can convince Dan to add your plugin 😏
Resources
- Resource Name and Link - Who From - Description
- Resource Name and Link - Who From - Description
- Resource Name and Link - Who From - Description
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174556/books.png)
Thank you!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174555/wave.png)
All About babel-plugin-macros
By Kent C. Dodds
All About babel-plugin-macros
babel-plugin-macros is super cool
- 5,872