refactor(frontend): improve HMR experience

Use a HMR acceptor as in
https://github.com/vitejs/vite/issues/10227#issuecomment-1256969751

Also updates frontend tooling to the latest version
(yarn now support typescript 4.8.4)

6 files changed, 77 insertions, 23 deletions

diff --git a/.yarn/sdks/eslint/lib/api.js b/.yarn/sdks/eslint/lib/api.js
index fc728d95..653b22ba 100644
--- a/.yarn/sdks/eslint/lib/api.js
+++ b/.yarn/sdks/eslint/lib/api.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/.yarn/sdks/eslint/package.json b/.yarn/sdks/eslint/package.json
index c2abd332..bca3659d 100644
--- a/.yarn/sdks/eslint/package.json
+++ b/.yarn/sdks/eslint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.23.0-sdk",
+  "version": "8.24.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }
diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js
index 16042d01..2f62fc96 100644
--- a/.yarn/sdks/typescript/lib/tsc.js
+++ b/.yarn/sdks/typescript/lib/tsc.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js
index a82ef796..0fb2ac10 100644
--- a/.yarn/sdks/typescript/lib/tsserver.js
+++ b/.yarn/sdks/typescript/lib/tsserver.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
@@ -61,14 +61,30 @@ const moduleWrapper = tsserver => {
           //
           // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
           //
-          // Update Oct 8 2021: VSCode changed their format in 1.61.
+          // 2021-10-08: VSCode changed the format in 1.61.
           // Before | ^zip:/c:/foo/bar.zip/package.json
           // After  | ^/zip//c:/foo/bar.zip/package.json
           //
+          // 2022-04-06: VSCode changed the format in 1.66.
+          // Before | ^/zip//c:/foo/bar.zip/package.json
+          // After  | ^/zip/c:/foo/bar.zip/package.json
+          //
+          // 2022-05-06: VSCode changed the format in 1.68
+          // Before | ^/zip/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
           case `vscode <1.61`: {
             str = `^zip:${str}`;
           } break;
 
+          case `vscode <1.66`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          case `vscode <1.68`: {
+            str = `^/zip${str}`;
+          } break;
+
           case `vscode`: {
             str = `^/zip/${str}`;
           } break;
@@ -119,9 +135,7 @@ const moduleWrapper = tsserver => {
 
       case `vscode`:
       default: {
-        return process.platform === `win32`
-          ? str.replace(/^\^?(zip:|\/zip)\/+/, ``)
-          : str.replace(/^\^?(zip:|\/zip)\/+/, `/`);
+        return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`)
       } break;
     }
   }
@@ -160,8 +174,21 @@ const moduleWrapper = tsserver => {
         typeof parsedMessage.arguments.hostInfo === `string`
       ) {
         hostInfo = parsedMessage.arguments.hostInfo;
-        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK && process.env.VSCODE_IPC_HOOK.match(/Code\/1\.([1-5][0-9]|60)\./)) {
-          hostInfo += ` <1.61`;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) {
+          const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match(
+            // The RegExp from https://semver.org/ but without the caret at the start
+            /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+          ) ?? []).map(Number)
+
+          if (major === 1) {
+            if (minor < 61) {
+              hostInfo += ` <1.61`;
+            } else if (minor < 66) {
+              hostInfo += ` <1.66`;
+            } else if (minor < 68) {
+              hostInfo += ` <1.68`;
+            }
+          }
         }
       }
 
diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js
index 0d70146a..e7033a81 100644
--- a/.yarn/sdks/typescript/lib/tsserverlibrary.js
+++ b/.yarn/sdks/typescript/lib/tsserverlibrary.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
@@ -61,14 +61,30 @@ const moduleWrapper = tsserver => {
           //
           // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
           //
-          // Update Oct 8 2021: VSCode changed their format in 1.61.
+          // 2021-10-08: VSCode changed the format in 1.61.
           // Before | ^zip:/c:/foo/bar.zip/package.json
           // After  | ^/zip//c:/foo/bar.zip/package.json
           //
+          // 2022-04-06: VSCode changed the format in 1.66.
+          // Before | ^/zip//c:/foo/bar.zip/package.json
+          // After  | ^/zip/c:/foo/bar.zip/package.json
+          //
+          // 2022-05-06: VSCode changed the format in 1.68
+          // Before | ^/zip/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
           case `vscode <1.61`: {
             str = `^zip:${str}`;
           } break;
 
+          case `vscode <1.66`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          case `vscode <1.68`: {
+            str = `^/zip${str}`;
+          } break;
+
           case `vscode`: {
             str = `^/zip/${str}`;
           } break;
@@ -119,9 +135,7 @@ const moduleWrapper = tsserver => {
 
       case `vscode`:
       default: {
-        return process.platform === `win32`
-          ? str.replace(/^\^?(zip:|\/zip)\/+/, ``)
-          : str.replace(/^\^?(zip:|\/zip)\/+/, `/`);
+        return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`)
       } break;
     }
   }
@@ -160,8 +174,21 @@ const moduleWrapper = tsserver => {
         typeof parsedMessage.arguments.hostInfo === `string`
       ) {
         hostInfo = parsedMessage.arguments.hostInfo;
-        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK && process.env.VSCODE_IPC_HOOK.match(/Code\/1\.([1-5][0-9]|60)\./)) {
-          hostInfo += ` <1.61`;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) {
+          const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match(
+            // The RegExp from https://semver.org/ but without the caret at the start
+            /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+          ) ?? []).map(Number)
+
+          if (major === 1) {
+            if (minor < 61) {
+              hostInfo += ` <1.61`;
+            } else if (minor < 66) {
+              hostInfo += ` <1.66`;
+            } else if (minor < 68) {
+              hostInfo += ` <1.68`;
+            }
+          }
         }
       }
 
diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js
index cbdbf150..e14fa87b 100644
--- a/.yarn/sdks/typescript/lib/typescript.js
+++ b/.yarn/sdks/typescript/lib/typescript.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {