DSL is a component-based language developed based on the features of React JSX and Vue templates and is more suitable for UI layout design.

JSX

The DSL syntax is similar to the JSX syntax in the React.render method. The following section provides a brief description of JSX:

  • {} is used to switch an HTML scope to a JavaScript scope. In a JavaScript scope, you can write any valid JavaScript expression. The return value is displayed on the page. For example, <div>{'Hello' + ' Relim'}</div>.
    Note You can write any JavaScript expressions such as computing statements or literals in {}.
  • An HTML tag is used to switch a JavaScript scope to an HTML scope. For example, {<div>Hello Relim</div>}.
  • The HTML scope and JavaScript scope can be nested. For example, {<div>{'Hello' + ' Relim'}</div>}.

For more information about JSX syntax, see React JSX.

Valid JavaScript expressions

// Computing statements
{aaa} // √ Variable aaa must be defined.
{aaa * 111} // √
{1 == 1 ? 1 : 0} // √
{/^123/.test(aa)} // √
{[1,2,3].join('')} // √
{(()=>{return 1})()} // Self-executing function √

// Literals
{1}
{true}
{[11,22,33]} // √
{{aa:"11",bb:"22"}} // √
{()=>1} // Describe a function, which is valid but meaningless. √
Note If certain complex logic must be implemented by multiple computing statements rather than only one statement, you can wrap the logic in a self-executing function, which must be a valid expression. Example:
{(function(){
    // Sum the even digits of a number array.
    var input = [1,2,3,4,5,6,7,8,9,10];
    var temp = input.filter(i => i % 2 == 0)
    return temp.reduce((buf, cur) => buf + cur, 0)
})()}

Invalid JavaScript expressions

{ var a = 1 } // Value assignment statement
{ aaa * 111; 2} // Multiple statements separated with semicolons (;)