juxtaposition-ui

juxtaposition-ui copied to clipboard

Checked Existing

• [X] I have checked the repository for duplicate issues.

What feature do you want to see added?

Rather than using ejs for templating, I suggest we swap to using JSX (likely using TSX) for templating on the consoles.

Why do you want to have this feature?

Currently everything in Juxtaposition uses ejs for templating. However it's a bit messy, and kinda outdated for a project like this. Additionally all of our frontend work in other areas, such as the admin panel and website, are moving to using React which already uses JSX. Being able to use the same language for all of our frontend work, across all services, would be a big win in my opinion.

We can't use React on either of the consoles (though we can for the browser version). However JSX is not specific to React, it is it's own language with it's own specification. Because of this we can pretty easily make our own JSX rendering engine.

I have already made a small demo library which supports converting TSX to something the consoles can use:

It's very rudimentary, only really able to use JSX as a templating language and that's it. However we can expand on it. As stated we can't use React as-is so we don't get any of the reactivity features it comes with. But we wouldn't want to use React anyway, do to it's large size. A benefit of writing our own engine for this means that we can design it specifically with the Wii U and 3DS in mind, similar to https://github.com/PretendoNetwork/NWFX.

It would be nice to have similar React-style reactivity, and even try to mimic it's API to create an easy transition. But the browser features and tools libraries like React, Vue, etc. all use for reactivity just simply don't exist on these older consoles. JavaScript Proxies definitely do not exist, and even older APIs which don't even exist anymore like Object.observe are too new. So we'd have to make our own API for reactivity most likely. Though we can probably mimic some of the API like useState.

The main goal, at first, though would simply be replacing ejs with JSX for templating. Reactivity and the like can come later, if we ever decide we need it.

Any other details to share? (OPTIONAL)

No response