JSX process in Custom Widget

[remkonoteboom]

I have been trying this out over the last couple of weeks.  It does work pretty well to build widgets using JSX.

The caveat is that in order to build a JSX widget, you need a JSX processor.  At the moment, the location of this processor is hard coded in TACTIC.
The class that executes the JSX processor is in src/tactic/ui/tools/jsx_processor.py.  Currently, it is hard coded to use the npm installation of babel in a specific folder because that happens to be where I installed it.  It should be more flexible, I know.  I don't know if there are any other JSX processors around.

However, this JSX processor is only required for developing a JSX widget, not actually using it.  TACTIC will just use the transpiled pure javascript code.

I have made this work natively in the custom layout editor, so if you put this in to the html

Code:

<div class="spt_react_top card"></div>

And then in the behavior section, you put in a "load" behavior on the at element:

Code:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
 
  button_press = () => {
      this.setState( {liked: true} )
  }


  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e( 'div', {},
      e( 'button',
        { onClick: () => { this.button_press() },
          className: "btn btn-primary" 
        },
        'Like'
      )
    );
  }
}

ReactDOM.render(e(LikeButton), bvr.src_el);

If you have the process set up, this should work.