A range slider with compressed page usage
Go to this link to learn about Dash.
# Install dependencies$ npm install# Watch source for changes and build to `lib/`$ npm start
You can start up a demo development server to see a demo of the rendered components:
$ builder run demo$ open http://localhost:9000
You have to maintain the list of components in
Code quality and tests
To run lint and unit tests:
$ npm test
To run unit tests and watch for changes:
$ npm run test-watch
To debug unit tests in a browser (Chrome):
$ npm run test-debug
- Wait until Chrome launches.
- Click the "DEBUG" button in the top right corner.
- Open up Chrome Devtools (
- Click the "Sources" tab.
- Find source files
- Navigate to
webpack:// -> . -> spec/componentsto find your test source files.
- Navigate to
webpack:// -> [your/repo/path]] -> sd-range-slider -> srcto find your component source files.
- Now you can set breakpoints and reload the page to hit them.
- The test output is available in the "Console" tab, or in any tab by pressing "Esc".
To run a specific test
In your test, append
.only to a
Testing your components in Dash
Build development bundle to
lib/and watch for changes
# Once this is started, you can just leave it running. $ npm start
Install module locally (after every change)
Run the dash layout you want to test
# Import sd-range-slider to your layout, then run it: $ python my_dash_layout.py
TODO: There is a workflow that links your module into
site-packages which would
make it unnecessary to re-run
2. on every change:
python setup.py develop.
Unfortunately, this doesn't seem to work with resources defined in
Installing python package locally
Before publishing to PyPi, you can test installing the module locally:
# Install in `site-packages` on your machine$ npm run install-local
Uninstalling python package locally
$ npm run uninstall-local
For now, multiple steps are necessary for publishing to NPM and PyPi, respectively. TODO: #5 will roll up publishing steps into one workflow.
Ask @chriddyp to get NPM / PyPi package publishing accesss.
Preparing to publish to NPM
# Bump the package version $ npm version major|minor|patch # Push branch and tags to repo $ git push --follow-tags
Preparing to publish to PyPi
# Bump the PyPi package to the same version $ vi setup.py # Commit to github $ git add setup.py $ git commit -m "Bump pypi package version to vx.x.x"
Publish to npm and PyPi
$ npm run publish-all
Builder / Archetype
We use Builder to centrally manage build configuration, dependencies, and scripts.
To see all
builder scripts available:
$ builder help
See the dash-components-archetype repo for more information.