Make Jinja2 support easier (#15)

heyman · web-flow · commit 1f4a1720d949 · 2023-01-31T17:22:43.000-06:00
diff --git a/README.md b/README.md
@@ -138,6 +138,60 @@ When it renders you should get something like this:
 </html>
 ```
 
+## Using Jinja2
+
+To use django-importmap with Jinja2 templates,
+you can add `importmap` to a customized Jinja environment.
+
+```python
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.jinja2.Jinja2",
+        ...
+        "OPTIONS": {
+            "environment": "app.jinja2.environment",
+            ...
+        },
+    }
+]
+```
+
+Then in `app/jinja2.py`:
+
+```python
+from django.conf import settings
+from jinja2 import Environment
+
+from importmap import Importmap
+
+
+def environment(**options):
+    env = Environment(**options)
+    env.globals.update({"importmap": Importmap.json(development=settings.DEBUG)})
+    return env
+```
+
+Then in your Jinja templates you can include a module shim and output the `importmap` variable like this:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script async src="https://ga.jspm.io/npm:es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {{ importmap|safe }}
+    </script>
+    <script type="module">
+        import React from "react"
+        console.log(React);
+    </script>
+</head>
+<body>
+
+</body>
+</html>
+```
+
 ## Project status
 
 This is partly an experiment,
diff --git a/importmap/__init__.py b/importmap/__init__.py
@@ -0,0 +1 @@
+from .core import Importmap
diff --git a/importmap/core.py b/importmap/core.py
@@ -46,6 +46,15 @@ def __init__(
         self.lock_filename = lock_filename
         self.load()
 
+    @classmethod
+    def json(cls, development=False):
+        importmap = cls()
+
+        if development:
+            return json.dumps(importmap.map_dev, indent=2, sort_keys=True)
+        else:
+            return json.dumps(importmap.map, sort_keys=True)
+
     def load(self):
         # TODO django check to compare lock and config hash
 
diff --git a/importmap/templatetags/importmap.py b/importmap/templatetags/importmap.py
@@ -10,9 +10,4 @@
 
 @register.inclusion_tag("importmap/scripts.html")
 def importmap_scripts():
-    importmap = Importmap()
-
-    if settings.DEBUG:
-        return {"importmap": json.dumps(importmap.map_dev, indent=2, sort_keys=True)}
-    else:
-        return {"importmap": json.dumps(importmap.map, sort_keys=True)}
+    return {"importmap": Importmap.json(development=settings.DEBUG)}
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -36,6 +36,7 @@ black = "^22.1.0"
 Django = "^4.0.0"
 ipdb = "^0.13.9"
 isort = "^5.10.1"
+jinja2 = "^3.1.2"
 
 [build-system]
 requires = ["poetry-core>=1.0.0"]
diff --git a/test_project/app/jinja2.py b/test_project/app/jinja2.py
@@ -0,0 +1,10 @@
+from django.conf import settings
+from jinja2 import Environment
+
+from importmap import Importmap
+
+
+def environment(**options):
+    env = Environment(**options)
+    env.globals.update({"importmap": Importmap.json(development=settings.DEBUG)})
+    return env
diff --git a/test_project/app/urls.py b/test_project/app/urls.py
@@ -3,4 +3,9 @@
 
 urlpatterns = [
     path("", TemplateView.as_view(template_name="index.html"), name="index"),
+    path(
+        "jinja",
+        TemplateView.as_view(template_name="index_jinja.html"),
+        name="index_jinja",
+    ),
 ]
diff --git a/test_project/settings.py b/test_project/settings.py
@@ -67,6 +67,14 @@
             ],
         },
     },
+    {
+        "BACKEND": "django.template.backends.jinja2.Jinja2",
+        "DIRS": [Path(__file__).resolve().parent / "templates" / "jinja2"],
+        "APP_DIRS": False,
+        "OPTIONS": {
+            "environment": "app.jinja2.environment",
+        },
+    },
 ]
 
 WSGI_APPLICATION = "wsgi.application"
diff --git a/test_project/templates/jinja2/index_jinja.html b/test_project/templates/jinja2/index_jinja.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script async src="https://ga.jspm.io/npm:es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {{ importmap|safe }}
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/test_project/tests.py b/test_project/tests.py
@@ -1,15 +1,14 @@
 from django.conf import settings
-from django.test import Client, TestCase
+from django.test import Client, TestCase, override_settings
 from django.urls import reverse
 
 
 class TestTemplate(TestCase):
     def setUp(self):
         self.client = Client()
 
+    @override_settings(DEBUG=False)
     def test_template_output(self):
-        settings.DEBUG = False
-
         url = reverse("index")
         response = self.client.get(url)
 
@@ -19,9 +18,8 @@ def test_template_output(self):
 
         self.assertContains(response, "react@17.0.2/index.js")
 
+    @override_settings(DEBUG=True)
     def test_template_output_dev(self):
-        settings.DEBUG = True
-
         url = reverse("index")
         response = self.client.get(url)
         # print(response.content.decode())
@@ -31,3 +29,23 @@ def test_template_output_dev(self):
         self.assertContains(response, "es-module-shims.js")
 
         self.assertContains(response, "react@17.0.2/dev.index.js")
+
+    @override_settings(DEBUG=False)
+    def test_jinja_template_output(self):
+        url = reverse("index_jinja")
+        response = self.client.get(url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "es-module-shims.js")
+
+        self.assertContains(response, "react@17.0.2/index.js")
+
+    @override_settings(DEBUG=True)
+    def test_jinja_template_output_dev(self):
+        url = reverse("index_jinja")
+        response = self.client.get(url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "es-module-shims.js")
+
+        self.assertContains(response, "react@17.0.2/dev.index.js")

Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,9 @@`
`3`	`3`
`4`	`4`	`urlpatterns = [`
`5`	`5`	`path("", TemplateView.as_view(template_name="index.html"), name="index"),`
	`6`	`+ path(`
	`7`	`+ "jinja",`
	`8`	`+ TemplateView.as_view(template_name="index_jinja.html"),`
	`9`	`+ name="index_jinja",`
	`10`	`+ ),`
`6`	`11`	`]`