Skip to content

Add support for JSX Fragments #1589

Open
@tbuschto

Description

@tbuschto

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions