Add hooks for index modification and adding script and stylesheet resources.

Author: T4rk1n

dash/_hooks.py

@@ -4,7 +4,7 @@
 import flask as _f
 
 from .exceptions import HookError
-
+from .resources import ResourceType
 
 if _t.TYPE_CHECKING:
     from .dash import Dash
@@ -38,7 +38,12 @@ def __init__(self) -> None:
             "routes": [],
             "error": [],
             "callback": [],
+            "script": [],
+            "stylesheet": [],
+            "index": [],
         }
+        self._js_dist = []
+        self._css_dist = []
         self._finals = {}
 
     def add_hook(
@@ -59,7 +64,7 @@ def add_hook(
         hks.append(_Hook(func, priority=priority, data=data))
         self._ns[hook] = sorted(hks, reverse=True, key=lambda h: h.priority)
 
-    def get_hooks(self, hook: str):
+    def get_hooks(self, hook: str) -> _t.List[_Hook]:
         final = self._finals.get(hook, None)
         if final:
             final = [final]
@@ -140,6 +145,28 @@ def wrap(func):
 
         return wrap
 
+    def script(self, distribution: _t.List[ResourceType]):
+        """Add js scripts to the page."""
+        self._js_dist.extend(distribution)
+
+    def stylesheet(self, distribution: _t.List[ResourceType]):
+        """Add stylesheets to the page."""
+        self._css_dist.extend(distribution)
+
+    def index(self, priority=None, final=False):
+        """Modify the index of the apps."""
+
+        def wrap(func):
+            self.add_hook(
+                "index",
+                func,
+                priority=priority,
+                final=final,
+            )
+            return func
+
+        return wrap
+
 
 hooks = _Hooks()
 

dash/dash.py

@@ -921,9 +921,13 @@ def _relative_url_path(relative_package_path="", namespace=""):
 
         return srcs
 
+    # pylint: disable=protected-access
     def _generate_css_dist_html(self):
         external_links = self.config.external_stylesheets
-        links = self._collect_and_register_resources(self.css.get_all_css())
+        links = self._collect_and_register_resources(
+            self.css.get_all_css()
+            + self.css._resources._filter_resources(self._hooks.hooks._css_dist)
+        )
 
         return "\n".join(
             [
@@ -972,6 +976,9 @@ def _generate_scripts_html(self):
                 + self.scripts._resources._filter_resources(
                     dash_table._js_dist, dev_bundles=dev
                 )
+                + self.scripts._resources._filter_resources(
+                    self._hooks.hooks._js_dist, dev_bundles=dev
+                )
             )
         )
 
@@ -1095,6 +1102,9 @@ def index(self, *args, **kwargs):  # pylint: disable=unused-argument
             renderer=renderer,
         )
 
+        for hook in self._hooks.get_hooks("index"):
+            index = hook(index)
+
         checks = (
             _re_index_entry_id,
             _re_index_config_id,

dash/resources.py

@@ -2,20 +2,53 @@
 import warnings
 import os
 
+import typing as _t
+import typing_extensions as _tx
+
+
 from .development.base_component import ComponentRegistry
 from . import exceptions
 
 
+# ResourceType has `async` key, use the init form to be able to provide it.
+ResourceType = _tx.TypedDict(
+    "ResourceType",
+    {
+        "namespace": str,
+        "async": _t.Union[bool, _t.Literal["eager", "lazy"]],
+        "dynamic": bool,
+        "relative_package_path": str,
+        "external_url": str,
+        "dev_package_path": str,
+        "absolute_path": str,
+        "asset_path": str,
+        "external_only": bool,
+        "filepath": str,
+    },
+    total=False,
+)
+
+
+# pylint: disable=too-few-public-methods
+class ResourceConfig:
+    def __init__(self, serve_locally, eager_loading):
+        self.eager_loading = eager_loading
+        self.serve_locally = serve_locally
+
+
 class Resources:
-    def __init__(self, resource_name):
-        self._resources = []
+    def __init__(self, resource_name: str, config: ResourceConfig):
+        self._resources: _t.List[ResourceType] = []
         self.resource_name = resource_name
+        self.config = config
 
-    def append_resource(self, resource):
+    def append_resource(self, resource: ResourceType):
         self._resources.append(resource)
 
     # pylint: disable=too-many-branches
-    def _filter_resources(self, all_resources, dev_bundles=False):
+    def _filter_resources(
+        self, all_resources: _t.List[ResourceType], dev_bundles=False
+    ):
         filtered_resources = []
         for s in all_resources:
             filtered_resource = {}
@@ -45,7 +78,9 @@ def _filter_resources(self, all_resources, dev_bundles=False):
                 )
             if "namespace" in s:
                 filtered_resource["namespace"] = s["namespace"]
-            if "external_url" in s and not self.config.serve_locally:
+            if "external_url" in s and (
+                s.get("external_only") or not self.config.serve_locally
+            ):
                 filtered_resource["external_url"] = s["external_url"]
             elif "dev_package_path" in s and dev_bundles:
                 filtered_resource["relative_package_path"] = s["dev_package_path"]
@@ -54,14 +89,14 @@ def _filter_resources(self, all_resources, dev_bundles=False):
             elif "absolute_path" in s:
                 filtered_resource["absolute_path"] = s["absolute_path"]
             elif "asset_path" in s:
-                info = os.stat(s["filepath"])
+                info = os.stat(s["filepath"])  # type: ignore
                 filtered_resource["asset_path"] = s["asset_path"]
                 filtered_resource["ts"] = info.st_mtime
             elif self.config.serve_locally:
                 warnings.warn(
                     (
                         "You have set your config to `serve_locally=True` but "
-                        f"A local version of {s['external_url']} is not available.\n"
+                        f"A local version of {s['external_url']} is not available.\n"  # type: ignore
                         "If you added this file with "
                         "`app.scripts.append_script` "
                         "or `app.css.append_css`, use `external_scripts` "
@@ -95,32 +130,25 @@ def get_library_resources(self, libraries, dev_bundles=False):
         return self._filter_resources(all_resources, dev_bundles)
 
 
-# pylint: disable=too-few-public-methods
-class _Config:
-    def __init__(self, serve_locally, eager_loading):
-        self.eager_loading = eager_loading
-        self.serve_locally = serve_locally
-
-
 class Css:
-    def __init__(self, serve_locally):
-        self._resources = Resources("_css_dist")
-        self._resources.config = self.config = _Config(serve_locally, True)
+    def __init__(self, serve_locally: bool):
+        self.config = ResourceConfig(serve_locally, True)
+        self._resources = Resources("_css_dist", self.config)
 
-    def append_css(self, stylesheet):
+    def append_css(self, stylesheet: ResourceType):
         self._resources.append_resource(stylesheet)
 
     def get_all_css(self):
         return self._resources.get_all_resources()
 
-    def get_library_css(self, libraries):
+    def get_library_css(self, libraries: _t.List[str]):
         return self._resources.get_library_resources(libraries)
 
 
 class Scripts:
     def __init__(self, serve_locally, eager):
-        self._resources = Resources("_js_dist")
-        self._resources.config = self.config = _Config(serve_locally, eager)
+        self.config = ResourceConfig(serve_locally, eager)
+        self._resources = Resources("_js_dist", self.config)
 
     def append_script(self, script):
         self._resources.append_resource(script)

tests/integration/test_hooks.py

@@ -130,3 +130,34 @@ def hook4(layout):
     dash_duo.wait_for_text_to_equal("#body > div:nth-child(3)", "first")
     dash_duo.wait_for_text_to_equal("#body > div:nth-child(4)", "second")
     dash_duo.wait_for_text_to_equal("#body > div:nth-child(5)", "third")
+
+
+def test_hook007_hook_index(hook_cleanup, dash_duo):
+    @hooks.index()
+    def hook_index(index: str):
+        body = "<body>"
+        ib = index.find(body) + len(body)
+        injected = '<div id="hooked">Hooked</div>'
+        new_index = index[ib:] + injected + index[: ib + 1]
+        return new_index
+
+    app = Dash()
+    app.layout = html.Div(["index"])
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#hooked", "Hooked")
+
+
+def test_hook008_hook_distributions(hook_cleanup, dash_duo):
+    js_uri = "https://example.com/none.js"
+    css_uri = "https://example.com/none.css"
+    hooks.script([{"external_url": js_uri, "external_only": True}])
+    hooks.stylesheet([{"external_url": css_uri, "external_only": True}])
+
+    app = Dash()
+    app.layout = html.Div("distribute")
+
+    dash_duo.start_server(app)
+
+    assert dash_duo.find_element(f'script[src="{js_uri}"]')
+    assert dash_duo.find_element(f'link[href="{css_uri}"]')

tests/unit/library/test_async_resources.py

@@ -1,15 +1,8 @@
-from dash.resources import Resources
-
-
-class obj(object):
-    def __init__(self, dict):
-        self.__dict__ = dict
+from dash.resources import Resources, ResourceConfig
 
 
 def test_resources_eager():
-
-    resource = Resources("js_test")
-    resource.config = obj({"eager_loading": True, "serve_locally": False})
+    resource = Resources("js_test", ResourceConfig(True, False))
 
     filtered = resource._filter_resources(
         [
@@ -32,9 +25,7 @@ def test_resources_eager():
 
 
 def test_resources_lazy():
-
-    resource = Resources("js_test")
-    resource.config = obj({"eager_loading": False, "serve_locally": False})
+    resource = Resources("js_test", ResourceConfig(False, False))
 
     filtered = resource._filter_resources(
         [