bkazi/jsx-transformer

Tool to transform JSX like syntax

JSX Transformer

A tool to convert JSX like syntax to appropiate pragma.
The aim is to somehow be programming language agnostic and enable using JSX in any language

Current progress

import React, {Component} from 'react';

class MyComponent extends Component {
    state = {
        name: "Bob",
    };

    componentDidMount() {
        console.log("Component Did Mount!!");
        console.log(`test: ${<World />}`);
    }

    render() {
        return (
            <Foo bar={
                () => {
                    console.log('oh no');
                    return <OhNo />;
                }
            }>
                <div>Hello</div>
                <div>{this.state.name}</div>
                <div>
                    <World big="true" blue={true}/>
                </div>
            </Foo>
        );
    }
}

transforms to

import React, {Component} from 'react';

class MyComponent extends Component {
    state = {
        name: "Bob",
    };

    componentDidMount() {
        console.log("Component Did Mount!!");
        console.log(`test: ${React.createElement(World, null)}`);
    }

    render() {
        return (
            React.createElement(
                Foo,
                {
                    bar: () => {
                        console.log('oh no');
                        return React.createElement(OhNo, null);
                    }
                },
                React.createElement(
                    "div",
                    null,
                    "Hello"
                ),
                React.createElement(
                    "div",
                    null,
                    this.state.name
                ),
                React.createElement(
                    "div",
                    null,
                    React.createElement(
                        World,
                        {
                            big: "true",
                            blue: true
                        }
                    )
                )
            )
        );
    }
}

Note: the indentation was manually added, formatting needs work

Roadmap

• Better examples for JavaScript
• Examples in Kotlin
• Better support of the spec (wherever possible)
• ReasonML port (?? needs discussion)
• Code expressions within the JSX
• JSX in code
• Quotes on attributes
• Lowercased tagnames
• Self closing tags