Support JSX for JS (Babel)
See original GitHub issueIn 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);
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (5 by maintainers)
Check this out:
http://eclipsesource.com/blogs/2016/02/29/tabris-js-declarative-ui-in-100-lines-of-functional-programming/
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.