Add async usage for Graph and Plotlyjs

Author: Marc-Andre-Rivet

.babelrc

@@ -81,7 +81,7 @@ jobs:
           command: |
             . venv/bin/activate && mkdir packages
             # build main dash
-            git clone --depth 1 https://github.com/plotly/dash.git dash-main
+            git clone --depth 1 -b exp-dynamic https://github.com/plotly/dash.git dash-main
             cd dash-main && pip install -e .[dev] --progress-bar off && python setup.py sdist && mv dist/* ../packages/
             cd dash-renderer && npm run build
             python setup.py sdist && mv dist/* ../../packages/ && cd ../..

.circleci/config.yml

@@ -63,7 +63,7 @@
     "no-extend-native": ["error"],
     "no-extra-bind": ["error"],
     "no-extra-boolean-cast": ["error"],
-    "no-inline-comments": ["error"],
+    "no-inline-comments": ["off"],
     "no-implicit-coercion": ["error"],
     "no-implied-eval": ["error"],
     "no-inner-declarations": ["off"],

.eslintrc

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- [#616](https://github.com/plotly/dash-core-components/pull/616) Async Graph and Plotly.js
+
 ## [1.3.1] - 2019-10-17
 ### Updated
 - Upgraded plotly.js to 1.50.1 [#681](https://github.com/plotly/dash-core-components/issues/681)

CHANGELOG.md

@@ -33,14 +33,16 @@ Locally](README.md#testing-locally) section of README.md.
 
 ## Updating Plotly.js
 
-1. Download the latest plotly.js from the cdn: `$ wget https://github.com/plotly/plotly.js/releases/tag/v1.49.4`
-2. Update `dash_core_components/__init__.py` plotly.js `external_url`
-3. Update `CHANGELOG.md` with links to the releases and a description of the changes. The message should state (see the existing `CHANGELOG.md` for examples):
+1. Update the version of `plotly.js` in package.json. Always use an exact version without "^" or "~"
+2. Run `npm install` followed by `npm run build`, this will ensure the latest version of Plotly.js is in `node_modules` and copy
+that version over with the other build artifacts
+3. Update `dash_core_components_base/__init__.py` plotly.js `relative_package_path` and `external_url`
+4. Update `CHANGELOG.md` with links to the releases and a description of the changes. The message should state (see the existing `CHANGELOG.md` for examples):
     * If you're only bumping the patch level, the heading is "Fixed" and the text starts "Patched plotly.js". Otherwise the heading is "Updated" and the text starts "Upgraded plotly.js"
     * The new plotly.js version number, and the PR in which this was done
     * All major or minor versions included, with links to their release pages and a summary of the major new features in each. If there are multiple minor/major releases included, be sure to look at all of their release notes to construct the summary. Call minor versions "feature" versions for the benefit of users not steeped in semver terminology.
     * All patch versions included, with links to their release pages and a note that these fix bugs
-4. When bumping the dcc version, a plotly.js patch/minor/major constitutes a dcc patch/minor/major respectively as well.
+5. When bumping the dcc version, a plotly.js patch/minor/major constitutes a dcc patch/minor/major respectively as well.
 
 ## Financial Contributions
 

CONTRIBUTING.md

@@ -1,5 +1,7 @@
 include dash_core_components/dash_core_components.min.js
 include dash_core_components/dash_core_components.min.js.map
+include dash_core_components/async~*.js
+include dash_core_components/async~*.js.map
 include dash_core_components/highlight.pack.js
 include dash_core_components/metadata.json
 include dash_core_components/package-info.json

MANIFEST.in

@@ -0,0 +1,20 @@
+const presets = [
+    ['@babel/env', {
+        useBuiltIns: 'usage',
+        corejs: 3
+    }],
+    '@babel/preset-react'
+];
+
+const plugins = [
+    '@babel/plugin-syntax-dynamic-import'
+];
+
+// eslint-disable-next-line no-process-env
+if (process.env.ENV === "test") {
+    plugins.push("styled-jsx/babel-test");
+} else {
+    plugins.push("styled-jsx/babel");
+}
+
+module.exports = { presets, plugins };

babel.config.js

@@ -39,13 +39,7 @@
 
 _this_module = _sys.modules[__name__]
 
-
 _js_dist = [
-    {
-        'external_url': 'https://cdn.plot.ly/plotly-1.50.1.min.js',
-        'relative_package_path': 'plotly-1.50.1.min.js',
-        'namespace': 'dash_core_components'
-    },
     {
         'relative_package_path': 'highlight.pack.js',
         'namespace': 'dash_core_components'
@@ -66,8 +60,53 @@
         ).format(__version__),
         'namespace': 'dash_core_components',
         'dynamic': True
-    }
+    },
+    {
+        'relative_package_path': 'async~graph.js',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~graph.js'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async~graph.js.map',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~graph.js.map'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'dynamic': True
+    },
+    {
+        'relative_package_path': 'plotly-1.50.1.min.js',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/plotly-1.50.1.min.js'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'async': 'eager'
+    },
+    {
+        'relative_package_path': 'async~plotlyjs.js',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~graph~plotlyjs.js'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'async': 'lazy'
+    },
+    {
+        'relative_package_path': 'async~plotlyjs.js.map',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~graph~plotlyjs.js.map'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'dynamic': True
+    },
 ]
 
 for _component in __all__:
-    setattr(locals()[_component], '_js_dist', _js_dist)
+    setattr(locals()[_component], '_js_dist', _js_dist)

dash_core_components_base/__init__.py

@@ -0,0 +1,14 @@
+const fs = require('fs');
+
+const package = JSON.parse(fs.readFileSync('package.json'));
+
+const plotlyJsVersion = (package.dependencies && package.dependencies['plotly.js']) ||
+    (package.devDependencies && package.devDependencies['plotly.js']);
+
+fs.copyFile('node_modules/plotly.js/dist/plotly.min.js', `dash_core_components/plotly-${plotlyJsVersion}.min.js`, err => {
+    if (err) {
+        throw err;
+    }
+
+    console.log('copied plotly.js', plotlyJsVersion);
+});