Add Playcanvas editor support in ESM scripts for JSX.

[Kulodo]

The playcanvas editor now supports ESM modules.

This allows playcanvas developers to easily leverage 3rd party ready made components.

One big opportunity is to leverage React based components such as Material UI, for making User Interfaces.

While Playcanvas does provide a UI system there are times when an HTML based UI approach may be desirable. In these cases, being able to use existing external HTML based UI frameworks from ESM modules is a great option.

React uses an extension to javascript called JSX. It can be converted to javascript with tools such as Babel.

In order to have a good editor user experience is necessary for the playcanvas editor to allow the user to include ‘JSX’ in their javascript or typescript files.

When the app is launched or exported the user’s scripts containing JSX would be transformed to javascript.

I heard the typescript support may be planned in the editor. JSX support should be a small change to that.

Here is a prototype of ESM modules running Material UI React UI. It would be much easier if the editor supported JSX, as this prototype has to transform the JSX to javascript itself which is quite clunky. https://playcanvas.com/project/1272496/overview/material-ui-react-esm-test

Here is a forum thread about the troubles supporting Japanese fonts in the playcanvas UI system. The was a driver for me to start looking at HTML based UI frameworks. https://forum.playcanvas.com/t/msdf-font-canvasfont-textmesh-issues-supporting-japanese/38149

References:

https://react.dev/learn/writing-markup-with-jsx

https://react.dev/learn/typescript

https://mui.com/material-ui/

[Maksims]

Please remember that DOM UI use is only reasonable for non-performance heavy applications, like configurators or 3d tools. For games or simulators - the performance degradation due to DOM manipulation is too high.

[marklundin]

Thanks for this @Kulodo. We have a related PR in the works for this #1195, to add support for Typescript. It's likely we can leverage the same tooling here to transform jsx, but this will need more investigation.

Also we don't want to add load overhead in the launcher for non JSX users, so ideally this is an opt in method, potentially with the tsx / jsx suffix.