HXX = JSX - JS + HX

This library provides a parser for JSX-like syntax in Haxe. To use it, you must write a generator yourself. See vdom.VDom.hxx in js-virtual-dom for an example. Each generator leads to a slightly different flavor of the language. Here you will find all the features available in HXX, but note that every flavor may handle things a bit differently.

Interpolation

Unsurprisingly, you can embed expressions in HXX, either by using JSX like syntax or by using Haxe interpolation syntax, i.e. $identifier or ${expression}.

Control structures

HXX has support for control structures, unless disabled per config.noControlStructures in the parser.

If

This is what conditionals look like:

<if {weather == 'sunny'}>
  <sun />
<elseif {weather == 'mostly sunny'}>
  <sun />
  <cloud />
<else if {weather == 'cloudy'}>
  <cloud />
  <cloud />
  <cloud />
<else>
  <rain />
</if>

Note that else (as well as elseif) is optional and that both elseif and else if will work.

Switch

Switch statements are also supported, including guards but without default branches (just use a catch-all case instead). The above example for conditionals would look like this:

<switch {weather}>
  <case {'sunny'}>
  
    <sun />
    
  <case {'mostly sunny'}>

    <sun />
    <cloud />
  
  <case {cloudy} if {cloudy == 'cloudy'}>
  
    <cloud />
    <cloud />
    <cloud />
    
  <case {_}>
  
    <rain />
    
</switch>

For

For loops are pretty straight forward:

<for {day in forecast}>
  <weatherIcon day={day} />
</for>

Spread

Currently, the spread operator is not supported.

Whitespace

The treatment of whitespace depends on whether the generated structure even has any notion of whitespace or not. All HXX flavours can rely on hxx.Generator.SimpleGenerator.trimString which handles whitespace in a manner that is quite consistent with JSX:

• white space on a single line makes it to the output
• white space that includes a line break is ignored

Example:

<p><span>Hello</span> <span>World</span></p>

<!-- vs -->

<p>
  <span>Hello</span>
  <span>World</span>
</p>

The first version will retain the white space between the two spans, the second one will not.

Imports

Within HXX code you may import other HXX code from external files. Such an import is specified as {import "<fileName>"}, e.g.:

<div class="container">
  {import "<fileName>"}
</div>

By default the file name is resolved relatively to the call site, so you can put external HXX files into your classpaths, with files that depend on them.

Some people will argue that "templates" should all be in one place and all code in another, but that's like "ordering" the information in a magazine by putting all pictures in one place and all text in another. Quite simply, you should not be doing such a thing. But if you know better, you may refer to the file by starting with ./ in which case resolution is performed relative to project root - actually to the working directory of the compilation process to be more exact.

If you specify no extension in the file name, then .hxx is assumed by default (unless you're using an HXX flavor that alters this).