Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79

Merged
rmarren1 merged 17 commits into from
Dec 12, 2018
Merged

Update tooling #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0425fe0
Update Webpack dependencies to remove errors. Fix [#76].
rmarren1 Nov 6, 2018
83da633
Update requirements.
rmarren1 Nov 8, 2018
b5d9da7
Update scripts.
rmarren1 Nov 8, 2018
db9a541
Reflect package.json changes in second package.json.
rmarren1 Nov 8, 2018
53777ba
Add publish script.
rmarren1 Nov 8, 2018
d9a0b6a
Update requirements folder name.
rmarren1 Nov 8, 2018
58d9f57
Move dev-requirements.txt, add pandas.
rmarren1 Nov 8, 2018
989285d
Remove 'npm run test' from circleci config, already called.
rmarren1 Dec 1, 2018
9c4d682
Update start script -- there is not demo for this repo.
rmarren1 Dec 1, 2018
909ee58
update webpack.config.js to match new boilerplate
rmarren1 Dec 1, 2018
e3d6570
Condense build scripts into build:all
rmarren1 Dec 7, 2018
10c014d
Remove webpack.serve.config.js -- there is no demo.
rmarren1 Dec 7, 2018
0c12ad0
Remove more un-needed scripts
rmarren1 Dec 7, 2018
87c9e99
Update README
rmarren1 Dec 7, 2018
3cb09f2
Update package-lock
rmarren1 Dec 7, 2018
d9557a2
Update package.json scripts.
rmarren1 Dec 7, 2018
d54cf4a
Re-build
rmarren1 Dec 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions .circleci/config.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down
84 changes: 56 additions & 28 deletions README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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

14 changes: 7 additions & 7 deletions dash_html_components/A.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Abbr.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Acronym.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Address.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Area.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Article.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Aside.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Audio.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/B.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
14 changes: 7 additions & 7 deletions dash_html_components/Base.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Update tooling by rmarren1 · Pull Request #79 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Update tooling#79
 Merged

rmarren1
merged 17 commits into

from

Dec 12, 2018
 Merged


Update tooling
#79
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
0425fe0

Update Webpack dependencies to remove errors. Fix [#76].


rmarren1 Nov 6, 2018
83da633

Update requirements.


rmarren1 Nov 8, 2018
b5d9da7

Update scripts.


rmarren1 Nov 8, 2018
db9a541

Reflect package.json changes in second package.json.


rmarren1 Nov 8, 2018
53777ba

Add publish script.


rmarren1 Nov 8, 2018
d9a0b6a

Update requirements folder name.


rmarren1 Nov 8, 2018
58d9f57

Move dev-requirements.txt, add pandas.


rmarren1 Nov 8, 2018
989285d

Remove 'npm run test' from circleci config, already called.


rmarren1 Dec 1, 2018
9c4d682

Update start script -- there is not demo for this repo.


rmarren1 Dec 1, 2018
909ee58

update webpack.config.js to match new boilerplate


rmarren1 Dec 1, 2018
e3d6570

Condense build scripts into build:all


rmarren1 Dec 7, 2018
10c014d

Remove webpack.serve.config.js -- there is no demo.


rmarren1 Dec 7, 2018
0c12ad0

Remove more un-needed scripts


rmarren1 Dec 7, 2018
87c9e99

Update README


rmarren1 Dec 7, 2018
3cb09f2

Update package-lock


rmarren1 Dec 7, 2018
d9557a2

Update package.json scripts.


rmarren1 Dec 7, 2018
d54cf4a

Re-build


rmarren1 Dec 7, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 3 additions & 4 deletions
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand All@@ -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
Expand Down

84 changes: 56 additions & 28 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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


14 changes: 7 additions & 7 deletions
dash_html_components/A.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Abbr.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Acronym.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Address.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Area.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Article.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Aside.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Audio.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/B.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down

14 changes: 7 additions & 7 deletions
dash_html_components/Base.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
Loading