Add support for css entry points

[radubrehar]

Users should be able to do require('react-date-picker/index.css')

Thanks!

[christianalfoni]

Implemented in the new NPM extractor service, ready for release

[christianalfoni]

Hm, is there really a react-date-picker/index.css file? From docs it is located under dist? Just checking :)

[radubrehar]

Yes, index.css is located in the root of the package. Have a look at https://github.com/zippyui/react-date-picker#usage

PS: I'm currently working on the docs site for zippyui.com React components, and implementing live edit & preview (with some limitations in place) Have a look at http://zippyui.com/docs/react-tabpanel - just wondering if webpackbin has an option to open a url and have the bin already configured from the url. In this way I would add a link for the users to open the examples in webpackbin if they want to - and get rid of the current limitations. Something like the repl on babeljs.io. Maybe this should be another github issue :)

[christianalfoni]

Ah, okay, let me take a closer look and officially release when this is fixed :)

If you create a bin with react-date-picker example I can convert the url to something like: www.webpackbin.com/react-date-picker. Just like the other boilerplates :)

[radubrehar]

Sure, no problem.

A boilerplate is useful but does not solve the problem. For example have a look at https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&code=%0Aconst%20x%20%3D%20%3Cdiv%3Etest%3C%2Fdiv%3E%0A%0Aconst%20a%20%3D%201

This links to an already configured repl. Would be nice. But again, if you consider this is not a very useful scenario, just ignore it :)

[christianalfoni]

The boilerplate has the configuration you save it with :) If I understand correctly you want it to have the loaders already configured when opening it?

[christianalfoni]

Hm, there is an issue with css. To do the "smart caching" I need to resolve all entrypoints when creating the vendor bundle. The problem is that .css files can not be an entry point to a webpack bundle. They can only be required from entrypoints.

Give me a day to think about this :-)

[radubrehar]

well, they can be as far as i know, see https://github.com/zippyui/react-date-picker/blob/master/build/build-style.js for an example. Hope that's what you're looking for.

To answer the previous question, I mean not only the loaders, but even the content of the bin itself - being able to have both of those configured based on the url I pass

[christianalfoni]

Hm, thanks for the example of style there. Will look more into that. It might be related to the DLLPlugin, as the css entry points added are ignored for some reason. But there is hope here :-)

I think I misunderstand you on the configuration part? When you create a bin with content and confgiured loaders, whenever you go to that bin it looks exactly the same? I do not see what is missing? :) Maybe you could create a step by step explanation of how the issue occurs, I just do not quite understand, sorry

[radubrehar]

Sure, no problem :) here is my explanation:

• users go on zippyui.com/docs/react-tab-panel or any other site, and write their example code
• from there, with the code the users have inputed, I want to open webpackbin, already filled in with the code they have written on the initial site.

Example: go to https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&code=const%20x%20%3D%20'b' -> it renders a repl with this code:

const x = 'b'

Now, if I just change the last part in the URL to 'bbbbbbb' it opens the repl with the code:

const x = 'bbbbbbb'

(see https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&code=const%20x%20%3D%20'bbbbbbb')

I understand that when I first write a snippet on webpackbin I get an url and I can revisit the same url later, with the same content. But this is the use-case in discussion. I want to be able to create a bin using the url to input the code.

Let me know if I was clear enough or not, so I can provide further explanation

[radubrehar]

Sorry, the link above, to the date-picker webpack setup uses a css as an entry point, which is not what you want. You need a js file as an entry point, and have css dependencies extracted to a separate css file. You can see this done here, on our site https://github.com/zippyui/www/blob/develop/build/build.config.js please have a look at the loaders file. In non-dev environment, it uses extract-text-plugin on all loaders that result in css files. Hope this helps.

[christianalfoni]

Ah, of course, now I understand :-) Yeah, this would be possible. Though pretty large query. The good thing is that the Cerebral framework supports urlon query parameters on the URL, which means you can just pass state on the url itself. Like the files you want to display in the BIN. Could you create an new issue on this? I will show you with an example how we can do this.

I think I have to do some trickery on the CSS, due to using the DllPlugin. I have something I want to try out, but have to push it for next release. Have some other things I need to look into first :) Thanks for the help on this, I am sure we will find a solution!