Make all examples playable on a playground

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.

https://cssinjs.org

MIT License

7.08k stars 400 forks source link

Make all examples playable on a playground #508

Closed kof closed 7 years ago

kof commented 7 years ago

Every example should be playable on one of the playgrounds to give new users an easy way to try it out.

We need to decide between:

https://www.webpackbin.com https://codesandbox.io/

Criteria:

playground should allow easy npm usage
examples should work without a playground like they do right now https://github.com/cssinjs/examples
github repo should be able to publish to a playground somehow to keep the source of examples in sync

typical000 commented 7 years ago

Neither https://www.webpackbin.com or https://codesandbox.io/ support publishing code from github repo. So we must maintain 2 copies of examples.

Also, https://www.webpackbin.com support "boilerplates". We can make create an issue here https://github.com/cerebral/webpackbin and try to add JSS boilerplate like someone added GraphQL boilerplate before https://github.com/cerebral/webpackbin/issues/21 :) so users can quickly start code something using JSS

kof commented 7 years ago

Also, https://www.webpackbin.com support "boilerplates". We can make create an issue here https://github.com/cerebral/webpackbin and try to add JSS boilerplate like someone added GraphQL boilerplate before cerebral/webpackbin#21 :) so users can quickly start code something using JSS

Yeah thats a good idea, though we should probably create a boilerplate with all things included, jss, react-jss, styled-jss and react all in one

kof commented 7 years ago

So we must maintain 2 copies of examples.

Ok then another plan: lets create just a few examples on a playground of choice, not all of them? One for pure jss, one for react-jss ond for styled-jss?

typical000 commented 7 years ago

Created separated boilerplates for:

Pure JSS: https://www.webpackbin.com/bins/-KlrNqkpZZmKIz0eYwIk
React-jss: https://www.webpackbin.com/bins/-Klr_9GCg7ubIU3D9KFP
Styled-jss: https://www.webpackbin.com/bins/-KlrbQuwAZSK5eSzpCSy

@kof wdyt? Lets create an issue on https://github.com/cerebral/webpackbin and try to add boilerplates? I think that boilerplate 'all-in-one' for jss, react-jss and styles-jss will be a mess of code :)

typical000 commented 7 years ago

The only thing that will be readable for 'all-in-one' boilerplate - create example with 3 react components. First - created with pure jss, second - react-jss, third - styles-jss

kof commented 7 years ago

Looks good, just a bit wording: Styled-JSS, React-JSS and link to the cssinjs.org site. Yes lets try to get them into the boilerplates.

kof commented 7 years ago

Also we need to link those playgrounds in a very very visible place in all docs.

kof commented 7 years ago

@lttb feel free to add styled-jss example to styled-jss repo https://www.webpackbin.com/bins/-KlrbQuwAZSK5eSzpCSy I have already added the links to jss readme and react-jss.

kof commented 7 years ago

Wait, https://codesandbox.io/s/github allows to import from a github repo!!!

typical000 commented 7 years ago

0_0 New feature. When I looked - it was only 'open editor' option

typical000 commented 7 years ago

Guys from webpackbin just added JSS boilerplate :) https://www.webpackbin.com/bins/-KlrNqkpZZmKIz0eYwIk

kof commented 7 years ago

Cool, yes!

kof commented 7 years ago

Though no react-jss or styled-jss

typical000 commented 7 years ago

Though no react-jss or styled-jss

And no activity in issue :) https://github.com/cerebral/webpackbin/issues/32