Native support of JSX in Sciter

This is all about JSX that is quite popular with React and other “virtual DOMers” like Vue, Mithril.

JSX in brief

Essentially JSX is a notation (or embeddable DSL if you wish) that allows to use XML syntax to describe JS data structures. Not more and not less.

Consider this syntax construct (JS + babel/plugin-transform-react-jsx):

const vDiv = <div className="sidebar">Hello</div>;

That is not a valid JS of course, but being preprocessed by Babel’s React JSX transformer it becomes this:

const vDiv = React.createElement(
  'div',
  {className: 'sidebar'},
  ['Hello']
)

Where React.createElement is a function that creates “virtual DOM” data construct that may look like as:

const vDiv = { 
   tag: 'div', 
   props: {className: 'sidebar'},
   kids: ['Hello']
};

Therefore there is no magic in JSX – just a way to define {tag:..., props:..., kids:...} hierarchical data constructs using <tag props...>...kids...</tag> notation.

Note that in order this to work in Web Frontend projects all files that contain JSX constructs need to be preprocessed by corresponding babel plugin – JavaScript syntax simply has no means for JSX.

JSX (or SSX for that matter) in Sciter’s Script

I’ve decided to add native support JSX to Sciter’s Script compiler and so those XMLish constructs can be used as they are.

TL;DR : this

const vDiv = <div class="sidebar">Hello</div>;

will be a valid syntax construct that actually will produce this declaration of the tuple:

const vDiv = [div: {class:"sidebar"}, ["Hello"]];

Tuple in Sciter is a tagged immutable array so consider SSX syntax as just another form of tuple declarations having predefined structure

[tag:{…},[…]]

And so you may use something like this:

for( var counter in 10 )
  this.append(<li>item {counter + 1}</li>);

To generate 10 <li> elements in DOM with texts “item 1”, “item 2”, … in them.

There will be more details on all this but the basic idea is very simple, indeed.