Changeset 369aa60 in Klonkt

Timestamp:

09/04/2026 11:48:29 AM (4 days ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

aa521c3

Parents:

4425cc2

Message:

Cache-busting reikt nu ook tot wat de modules zelf ophalen (shaer-724)

De bootstrap hing al ?v= aan elke module die hij zelf laadt. Twee soorten
paden ontsnapten daaraan, en /assets wordt buiten ontwikkeling een jaar
gecachet:

een import BINNEN een module is relatief, en zo\x27n specifier erft de
query niet: ./lib.js naast post.js?v=63 wordt gewoon
/assets/js/mod/lib.js. Elf modules importeren lib.js zo, en juist dat
bestand is gedeeld -- een fout erin overleefde elke MOD_V-bump.

een vendorbestand dat een module zelf ophaalt. read.js deed het goed met
?v=VENDOR_V; lib.js (mijn eigen import van gisteren) en de twee
cropper-verwijzingen in post-edit deden het niet.

Een importmap in de head lost het eerste op zonder die elf imports aan te
raken: hij vertaalt de opgeloste URL naar zijn geversioneerde vorm. MOD_V
staat daarvoor nu als EJS-variabele bovenaan de shell, zodat de importmap
en de bootstrap niet twee nummers kunnen worden. VENDOR_V staat in lib.js
en wordt door read.js en post-edit gedeeld, om dezelfde reden.

Drie toetsen die de REGEL bewaken en niet deze ene plek: elke relatieve
import tussen modules heeft een ingang in de importmap, elk vendorpad
draagt een versie, en de twee nummers zijn er een. Tegenbewijs: haal de
ingang weg of de versie eraf en precies die toets valt.

Volle suite 1248 groen.

Files:

• src/assets/js/mod/lib.js (modified) (1 diff)
• src/assets/js/mod/post-edit.js (modified) (2 diffs)
• src/assets/js/mod/read.js (modified) (2 diffs)
• src/views/shell.ejs (modified) (3 diffs)
• test/asset-cache-busting.test.js (added)

src/assets/js/mod/lib.js

@@ -83 +83 @@
  * aanroepers hebben al een nette terugval voor "geen WebAuthn hier".
  */
+/**
+ * De cache-buster voor alles in /assets/vendor (shaer-724).
+ *
+ * Die map valt onder dezelfde max-age van een jaar als de rest van /assets, en
+ * een vendorbestand heeft geen versie in zijn naam. Zonder query houdt een
+ * browser die hem ooit zag hem dus een jaar vast, ook na een update van de
+ * bibliotheek.
+ *
+ * EEN nummer voor de hele map, hier, en niet drie losse per module: read.js had
+ * er al een en lib.js en post-edit.js hadden er geen, en dan is "ophogen als de
+ * bibliotheek wijzigt" een opdracht die je op drie plekken moet onthouden. Dat
+ * kost read.js wel een import van dit bestand op de leespagina; die is klein en
+ * staat na de eerste pagina in de cache.
+ */
+export const VENDOR_V = 1;
+
 export async function loadWebAuthn() {
   if (window.SimpleWebAuthnBrowser) return window.SimpleWebAuthnBrowser;
-  try { await import('/assets/vendor/simplewebauthn-browser.umd.min.js'); }
+  try { await import(`/assets/vendor/simplewebauthn-browser.umd.min.js?v=${VENDOR_V}`); }
   catch (e) { console.warn('[paid] WebAuthn-bibliotheek laadt niet:', e && e.message); }
   return window.SimpleWebAuthnBrowser;

src/assets/js/mod/post-edit.js

@@ -5 +5 @@
 // het houdt een apostrof in een vertaling uit de HTML die hier geplakt wordt.
 
-import { pageData, esc, makeSweeper } from './lib.js';
+import { pageData, esc, makeSweeper, VENDOR_V } from './lib.js';
 // Dezelfde regel die de server gebruikt -- zie shared/post-music-type.js voor
 // waarom hij daar staat en niet twee keer.
@@ -173 +173 @@
       if (!document.querySelector('link[data-cropper-css]')) {
         const l = document.createElement('link');
-        l.rel = 'stylesheet'; l.href = '/assets/vendor/cropper.min.css'; l.setAttribute('data-cropper-css', '');
+        // Met versie, net als het script eronder (shaer-724): /assets wordt een
+        // jaar gecachet en deze twee bestanden dragen geen versie in hun naam.
+        l.rel = 'stylesheet'; l.href = `/assets/vendor/cropper.min.css?v=${VENDOR_V}`; l.setAttribute('data-cropper-css', '');
         document.head.appendChild(l);
       }
       const s = document.createElement('script');
-      s.src = '/assets/vendor/cropper.min.js';
+      s.src = `/assets/vendor/cropper.min.js?v=${VENDOR_V}`;
       s.onload = () => resolve();
       s.onerror = () => reject(new Error('cropper load failed'));

src/assets/js/mod/read.js

@@ -30 +30 @@
  * scrollen, en cmd/ctrl-klik hoort de browser zelf af te handelen.
  */
+
+// VENDOR_V komt uit lib.js: een nummer voor de hele vendormap (shaer-724),
+// zodat 'ophogen als de bibliotheek wijzigt' op een plek staat.
+import { VENDOR_V } from './lib.js';
 
 // ── Paginamodus ─────────────────────────────────────────────────────────────
@@ -294 +298 @@
 // dan is OP_TOUCH weer false zetten de hele terugweg.
 const OP_TOUCH = window.matchMedia('(hover: none) and (pointer: coarse)');
-const VENDOR_V = 1;   // ophogen als de bestanden in /assets/js/vendor wijzigen
+// VENDOR_V komt uit lib.js: een nummer voor de hele vendormap (shaer-724).
 
 let lenis = null;

src/views/shell.ejs

@@ -120 +120 @@
   };
 }
