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!)

[signalkuppe]

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

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

Feedbacks are welcome!

[jahilldev]

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.

[j-f1]

I used the new template language support of Eleventy v1.0 to make a plugin that enables JSX support using Babel and the excellent @unifiedjs​/@rehypejs ecosystem. Check it out here: https://github.com/j-f1/eleventy-hast-jsx. My hope is that it will be pretty generic but let me know if you need it to do anything else!

[zachleat]

Official docs deploying to https://www.11ty.dev/docs/languages/jsx/ Shipping with 3.0.0-alpha.11

Very open to others adding alternate approaches there, via plugins or otherwise!