Async JavaScript Lazy Loading

.circleci/config.yml

@@ -109,7 +109,7 @@ jobs:
  command: |
  . venv/bin/activate && pip install --no-cache-dir --upgrade -e . --progress-bar off && mkdir packages
  cd dash-renderer && renderer build && python setup.py sdist && mv dist/* ../packages/ && cd ..
- git clone --depth 1 https://github.com/plotly/dash-core-components.git
+ git clone --depth 1 -b exp-dynamic-2 https://github.com/plotly/dash-core-components.git
  cd dash-core-components && npm install --ignore-scripts && npm run build && python setup.py sdist && mv dist/* ../packages/ && cd ..
  git clone --depth 1 https://github.com/plotly/dash-renderer-test-components
  cd dash-renderer-test-components && npm install --ignore-scripts && npm run build:all && python setup.py sdist && mv dist/* ../packages/ && cd ..
@@ -159,7 +159,7 @@ jobs:
  name: ️️🏗️ build misc
  command: |
  . venv/bin/activate && pip install --no-cache-dir --upgrade -e . --progress-bar off && mkdir packages
- git clone --depth 1 https://github.com/plotly/dash-table.git
+ git clone --depth 1 -b exp-dynamic https://github.com/plotly/dash-table.git
  cd dash-table && npm install --ignore-scripts && npm run build && python setup.py sdist && mv dist/* ../packages/ && cd ..
  git clone --depth 1 https://github.com/plotly/dash-html-components.git
  cd dash-html-components && npm install --ignore-scripts && npm run build && python setup.py sdist && mv dist/* ../packages/ && cd ..

@plotly/dash-component-plugins/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Plotly
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

@plotly/dash-component-plugins/package.json

@@ -0,0 +1,16 @@
+{
+ "name": "@plotly/dash-component-plugins",
+ "version": "1.0.1",
+ "description": "Plugins for Dash Components",
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:plotly/dash.git"
+ },
+ "bugs": {
+ "url": "https://github.com/plotly/dash/issues"
+ },
+ "homepage": "https://github.com/plotly/dash",
+ "main": "src/index.js",
+ "author": "Marc-André Rivet",
+ "license": "MIT"
+}

@plotly/dash-component-plugins/src/asyncImport.js

@@ -0,0 +1,31 @@
+import { lazy } from 'react';
+
+export const asyncDecorator = (target, promise) => {
+ let resolve;
+ const isReady = new Promise(r => {
+ resolve = r;
+ });
+
+ const state = {
+ isReady,
+ get: lazy(() => {
+ return Promise.resolve(promise()).then(res => {
+ setTimeout(async () => {
+ await resolve(true);
+ state.isReady = true;
+ }, 0);
+
+ return res;
+ });
+ }),
+ };
+
+ Object.defineProperty(target, '_dashprivate_isLazyComponentReady', {
+ get: () => state.isReady,
+ });
+
+ return state.get;
+};
+
+export const isReady = target => target &&
+ target._dashprivate_isLazyComponentReady;

@plotly/dash-component-plugins/src/index.js

@@ -0,0 +1,3 @@
+import { asyncDecorator, isReady } from './dynamicImport';
+
+export { asyncDecorator, isReady };

@plotly/webpack-dash-dynamic-import/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Plotly
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

@plotly/webpack-dash-dynamic-import/package.json

@@ -0,0 +1,16 @@
+{
+ "name": "@plotly/webpack-dash-dynamic-import",
+ "version": "1.0.0",
+ "description": "Webpack Plugin for Dynamic Import in Dash",
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:plotly/dash.git"
+ },
+ "bugs": {
+ "url": "https://github.com/plotly/dash/issues"
+ },
+ "homepage": "https://github.com/plotly/dash",
+ "main": "src/index.js",
+ "author": "Marc-André Rivet",
+ "license": "MIT"
+}

@plotly/webpack-dash-dynamic-import/src/index.js

@@ -0,0 +1,33 @@
+const resolveImportSource = `\
+Object.defineProperty(__webpack_require__, 'p', {
+ get: (function () {
+ let script = document.currentScript;
+ if (!script) {
+ /* Shim for IE11 and below */
+ /* Do not take into account async scripts and inline scripts */
+ const scripts = Array.from(document.getElementsByTagName('script')).filter(function(s) { return !s.async && !s.text && !s.textContent; });
+ script = scripts.slice(-1)[0];
+ }
+
+ var url = script.src.split('/').slice(0, -1).join('/') + '/';
+
+ return function() {
+ return url;
+ };
+ })()
+});`
+
+class WebpackDashDynamicImport {
+ apply(compiler) {
+ compiler.hooks.compilation.tap('WebpackDashDynamicImport', compilation => {
+ compilation.mainTemplate.hooks.requireExtensions.tap('WebpackDashDynamicImport > RequireExtensions', (source, chunk, hash) => {
+ return [
+ source,
+ resolveImportSource
+ ]
+ });
+ });
+ }
+}
+
+module.exports = WebpackDashDynamicImport;

CHANGELOG.md

@@ -21,6 +21,7 @@ updates in clientside functions.
  - Three new `dash.testing` methods: `clear_local_storage`, `clear_session_storage`, and `clear_storage` (to clear both together)
 - [#937](https://github.com/plotly/dash/pull/937) `dash.testing` adds two APIs `zoom_in_graph_by_ratio` and `click_at_coord_fractions` about advanced interactions using mouse `ActionChain`
 - [#938](https://github.com/plotly/dash/issues/938) Add debugging traces to dash backend about serving component suites, to verify the installed packages whenever in doubt.
+- [#899](https://github.com/plotly/dash/pull/899) Add support for async dependencies and components
 
 ### Fixed
 - [#944](https://github.com/plotly/dash/pull/944) Fix a bug with persistence being toggled on/off on an existing component.

dash-renderer/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+ presets: [['@babel/preset-env', {
+ useBuiltIns: 'usage',
+ corejs: 3
+ }], '@babel/preset-react'],
+ env: {
+ test: {
+ plugins: [
+ '@babel/plugin-transform-modules-commonjs'
+ ]
+ }
+ }
+};

dash-renderer/jest.config.js

@@ -163,9 +163,9 @@ module.exports = {
  // transform: null,
 
  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-// transformIgnorePatterns: [
-// "/node_modules/"
-// ],
+ transformIgnorePatterns: [
+"/node_modules/(?!@plotly).+\\.js"
+ ],
 
  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
  // unmockedModulePathPatterns: undefined,

dash-renderer/package.json

@@ -36,8 +36,10 @@
  },
  "devDependencies": {
  "@babel/core": "^7.6.0",
+ "@babel/plugin-transform-modules-commonjs": "^7.6.0",
  "@babel/preset-env": "^7.6.0",
  "@babel/preset-react": "^7.0.0",
+ "@plotly/dash-component-plugins": "^1.0.1",
  "@svgr/webpack": "^4.1.0",
  "babel-eslint": "^10.0.3",
  "babel-loader": "^8.0.6",
@@ -57,9 +59,9 @@
  "prettier-stylelint": "^0.4.2",
  "raw-loader": "^3.1.0",
  "style-loader": "^1.0.0",
- "webpack-dev-server": "^3.1.11",
  "webpack": "^4.39.3",
  "webpack-cli": "^3.3.8",
+ "webpack-dev-server": "^3.1.11",
  "webpack-serve": "^3.1.1",
  "whatwg-fetch": "^2.0.2"
  }

dash-renderer/src/APIController.react.js

@@ -9,6 +9,7 @@ import {
  computePaths,
  hydrateInitialOutputs,
  setLayout,
+ setAppIsReady,
 } from './actions/index';
 import {applyPersistence} from './persistence';
 import apiThunk from './actions/api';
@@ -54,6 +55,7 @@ class UnconnectedContainer extends Component {
  dispatch
  );
  dispatch(setLayout(finalLayout));
+ dispatch(setAppIsReady());
  } else if (isNil(paths)) {
  dispatch(computePaths({subTree: layout, startingPath: []}));
  }

dash-renderer/src/TreeContainer.js

@@ -22,14 +22,11 @@ import {
  type,
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
+import isSimpleComponent from './isSimpleComponent';
 import {recordUiEdit} from './persistence';
 import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
 import checkPropTypes from 'check-prop-types';
 
-const SIMPLE_COMPONENT_TYPES = ['String', 'Number', 'Null', 'Boolean'];
-const isSimpleComponent = component =>
- includes(type(component), SIMPLE_COMPONENT_TYPES);
-
 function validateComponent(componentDefinition) {
  if (type(componentDefinition) === 'Array') {
  throw new Error(

dash-renderer/src/actions/constants.js

@@ -8,6 +8,7 @@ const actionList = {
  SET_CONFIG: 'SET_CONFIG',
  ON_ERROR: 'ON_ERROR',
  SET_HOOKS: 'SET_HOOKS',
+ SET_APP_READY: 'SET_APP_READY',
 };
 
 export const getAction = action => {

dash-renderer/src/actions/index.js

@@ -33,17 +33,20 @@ import cookie from 'cookie';
 import {uid, urlBase, isMultiOutputProp, parseMultipleOutputs} from '../utils';
 import {STATUS} from '../constants/constants';
 import {applyPersistence, prunePersistence} from '../persistence';
+import setAppIsReady from './setAppReadyState';
 
 export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
 export const setRequestQueue = createAction(getAction('SET_REQUEST_QUEUE'));
 export const computeGraphs = createAction(getAction('COMPUTE_GRAPHS'));
 export const computePaths = createAction(getAction('COMPUTE_PATHS'));
-export const setLayout = createAction(getAction('SET_LAYOUT'));
 export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
 export const setConfig = createAction(getAction('SET_CONFIG'));
 export const setHooks = createAction(getAction('SET_HOOKS'));
+export const setLayout = createAction(getAction('SET_LAYOUT'));
 export const onError = createAction(getAction('ON_ERROR'));
 
+export {setAppIsReady};
+
 export function hydrateInitialOutputs() {
  return function(dispatch, getState) {
  triggerDefaultState(dispatch, getState);
@@ -175,7 +178,7 @@ function reduceInputIds(nodeIds, InputGraph) {
  /*
  * Create input-output(s) pairs,
  * sort by number of outputs,
- * and remove redudant inputs (inputs that update the same output)
+ * and remove redundant inputs (inputs that update the same output)
  */
  const inputOutputPairs = nodeIds.map(nodeId => ({
  input: nodeId,
@@ -194,7 +197,7 @@ function reduceInputIds(nodeIds, InputGraph) {
  * trigger components to update multiple times.
  *
  * For example, [A, B] => C and [A, D] => E
- * The unique inputs might be [A, B, D] but that is redudant.
+ * The unique inputs might be [A, B, D] but that is redundant.
  * We only need to update B and D or just A.
  *
  * In these cases, we'll supply an additional list of outputs
@@ -215,10 +218,15 @@ function reduceInputIds(nodeIds, InputGraph) {
 }
 
 export function notifyObservers(payload) {
- return function(dispatch, getState) {
+ return async function(dispatch, getState) {
  const {id, props, excludedOutputs} = payload;
 
- const {graphs, requestQueue} = getState();
+ const {graphs, isAppReady, requestQueue} = getState();
+
+ if (isAppReady !== true) {
+ await isAppReady;
+ }
+
  const {InputGraph} = graphs;
  /*
  * Figure out all of the output id's that depend on this input.
@@ -942,6 +950,8 @@ function updateOutput(
  );
  });
  }
+
+ dispatch(setAppIsReady());
  }
  };
  if (multi) {