From 84f26c9319c9ea366f0cd394d6feeed0db479e27 Mon Sep 17 00:00:00 2001
From: Jennifer Taylor <dragonminded@dragonminded.com>
Date: Sat, 8 Oct 2022 22:40:28 +0000
Subject: [PATCH] Allow basic cache-busting for major frontend version
 upgrades.

---
 bemani/frontend/app.py               |  7 ++++
 bemani/frontend/templates/base.html  | 50 ++++++++++++++--------------
 bemani/frontend/templates/react.html |  2 +-
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/bemani/frontend/app.py b/bemani/frontend/app.py
index b962ee2..d568e83 100644
--- a/bemani/frontend/app.py
+++ b/bemani/frontend/app.py
@@ -21,6 +21,10 @@ app = Flask(
 config = Config()
 
 
+# Allow cache-busting of entire frontend for major changes such as react upgrades.
+FRONTEND_CACHE_BUST: str = "site.1.0.react.16.14"
+
+
 @app.before_request
 def before_request() -> None:
     global config
@@ -291,6 +295,7 @@ def navigation() -> Dict[str, Any]:
                 'components': components,
                 'any': jinja2_any,
                 'theme_url': jinja2_theme,
+                'cache_bust': f"v={FRONTEND_CACHE_BUST}",
             }
     except AttributeError:
         # If we are trying to render a 500 error and we couldn't even run the
@@ -300,6 +305,7 @@ def navigation() -> Dict[str, Any]:
             'components': components,
             'any': jinja2_any,
             'theme_url': jinja2_theme,
+            'cache_bust': f"v={FRONTEND_CACHE_BUST}",
         }
 
     pages: List[Dict[str, Any]] = []
@@ -811,4 +817,5 @@ def navigation() -> Dict[str, Any]:
         'components': components,
         'any': jinja2_any,
         'theme_url': jinja2_theme,
+        'cache_bust': f"v={FRONTEND_CACHE_BUST}",
     }
diff --git a/bemani/frontend/templates/base.html b/bemani/frontend/templates/base.html
index fd044a7..a31a83f 100644
--- a/bemani/frontend/templates/base.html
+++ b/bemani/frontend/templates/base.html
@@ -4,33 +4,33 @@
 		{% if title %}
 		<title>{{ title }}</title>
 		{% endif %}
-        <link rel="icon" type="image/png" href="{{ theme_url('favicon.png') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ theme_url('site.css') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ theme_url('color.css') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ theme_url('form.css') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ theme_url('section.css') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ theme_url('table.css') }}" />
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery-confirm.css') }}" />
+        <link rel="icon" type="image/png" href="{{ theme_url('favicon.png') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ theme_url('site.css') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ theme_url('color.css') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ theme_url('form.css') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ theme_url('section.css') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ theme_url('table.css') }}?{{ cache_bust }}" />
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery-confirm.css') }}?{{ cache_bust }}" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script type="text/javascript" src="{{ url_for('static', filename='chart.bundle.min.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='date.format.min.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.4.min.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='jquery-confirm.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='jquery.touchSwipe.min.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='tinynav.js') }}"></script>
-        <script type="text/javascript" src="{{ url_for('static', filename='classnames.min.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='react.min.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='react-dom.min.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='create-react-class.min.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='ajax.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='messages.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='history.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='iidx-options.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='ddr-options.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='link.js') }}"></script>
-        <script defer type="text/javascript" src="{{ url_for('static', filename='merge.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='chart.bundle.min.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='date.format.min.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.4.min.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='jquery-confirm.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='jquery.touchSwipe.min.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='tinynav.js') }}?{{ cache_bust }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='classnames.min.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='react.min.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='react-dom.min.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='create-react-class.min.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='ajax.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='messages.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='history.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='iidx-options.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='ddr-options.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='link.js') }}?{{ cache_bust }}"></script>
+        <script defer type="text/javascript" src="{{ url_for('static', filename='merge.js') }}?{{ cache_bust }}"></script>
         {% for entry in components %}
-        <script defer type="text/javascript" src="{{ url_for('jsx', filename=entry) }}"></script>
+            <script defer type="text/javascript" src="{{ url_for('jsx', filename=entry) }}?{{ cache_bust }}"></script>
         {% endfor %}
         {% block scripts %}{% endblock %}
 	</head>
diff --git a/bemani/frontend/templates/react.html b/bemani/frontend/templates/react.html
index dd594f0..03b66d7 100644
--- a/bemani/frontend/templates/react.html
+++ b/bemani/frontend/templates/react.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block scripts %}
-    <script defer type="text/javascript" defer="defer" src="{{ url_for('jsx', filename=reactbase) }}"></script>
+    <script defer type="text/javascript" defer="defer" src="{{ url_for('jsx', filename=reactbase) }}?{{ cache_bust }}"></script>
 {% endblock %}
 {% block content %}
     <div id="content">