Added cache invalidation when the playground have a new build. (#316)

* Added cache invalidation when the playground have a new build.

* Be more defensive when setting the cache date.

* Update src/Draco.Editor.Web/app/ts/cache.ts

Co-authored-by: LPeter1997 <[email protected]>

* Update cache.ts

---------

Co-authored-by: LPeter1997 <[email protected]>

src/Draco.Editor.Web/app/build.js

@@ -9,6 +9,7 @@ import JSON5 from 'json5';
 import YAML from 'yaml';
 import { defineConfig, build as viteBuild } from 'vite';
 import { convertTheme } from './theme-converter.js';
+import { esbuildPluginVersionInjector } from 'esbuild-plugin-version-injector';
 // This file manage the build process of the webapp.
 
 const distDir = '../wwwroot';
@@ -84,7 +85,13 @@ await build({
         '.png': 'dataurl'
     },
     inject: ['ts/process.ts'],
-    plugins: [wasmPlugin],
+    plugins: [wasmPlugin,
+        esbuildPluginVersionInjector(
+            {
+                versionOrCurrentDate: 'current-date',
+                filter: /metadata.ts$/,
+            })
+    ],
     external: ['dotnet.wasm']
 });
 

src/Draco.Editor.Web/app/package.json

@@ -26,6 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "esbuild": "^0.15.13",
+    "esbuild-plugin-version-injector": "^1.2.0",
     "eslint": "^8.27.0",
     "json5": "^2.2.1",
     "node-ts": "^5.1.2",

src/Draco.Editor.Web/app/ts/cache.ts

@@ -1,4 +1,5 @@
 import { blobToBase64 } from './helpers.js';
+import { buildDate } from './metadata.js';
 
 const elements = [];
 
@@ -15,8 +16,23 @@ export function getDownloadViewElement() {
 }
 
 export async function downloadAssemblies(cfg: unknown) {
+    try {
+        const cache = await caches.open('assembly-cache');
+        const result = await cache.match('appBuildDate');
+        const cachedDate = await result.text();
+        console.log(`Current build: ${buildDate} cache build: ${cachedDate}`);
+
+        if (result == null || cachedDate != buildDate) {
+            console.log('Cache nuked.');
+            await caches.delete('assembly-cache');
+            const newCache = await caches.open('assembly-cache');
+            await newCache.put('appBuildDate', new Response(buildDate));
+        }
+    } catch (e) {
+        console.log('Could not open cache: ', e);
+    }
     const assets = cfg['assets'];
-    if (assets != null)  {
+    if (assets != null) {
         const promises = assets.map(async (asset) => {
             if (asset['buffer'] == null) {
                 await downloadAssembly(cfg['assemblyRootFolder'], asset);
@@ -40,9 +56,9 @@ async function downloadAssembly(dlPath: string, asset: unknown): Promise<void> {
     } catch (e) {
         console.log('Could not open cache: ', e);
     }
-    console.log('Cache miss:'+dlPath);
+    console.log(`Cache miss: ${dlPath}`);
     setDownloadViewVisible(true);
-    const progresses = elements.map( (element) => {
+    const progresses = elements.map((element) => {
         const progressContainer = document.createElement('div');
         const progressText = document.createElement('span');
         progressText.classList.add('monaco-editor');
@@ -55,7 +71,7 @@ async function downloadAssembly(dlPath: string, asset: unknown): Promise<void> {
         return progress;
     });
     const assemblyBlob = await progressFetch(dlPath + '/' + asset['name'], (loaded, total) => {
-        progresses.forEach(progress=> {
+        progresses.forEach(progress => {
             progress.max = total;
             progress.value = loaded;
         });
@@ -66,7 +82,7 @@ async function downloadAssembly(dlPath: string, asset: unknown): Promise<void> {
     if (cache != null) {
         await cache.put(asset['name'], response);
     }
-    progresses.forEach(progress=> {
+    progresses.forEach(progress => {
         progress.parentElement.remove();
     });
 }
@@ -75,7 +91,7 @@ function wait(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
-async function progressFetch(url: string, onProgress: (loaded: number, total: number) => void) : Promise<Blob> {
+async function progressFetch(url: string, onProgress: (loaded: number, total: number) => void): Promise<Blob> {
     const response = await fetch(url);
     const contentLength = response.headers.get('content-length');
     const total = parseInt(contentLength, 10);
@@ -85,7 +101,7 @@ async function progressFetch(url: string, onProgress: (loaded: number, total: nu
         async start(controller) {
             const reader = response.body.getReader();
             while (true) {
-                const {done, value} = await reader.read();
+                const { done, value } = await reader.read();
                 if (done) break;
                 loaded += value.byteLength;
                 onProgress(loaded, total);

src/Draco.Editor.Web/app/ts/metadata.ts

@@ -0,0 +1,7 @@
+/**
+ * The current version that you are currently using.
+ *
+ * Note to developers: This needs to explicitly be `string` so it is not typed as a "const string" that gets injected by esbuild
+ */
+// eslint-disable-next-line @typescript-eslint/no-inferrable-types
+export const buildDate: string = '[VI]{{inject}}[/VI]';