Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rt-src for asset compilation #185

Open
erichulburd opened this issue Aug 24, 2016 · 2 comments
Open

rt-src for asset compilation #185

erichulburd opened this issue Aug 24, 2016 · 2 comments

Comments

@erichulburd
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants