refactor: fix component media URLs (#1067)

* refactor: fix component media URLs

* refactor: remove extraneous check and fix tests

* chore: bump v0.134

CHANGELOG.md

@@ -1,13 +1,23 @@
 # Release notes
 
+## v0.134
+
+#### Fix
+
+- HOTFIX: Fix the use of URLs in `Component.Media.js` and `Component.Media.css`
+
 ## v0.133
 
+⚠️ Attention ⚠️ - Please update to v0.134 to fix bugs introduced in v0.132.
+
 #### Fix
 
 - HOTFIX: Fix the use of URLs in `Component.Media.js` and `Component.Media.css`
 
 ## v0.132
 
+⚠️ Attention ⚠️ - Please update to v0.134 to fix bugs introduced in v0.132.
+
 #### Feat
 
 - Allow to use glob patterns as paths for additional JS / CSS in

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "django_components"
-version = "0.133"
+version = "0.134"
 requires-python = ">=3.8, <4.0"
 description = "A way to create simple reusable template components in Django."
 keywords = ["django", "components", "css", "js", "html"]

src/django_components/component_media.py

@@ -868,11 +868,15 @@ def resolve_media_file(
     # If the path is a URL, don't resolve it
     # (e.g. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js)
     # This is defined based on Django's `Media.absolute_path()` method.
-    is_url_path = filepath.startswith(("http://", "https", "/"))
+    is_url_path = filepath.startswith(("http://", "https://", "://", "/"))
+
+    # If the path is a URL, don't resolve it
+    if is_url_path:
+        return [filepath], False
 
     # The path may be a glob. So before we check if the file exists,
     # we need to resolve the glob.
-    if allow_glob and is_glob(filepath_abs_or_glob) and not is_url_path:
+    if allow_glob and is_glob(filepath_abs_or_glob):
         matched_abs_filepaths = glob.glob(filepath_abs_or_glob)
     else:
         matched_abs_filepaths = [filepath_abs_or_glob]

tests/components/glob/glob.py

@@ -21,3 +21,28 @@ class GlobComponentRootDir(GlobComponent):
     class Media:
         css = "glob/glob_*.css"
         js = "glob/glob_*.js"
+
+
+# The Media JS / CSS are NOT globs, but URLs.
+class UrlComponent(Component):
+    template = """
+        {% load component_tags %}
+        {% component_js_dependencies %}
+        {% component_css_dependencies %}
+    """
+
+    class Media:
+        css = [
+            "https://cdnjs.cloudflare.com/example/style.min.css",
+            "http://cdnjs.cloudflare.com/example/style.min.css",
+            # :// is not a valid URL - will be resolved as static path
+            "://cdnjs.cloudflare.com/example/style.min.css",
+            "/path/to/style.css",
+        ]
+        js = [
+            "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
+            "http://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
+            # :// is not a valid URL - will be resolved as static path
+            "://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
+            "/path/to/script.js",
+        ]

tests/test_component_media.py

@@ -415,40 +415,18 @@ class TestComponentMedia:
         assertInHTML('<script src="glob/glob_2.js"></script>', rendered)
 
     def test_glob_pattern_does_not_break_urls(self):
-        class MyComponent(Component):
-            template = """
-                {% load component_tags %}
-                {% component_js_dependencies %}
-                {% component_css_dependencies %}
-            """
-
-            class Media:
-                css = [
-                    "https://cdnjs.cloudflare.com/example/style.min.css",
-                    "http://cdnjs.cloudflare.com/example/style.min.css",
-                    # :// is not a valid URL - will be resolved as static path
-                    "://cdnjs.cloudflare.com/example/style.min.css",
-                    "/path/to/style.css",
-                ]
-                js = [
-                    "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
-                    "http://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
-                    # :// is not a valid URL - will be resolved as static path
-                    "://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js",
-                    "/path/to/script.js",
-                ]
-
-        rendered = MyComponent.render()
+        from tests.components.glob.glob import UrlComponent
+        rendered = UrlComponent.render()
 
         assertInHTML('<link href="https://cdnjs.cloudflare.com/example/style.min.css" media="all" rel="stylesheet">', rendered)
         assertInHTML('<link href="http://cdnjs.cloudflare.com/example/style.min.css" media="all" rel="stylesheet">', rendered)
-        # `://` is escaped because the path was resolved with Django's `static()`
+        # `://` is escaped because Django's `Media.absolute_path()` doesn't consider `://` a valid URL
         assertInHTML('<link href="%3A//cdnjs.cloudflare.com/example/style.min.css" media="all" rel="stylesheet">', rendered)
         assertInHTML('<link href="/path/to/style.css" media="all" rel="stylesheet">', rendered)
 
         assertInHTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>', rendered)
         assertInHTML('<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>', rendered)
-        # `://` is escaped because the path was resolved with Django's `static()`
+        # `://` is escaped because Django's `Media.absolute_path()` doesn't consider `://` a valid URL
         assertInHTML('<script src="%3A//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>', rendered)
         assertInHTML('<script src="/path/to/script.js"></script>', rendered)