Merge pull request #2789 from plotly/load-inside-callback

Add library loading capacity to `_allow_dynamic_callbacks`.

Author: T4rk1n

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 - [#2881](https://github.com/plotly/dash/pull/2881) Add outputs_list to window.dash_clientside.callback_context. Fixes [#2877](https://github.com/plotly/dash/issues/2877).
 - [#2936](https://github.com/plotly/dash/pull/2936) Adds support for TypeScript 5.5+.
+- [#2789](https://github.com/plotly/dash/pull/2789) Add library loading capacity to `_allow_dynamic_callbacks`
 
 ## Fixed
 
@@ -44,6 +45,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
   - `target_components` specifies components/props triggering the loading spinner
   - `custom_spinner`  enables using a custom component for loading messages instead of built-in spinners
   - `display`  overrides the loading status with options for "show," "hide," or "auto"
+
 - [#2822](https://github.com/plotly/dash/pull/2822) Support no output callbacks. Fixes [#1549](https://github.com/plotly/dash/issues/1549)
 - [#2822](https://github.com/plotly/dash/pull/2822) Add global set_props. Fixes [#2803](https://github.com/plotly/dash/issues/2803)
 

dash/_callback.py

@@ -10,12 +10,14 @@
     handle_grouped_callback_args,
     Output,
 )
+from .development.base_component import ComponentRegistry
 from .exceptions import (
     InvalidCallbackReturnValue,
     PreventUpdate,
     WildcardInLongCallback,
     MissingLongCallbackManagerError,
     LongCallbackError,
+    ImportedInsideCallbackError,
 )
 
 from ._grouping import (
@@ -354,11 +356,14 @@ def wrap_func(func):
         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", AttributeDict({"updated_props": {}})
             )
+            app = kwargs.pop("app", None)
             callback_manager = long and long.get("manager", app_callback_manager)
             error_handler = on_error or kwargs.pop("app_on_error", None)
+            original_packages = set(ComponentRegistry.registry)
 
             if has_output:
                 _validate.validate_output_spec(insert_output, output_spec, Output)
@@ -557,6 +562,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

@@ -45,6 +45,9 @@ import {handlePatch, isPatch} from './patch';
 import {getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
+
+import {loadLibrary} from '../utils/libraries';
+
 import {parsePMCId} from './patternMatching';
 import {replacePMC} from './patternMatching';
 
@@ -576,8 +579,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

@@ -105,6 +105,7 @@ export type CallbackResponseData = {
     running?: CallbackResponse;
     runningOff?: CallbackResponse;
     cancel?: ICallbackProperty[];
+    dist?: any;
     sideUpdate?: 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

@@ -789,15 +789,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.
@@ -1254,8 +1253,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
@@ -1285,7 +1282,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
@@ -1361,16 +1357,11 @@ def dispatch(self):
                     outputs_list=outputs_list,
                     long_callback_manager=self._background_manager,
                     callback_context=g,
+                    app=self,
                     app_on_error=self._on_error,
                 )
             )
         )
-
-        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")