search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
16.91k stars 491 forks source link

Add JSX Engine #235

Closed dj closed 6 years ago

dj commented 6 years ago

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 commented 6 years ago

Yeah! I think this would be useful.

Related, planning on making this easier in #117.

zachleat commented 6 years ago

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 commented 5 years ago

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

wommy commented 5 years ago

how does react-static do it?

ithinkihaveacat commented 4 years ago

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 commented 4 years ago

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

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

Feedbacks are welcome!

jahilldev commented 3 years ago

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 commented 2 years ago

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 commented 3 months ago

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!