@expressive/babel-plugin-core NPM

babel-plugin-transform-xjs

Babel plugin for transforming do{ } statements into React compatable markup. Most comperable to babel-plugin-transform-react-jsx, with a completely different syntax at play. May be used along side JSX and it's respective babel-plugin (recommended) or even as a feature-complete replacement, depending on your needs.

Install

It is recommended you apply a preset rather than using this plugin directly.

Choose package for your current environment, web, native, or next for NEXT.js.

yarn install @expressive-react/preset-*

.babelrc

Note that babel infers babel-preset so you should replace * with only the keyword of package you've installed.

{
    "presets": [
        "@expressive-react/*"
    ]
}

Entry Points

babel-plugin-transform-xjs will enter context upon encountering the DoExpression e.g. do{} in various contexts. It will also do so for any method with the name "do" e.g. do(){} For more information on actual syntax, consult the main repo.

Element Expressions

let element = do {
    div();
}

//equivalent to in JSX

let element = (
    <div></div>
)

//outputs

let element = React.createElement("div", {})

Arrow Components

let SayHi = ({ to }) => do {
    div `Hello ${ to }`;
}

//equivalent to in JSX

let SayHi = (props) => (
    <div>Hello {props.to}</div>
)

//outputs

let SayHi = function(props) {
    return React.createElement("div", {}, "Hello " + props.to)
}

Do Component Method

class Greet extends React.Component {
    do(props){
        SayHi(to `World`)
    }
}

//equivalent to in JSX

class Greet extends React.Component {
    render(){
        var { props } = this;
        return (
            <SayHi to="World" />
        )
    }
}

Disclaimer

This plugin will conflict with babel-plugin-do-expressions. Make sure your project is not using it or the following presets as they do inherit this plugin.