All about macros

with babel-plugin-macros 🎣

Kent C. Dodds

Utah

1 wife, 4 kids

PayPal, Inc.

@kentcdodds

kcd.im/macros-slides

Please Stand...

if you are able

@kentcdodds

kcd.im/macros-slides

What this talk is

Supposed to get you super excited about babel-plugin-macros!

@kentcdodds

kcd.im/macros-slides

What this talk is not

@kentcdodds

kcd.im/macros-slides

Let's
Get
STARTED!

@kentcdodds

kcd.im/macros-slides

What is babel? 🐠

kcd.im/macros-slides

What is a babel plugin? 🐡

kcd.im/macros-slides

idx

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"
  ]
}

lodash

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"
  ]
}

preval

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? 🤖

kcd.im/macros-slides

What's a

babel-plugin-macros

macro? 🎣

kcd.im/macros-slides

babel-plugin-macros

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'
)