Support JSX for JS (Babel)

In traditional tabris development cycle, we may create many component from scratch. We may need a better method to improve these job. From react and nativescript, they used JSX to slove the proble, but tabris not. I hope tabris js can support smarter solution (eg. JSX options) in future.

Currently, I have found a alternative solution(but not smart) for using JSX in tabrisjs.

First, install babel js transcripter https://babeljs.io/docs/setup/

npm install --save-dev babel-cli babel-preset-es2015

Second, install jsx transcripter plugin(i’m not sure use both or transform-h-jsx only) https://babeljs.io/docs/plugins/syntax-jsx/ , https://www.npmjs.com/package/babel-plugin-transform-h-jsx

npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-h-jsx

Third, setup .babelrc like following(may be different):

{ 
	"presets": ["es2015"],
	"plugins": ["transform-es2015-modules-commonjs",
		"transform-h-jsx",
		"syntax-jsx"]
}

Then, we need to add a module to export a method called “h”:

import tabris from "tabris";
export default function h(obj,param, child = []) {
    let o = new obj(param)
    if(child.length > 0) o.append(child);
    return o;
}

After all , in your main development, before you using JSX, you may include the module which includes the h method, and the following sample program will help you to study this alternative method. In this case, the module h is stored in the lib folder.

import 'tabris';
import h from "./lib/h";
let items = [
	{id:0, name:"a"},
	{id:1, name:"b"},
	{id:2, name:"c"},
]
let a = 
	<tabris.Composite id="scroll" left="0" top="0" >
		<tabris.TextView id="lblA" left="10" top="10" text="Title A" />
		<tabris.TextView id="lblB" left="10" top="prev()" text="Title B"/>
		<tabris.TextView id="lblC" left="10" top="prev()" text="Title C" />
		<tabris.Picker id="picker" left="10" top="prev()" items={items} itemText={(i)=>i.name} />
	</tabris.Composite>;
a.appendTo(tabris.ui.contentView);

[cookieguru]

Check this out:

http://eclipsesource.com/blogs/2016/02/29/tabris-js-declarative-ui-in-100-lines-of-functional-programming/

[tbuschto]

We have documented now how to use it with JavaScript vis the TypeScript compiler. I would consider this fixed, since the result is the same. If there is a definite need to use Babel, please re-open.