vanilla-jet 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -4,6 +4,33 @@ All notable project changes are documented in this file.
 
 The format follows a structure inspired by Keep a Changelog and semantic versioning.
 
+## [1.6.3] - 2026-07-16
+
+### Fixed
+
+- **SW precache no longer reads stale bundles from the browser's HTTP cache:** install now fetches
+  the fingerprinted urls (`?v=size-mtime`, guaranteed HTTP-cache miss) with `cache: 'no-cache'` as a
+  second guard. Previously it fetched the bare asset paths through the HTTP cache; with
+  `static_cache_max_age` set, a new SW could pin an outdated bundle into a brand-new cache and —
+  because serving is cache-first with `ignoreSearch` — every deploy became invisible to returning
+  users for up to `static_cache_max_age` seconds unless they hard-reloaded (which bypasses the SW
+  per spec but never rewrites its Cache Storage). Diagnosed in production on a consumer app.
+
+## [1.6.2] - 2026-06-30
+
+### Fixed
+
+- **Template externalization now self-cleans:** disabling `externalize_templates` (or never enabling it)
+  removes any previously generated `public/scripts/templates.js` (+ `.gz`/`.br`), so toggling the flag
+  never leaves a stale 749 KB file behind (which the service worker would otherwise precache).
+
+### Notes
+
+- **`externalize_templates` caveat (WebView):** it shrinks the initial HTML for web browsers, but it injects
+  all templates via one synchronous `innerHTML`. On slower JS engines (native WebViews — WKWebView /
+  Android WebView) that block can stall the boot. **Prefer it OFF for apps loaded primarily inside a
+  WebView**; keep it ON only for pure-web apps that benefit from a smaller first byte.
+
 ## [1.6.1] - 2026-06-29
 
 ### Security

package/framework/sw.template.js

@@ -11,11 +11,18 @@
  * produces a new cache and activate() purges the stale ones. Because VanillaJet
  * fingerprints asset URLs (`?v=size-mtime`), matches use { ignoreSearch: true }
  * so a cache entry keeps serving across version query changes within the cache.
+ *
+ * Precaching fetches the FINGERPRINTED urls (PRECACHE_URLS) with cache: 'no-cache'.
+ * Both guards exist so install never reads a stale copy from the browser's HTTP
+ * cache: bare asset paths may sit there for `static_cache_max_age` seconds, and a
+ * precache that goes through it would pin an outdated bundle into a brand-new
+ * cache — making every deploy invisible until a hard reload or header expiry.
  */
 
 const CACHE_NAME = '__CACHE_NAME__';
 const CACHE_PREFIX = '__CACHE_PREFIX__';
 const PRECACHE_ASSETS = __PRECACHE_ASSETS__;
+const PRECACHE_URLS = __PRECACHE_URLS__;
 const ON_DEMAND_PREFIXES = __ON_DEMAND_PREFIXES__;
 
 const MATCH_OPTIONS = { ignoreSearch: true };
