DX* tool for designing truly encapsulated React components.
Cosmos scans your project for React components and loads them inside the Component Playground, enabling you to:
- Render your components under any combination of props and state
- See component states evolve in real-time as you interact with running instances
Working with Cosmos improves the component design because it surfaces any implicit dependencies. It also forces you to define sane inputs for every component, making them more predictable and easier to debug down the road.
*DX stands for Developer Experience, the counterpart of UX in building a product, system or service.
- You should already be using CommonJS modules to structure your code and webpack to bundle your modules for the browser.
- You need to create fixtures for each set of props and states you want to load your components with. You can do this after you get started.
See Flatris for a complete example. In the meantime you can toy with the dev setup from this repo to get started. Better docs coming soon.
Prerequisites:
npm install
npm install -g lerna@^2.0.0beta
npm run bootstrap
Start playground instance, built from source:
npm start
Work on a specific module (with playground re-bundling on file change):
npm run build:component-tree -- -- -w
npm start
Build everything with an older React version: 👌
npm run install-react:0.13
npm start
Run tests from all packages:
npm test
Explore the Contributing Guide for more information.
Thanks to Kreativa Studio for the Cosmos logo.