@expressive/babel-plugin-react-xjs

Babel plugin for transforming do{ } statements into React compatable markup. Most comperable to @babel/plugin-transform-react-jsx, just with a completely different syntax. May be used along side JSX and it's respective plugins (recommended). However it will work as 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, react or react-native;

npm 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/*"
    ]
}

Entry Points

@expressive/babel-plugin-react-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.

• stage-0
• react-native-stage-0

License

MIT License