Add library loading capacity to _allow_dynamic_callbacks.

Author: T4rk1n

dash/_callback.py

@@ -9,11 +9,13 @@
     handle_grouped_callback_args,
     Output,
 )
+from .development.base_component import ComponentRegistry
 from .exceptions import (
     PreventUpdate,
     WildcardInLongCallback,
     MissingLongCallbackManagerError,
     LongCallbackError,
+    ImportedInsideCallbackError,
 )
 
 from ._grouping import (
@@ -332,7 +334,9 @@ def add_context(*args, **kwargs):
             output_spec = kwargs.pop("outputs_list")
             app_callback_manager = kwargs.pop("long_callback_manager", None)
             callback_ctx = kwargs.pop("callback_context", {})
+            app = kwargs.pop("app", None)
             callback_manager = long and long.get("manager", app_callback_manager)
+            original_packages = set(ComponentRegistry.registry)
             _validate.validate_output_spec(insert_output, output_spec, Output)
 
             context_value.set(callback_ctx)
@@ -487,6 +491,18 @@ def add_context(*args, **kwargs):
 
             response["response"] = component_ids
 
+            if len(ComponentRegistry.registry) != len(original_packages):
+                diff_packages = list(
+                    set(ComponentRegistry.registry).difference(original_packages)
+                )
+                if not allow_dynamic_callbacks:
+                    raise ImportedInsideCallbackError(
+                        f"Component librar{'y' if len(diff_packages) == 1 else 'ies'} was imported during callback.\n"
+                        "You can set `_allow_dynamic_callbacks` to allow for development purpose only."
+                    )
+                dist = app.get_dist(diff_packages)
+                response["dist"] = dist
+
             try:
                 jsonResponse = to_json(response)
             except TypeError:

dash/dash-renderer/src/actions/callbacks.ts

@@ -44,6 +44,7 @@ import {handlePatch, isPatch} from './patch';
 import {getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
+import {loadLibrary} from '../utils/libraries';
 
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
@@ -508,8 +509,15 @@ function handleServerside(
                     }
 
                     if (!long || data.response !== undefined) {
-                        completeJob();
-                        finishLine(data);
+                        if (data.dist) {
+                            Promise.all(data.dist.map(loadLibrary)).then(() => {
+                                completeJob();
+                                finishLine(data);
+                            });
+                        } else {
+                            completeJob();
+                            finishLine(data);
+                        }
                     } else {
                         // Poll chain.
                         setTimeout(

dash/dash-renderer/src/types/callbacks.ts

@@ -103,4 +103,5 @@ export type CallbackResponseData = {
     running?: CallbackResponse;
     runningOff?: CallbackResponse;
     cancel?: ICallbackProperty[];
+    dist?: any;
 };

dash/dash-renderer/src/utils/libraries.ts

@@ -0,0 +1,34 @@
+type LibraryResource = {
+    type: '_js_dist' | '_css_dist';
+    url: string;
+};
+
+export function loadLibrary(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;
+}

dash/dash.py

@@ -798,15 +798,14 @@ def serve_reload_hash(self):
             }
         )
 
-    def serve_dist(self):
-        libraries = flask.request.get_json()
+    def get_dist(self, libraries):
         dists = []
         for dist_type in ("_js_dist", "_css_dist"):
             resources = ComponentRegistry.get_resources(dist_type, libraries)
             srcs = self._collect_and_register_resources(resources, False)
             for src in srcs:
                 dists.append(dict(type=dist_type, url=src))
-        return flask.jsonify(dists)
+        return dists
 
     def _collect_and_register_resources(self, resources, include_async=True):
         # now needs the app context.
@@ -1262,8 +1261,6 @@ def long_callback(
     def dispatch(self):
         body = flask.request.get_json()
 
-        nlibs = len(ComponentRegistry.registry)
-
         g = AttributeDict({})
 
         g.inputs_list = inputs = body.get(  # pylint: disable=assigning-non-slot
@@ -1293,7 +1290,6 @@ def dispatch(self):
 
         try:
             cb = self.callback_map[output]
-            _allow_dynamic = cb.get("allow_dynamic_callbacks", False)
             func = cb["callback"]
             g.background_callback_manager = (
                 cb.get("manager") or self._background_manager
@@ -1356,15 +1352,10 @@ def dispatch(self):
                     outputs_list=outputs_list,
                     long_callback_manager=self._background_manager,
                     callback_context=g,
+                    app=self,
                 )
             )
         )
-
-        if not _allow_dynamic and nlibs != len(ComponentRegistry.registry):
-            print(
-                "Warning: component library imported during callback, move to top-level for full support.",
-                file=sys.stderr,
-            )
         return response
 
     def _setup_server(self):

dash/exceptions.py

@@ -97,3 +97,7 @@ class MissingLongCallbackManagerError(DashException):
 
 class PageError(DashException):
     pass
+
+
+class ImportedInsideCallbackError(DashException):
+    pass

tests/integration/callbacks/test_dynamic_callback.py

@@ -73,3 +73,31 @@ def addition(_):
     dash_duo.wait_for_text_to_equal("#output", "add callbacks")
 
     assert dash_duo.get_logs() == []
+
+
+def test_dyn003_dynamic_callback_import_library(dash_duo):
+    app = Dash()
+    app.layout = html.Div(
+        [
+            html.Button("insert", id="insert"),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("insert", "n_clicks"),
+        _allow_dynamic_callbacks=True,
+        prevent_initial_call=True,
+    )
+    def on_click(_):
+        import dash_test_components as dt
+
+        return dt.StyledComponent(
+            value="inserted", id="inserted", style={"backgroundColor": "red"}
+        )
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element("#insert").click()
+    dash_duo.wait_for_text_to_equal("#inserted", "inserted")