Issue 481 - Support arbitrary file extensions in component suites (#1078)

Marc-Andre-Rivet · web-flow · commit 680423e4962f · 2020-04-24T10:10:02.000-04:00
diff --git a/@plotly/dash-generator-test-component-standard/base/__init__.py b/@plotly/dash-generator-test-component-standard/base/__init__.py
@@ -16,8 +16,21 @@
     dict(
         relative_package_path='dash_generator_test_component_standard.js',
         namespace='dash_generator_test_component_standard'
+    ),
+    dict(
+        relative_package_path='godfather.ttf',
+        namespace='dash_generator_test_component_standard',
+        dynamic=True
+    )
+]
+
+_css_dist = [
+    dict(
+        relative_package_path='style.css',
+        namespace='dash_generator_test_component_standard'
     )
 ]
 
 for _component in __all__:
     setattr(locals()[_component], '_js_dist', _js_dist)
+    setattr(locals()[_component], '_css_dist', _css_dist)
diff --git a/@plotly/dash-generator-test-component-standard/base/godfather.ttf b/@plotly/dash-generator-test-component-standard/base/godfather.ttf
diff --git a/@plotly/dash-generator-test-component-standard/base/style.css b/@plotly/dash-generator-test-component-standard/base/style.css
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'godfather';
+    src: url(./godfather.ttf) format('truetype');
+}
diff --git a/@plotly/dash-generator-test-component-standard/src/components/MyStandardComponent.js b/@plotly/dash-generator-test-component-standard/src/components/MyStandardComponent.js
@@ -4,14 +4,19 @@ import React from 'react';
 /**
  * MyComponent description
  */
-const MyStandardComponent = ({ id, value }) => (<div id={id}>{value}</div>);
+const MyStandardComponent = ({ id, style, value }) => (<div id={id} style={style}>{value}</div>);
 
 MyStandardComponent.propTypes = {
     /**
      * The id of the component
      */
     id: PropTypes.string,
 
+    /**
+     * The style
+     */
+    style: PropTypes.shape,
+
     /**
      * The value to display
      */
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [UNRELEASED]
 ### Added
 - [#1201](https://github.com/plotly/dash/pull/1201) New attribute `app.validation_layout` allows you to create a multi-page app without `suppress_callback_exceptions=True` or layout function tricks. Set this to a component layout containing the superset of all IDs on all pages in your app.
+- [#1078](https://github.com/plotly/dash/pull/1078) Permit usage of arbitrary file extensions for assets within component libraries
 
 ### Fixed
 - [#1201](https://github.com/plotly/dash/pull/1201) Fixes [#1193](https://github.com/plotly/dash/issues/1193) - prior to Dash 1.11, you could use `flask.has_request_context() == False` inside an `app.layout` function to provide a special layout containing all IDs for validation purposes in a multi-page app. Dash 1.11 broke this when we moved most of this validation into the renderer. This change makes it work again.
@@ -72,7 +73,7 @@ These functions are particularly useful for apps deployed on Dash Enterprise whe
 
 ### Changed
 - [#1035](https://github.com/plotly/dash/pull/1035) Simplify our build process.
-- [#1074](https://github.com/plotly/dash/pull/1045) Error messages when providing an incorrect property to a component have been improved: they now specify the component type, library, version, and ID (if available).
+- [#1074](https://github.com/plotly/dash/pull/1074) Error messages when providing an incorrect property to a component have been improved: they now specify the component type, library, version, and ID (if available).
 
 ### Fixed
 - [#1037](https://github.com/plotly/dash/pull/1037) Fix no_update test to allow copies, such as those stored and retrieved from a cache.
diff --git a/dash/dash.py b/dash/dash.py
@@ -11,6 +11,7 @@
 import threading
 import re
 import logging
+import mimetypes
 
 from functools import wraps
 
@@ -45,6 +46,9 @@
 from . import _validate
 from . import _watch
 
+# Add explicit mapping for map files
+mimetypes.add_type("application/json", ".map", True)
+
 _default_index = """<!DOCTYPE html>
 <html>
     <head>
@@ -669,13 +673,8 @@ def serve_component_suites(self, package_name, fingerprinted_path):
 
         _validate.validate_js_path(self.registered_paths, package_name, path_in_pkg)
 
-        mimetype = (
-            {
-                "js": "application/javascript",
-                "css": "text/css",
-                "map": "application/json",
-            }
-        )[path_in_pkg.split(".")[-1]]
+        extension = "." + path_in_pkg.split(".")[-1]
+        mimetype = mimetypes.types_map.get(extension, "application/octet-stream")
 
         package = sys.modules[package_name]
         self.logger.debug(
diff --git a/dash/development/_r_components_generation.py b/dash/development/_r_components_generation.py
@@ -505,7 +505,7 @@ def write_js_metadata(pkg_data, project_shortname, has_wildcards):
         for filename in filenames:
             extension = os.path.splitext(filename)[1]
 
-            if extension not in [".css", ".js", ".map"]:
+            if extension in [".py", ".pyc", ".json"]:
                 continue
 
             target_dirname = os.path.join(
diff --git a/tests/integration/test_generation.py b/tests/integration/test_generation.py
@@ -1,7 +1,12 @@
 from dash import Dash
+from dash.dependencies import Input, Output
+from dash.exceptions import PreventUpdate
+
 from dash_generator_test_component_nested import MyNestedComponent
 from dash_generator_test_component_standard import MyStandardComponent
-from dash_html_components import Div
+from dash_html_components import Button, Div
+
+from selenium.webdriver.support.ui import WebDriverWait
 
 
 def test_gene001_simple_callback(dash_duo):
@@ -18,3 +23,39 @@ def test_gene001_simple_callback(dash_duo):
 
     assert dash_duo.wait_for_element("#standard").text == "Standard"
     assert dash_duo.wait_for_element("#nested").text == "Nested"
+
+    dash_duo.percy_snapshot(name="gene001-simple-callback")
+
+
+def test_gene002_arbitrary_resources(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = Div([Button(id="btn"), Div(id="container")])
+
+    @app.callback(Output("container", "children"), [Input("btn", "n_clicks")])
+    def update_container(n_clicks):
+        if n_clicks is None:
+            raise PreventUpdate
+
+        return MyStandardComponent(
+            id="standard", value="Standard", style={"font-family": "godfather"}
+        )
+
+    dash_duo.start_server(app)
+
+    assert (
+        dash_duo.driver.execute_script("return document.fonts.check('1em godfather')")
+        is False
+    )
+
+    dash_duo.wait_for_element("#btn").click()
+    assert dash_duo.wait_for_element("#standard").text == "Standard"
+
+    WebDriverWait(dash_duo.driver, 10).until(
+        lambda _: dash_duo.driver.execute_script(
+            "return document.fonts.check('1em godfather')"
+        )
+        is True,
+    )
+
+    dash_duo.percy_snapshot(name="gene002-arbitrary-resource")
