All about macros

with babel-plugin-macros 🎣

Kent C. Dodds

Utah

1 wife, 4 kids

PayPal, Inc.

@kentcdodds

Please Stand...

if you are able

What this talk is

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

What this talk is not

  • Meh

Let's
Get
STARTED!

What is babel? 🐠

What is a babel plugin? 🐡

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

Thank you!