+%>
+<%
+// De cache-buster voor alles onder assets/js/mod (en de gedeelde bestanden die
+// die modules importeren). Stond alleen in de bootstrap onderaan; hij staat nu
+// hier omdat de importmap in de <head> hem OOK nodig heeft, en twee losse
+// nummers lopen gegarandeerd een keer uit elkaar.
+//
+// Ophogen bij ELKE wijziging in assets/js/mod -- /assets wordt buiten
+// ontwikkeling een jaar gecachet, dus zonder bump bereikt een reparatie
+// iedereen behalve wie de fout al heeft.
+const MOD_V = 63;
 %><!DOCTYPE html>
 <html lang="<%- _e(lang) %>" data-palette="<%- _e((typeof palette !== 'undefined' && palette) ? palette : (safeSite.palette || 'klonkt')) %>">
@@ -339 +350 @@
 <script src="/assets/js/htmx.min.js"></script>
 
+<%# De cache-buster reikt ook tot wat de modules ONDERLING importeren (shaer-724).
+    De bootstrap hangt ?v= aan elke module die hij zelf laadt, maar een import
+    BINNEN een module is relatief, en een relatieve specifier erft de query
+    niet: `./lib.js` naast `post.js?v=63` wordt gewoon `/assets/js/mod/lib.js`.
+    Dat bestand wordt met max-age van een jaar geserveerd, dus het bleef bij
+    terugkerende bezoekers staan terwijl de modules eromheen ververst werden --
+    en juist lib.js is gedeeld, dus een fout daarin overleeft elke MOD_V-bump.
+
+    Een importmap lost dat op zonder die elf imports aan te raken: hij vertaalt
+    de OPGELOSTE URL naar zijn geversioneerde vorm. Hij moet in de head staan,
+    voor de eerste module-import. De toets bij dit bestand bewaakt dat elke
+    relatieve import onder assets/js hier een ingang heeft. %>
+<script type="importmap">
+{"imports":{
+  "/assets/js/mod/lib.js": "/assets/js/mod/lib.js?v=<%= MOD_V %>",
+  "/assets/js/shared/post-music-type.js": "/assets/js/shared/post-music-type.js?v=<%= MOD_V %>"
+}}
+</script>
+
 <!-- Per-site custom <head> HTML (analytics, verification, etc.) -->
 <% if (safeSite.custom_head_html) { %>
@@ -505 +535 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 63;
+  var MOD_V = <%= MOD_V %>;   // uit de EJS-variabele bovenaan; zie de importmap in de head
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module