blade.macro

blade.macro ⛸️

This is a babel-macros macro for babel-plugin-blade.

Please see those projects for more information.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev blade.macro

You'll also need to install and configure babel-macros if you haven't already.

Usage

Once you've configured babel-macros you can import/require blade.macro. For example:

import blade from 'blade.macro'
import {Connect, query} from 'urql'

const movieQuery = createQuery()
const Movie = () => (
  <div>
    <Connect
      query={query(movieQuery)}
      children={({data}) => {
        const DATA = movieQuery(data)
        return (
          <div>
            <h2>{DATA.movie.gorilla}</h2>
            <p>{DATA.movie.monkey}</p>
            <p>{DATA.chimp}</p>
          </div>
        )
      }}
    />
  </div>
)

      ↓ ↓ ↓ ↓ ↓ ↓ 

import { Connect, query } from 'urql';

const Movie = () => <div>
    <Connect query={query(`
query movieQuery{
  movie {
    gorilla
    monkey
  }
  chimp
}`)} children={({ data }) => {
    const DATA = data;
    return <div>
            <h2>{DATA.movie.gorilla}</h2>
            <p>{DATA.movie.monkey}</p>
            <p>{DATA.chimp}</p>
          </div>;
  }} />
  </div>;

You'll find more usage capabilities in the babel-plugin-blade test snapshots.

You can also find dedicated docs on our new Docs site!

Note:

babel-plugin-blade allows you to have a few more APIs than you have with this macro, but this macro comes with all the benefits of using babel-macros (which you can read about in the babel-macros docs).