Integrate component demos
rexxars opened this issue · comments
A really awesome feature, which has been suggested by multiple people on IRC, is to have demos of each component available through the site.
This will require a certain amount of standardization and security considerations, obviously.
GreenJello suggests on IRC something similar to browserify-cdn.
If we can set a standard where each Git repo should have a demo.js or similar, we should be able to webpack/browserify it. If we also dictate that it should render the demo onto a page, in lets say document.body, then we're one step closer. We'd have to make it possible to add CSS and external JS to the page, but I think that's manageable.
We could then run the demos in a sandboxed iframe, perhaps? A bit like JSBin etc.
I'd suggest using webpack with predefined config (jsx, css, fonts, images should be enough). You can see the simplest example of React component, React Font Awesome which depends on styles and static assets. Specifically see examples/ directory and webpack.config.js inside.
So each component should have demo/index.js (or something like that) in its repository which should be used as an entry point for webpack.
That would be awesome. Adding code edition like this https://gcanti.github.io/resources/tcomb-react-bootstrap/playground/playground.html or props editor would be quite nice as well.
More practical perhaps would be to pull in the demo inside an iFrame. I don't won't to rewrite all my demos to work with whatever standard. The package.json could have a demo key with a URL pointing at a demo page.
Why not use just Codepen? http://codepen.io
+1 @andreypopp -- standardizing on a webpack config would be awesome
Agree, it would be awesome to have demos. webpack some config standard will be a good start.