Skip to main content

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:

$ 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:

# Install in `site-packages` on your machine
$ npm run install-local

Uninstalling python package locally

$ npm run uninstall-local

Contributing

See the contributing guide for guidelines on contributing to this project.

Create a production build and publish:

  1. Build your code:

    $ npm run build:all
    
  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.

Project details


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

dash_html_components-0.14.0rc21.tar.gz (534.1 kB view details)

Uploaded Source

File details

Details for the file dash_html_components-0.14.0rc21.tar.gz.

File metadata

  • Download URL: dash_html_components-0.14.0rc21.tar.gz
  • Upload date:
  • Size: 534.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.12.1 pkginfo/1.5.0.1 requests/2.20.1 setuptools/39.0.1 requests-toolbelt/0.8.0 tqdm/4.15.0 CPython/3.7.0

File hashes

Hashes for dash_html_components-0.14.0rc21.tar.gz
Algorithm Hash digest
SHA256 c59f54d679e63047dfe702f8134ff3fc86292fc5476a77e712800392ca44a04f
MD5 a65c84f0f52f9c6ce3ef2b9837066128
BLAKE2b-256 8ea68dbd25e1410e58c6298d61e742fd5a5fd0f377e21709a14856af3f40cb4c

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page