JSX Control Statements (JSTransform Fork)

 


> NOTE: This is the JSTransform version of https://github.com/AlexGilleran/jsx-control-statements
> This version has been split off because JSTransform is no longer actively maintained and having to do everything twice
> is slowing down development of jsx-control-statements - hence this version is no longer maintained. This repo is available
> in case there's still people who use the JSTransform version and want to develop it or submit pull requests.

React and JSX are great, but to those of us who are used to dedicated templating libraries like Handlebars, the control
statements (e.g. if conditions and for loops) are a step backwards in terms of neatness and readability. What's worse is
that JSX is _perfectly capable_ of using the kind of conditional and looping logic we're used to, but it has to be done
through ugly use of ternary ifs and Array.map, or by doing this logic in javascript before you start defining your
actual view, which in my mind turns it into spaghetti.

Wouldn't it be easier if we could just have some syntactical sugar that turned neat // and
/ tags into ternary ifs and Array.map, so you could read your render functions a bit more easily?

So that's what this does. It's a set of JSTransform visitors that run just before JSX transpilation and perform
desugaring from -> ? : and -> Array.map.

If Tag

Define an tag like so:

``

IfBlock

ElseBlock

`

or

`

IfBlock

`

This will desugar into:

`
this.props.condition === 'blah' ? (
IfBlock
) : (
ElseBlock
)
`

or

`
this.props.condition === 'blah' ? (
IfBlock
) : ''
`

tags must have a condition attribute which is expected to be some kind of expression (i.e. contained within
{}. All the normal rules for putting JSX tags inside ternary ifs apply - the block can only contain a single
tag, for instance.

For Tag

Define like so:

`

{blah + this.somethingElse} at {index}

`

and this will desugar into:

`
this.props.blahs.map(function(blah, index) { return (
{blah + this.somethingElse} at {index}
)}, this)
`

The tag expects an each attribute as a string (with "" around it) - this is what you'll reference for each
item in the array - and an of attribute which is an expression (with {} around it) that refers to the array that
you'll loop through. You can also include an index attribute which will resolve to the index of the current item in
the array, but it's optional.

Note that a cannot be at the root of a render() function in a React component, because then you'd
potentially have multiple components without a parent to group them which isn't allowed. As with , the same rules
as using Array.map() apply - each element inside the loop should have a key attribute that uniquely identifies it.

To loop across an Object, use Object.keys() like so:

`

{blahObj[blahKey]}

``

How to Use

See this guide.

Why Bother Transforming?

See here.