Async support - Lazy dcc.Graph and lazy plotlyjs

.circleci/config.yml

@@ -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 ../..

.eslintrc

@@ -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"],

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [1.3.0] - 2019-10-08
 ### Added
 - Added `search_value` prop to `Dropdown`, for server-side options loading/filtering. [#660](https://github.com/plotly/dash-core-components/pull/660)
+- [#616](https://github.com/plotly/dash-core-components/pull/616) Async Graph and Plotly.js
 
 ### Updated
 - Upgraded plotly.js to 1.50.0 [#675](https://github.com/plotly/dash-core-components/pull/675)

MANIFEST.in

@@ -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

babel.config.js

@@ -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 };

dash_core_components_base/__init__.py

@@ -39,13 +39,7 @@
 
 _this_module = _sys.modules[__name__]
 
-
 _js_dist = [
-    {
-        'external_url': 'https://cdn.plot.ly/plotly-1.50.0.min.js',
-        'relative_package_path': 'plotly-1.50.0.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.0.min.js',
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/plotly-1.50.0.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)

generator/plotly.js

@@ -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);
+});