setup vite and integrate fully with django

- vite starts with `python manage.py runserver`
- add templatetags to simply load vite hmr and entry points
- add eslint (recheck rules)
- enable non-strict ts

src/pretix/_base_settings.py

@@ -37,9 +37,11 @@ INSTALLED_APPS = [
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
-    'django.contrib.staticfiles',
     'django.contrib.humanize',
+    # pretix needs to go before staticfiles
+    # so we can override the runserver command
     'pretix.base',
+    'django.contrib.staticfiles',
     'pretix.control',
     'pretix.presale',
     'pretix.multidomain',

src/pretix/base/management/commands/runserver.py

@@ -0,0 +1,38 @@
+# SPDX-FileCopyrightText: 2023-present Tobias Kunze
+# SPDX-License-Identifier: AGPL-3.0-only WITH LicenseRef-Pretalx-AGPL-3.0-Terms
+
+"""This command supersedes the Django-inbuilt runserver command.
+
+It runs the local frontend server, if node is installed and the setting
+is set.
+"""
+import os
+import atexit
+import subprocess
+from pathlib import Path
+
+from django.conf import settings
+from django.contrib.staticfiles.management.commands.runserver import Command as Parent
+from django.utils.autoreload import DJANGO_AUTORELOAD_ENV
+
+
+class Command(Parent):
+    def handle(self, *args, **options):
+        # Only start Vite in the non-main process of the autoreloader
+        if settings.VITE_DEV_MODE and os.environ.get(DJANGO_AUTORELOAD_ENV) != "true":
+            # Start the vite server in the background
+            vite_server = subprocess.Popen(
+                ["npm", "run", "dev"],
+                cwd=Path(__file__).parent.parent.parent.parent.parent
+            )
+
+            def cleanup():
+                vite_server.terminate()
+                try:
+                    vite_server.wait(timeout=5)
+                except subprocess.TimeoutExpired:
+                    vite_server.kill()
+            
+            atexit.register(cleanup)
+
+        super().handle(*args, **options)

src/pretix/base/middleware.py

@@ -280,11 +280,11 @@ class SecurityMiddleware(MiddlewareMixin):
 
         h = {
             'default-src': ["{static}"],
-            'script-src': ['{static}'],
+            'script-src': ["{static}", "http://localhost:5173", "ws://localhost:5173"] if settings.VITE_DEV_MODE else ["{static}"],
             'object-src': ["'none'"],
             'frame-src': ['{static}'],
             'style-src': ["{static}", "{media}"],
-            'connect-src': ["{dynamic}", "{media}"],
+            'connect-src': ["{dynamic}", "{media}", "ws://localhost:5173" if settings.VITE_DEV_MODE else ""],
             'img-src': ["{static}", "{media}", "data:"] + img_src,
             'font-src': ["{static}"] + list(font_src),
             'media-src': ["{static}", "data:"],

src/pretix/base/templatetags/vite.py

@@ -0,0 +1,92 @@
+# SPDX-FileCopyrightText: 2022-present Tobias Kunze
+# SPDX-License-Identifier: AGPL-3.0-only WITH LicenseRef-Pretalx-AGPL-3.0-Terms
+
+import json
+import logging
+from urllib.parse import urljoin
+
+from django import template
+from django.conf import settings
+from django.utils.safestring import mark_safe
+
+register = template.Library()
+LOGGER = logging.getLogger(__name__)
+_MANIFEST = {}
+MANIFEST_PATH = settings.STATIC_ROOT + "pretalx-manifest.json"
+
+# We're building the manifest if we don't have a dev server running AND if we're
+# not currently running `rebuild` (which creates the manifest in the first place).
+if not settings.VITE_DEV_MODE and not settings.VITE_IGNORE:
+    try:
+        with open(MANIFEST_PATH) as fp:
+            _MANIFEST = json.load(fp)
+    except Exception as e:
+        LOGGER.warning(f"Error reading vite manifest at {MANIFEST_PATH}: {str(e)}")
+
+
+def generate_script_tag(path, attrs):
+    all_attrs = " ".join(f'{key}="{value}"' for key, value in attrs.items())
+    if settings.VITE_DEV_MODE:
+        src = urljoin(settings.VITE_DEV_SERVER, path)
+    else:
+        src = urljoin(settings.STATIC_URL, path)
+    return f'<script {all_attrs} src="{src}"></script>'
+
+
+def generate_css_tags(asset, already_processed=None):
+    """Recursively builds all CSS tags used in a given asset.
+
+    Ignore the side effects."""
+    tags = []
+    manifest_entry = _MANIFEST[asset]
+    if already_processed is None:
+        already_processed = []
+
+    # Put our own CSS file first for specificity
+    if "css" in manifest_entry:
+        for css_path in manifest_entry["css"]:
+            if css_path not in already_processed:
+                full_path = urljoin(settings.STATIC_URL, css_path)
+                tags.append(f'<link rel="stylesheet" href="{full_path}" />')
+            already_processed.append(css_path)
+
+    # Import each file only one by way of side effects in already_processed
+    if "imports" in manifest_entry:
+        for import_path in manifest_entry["imports"]:
+            tags += generate_css_tags(import_path, already_processed)
+
+    return tags
+
+
+@register.simple_tag
+@mark_safe
+def vite_asset(path):
+    """
+    Generates one <script> tag and <link> tags for each of the CSS dependencies.
+    """
+
+    if not path:
+        return ""
+
+    if settings.VITE_DEV_MODE:
+        return generate_script_tag(path, {"type": "module"})
+
+    manifest_entry = _MANIFEST.get(path)
+    if not manifest_entry:
+        raise RuntimeError(f"Cannot find {path} in Vite manifest at {MANIFEST_PATH}")
+
+    tags = generate_css_tags(path)
+    tags.append(
+        generate_script_tag(
+            manifest_entry["file"], {"type": "module", "crossorigin": ""}
+        )
+    )
+    return "".join(tags)
+
+
+@register.simple_tag
+@mark_safe
+def vite_hmr():
+    if not settings.VITE_DEV_MODE:
+        return ""
+    return generate_script_tag("@vite/client", {"type": "module"})

src/pretix/settings.py

@@ -863,3 +863,9 @@ FILE_UPLOAD_MAX_SIZE_EMAIL_AUTO_ATTACHMENT = 1024 * 1024 * config.getint("pretix
 FILE_UPLOAD_MAX_SIZE_OTHER = 1024 * 1024 * config.getint("pretix_file_upload", "max_size_other", fallback=10)
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+
+VITE_DEV_SERVER_PORT = 5173
+VITE_DEV_SERVER = f"http://localhost:{VITE_DEV_SERVER_PORT}"
+VITE_DEV_MODE = DEBUG
+VITE_IGNORE = False  # Used to ignore `collectstatic`/`rebuild`