Add JSX view engine

[mrjvs]

changes:

• Add JSX renderer util to response object
• Port common partials needed for most views to JSX (web only)
• Port messages.ejs to JSX (web only)
• Update all (web) endpoints that use messages.ejs to use the new JSX based view

This partially contains #12

---

Since it may be useful for future porting, here is roughly the steps I took to port EJS to JSX:

1. Make a new component for the new view
2. Copy paste the old EJS code into new view
3. Replace EJS conditionals and loops with JSX (conditional: { cond ? < /> : < />}, loops: { arr.map(v => (< />)})
4. Close all selfclosing tags (<img src="..."> -> <img src="..." />)
5. Replace class attributes with className
6. Replace style="" attributes with style={{}} (jsx takes an object and not a string)
7. Replace dynamic text content with JSX style: <% hi %> -> {hi}
8. Replace dynamic attributes with JSX version: src="<%cdnUrl%>/test.png" -> src={\${cdnUrl}/test.png``
9. Update all standard HTML attributes (stroke-width) to camelcase (strokeWidth) - exclude custom attributes that aren't standard
10. Raw style tag content and script tag content can be set using a new util: InlineScript and InlineStyle

Some more caveats:

• There are no globals from res.locals. So I made a context object to passs around and put all of that in.
• Partials don't exist, simply make a new component
• While this PR does include React, we're only using the JSX tools. This system only generates HTML with 0 javascript, so state or reactivity or contexts, it all doesn't work. It can only generate static HTML.

[mrjvs]

Back to draft, since the JSX view now diplays on 3ds and wiiu as well. It should get a different template for each

[mrjvs]

I updated the code to render all the different consoles/directories. Also tested all 3 of them, they seem to be working

[ashquarky]

Good stuff all around. Just a few design thoughts and one note on how to get strong typing

[ashquarky]

Also worth noting that our ESLint config doesn't seem to cover TSX/JSX files. I guess https://www.npmjs.com/package/@pretendonetwork/eslint-config needs updating to match the new file extensions

[mrjvs]

@ashquarky I have addressed all review comments. Also added made an eslint config PR but we don't have to wait for it imo.

[binaryoverload]

PretendoNetwork/common-configs#3 is merged, update pls :)

[mrjvs]

Eslint now updated, although it still has one linting bug that will be fixed in a different PR :P

[ashquarky]

Wow, eslint made the code aesthetics way worse! ^^

Looks good though, awesome

[ashquarky]

Each child in a list should have a unique "key" prop.

Check the render method of `WebMessagesView`. See https://react.dev/link/warning-keys for more information.
[15:51:49.663] INFO (100287): request completed
    req: GET juxt.pretendo.network/friend_messages (::ffff:172.18.0.6:47692)
    res: 200 (5740 bytes)
    responseTime: 37

Anything to worry about?

[mrjvs]

Nothing to worry about since that has to do with reactivity engine, which we don't use and can't use.

Although it's a bit sloppy to leave it there indefinitely, I'll fix it next time I work on Jsx related tasks