Fix plotly.js url on the window at initial mount.

Author: T4rk1n

components/dash-core-components/src/components/Graph.react.js

@@ -124,44 +124,20 @@ class PlotlyGraph extends Component {
     }
 }
 
-let loadingProm = null;
-let loadedGraph = null;
-
-const getPlotlyGraph = config => {
-    if (loadedGraph) {
-        if (loadedGraph.default) {
-            // Hot reload get a default
-            return loadedGraph.default;
-        }
-        return loadedGraph;
-    }
-    if (loadingProm) {
-        return loadingProm;
-    }
-
-    loadingProm = asyncDecorator(PlotlyGraph, () =>
-        Promise.all([
-            graph(),
-            plotly(config),
-            PlotlyGraph._loadMathjax ? lazyLoadMathJax() : undefined,
-        ]).then(([graph]) => {
-            loadedGraph = graph;
-            loadingProm = null;
-            return graph;
-        })
-    );
-    return loadingProm;
-};
+const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
+    Promise.all([
+        graph(),
+        plotly(),
+        PlotlyGraph._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([graph]) => graph)
+);
 
 const ControlledPlotlyGraph = memo(props => {
     const {className, id} = props;
 
     const extendedClassName = className
         ? 'dash-graph ' + className
         : 'dash-graph';
-    const config = window._dashUseConfig();
-
-    const RealPlotlyGraph = getPlotlyGraph(config);
 
     return (
         <Suspense

components/dash-core-components/src/utils/LazyLoader/plotly.js

@@ -1,16 +1,10 @@
-export default (config) => {
-    let url;
-    if (config.serve_locally) {
-        url = `${config.requests_pathname_prefix}_dash-component-suites/plotly/package_data/plotly.min.js`;
-    } else {
-        url = config.plotlyjs_url;
-    }
+export default () => {
     return Promise.resolve(window.Plotly || new Promise((resolve, reject) => {
         /* eslint-disable prefer-const */
         let timeoutId;
 
         const element = document.createElement('script');
-        element.src = url;
+        element.src = window._dashPlotlyJSURL;
         element.async = true;
         element.onload = () => {
             clearTimeout(timeoutId);
@@ -23,7 +17,7 @@ export default (config) => {
 
         timeoutId = setTimeout(() => {
             element.src = '';
-            reject(new Error(`${url} did not load after 30 seconds`));
+            reject(new Error(`plotly.js did not load after 30 seconds`));
         }, 3 * 10 * 1000);
 
         document.querySelector('body').appendChild(element);

dash/dash-renderer/src/APIController.react.js

@@ -21,7 +21,6 @@ import {getAppState} from './reducers/constants';
 import {STATUS} from './constants/constants';
 import {getLoadingState, getLoadingHash} from './utils/TreeContainer';
 import wait from './utils/wait';
-import {ConfigContext} from './config';
 
 export const DashContext = createContext({});
 
@@ -73,6 +72,14 @@ const UnconnectedContainer = props => {
         }
     });
 
+    useEffect(() => {
+        if (config.serve_locally) {
+            window._dashPlotlyJSURL = `${config.requests_pathname_prefix}_dash-component-suites/plotly/package_data/plotly.min.js`;
+        } else {
+            window._dashPlotlyJSURL = config.plotlyjs_url;
+        }
+    }, []);
+
     let content;
     if (
         layoutRequest.status &&
@@ -90,22 +97,20 @@ const UnconnectedContainer = props => {
 
         content = (
             <DashContext.Provider value={provider.current}>
-                <ConfigContext.Provider value={config}>
-                    <TreeContainer
-                        _dashprivate_error={error}
-                        _dashprivate_layout={layout}
-                        _dashprivate_loadingState={getLoadingState(
-                            layout,
-                            [],
-                            loadingMap
-                        )}
-                        _dashprivate_loadingStateHash={getLoadingHash(
-                            [],
-                            loadingMap
-                        )}
-                        _dashprivate_path={JSON.stringify([])}
-                    />
-                </ConfigContext.Provider>
+                <TreeContainer
+                    _dashprivate_error={error}
+                    _dashprivate_layout={layout}
+                    _dashprivate_loadingState={getLoadingState(
+                        layout,
+                        [],
+                        loadingMap
+                    )}
+                    _dashprivate_loadingStateHash={getLoadingHash(
+                        [],
+                        loadingMap
+                    )}
+                    _dashprivate_path={JSON.stringify([])}
+                />
             </DashContext.Provider>
         );
     } else {

dash/dash-renderer/src/config.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Config = {
     url_base_pathname: string;
     requests_pathname_prefix: string;
@@ -31,15 +29,3 @@ export default function getConfigFromDOM(): Config {
         configElement?.textContent ? configElement?.textContent : '{}'
     );
 }
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-export const ConfigContext = React.createContext<Config>({});
-
-export function useConfig() {
-    return React.useContext<Config>(ConfigContext);
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-window._dashUseConfig = useConfig;