Dash UI HTML component suite
Project description
# dash-html-components
Vanilla HTML components for [Dash][]
### Install dependencies
1. Create a virtual env and activate.
```
$ virtualenv venv
$ venv/bin/activate
```
_Note: venv\Scripts\activate for windows_
2. Install python packages required to build components.
```
$ pip install -r dev-requirements.txt
```
3. Generate components and install npm packages
```
$ npm install
```
### Generating HTML Components
The components in `src/components`, as well as the export index in
`src/index.js` are programmatically generated from element definitions in
`scripts/`. To regenerate:
```sh
$ npm run generate-components
```
The list of attributes is regenerated by scraping the
[MDN HTML attribute reference][].
_Note: This step will have already been done for you when you ran `npm install`_
### Development
#### Testing your components in Dash
1. Watch for changes
$ npm run build:watch
2. 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 run build:watch`
$ python setup.py install
3. Run the dash layout you want to test
# Import dash_html_components to your layout, then run it:
$ python my_dash_layout.py
#### Installing python package locally
Before publishing to PyPi, you can test installing the module locally:
```sh
# Install in `site-packages` on your machine
$ npm run install-local
```
#### Uninstalling python package locally
```sh
$ npm run uninstall-local
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) for guidelines on contributing to this project.
### Create a production build and publish:
1. Build your code:
```
$ npm run build
```
2. Create a Python tarball
```
$ python setup.py sdist
```
This distribution tarball will get generated in the `dist/` folder
3. Test your tarball by copying it into a new environment and installing it locally:
```
$ pip install dash-html-components-<new-version>.tar.gz
```
4. If it works, then you can publish the component to NPM and PyPI:
1. Publish on PyPI
```
$ twine upload dist/*
```
2. Cleanup the dist folder (optional)
```
$ rm -rf dist
```
3. Publish on NPM (Optional if chosen False in `publish_on_npm`)
```
$ npm publish
```
_Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the `serve_locally` flags to `True` (unless you choose `False` on `publish_on_npm`). We will eventually make `serve_locally=True` the default, [follow our progress in this issue](https://github.com/plotly/dash/issues/284)._
[Dash]: https://plot.ly/dash
[MDN HTML attribute reference]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
[NPM package authors]: https://www.npmjs.com/package/dash-html-components/access
[PyPi]: https://pypi-hypernode.com/pypi
Vanilla HTML components for [Dash][]
### Install dependencies
1. Create a virtual env and activate.
```
$ virtualenv venv
$ venv/bin/activate
```
_Note: venv\Scripts\activate for windows_
2. Install python packages required to build components.
```
$ pip install -r dev-requirements.txt
```
3. Generate components and install npm packages
```
$ npm install
```
### Generating HTML Components
The components in `src/components`, as well as the export index in
`src/index.js` are programmatically generated from element definitions in
`scripts/`. To regenerate:
```sh
$ npm run generate-components
```
The list of attributes is regenerated by scraping the
[MDN HTML attribute reference][].
_Note: This step will have already been done for you when you ran `npm install`_
### Development
#### Testing your components in Dash
1. Watch for changes
$ npm run build:watch
2. 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 run build:watch`
$ python setup.py install
3. Run the dash layout you want to test
# Import dash_html_components to your layout, then run it:
$ python my_dash_layout.py
#### Installing python package locally
Before publishing to PyPi, you can test installing the module locally:
```sh
# Install in `site-packages` on your machine
$ npm run install-local
```
#### Uninstalling python package locally
```sh
$ npm run uninstall-local
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) for guidelines on contributing to this project.
### Create a production build and publish:
1. Build your code:
```
$ npm run build
```
2. Create a Python tarball
```
$ python setup.py sdist
```
This distribution tarball will get generated in the `dist/` folder
3. Test your tarball by copying it into a new environment and installing it locally:
```
$ pip install dash-html-components-<new-version>.tar.gz
```
4. If it works, then you can publish the component to NPM and PyPI:
1. Publish on PyPI
```
$ twine upload dist/*
```
2. Cleanup the dist folder (optional)
```
$ rm -rf dist
```
3. Publish on NPM (Optional if chosen False in `publish_on_npm`)
```
$ npm publish
```
_Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the `serve_locally` flags to `True` (unless you choose `False` on `publish_on_npm`). We will eventually make `serve_locally=True` the default, [follow our progress in this issue](https://github.com/plotly/dash/issues/284)._
[Dash]: https://plot.ly/dash
[MDN HTML attribute reference]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
[NPM package authors]: https://www.npmjs.com/package/dash-html-components/access
[PyPi]: https://pypi-hypernode.com/pypi
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
File details
Details for the file dash_html_components-0.16.0rc1.tar.gz.
File metadata
- Download URL: dash_html_components-0.16.0rc1.tar.gz
- Upload date:
- Size: 551.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/1.9.1 pkginfo/1.4.1 requests/2.18.4 setuptools/38.2.3 requests-toolbelt/0.8.0 tqdm/4.15.0 CPython/2.7.10
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 9446fca51faa53a723b3f2b76524c9f87462a3f3777c4be9394232820d8b7905 |
|
| MD5 | db3896d685a648c5bc8727114945dee0 |
|
| BLAKE2b-256 | ea9c9ae1dd8fd0e4a815f52a83b8647eabe23848da8ac41fbbb04e95d1be320b |
