plotly · rmarren1 · Dec 12, 2018 · Nov 6, 2018 · Nov 8, 2018 · Nov 8, 2018
@@ -24,17 +24,17 @@ jobs:
               python -m venv venv || virtualenv venv
 
       - restore_cache:
-          key: deps1-{{ .Branch }}-{{ checksum "requirements.txt" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}-{{ checksum "circlejob.txt" }}
+          key: deps1-{{ .Branch }}-{{ checksum "dev-requirements.txt" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}-{{ checksum "circlejob.txt" }}
 
       - run:
           name: Install dependencies
           command: |
               . venv/bin/activate
-              pip install -r requirements.txt
+              pip install -r dev-requirements.txt
               npm install --ignore-scripts
 
       - save_cache:
-          key: deps1-{{ .Branch }}-{{ checksum "requirements.txt" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}-{{ checksum "circlejob.txt" }}
+          key: deps1-{{ .Branch }}-{{ checksum "dev-requirements.txt" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}-{{ checksum "circlejob.txt" }}
           paths:
               - "venv"
               - "node_modules"
@@ -52,7 +52,6 @@ jobs:
       - run:
           name: Run tests
           command: |
-              npm run test
               . venv/bin/activate
               python --version
               python -m unittest tests.test_dash_html_components

@@ -2,47 +2,53 @@
 
 Vanilla HTML components for [Dash][]
 
-
-## Getting Started
-
-### Installation
-
-```sh
-# Install dependencies
-$ npm install
-
-# Watch source for changes and build to `lib/`
-$ npm start
-```
+### 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:
 
-The list of attributes is regenerated by scraping the
-[MDN HTML attribute reference][].
 
 ```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. Build development bundle to `lib/` and watch for changes
+1. Watch for changes
 
-        # Once this is started, you can just leave it running.
-        $ npm start
+        $ 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 start`
-        # running in a separate process, it's enough to just do:
+        # 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
@@ -69,18 +75,40 @@ $ npm run uninstall-local
 
 See the [contributing guide](CONTRIBUTING.md) for guidelines on contributing to this project.
 
-## Publishing
 
-## Builder / Archetype
+### 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](https://github.com/plotly/dash/issues/284)._
 
-We use [Builder][] to centrally manage build configuration, dependencies, and
-scripts. See the [dash-components-archetype][] repo for more information.
-
-
-[Builder]: https://github.com/FormidableLabs/builder
 [Dash]: https://plot.ly/dash
-[dash-components-archetype]: https://github.com/plotly/dash-components-archetype
 [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.python.org/pypi
-
@@ -9,16 +9,16 @@ class A(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Abbr(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Acronym(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Address(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Area(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Article(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Aside(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Audio(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class B(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute

@@ -9,16 +9,16 @@ class Base(Component):
 
 Keyword arguments:
 - children (a list of or a singular dash component, string or number; optional): The children of this component
-- id (string; optional): The ID of this component, used to identify dash components
-in callbacks. The ID needs to be unique across all of the
+- id (string; optional): The ID of this component, used to identify dash components
+in callbacks. The ID needs to be unique across all of the
 components in an app.
-- n_clicks (optional): An integer that represents the number of times
+- n_clicks (optional): An integer that represents the number of times
 that this element has been clicked on.
-- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
-at which n_clicks changed. This can be used to tell
+- n_clicks_timestamp (optional): An integer that represents the time (in ms since 1970)
+at which n_clicks changed. This can be used to tell
 which button was changed most recently.
-- key (string; optional): A unique identifier for the component, used to improve
-performance by React.js while rendering components
+- key (string; optional): A unique identifier for the component, used to improve
+performance by React.js while rendering components
 See https://reactjs.org/docs/lists-and-keys.html for more info
 - role (string; optional): The ARIA role attribute
 - data-* (string; optional): A wildcard data attribute