add clientside callback hook

Author: T4rk1n

dash/_callback.py

@@ -1,14 +1,15 @@
 import collections
 import hashlib
 from functools import wraps
-from typing import Callable, Optional, Any
+from typing import Callable, Optional, Any, Union
 
 import flask
 
 from .dependencies import (
     handle_callback_args,
     handle_grouped_callback_args,
     Output,
+    ClientsideFunction,
 )
 from .development.base_component import ComponentRegistry
 from .exceptions import (
@@ -209,7 +210,10 @@ def validate_long_inputs(deps):
             )
 
 
-def clientside_callback(clientside_function, *args, **kwargs):
+ClientsideFuncType = Union[str, ClientsideFunction]
+
+
+def clientside_callback(clientside_function: ClientsideFuncType, *args, **kwargs):
     return register_clientside_callback(
         GLOBAL_CALLBACK_LIST,
         GLOBAL_CALLBACK_MAP,
@@ -603,7 +607,7 @@ def register_clientside_callback(
     callback_map,
     config_prevent_initial_callbacks,
     inline_scripts,
-    clientside_function,
+    clientside_function: ClientsideFuncType,
     *args,
     **kwargs,
 ):

dash/_hooks.py

@@ -1,10 +1,13 @@
 import typing as _t
+
 from importlib import metadata as _importlib_metadata
 
+import typing_extensions as _tx
 import flask as _f
 
 from .exceptions import HookError
 from .resources import ResourceType
+from ._callback import ClientsideFuncType
 
 if _t.TYPE_CHECKING:
     from .dash import Dash
@@ -18,9 +21,12 @@
     Dash = None
 
 
+HookDataType = _tx.TypeVar("HookDataType")
+
+
 # pylint: disable=too-few-public-methods
-class _Hook:
-    def __init__(self, func, priority, final=False, data=None):
+class _Hook(_tx.Generic[HookDataType]):
+    def __init__(self, func, priority, final=False, data: HookDataType = None):
         self.func = func
         self.final = final
         self.data = data
@@ -42,6 +48,9 @@ def __init__(self) -> None:
         }
         self._js_dist = []
         self._css_dist = []
+        self._clientside_callbacks: _t.List[
+            _t.Tuple[ClientsideFuncType, _t.Any, _t.Any]
+        ] = []
         self._finals = {}
 
     def add_hook(
@@ -143,6 +152,14 @@ def wrap(func):
 
         return wrap
 
+    def clientside_callback(
+        self, clientside_function: ClientsideFuncType, *args, **kwargs
+    ):
+        """
+        Add a callback to all the apps with the hook installed.
+        """
+        self._clientside_callbacks.append((clientside_function, args, kwargs))
+
     def script(self, distribution: _t.List[ResourceType]):
         """Add js scripts to the page."""
         self._js_dist.extend(distribution)

dash/dash.py

@@ -591,7 +591,7 @@ def __init__(  # pylint: disable=too-many-statements
         self.setup_startup_routes()
 
     def _setup_hooks(self):
-        # pylint: disable=import-outside-toplevel
+        # pylint: disable=import-outside-toplevel,protected-access
         from ._hooks import HooksManager
 
         self._hooks = HooksManager
@@ -604,6 +604,21 @@ def _setup_hooks(self):
             callback_args, callback_kwargs = hook.data
             self.callback(*callback_args, **callback_kwargs)(hook.func)
 
+        for (
+            clientside_function,
+            args,
+            kwargs,
+        ) in self._hooks.hooks._clientside_callbacks:
+            _callback.register_clientside_callback(
+                self._callback_list,
+                self.callback_map,
+                self.config.prevent_initial_callbacks,
+                self._inline_scripts,
+                clientside_function,
+                *args,
+                **kwargs,
+            )
+
         if self._hooks.get_hooks("error"):
             self._on_error = self._hooks.HookErrorHandler(self._on_error)
 

tests/integration/test_hooks.py

@@ -17,6 +17,7 @@ def hook_cleanup():
     hooks._css_dist = []
     hooks._js_dist = []
     hooks._finals = {}
+    hooks._clientside_callbacks = []
 
 
 def test_hook001_layout(hook_cleanup, dash_duo):
@@ -165,3 +166,23 @@ def test_hook008_hook_distributions(hook_cleanup, dash_duo):
 
     assert dash_duo.find_element(f'script[src="{js_uri}"]')
     assert dash_duo.find_element(f'link[href="{css_uri}"]')
+
+
+def test_hook009_hook_clientside_callback(hook_cleanup, dash_duo):
+    hooks.clientside_callback(
+        "(n) => `Called ${n}`",
+        Output("hook-output", "children"),
+        Input("hook-start", "n_clicks"),
+        prevent_initial_call=True,
+    )
+
+    app = Dash()
+    app.layout = [
+        html.Button("start", id="hook-start"),
+        html.Div(id="hook-output"),
+    ]
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element("#hook-start").click()
+    dash_duo.wait_for_text_to_equal("#hook-output", "Called 1")