4.0b3 (#582)

* js fixes, removing some jquery

* 4.0b3 in setup

* refactor pivot into its own dynamic load

* removing floatthead

* more js cleanup

* exclude stat rows from pivot

* simpler vite build and correct pathing for different static URLs

* dont generate manifest

explorer/templates/explorer/base.html

@@ -9,7 +9,7 @@
     <title>{% trans "SQL Explorer" %}{% if query %} - {{ query.title }}{% elif title %} - {{ title }}{% endif %}</title>
 
     {% block style %}
-        {% vite_asset 'scss/main.scss' %}
+        {% vite_asset 'scss/styles.scss' %}
     {% endblock style %}
 
     <script type="text/javascript">

explorer/templatetags/vite.py

@@ -1,61 +1,40 @@
-import json
 import os
-from functools import lru_cache
 
 from django import template
 from django.conf import settings
 from django.utils.safestring import mark_safe
 from explorer import app_settings
 
-
 register = template.Library()
 
-VITE_OUTPUT_DIR = "/static/explorer/"
+VITE_OUTPUT_DIR = f"{settings.STATIC_URL}explorer/"
 VITE_DEV_DIR = "explorer/src/"
-VITE_MANIFEST_FILE = os.path.join(os.path.dirname(__file__), "../static/explorer/.vite/manifest.json")
 VITE_SERVER_HOST = getattr(settings, "VITE_SERVER_HOST", "localhost")
 VITE_SERVER_PORT = getattr(settings, "VITE_SERVER_PORT", "5173")
 
 
 def get_css_link(file: str) -> str:
     if app_settings.VITE_DEV_MODE is False:
+        file = file.replace(".scss", ".css")
         base_url = f"{VITE_OUTPUT_DIR}"
     else:
         base_url = f"http://{VITE_SERVER_HOST}:{VITE_SERVER_PORT}/{VITE_DEV_DIR}"
-    return mark_safe(f'<link rel="stylesheet" href="{base_url}{file}">')  # nosec B308, B703
+    return mark_safe(f'<link rel="stylesheet" href="{base_url}{file}">')
 
 
 def get_script(file: str) -> str:
     if app_settings.VITE_DEV_MODE is False:
-        return mark_safe(f'<script type="module" src="{VITE_OUTPUT_DIR}{file}"></script>')  # nosec B308, B703
+        return mark_safe(f'<script type="module" src="{VITE_OUTPUT_DIR}{file}"></script>')
     else:
         base_url = f"http://{VITE_SERVER_HOST}:{VITE_SERVER_PORT}/{VITE_DEV_DIR}"
-    return mark_safe(f'<script type="module" src="{base_url}{file}"></script>')  # nosec B308, B703
-
-
-@lru_cache
-def get_manifest():
-    with open(VITE_MANIFEST_FILE) as f:
-        content = f.read()
-        manifest = json.loads(content)
-        return manifest
+    return mark_safe(f'<script type="module" src="{base_url}{file}"></script>')
 
 
 @register.simple_tag
 def vite_asset(filename: str):
-    is_css = str(filename).endswith("css")
-    if app_settings.VITE_DEV_MODE is True:
-        if is_css is True:
-            return get_css_link(filename)
-        return get_script(filename)
-    manifest = get_manifest()
-    full_filename = f"{VITE_DEV_DIR}{filename}"
-    file_data = manifest.get(full_filename)
-    if file_data is None:
-        raise Exception(f'The vite asset "{full_filename}" was not found in the manifest file {VITE_MANIFEST_FILE}.')
-
-    filename = file_data["file"]
-    if is_css is True:
+    if app_settings.VITE_DEV_MODE is False:
+        filename = os.path.basename(filename)
+    if str(filename).endswith("scss"):
         return get_css_link(filename)
     return get_script(filename)
 
@@ -65,4 +44,4 @@ def vite_hmr_client():
     if app_settings.VITE_DEV_MODE is False:
         return ""
     base_url = f"http://{VITE_SERVER_HOST}:{VITE_SERVER_PORT}/@vite/client"
-    return mark_safe(f'<script type="module" src="{base_url}"></script>')  # nosec B308, B703
+    return mark_safe(f'<script type="module" src="{base_url}"></script>')

vite.config.js

@@ -21,16 +21,20 @@ export default {
   build: {
     outDir: resolve(__dirname, './explorer/static/explorer'),
     assetsDir: '',
-    manifest: true,
     emptyOutDir: true,
     target: 'es2015',
     rollupOptions: {
       input: {
         main: resolve(__dirname, '/explorer/src/js/main.js'),
-        styles: resolve(__dirname, '/explorer/src/scss/main.scss'),
+        // Some magic here; Vite always builds to styles.css, we named our entrypoint SCSS file the same thing
+        // so that in the base template HTML file we can include 'styles.scss', and rename just the extension
+        // in the vite template tag, and get both the dev and prod builds to work.
+        styles: resolve(__dirname, '/explorer/src/scss/styles.scss'),
       },
       output: {
-        chunkFileNames: undefined,
+        entryFileNames: `[name].js`,
+        chunkFileNames: `[name].js`,
+        assetFileNames: `[name].[ext]`
       },
     },
   },