Merge pull request #2730 from jowlo/feature/set-module-type-for-mjs-script-tags

Load asset files with ending ".mjs" as js modules

Author: alexcjohnson

CHANGELOG.md

@@ -13,6 +13,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#2734](https://github.com/plotly/dash/pull/2734) Configure CI for Python 3.10 [#1863](https://github.com/plotly/dash/issues/1863)
 - [#2735](https://github.com/plotly/dash/pull/2735) Configure CI for Python 3.8 and 3.12, drop support for Python 3.6 and Python 3.7 [#2736](https://github.com/plotly/dash/issues/2736)
 
+## Added
+- [#2730](https://github.com/plotly/dash/pull/2721) Load script files with `.mjs` ending as js modules
+
 ## [2.15.0] - 2024-01-31
 
 ## Added

dash/dash.py

@@ -855,9 +855,20 @@ def _relative_url_path(relative_package_path="", namespace=""):
                 raise Exception("Serving files from absolute_path isn't supported yet")
             elif "asset_path" in resource:
                 static_url = self.get_asset_url(resource["asset_path"])
-                # Add a cache-busting query param
-                static_url += f"?m={resource['ts']}"
-                srcs.append(static_url)
+                # Import .mjs files with type=module script tag
+                if static_url.endswith(".mjs"):
+                    srcs.append(
+                        {
+                            "src": static_url
+                            + f"?m={resource['ts']}",  # Add a cache-busting query param
+                            "type": "module",
+                        }
+                    )
+                else:
+                    srcs.append(
+                        static_url + f"?m={resource['ts']}"
+                    )  # Add a cache-busting query param
+
         return srcs
 
     def _generate_css_dist_html(self):

tests/integration/clientside/assets/clientside.mjs

@@ -0,0 +1,6 @@
+import {display} from "./clientsideModule.mjs";
+
+window.dash_clientside = window.dash_clientside || {};
+window.dash_clientside.clientside_module = Object.assign({}, window.dash_clientside.clientside_module, {
+	display
+});

tests/integration/clientside/assets/clientsideModule.mjs

@@ -0,0 +1,3 @@
+const display = (value) => 'Client says "' + value + '"';
+
+export {display};

tests/integration/clientside/test_clientside.py

@@ -868,3 +868,36 @@ def test_clsd020_clientside_callback_context_triggered_id(dash_duo):
     dash_duo.find_element("button[id*='btn1\":2']").click()
 
     dash_duo.wait_for_text_to_equal("#output-clientside", "2")
+
+
+def test_clsd021_simple_clientside_module_serverside_callback(dash_duo):
+    app = Dash(__name__, assets_folder="assets")
+
+    app.layout = html.Div(
+        [
+            dcc.Input(id="input"),
+            html.Div(id="output-clientside"),
+            html.Div(id="output-serverside"),
+        ]
+    )
+
+    @app.callback(Output("output-serverside", "children"), [Input("input", "value")])
+    def update_output(value):
+        return 'Server says "{}"'.format(value)
+
+    app.clientside_callback(
+        ClientsideFunction(namespace="clientside_module", function_name="display"),
+        Output("output-clientside", "children"),
+        [Input("input", "value")],
+    )
+
+    dash_duo.start_server(app)
+
+    assert dash_duo.find_element("body > footer > script[type=module]")
+
+    dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "None"')
+    dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "undefined"')
+
+    dash_duo.find_element("#input").send_keys("hello world")
+    dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "hello world"')
+    dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "hello world"')