@@ -30,10 +37,12 @@ function isCacheable(pathname) {
 globalThis.addEventListener('install', (event) => {
 	event.waitUntil(
 		caches.open(CACHE_NAME).then((cache) =>
-			Promise.allSettled(PRECACHE_ASSETS.map((asset) => cache.add(asset))).then((results) => {
+			Promise.allSettled(
+				PRECACHE_URLS.map((asset) => cache.add(new Request(asset, { cache: 'no-cache' })))
+			).then((results) => {
 				results.forEach((result, i) => {
 					if (result.status === 'rejected') {
-						console.error('SW precache failed: ' + PRECACHE_ASSETS[i], result.reason);
+						console.error('SW precache failed: ' + PRECACHE_URLS[i], result.reason);
 					}
 				});
 			})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jet",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "VannilaJet framework",
   "main": "index.js",
   "bin": {

package/scripts/compile_html.js

@@ -201,6 +201,10 @@ async function createHTMLFile(content, filePath) {
   // bundle (defer + document order), so views still find their templates in the DOM at boot.
   if (opts.externalize_templates) {
     minified = externalizeTemplates(minified);
+  } else {
+    // Feature off: remove any previously generated templates.js so a stale 749KB file
+    // isn't left behind (and isn't precached by the service worker).
+    removeStaleTemplatesFile();
   }
 
   const publicPath = path.join(processCwd(), '/public/pages');
@@ -218,6 +222,22 @@ async function createHTMLFile(content, filePath) {
   console.log(chalk.green(`Created gzipped version at: ${absolutePath}.gz`));
 }
 
+// -- Remove a previously generated public/scripts/templates.js (+ compressed siblings)
+// when externalization is disabled, so toggling the flag never leaves a stale file behind.
+function removeStaleTemplatesFile() {
+  const base = path.join(processCwd(), 'public', 'scripts', 'templates.js');
+  ['', '.gz', '.br'].forEach((ext) => {
+    try {
+      if (fs.existsSync(base + ext)) {
+        fs.unlinkSync(base + ext);
+        console.log(chalk.green(`VanillaJet - removed stale public/scripts/templates.js${ext}`));
+      }
+    } catch (err) {
+      // Non-fatal: never fail the build over cleanup.
+    }
+  });
+}
+
 // -- Move all <script type="text/template"> blocks out of the page into
 // public/scripts/templates.js (a tiny injector that adds them to the DOM). Returns the
 // page HTML with those blocks replaced by a single deferred <script> tag (placed where the

package/scripts/generate_sw.js

@@ -123,6 +123,23 @@ function buildPrecacheList(root, opts, shared) {
 	return precache;
 }
 
+// Fingerprint each precache path (`?v=size-mtime`, same scheme the Dipper uses for
+// asset tags). Install fetches THESE urls: a content change produces a new URL, which
+// guarantees an HTTP-cache miss. Precaching the bare path instead can read a stale
+// copy the HTTP cache is allowed to keep for `static_cache_max_age` seconds, pinning
+// an outdated bundle into the new SW cache (deploys invisible until a hard reload).
+function versionAssets(root, precache) {
+	return precache.map((assetPath) => {
+		const absolute = path.join(root, assetPath.replace(/^\//, ''));
+		try {
+			const stats = fs.statSync(absolute);
+			return `${assetPath}?v=${stats.size}-${Math.floor(stats.mtimeMs)}`;
+		} catch (err) {
+			return assetPath;
+		}
+	});
+}
+
 function computeCacheHash(root, precache) {
 	const hash = crypto.createHash('md5');
 	precache.forEach((assetPath) => {
@@ -161,6 +178,7 @@ function main() {
 		: DEFAULT_ON_DEMAND_PREFIXES;
 
 	const precache = buildPrecacheList(root, opts, shared);
+	const precacheUrls = versionAssets(root, precache);
 	const cacheName = `${baseSlug}-sw-${computeCacheHash(root, precache)}`;
 
 	let template = fs.readFileSync(TEMPLATE_PATH, 'utf8');
@@ -168,6 +186,7 @@ function main() {
 		.replace(/__CACHE_NAME__/g, cacheName)
 		.replace(/__CACHE_PREFIX__/g, cachePrefix)
 		.replace('__PRECACHE_ASSETS__', JSON.stringify(precache, null, '\t'))
+		.replace('__PRECACHE_URLS__', JSON.stringify(precacheUrls, null, '\t'))
 		.replace('__ON_DEMAND_PREFIXES__', JSON.stringify(onDemandPrefixes, null, '\t'));
 
 	const publicDir = path.join(root, 'public');

package/test/service-worker.test.js

@@ -38,7 +38,12 @@ describe('service worker generation', () => {
       assert.match(sw, /testapp-sw-[a-f0-9]{12}/, 'cache name should be content-pinned');
       assert.match(sw, /\/public\/scripts\/vanilla\.min\.js/);
       assert.match(sw, /\/public\/styles\/app\.min\.css/);
+      // Precache must fetch fingerprinted urls, bypassing any HTTP-cached bare path
+      // (a stale HTTP-cache hit would pin an outdated bundle into the new SW cache).
+      assert.match(sw, /\/public\/scripts\/vanilla\.min\.js\?v=\d+-\d+/, 'precache urls should be fingerprinted');
+      assert.match(sw, /cache: 'no-cache'/, 'precache requests should revalidate against the server');
       assert.ok(!sw.includes('__PRECACHE_ASSETS__'), 'no placeholders should remain');
+      assert.ok(!sw.includes('__PRECACHE_URLS__'), 'no placeholders should remain');
       assert.ok(!sw.includes('__CACHE_NAME__'), 'no placeholders should remain');
     } finally {
       removeWorkspace(ws);