Fix ESM exports based on latest Node.js implementation

Author: codingjoe

README.md

@@ -30,7 +30,7 @@ INSTALLED_APPS = [
 ]
 ```
 
-Next, add the node_modules directory to your staticfiles finders:
+Next, add the `node_modules` directory to your staticfiles directories:
 
 ```python
 # settings.py
@@ -61,11 +61,26 @@ You can now import JavaScript modules in your Django templates:
 
 ```html
 <!-- index.html -->
-
 {% block content %}
   <script type="module">
     import "htmx.org"
     htmx.logAll()
   </script>
 {% endblock %}
 ```
+
+## How it works
+
+Django ESM works via native JavaScript module support in modern browsers.
+It uses the [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
+to map module names to their location on the server.
+
+Here is an example import map:
+
+```json
+{
+  "imports": {
+    "htmx.org": "/static/htmx.org/dist/htmx.min.js"
+  }
+}
+```

django_esm/utils.py

@@ -3,6 +3,10 @@
 
 from django.contrib.staticfiles.storage import staticfiles_storage
 
+# There is a long history how ESM is supported in Node.js
+# So we implement some fallbacks, see also: https://nodejs.org/api/packages.html#exports
+ESM_KEYS = ["exports", "module", "main"]
+
 
 def parse_package_json(path: Path = None, node_modules: Path = None):
     """Parse a project main package.json and return a dict of importmap entries."""
@@ -12,10 +16,17 @@ def parse_package_json(path: Path = None, node_modules: Path = None):
         package_json = json.load(f)
     name = package_json["name"]
     dependencies = package_json.get("dependencies", {})
-    main = package_json.get("main", None)
-    if main:
-        yield name, staticfiles_storage.url(
-            str((path / main).relative_to(node_modules))
-        )
+    for key in ESM_KEYS:
+        export = package_json.get(key, None)
+        if export:
+            try:
+                for module_name, module in export.items():
+                    yield str(Path(name) / module_name), staticfiles_storage.url(
+                        str((path / module["default"]).relative_to(node_modules))
+                    )
+            except AttributeError:
+                yield name, staticfiles_storage.url(
+                    str((path / export).relative_to(node_modules))
+                )
     for dep_name, dep_version in dependencies.items():
         yield from parse_package_json(node_modules / dep_name, node_modules)

tests/test_utils.py

@@ -2,11 +2,11 @@
 
 
 def test_parse_package_json(package_json):
-    assert dict(utils.parse_package_json(package_json.parent)) == {
-        "htmx.org": "/static/htmx.org/dist/htmx.min.js",
-        "lit": "/static/lit/index.js",
-        "@lit/reactive-element": "/static/%40lit/reactive-element/reactive-element.js",
-        "@lit-labs/ssr-dom-shim": "/static/%40lit-labs/ssr-dom-shim/index.js",
-        "lit-element": "/static/lit-element/index.js",
-        "lit-html": "/static/lit-html/lit-html.js",
-    }
+    import_map = dict(utils.parse_package_json(package_json.parent))
+    assert import_map["htmx.org"] == "/static/htmx.org/dist/htmx.min.js"
+    assert import_map["lit"] == "/static/lit/index.js"
+    assert (
+        import_map["@lit/reactive-element"]
+        == "/static/%40lit/reactive-element/reactive-element.js"
+    )
+    assert import_map["lit-html"] == "/static/lit-html/lit-html.js"

tests/test_views.py

@@ -6,14 +6,6 @@ def test_importmap(page, live_server):
     page.goto(live_server.url)
     assert (
         """<script type="importmap">{
-  "imports": {
-    "htmx.org": "/static/htmx.org/dist/htmx.min.js",
-    "lit": "/static/lit/index.js",
-    "@lit/reactive-element": "/static/%40lit/reactive-element/reactive-element.js",
-    "@lit-labs/ssr-dom-shim": "/static/%40lit-labs/ssr-dom-shim/index.js",
-    "lit-element": "/static/lit-element/index.js",
-    "lit-html": "/static/lit-html/lit-html.js"
-  }
-}</script>"""
+  "imports": {"""
         in page.content()
     )