Open
Description
Currently the shortest syntax is to add multiple JSX elements in one append
call is to use commas:
ui.contentView.append(
<button centerX={0} top={100} text='Show Message'/>,
<textView centerX={0} top='prev() 50' font='24px'/>
);
Very ugly. The alternative is to use WidgetCollection:
ui.contentView.append(
<widgetCollection>
<button centerX={0} top={100} text='Show Message'/>
<textView centerX={0} top='prev() 50' font='24px'/>
</widgetCollection>
);
However, this is much longer. In React there is also the fragment element, which would make it look like this:
ui.contentView.append(
<>
<button centerX={0} top={100} text='Show Message'/>
<textView centerX={0} top='prev() 50' font='24px'/>
</>
);
TypeScript added support for this syntax in 2.7, but it does not work in Tabris.js because we use the jsxFactory
compiler option. This is a limitation that may be eliminated in the near future: microsoft/TypeScript#20469
Once fragments work with jsxFactory
we should support it.