JSX view templates

[espen42]

Expanding the template support to React / JSX files, ideally supporting CSS modules and ES6 syntax.

Thymeleaf / mustache view templates (and controversially, XSLT) are all nice. But adding React support would be fashionable and popular with a lot of developers out there.

API-wise, it could behave much the same way as it already does (calling it props instead of model by convention, but it doesn't matter):

Controller - hello.js:

var view = resolve("hello.jsx");
var props =  {
    helloTarget: "world"
}
(...)

return {
     body: react.render(view, props)
}

View - hello.jsx:

import React from 'react';

import styles from './howdy.css';

export default (props) =>
    <div className={styles.hello}>
        <p>{'Hello ' + props.helloTarget}</p>
    </div>;

Style - howdy.css:

.hello {
    color: blue;
}

etc.

It would also be nice if the JSX file didn't need the import React from 'react'; line, but did that automatically. And ideally, it would also add a React.propTypes import as well: import React, {propTypes as PT} from 'react'; since those are handy and often used.

[sigdestad]

Any reason you cannot do this yourself with a lib?

[espen42]

Best reason: my XP-noob-ness so far.

But I'm thinking, if there's already an easy way, react is so popular and pleasant to work with (especially with CSS modules and ES6 support) that we might want to announce that more, eg. in courses etc?

[ComLock]

The problem is that import React from 'react'; fails runtime in Nashorn.

Which got me started on render-js.

Here is my last attempt: https://github.com/ComLock/enonic-xp-starter-react https://github.com/ComLock/enonic-xp-starter-react/blob/master/src/main/resources/site/pages/react-page/react-page.jsx

The problem is polyfilling what react needs in a way that works in Nashhorn. It might be possible doing something like this: https://github.com/ComLock/enonic-xp-lib-autoprefixer/blob/master/webpack.3.server.config.babel.js#L111-L115

[ComLock]

List of polyfills https://polyfill.io/v2/docs/features/

[mortyeriksen]

Have you solved this @ComLock?

[ComLock]

My starter-react works in very simple examples, but I had troubles with it in a customer project.

What I have been able to do instead is provide JSX from a part controller and transpile it client-side using babel-standalone, and finally render it client-side using react and react-dom.

[ComLock]

I have not made a clientSideJsx library for market, yet. But here is at least some example code https://github.com/ComLock/enonic-xp-starter-react/tree/master/src/main/resources/site/parts/clientSideJsx

[GlennRicaud]

What is happening with this issue? It has been in ready state in XP for a year but it is from what I understand a library.

@sigdestad @mortyeriksen Can you add this in backlog as a new library if necessary. Putting it back to PAB until then

[ComLock]

I guess this will be solved by @espen42 in React4XP https://github.com/enonic?q=react4xp

[GlennRicaud]

Oh okay. Closing it then