Add ImportESM form media asset (#52)

Author: codingjoe

.github/workflows/ci.yml

@@ -68,6 +68,7 @@ jobs:
       - uses: codecov/codecov-action@v5
         with:
           flags: py${{ matrix.python-version }}
+          token: ${{ secrets.CODECOV_TOKEN }}
 
   pytest-django:
     name: PyTest
@@ -94,6 +95,7 @@ jobs:
       - uses: codecov/codecov-action@v5
         with:
           flags: dj${{ matrix.django-version }}
+          token: ${{ secrets.CODECOV_TOKEN }}
 
   pytest-extras:
     name: PyTest
@@ -115,6 +117,7 @@ jobs:
       - uses: codecov/codecov-action@v5
         with:
           flags: dj${{ matrix.extras }}
+          token: ${{ secrets.CODECOV_TOKEN }}
 
   codeql:
     name: CodeQL

README.md

@@ -80,6 +80,29 @@ You can now import JavaScript modules in your Django templates:
 {% endblock %}
 ```
 
+### Form.media
+
+To use your importmap in Django forms, you can use the `Form.media` attribute:
+
+```python
+# forms.py
+from django import forms
+from django_esm.forms import ImportESModule
+
+
+class MyForm(forms.Form):
+    name = forms.CharField()
+
+    class Media:
+        js = [ImportESModule("@sentry/browser")]
+```
+
+Now `{{ form.media.js }}` will render to like this:
+
+```html
+<script type="module">import '@sentry/browser'</script>
+```
+
 ### Private modules
 
 You can also import private modules from your Django app:

django_esm/forms.py

@@ -0,0 +1,72 @@
+try:
+    from django.forms import Script
+except ImportError:  # pragma: no cover
+    # Django < 5.2 backport
+    from django.forms.utils import flatatt
+    from django.templatetags.static import static
+    from django.utils.html import format_html, html_safe
+
+    @html_safe
+    class MediaAsset:
+        element_template = "{path}"
+
+        def __init__(self, path, **attributes):
+            self._path = path
+            self.attributes = attributes
+
+        def __eq__(self, other):
+            # Compare the path only, to ensure performant comparison in Media.merge.
+            return (self.__class__ is other.__class__ and self.path == other.path) or (
+                isinstance(other, str) and self._path == other
+            )
+
+        def __hash__(self):
+            # Hash the path only, to ensure performant comparison in Media.merge.
+            return hash(self._path)
+
+        def __str__(self):
+            return format_html(
+                self.element_template,
+                path=self.path,
+                attributes=flatatt(self.attributes),
+            )
+
+        def __repr__(self):
+            return f"{type(self).__qualname__}({self._path!r})"
+
+        @property
+        def path(self):
+            if self._path.startswith(("http://", "https://", "/")):
+                return self._path
+            return static(self._path)
+
+    class Script(MediaAsset):
+        element_template = '<script src="{path}"{attributes}></script>'
+
+        def __init__(self, src, **attributes):
+            # Alter the signature to allow src to be passed as a keyword argument.
+            super().__init__(src, **attributes)
+
+
+__all__ = ["ImportESModule"]
+
+
+class ImportESModule(Script):
+    """
+    Import ES module inline via an importmap.
+
+    Usage:
+        class MyForm(forms.Form):
+            class Media:
+                js = [ImportESModule("@sentry/browser")]
+    """
+
+    # https://code.djangoproject.com/ticket/36353
+    element_template = "<script{attributes}>import '{path}'</script>"
+
+    def __init__(self, src, **attributes):
+        super().__init__(src, **attributes | {"type": "module"})
+
+    @property
+    def path(self):
+        return self._path

pyproject.toml

@@ -41,6 +41,9 @@ dependencies = [
 whitenoise = [
   "whitenoise>=6.0",
 ]
+csp = [
+  "django-csp",
+]
 test = [
   "pytest",
   "pytest-cov",

tests/test_forms.py

@@ -0,0 +1,19 @@
+from django_esm import forms
+
+
+class TestImportESModule:
+
+    def test_str(self):
+        assert str(forms.ImportESModule("@sentry/browser")) == (
+            """<script type="module">import '@sentry/browser'</script>"""
+        )
+
+        assert str(forms.ImportESModule("#js/myEntryPoint")) == (
+            """<script type="module">import '#js/myEntryPoint'</script>"""
+        )
+
+    def test_eq(self):
+        """Avoid duplication and enable form media merging."""
+        assert forms.ImportESModule("@sentry/browser") == forms.ImportESModule(
+            "@sentry/browser"
+        )