Fix libraries loading in callbacks.

T4rk1n · T4rk1n · commit 6b74463baf26 · 2024-02-13T16:08:42.000-05:00
diff --git a/dash/dash-renderer/src/actions/callbacks.ts b/dash/dash-renderer/src/actions/callbacks.ts
@@ -34,7 +34,7 @@ import {
     CallbackResponseData
 } from '../types/callbacks';
 import {isMultiValued, stringifyId, isMultiOutputProp} from './dependencies';
-import {urlBase} from './utils';
+import {crawlLayout, urlBase} from './utils';
 import {getCSRFHeader} from '.';
 import {createAction, Action} from 'redux-actions';
 import {addHttpHeaders} from '../actions';
@@ -44,6 +44,9 @@ import {handlePatch, isPatch} from './patch';
 import {getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
+import loadLibrary from '../libraries/loadLibrary';
+import fetchDist from '../libraries/fetchDist';
+import {setLibraryLoaded} from './libraries';
 
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
@@ -362,6 +365,7 @@ function handleServerside(
     let runningOff: any;
     let progressDefault: any;
     let moreArgs = additionalArgs;
+    const libraries = Object.keys(getState().libraries);
 
     const fetchCallback = () => {
         const headers = getCSRFHeader() as any;
@@ -508,8 +512,37 @@ function handleServerside(
                     }
 
                     if (!long || data.response !== undefined) {
-                        completeJob();
-                        finishLine(data);
+                        const newLibs: string[] = [];
+                        Object.values(data.response as any).forEach(
+                            (newData: any) => {
+                                Object.values(newData).forEach(newProp => {
+                                    crawlLayout(newProp, (c: any) => {
+                                        if (!libraries.includes(c.namespace)) {
+                                            newLibs.push(c.namespace);
+                                        }
+                                    });
+                                });
+                            }
+                        );
+                        if (newLibs.length) {
+                            fetchDist(
+                                getState().config.requests_pathname_prefix,
+                                newLibs
+                            )
+                                .then(data => {
+                                    return Promise.all(data.map(loadLibrary));
+                                })
+                                .then(() => {
+                                    completeJob();
+                                    finishLine(data);
+                                    dispatch(
+                                        setLibraryLoaded({libraries: newLibs})
+                                    );
+                                });
+                        } else {
+                            completeJob();
+                            finishLine(data);
+                        }
                     } else {
                         // Poll chain.
                         setTimeout(
diff --git a/dash/dash-renderer/src/actions/libraries.ts b/dash/dash-renderer/src/actions/libraries.ts
@@ -0,0 +1,10 @@
+import {LibrariesActions} from '../libraries/libraryTypes';
+
+const createAction = (type: LibrariesActions) => (payload: any) => ({
+    type,
+    payload
+});
+
+export const setLibraryLoading = createAction(LibrariesActions.LOAD);
+export const setLibraryLoaded = createAction(LibrariesActions.LOADED);
+export const setLibraryToLoad = createAction(LibrariesActions.TO_LOAD);
diff --git a/dash/dash-renderer/src/libraries/fetchDist.ts b/dash/dash-renderer/src/libraries/fetchDist.ts
@@ -0,0 +1,12 @@
+import {LibraryResource} from './libraryTypes';
+
+export default function fetchDist(
+    pathnamePrefix: string,
+    libraries: string[]
+): Promise<LibraryResource[]> {
+    return fetch(`${pathnamePrefix}_dash-dist`, {
+        body: JSON.stringify(libraries),
+        headers: {'Content-Type': 'application/json'},
+        method: 'POST'
+    }).then(response => response.json());
+}
diff --git a/dash/dash-renderer/src/libraries/librariesContext.ts b/dash/dash-renderer/src/libraries/librariesContext.ts
@@ -1,103 +1,26 @@
+import {createContext, useContext, useEffect, useState} from 'react';
+import {pathOr, toPairs} from 'ramda';
+import loadLibrary from './loadLibrary';
+import {batch, useDispatch, useSelector} from 'react-redux';
+import {LibrariesState} from './libraryTypes';
 import {
-    createContext,
-    useContext,
-    useReducer,
-    useEffect,
-    useState
-} from 'react';
-import {assocPath, pathOr, pipe, toPairs} from 'ramda';
-
-type LibraryResource = {
-    type: '_js_dist' | '_css_dist';
-    url: string;
-    async?: string;
-    namespace: string;
-    relative_package_path?: string;
-};
-
-type LibrariesState = {
-    [libname: string]: {
-        toLoad: boolean;
-        loading: boolean;
-        loaded: boolean;
-        dist?: LibraryResource[];
-    };
-};
-
-enum LibrariesActions {
-    LOAD,
-    LOADED,
-    TO_LOAD
-}
-
-type LoadingPayload = {
-    libraries: string[];
-};
-
-type LoadedPayload = {
-    libraries: string[];
-};
-
-type ToLoadPayload = {
-    library: string;
-};
-
-type LibrariesAction = {
-    type: LibrariesActions;
-    payload: LoadingPayload | LoadedPayload | ToLoadPayload;
-};
+    setLibraryLoaded,
+    setLibraryLoading,
+    setLibraryToLoad
+} from '../actions/libraries';
+import fetchDist from './fetchDist';
 
 export type LibrariesContextType = {
     state: LibrariesState;
-    setLoading: (payload: LoadingPayload) => void;
-    setLoaded: (payload: LoadedPayload) => void;
-    setToLoad: (payload: ToLoadPayload) => void;
     isLoading: (libraryName: string) => boolean;
     isLoaded: (libraryName: string) => boolean;
     fetchLibraries: () => void;
     getLibrariesToLoad: () => string[];
     addToLoad: (libName: string) => void;
 };
 
-function handleLoad(library: string, state: LibrariesState) {
-    return pipe(
-        assocPath([library, 'loading'], true),
-        assocPath([library, 'toLoad'], false)
-    )(state) as LibrariesState;
-}
-
-function handleLoaded(library: string, state: LibrariesState) {
-    return pipe(
-        assocPath([library, 'loaded'], true),
-        assocPath([library, 'loading'], false)
-    )(state) as LibrariesState;
-}
-
-export function librariesReducer(
-    state: LibrariesState,
-    action: LibrariesAction
-): LibrariesState {
-    switch (action.type) {
-        case LibrariesActions.LOAD:
-            return (action.payload as LoadingPayload).libraries.reduce(
-                (acc, lib) => handleLoad(lib, acc),
-                state
-            );
-        case LibrariesActions.LOADED:
-            return (action.payload as LoadedPayload).libraries.reduce(
-                (acc, lib) => handleLoaded(lib, acc),
-                state
-            );
-        case LibrariesActions.TO_LOAD:
-            return pipe(
-                assocPath(
-                    [(action.payload as ToLoadPayload).library, 'toLoad'],
-                    true
-                )
-            )(state) as LibrariesState;
-        default:
-            return state;
-    }
+function librarySelector(s: any) {
+    return s.libraries as LibrariesState;
 }
 
 export function createLibrariesContext(
@@ -106,26 +29,9 @@ export function createLibrariesContext(
     onReady: () => void,
     ready: boolean
 ): LibrariesContextType {
-    const [state, dispatch] = useReducer(librariesReducer, {}, () => {
-        const libState: LibrariesState = {};
-        initialLibraries.forEach(lib => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            if (window[lib]) {
-                libState[lib] = {toLoad: false, loaded: true, loading: false};
-            } else {
-                libState[lib] = {toLoad: true, loaded: false, loading: false};
-            }
-        });
-        return libState;
-    });
+    const dispatch = useDispatch();
+    const state = useSelector(librarySelector);
     const [callback, setCallback] = useState<number>(-1);
-    const createAction = (type: LibrariesActions) => (payload: any) =>
-        dispatch({type, payload});
-
-    const setLoading = createAction(LibrariesActions.LOAD);
-    const setLoaded = createAction(LibrariesActions.LOADED);
-    const setToLoad = createAction(LibrariesActions.TO_LOAD);
 
     const isLoaded = (libraryName: string) =>
         pathOr(false, [libraryName, 'loaded'], state);
@@ -139,9 +45,9 @@ export function createLibrariesContext(
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             if (window[libraryName]) {
-                setLoaded({libraries: [libraryName]});
+                dispatch(setLibraryLoaded({libraries: [libraryName]}));
             } else {
-                setToLoad({library: libraryName});
+                dispatch(setLibraryToLoad({library: libraryName}));
             }
         }
         // if lib is already in don't do anything.
@@ -161,57 +67,42 @@ export function createLibrariesContext(
             return;
         }
 
-        setLoading({libraries});
+        dispatch(setLibraryLoading({libraries}));
 
-        fetch(`${pathnamePrefix}_dash-dist`, {
-            body: JSON.stringify(libraries),
-            headers: {'Content-Type': 'application/json'},
-            method: 'POST'
-        })
-            .then(response => response.json())
+        fetchDist(pathnamePrefix, libraries)
             .then(data => {
-                const head = document.querySelector('head');
-                const loadPromises: Promise<void>[] = [];
-                data.forEach((resource: LibraryResource) => {
-                    if (resource.type === '_js_dist') {
-                        const element = document.createElement('script');
-                        element.src = resource.url;
-                        element.async = true;
-                        loadPromises.push(
-                            new Promise((resolve, reject) => {
-                                element.onload = () => {
-                                    resolve();
-                                };
-                                element.onerror = error => reject(error);
-                            })
-                        );
-                        head?.appendChild(element);
-                    } else if (resource.type === '_css_dist') {
-                        const element = document.createElement('link');
-                        element.href = resource.url;
-                        element.rel = 'stylesheet';
-                        loadPromises.push(
-                            new Promise((resolve, reject) => {
-                                element.onload = () => {
-                                    resolve();
-                                };
-                                element.onerror = error => reject(error);
-                            })
-                        );
-                        head?.appendChild(element);
-                    }
-                });
-                return Promise.all(loadPromises);
+                return Promise.all(data.map(loadLibrary));
             })
             .then(() => {
-                setLoaded({libraries});
+                dispatch(setLibraryLoaded({libraries}));
                 setCallback(-1);
                 onReady();
             });
     };
 
+    useEffect(() => {
+        batch(() => {
+            const loaded: string[] = [];
+            initialLibraries.forEach(lib => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                if (window[lib]) {
+                    loaded.push(lib);
+                } else {
+                    dispatch(setLibraryToLoad({library: lib}));
+                }
+            });
+            if (loaded.length) {
+                dispatch(setLibraryLoaded({libraries: loaded}));
+            }
+        });
+    }, [initialLibraries]);
+
     // Load libraries on a throttle to have time to gather all the components in one go.
     useEffect(() => {
+        if (ready) {
+            return;
+        }
         const libraries = getLibrariesToLoad();
         if (!libraries.length) {
             if (!ready && initialLibraries.length === 0) {
@@ -224,13 +115,10 @@ export function createLibrariesContext(
         }
         const timeout = window.setTimeout(fetchLibraries, 0);
         setCallback(timeout);
-    }, [state]);
+    }, [state, ready]);
 
     return {
         state,
-        setLoading,
-        setLoaded,
-        setToLoad,
         isLoaded,
         isLoading,
         fetchLibraries,
diff --git a/dash/dash-renderer/src/libraries/libraryTypes.ts b/dash/dash-renderer/src/libraries/libraryTypes.ts
@@ -0,0 +1,17 @@
+export enum LibrariesActions {
+    LOAD = 'LOAD_LIBRARY',
+    LOADED = 'LOADED_LIBRARY',
+    TO_LOAD = 'TO_LOAD'
+}
+
+export type LibrariesState = {
+    [libname: string]: {
+        toLoad: boolean;
+        loading: boolean;
+        loaded: boolean;
+    };
+};
+export type LibraryResource = {
+    type: '_js_dist' | '_css_dist';
+    url: string;
+};
diff --git a/dash/dash-renderer/src/libraries/loadLibrary.ts b/dash/dash-renderer/src/libraries/loadLibrary.ts
@@ -0,0 +1,31 @@
+import {LibraryResource} from './libraryTypes';
+
+export default function (resource: LibraryResource) {
+    let prom;
+    const head = document.querySelector('head');
+    if (resource.type === '_js_dist') {
+        const element = document.createElement('script');
+        element.src = resource.url;
+        element.async = true;
+        prom = new Promise<void>((resolve, reject) => {
+            element.onload = () => {
+                resolve();
+            };
+            element.onerror = error => reject(error);
+        });
+
+        head?.appendChild(element);
+    } else if (resource.type === '_css_dist') {
+        const element = document.createElement('link');
+        element.href = resource.url;
+        element.rel = 'stylesheet';
+        prom = new Promise<void>((resolve, reject) => {
+            element.onload = () => {
+                resolve();
+            };
+            element.onerror = error => reject(error);
+        });
+        head?.appendChild(element);
+    }
+    return prom;
+}
diff --git a/dash/dash-renderer/src/reducers/libraries.ts b/dash/dash-renderer/src/reducers/libraries.ts
diff --git a/dash/dash-renderer/src/reducers/reducer.js b/dash/dash-renderer/src/reducers/reducer.js
diff --git a/dash/dash-renderer/src/types/callbacks.ts b/dash/dash-renderer/src/types/callbacks.ts
