sd-range-slider
v1.9.0
Published
A range slider with compressed page usage
Downloads
4
Readme
sd-range-slider
A range slider with compressed page usage
Dash
Go to this link to learn about Dash.
Getting started
# Install dependencies
$ npm install
# Watch source for changes and build to `lib/`
$ npm start
Development
Demo server
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 demo/Demo.react.js
.
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 (
Cmd+opt+i
). - Click the "Sources" tab.
- Find source files
- Navigate to
webpack:// -> . -> spec/components
to find your test source files. - Navigate to
webpack:// -> [your/repo/path]] -> sd-range-slider -> src
to 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 describe
or it
statement:
describe.only('Foo component', () => {
// ...
})l
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)
# Generate metadata, and build the JavaScript bundle $ npm run install-local # Now you're done. For subsequent changes, if you've got `npm start` # running in a separate process, it's enough to just do: $ python setup.py install
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
package_data
.
See https://github.com/plotly/dash-components-archetype/issues/20
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
Publishing
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.