Eleventy: Add JSX Engine

[dj]

Would you be open to a PR to include JSX as an engine? I think I get the gist for how one would be implemented, looking at the code (but would love any pointers on how to implement).

The idea would be to use ReactDOMServer.renderToStaticMarkup()

[zachleat]

Yeah! I think this would be useful.

Related, planning on making this easier in #117.

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

Don’t forget to upvote the top comment with 👍!

[elbotho]

👍
This might be a nice small solution without react:
https://github.com/developit/vhtml

[wommy]

how does react-static do it?

[ithinkihaveacat]

Here's an example of how to use JSX (or the TypeScript variant, TSX) with Eleventy via JavaScript templates (*.11ty.js):

https://github.com/ithinkihaveacat/eleventy-jsx

(It uses vhtml!)

[brkn]

I want to help with this issue @zachleat. I am not sure how to approach it though. Should it be done with vhtml? Can you point me to the docs about adding a new handler?

[signalkuppe]

Just published a starter kit that uses react components as the default template language

https://github.com/signalkuppe/eleventy-react

Feedbacks are welcome!

[jhukdev]

I've managed to get JSX support using a simple config.addTransform method in the config file.

The important bit is here:
https://github.com/jhukdev/11tyboo/blob/master/.eleventy.js#L19

I'm using Preact in the repo above.

Both React and Preact have an isValidElement function that can be used to conditionally apply render to React.createElement calls (or h() for Preact).

Once that's setup you can return JSX from your *.11ty.jsx or *11ty.tsx files and it'll be handled for you.

I've only done this using TypeScript's JSX factory, but I'm sure you could replace that with a Babel transform / plugin.

[shadowtime2000]

This should probably support other JSX libraries such as Preact, Solid or Inferno.