Changeset 369aa60 in Klonkt for src/assets/js

Timestamp:

09/04/2026 11:48:29 AM (5 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.

Location:

src/assets/js/mod

Files:

• lib.js (modified) (1 diff)
• post-edit.js (modified) (2 diffs)
• read.js (modified) (2 diffs)

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;