haxe-react JSX highlighting support

[zabojad]

Hi there !

How hard would that be to add support for the JSX highlighting with the excellent haxe-react library?

Basically, I think a first (and possibly easy) way to do this would be to apply XML syntax highlighting to anything within a jsx('...') call.

Event better would be to override it with haxe syntax highlighting for everything within { ... } within jsx(' ... ').

Here is a JSX snippet example:

package ;
import api.react.ReactComponent;
import api.react.ReactMacro.jsx;

class Example extends ReactComponentOf<Dynamic, Dynamic, Dynamic> {

    function touchCb(index : Int) {
        trace('touched $index');
    }

    function renderButton(index : Int) {

        return jsx('
            <div>
                <button onTouchTap={function(){ touchCb(index);  }}>TOUCH ME</button>
            </div>
        ');
    }

    override function render() {

        return jsx('
            <div className="myComp">
                <div className="blabla">
                <p>blablabla</p>
                </div>
                { [ for(i in 0...5) renderButton(i) ] }
            </div>
        ');
    }
}

[clemos]

It's not really trivial: I don't think XML syntax would be compatible with JSX, first (because of attributes, mainly), so you should probably test this first. Maybe we could have a look at how existing react plugins solve this (https://github.com/facebookarchive/sublime-react).

[zabojad]

JSX is basically pure XML code with haxe code embedded within curly braces... Nothing else. This would definitively be enough for a first round.

Can you give the big picture of how to add a syntax support to the haxe sublime text plugin?