wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

rt-src for asset compilation #185

Open erichulburd opened 8 years ago

erichulburd commented 8 years ago

I've got a project, where we've developed all of our img sources to use a local development server, but in production, we are going to need a CDN.

All of our compiled assets are currently compiled through webpack - it would be easiest if we could compile all of our img src's through Webpack as well (possibly link href and script src as well).

I'm wondering how amenable you be to this sort of compilation - maybe it's your opinion that this should happen within the template rather than in the compiler (<img src="{require('assets/img/question.png')}"/>. I wouldn't disagree, but would argue that there is some convenience below.

I'm definitely willing to open a PR for rt-src, but before going down a rabbit whole, I wanted to get opinion on whether this would be something you would be open to merging and if anyone had an opinion on API.

<img rt-src="'assets/img/question.png'"/> 
<img rt-src="this.current_status_icon"/> 
React.createElement('img', {
        'src': require('assets/img/question.png')
    })
React.createElement('img', {
        'src': require(this.current_status_icon)
    })
nippur72 commented 8 years ago

As for the API, the string argument syntax could be the other way (string by default, use {} if you need expressions):

<img rt-src="assets/img/question.png"/> 
<img rt-src="{this.current_status_icon}"/> 

(btw, are you sure Webpack does handle the non-constant require() argument?)

I can't say about the merge of the PR because I'm not a maintainer, my personal opinion is that this mod would save the typing of only few characters, so I'm not sure it's worth the extra syntax.

My suggestion is to handle this externally via a custom Webpack loader that is chained to react-templates-loader (which I guess you are already using). Writing a loader is not difficult (I myself have written two or three so ask if you need help). It can be as easy as having a regex that replaces your rt-src into src="{require(...)}".

I'm also experimenting with a pluggable webpack loader related to #178 but it's not mature yet.

nippur72 commented 8 years ago

Update: I managed to publish the configurable webpack-loader I was working on, it's named react-templates-preprocess-loader.

For your use case, look at the example in the README.