Merge pull request #140 from mi-examples/pp-3311

PP-3311 Fix modal/sync lifecycle and safety checks

Author: sergak01

src/cli.ts

@@ -1256,16 +1256,22 @@ cli
             return;
           }
 
-          const latestBackup = backups
-            .filter((value) => {
-              return value.isFile() && value.name.endsWith('.zip');
-            })
-            .reduce((latest, current) => {
-              const latestTime = fs.statSync(path.resolve(backupsDirPath, latest.name)).mtimeMs;
-              const currentTime = fs.statSync(path.resolve(backupsDirPath, current.name)).mtimeMs;
-
-              return latestTime > currentTime ? latest : current;
-            }, backups[0]).name;
+          const zipBackups = backups.filter((value) => {
+            return value.isFile() && value.name.endsWith('.zip');
+          });
+
+          if (!zipBackups.length) {
+            createLogger(options.logLevel).warn(colors.yellow(`no ZIP backups found, skipping changelog generation`));
+
+            return;
+          }
+
+          const latestBackup = zipBackups.reduce((latest, current) => {
+            const latestTime = fs.statSync(path.resolve(backupsDirPath, latest.name)).mtimeMs;
+            const currentTime = fs.statSync(path.resolve(backupsDirPath, current.name)).mtimeMs;
+
+            return latestTime > currentTime ? latest : current;
+          }).name;
 
           oldAssetsPath = path.resolve(backupsDirPath, latestBackup);
         }

src/client/index.ts

@@ -64,6 +64,25 @@ const POPUP_HEIGHT = 100;
 const ANIMATION_DURATION = 300;
 const CONFIRM_MODAL_OVERLAY_CLASS = 'pp-dev-info__confirm-overlay';
 
+const activeConfirmModals = new Map<
+  HTMLDivElement,
+  { resolve: (value: boolean) => void; onKeyDown: (event: KeyboardEvent) => void }
+>();
+
+function teardownConfirmModal(overlay: HTMLDivElement, result: boolean) {
+  const entry = activeConfirmModals.get(overlay);
+
+  if (!entry) {
+    return;
+  }
+
+  document.removeEventListener('keydown', entry.onKeyDown);
+  
+  activeConfirmModals.delete(overlay);
+  overlay.remove();
+  entry.resolve(result);
+}
+
 function createPopupElement(opts: InfoPopupOptions): HTMLDivElement {
   const $popup = document.createElement('div');
 
@@ -220,64 +239,73 @@ function infoPopup(opts: InfoPopupOptions) {
   }
 }
 
-function closeConfirmModalByResult(overlay: HTMLDivElement, resolve: (value: boolean) => void, value: boolean) {
-  overlay.remove();
-  resolve(value);
-}
-
 function closeAllConfirmModals() {
-  document.querySelectorAll(`.${CONFIRM_MODAL_OVERLAY_CLASS}`).forEach((element) => element.remove());
+  for (const overlay of [...activeConfirmModals.keys()]) {
+    teardownConfirmModal(overlay, false);
+  }
 }
 
 function confirmModal(opts: ConfirmModalOptions): Promise<boolean> {
   closeAllConfirmModals();
 
   return new Promise<boolean>((resolve) => {
     const $overlay = document.createElement('div');
+
     $overlay.classList.add('pp-dev-info-namespace', CONFIRM_MODAL_OVERLAY_CLASS);
+
     const $confirm = document.createElement('div');
+
     $confirm.classList.add('pp-dev-info__confirm');
+
     const $title = document.createElement('div');
+
     $title.classList.add('pp-dev-info__confirm-title');
     $title.textContent = opts.title;
+
     const $content = document.createElement('div');
+
     $content.classList.add('pp-dev-info__confirm-content');
     $content.textContent = opts.content;
+
     const $actions = document.createElement('div');
+
     $actions.classList.add('pp-dev-info__confirm-actions');
+
     const $cancelButton = document.createElement('button');
+
     $cancelButton.type = 'button';
     $cancelButton.classList.add('pp-dev-info__confirm-btn', 'pp-dev-info__confirm-btn--cancel');
     $cancelButton.textContent = opts.cancelText;
+
     const $confirmButton = document.createElement('button');
+
     $confirmButton.type = 'button';
     $confirmButton.classList.add('pp-dev-info__confirm-btn', 'pp-dev-info__confirm-btn--confirm');
     $confirmButton.textContent = opts.confirmText;
+
     $actions.append($cancelButton, $confirmButton);
     $confirm.append($title, $content, $actions);
     $overlay.appendChild($confirm);
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        document.removeEventListener('keydown', onKeyDown);
-        closeConfirmModalByResult($overlay, resolve, false);
+        teardownConfirmModal($overlay, false);
       }
     };
 
+    activeConfirmModals.set($overlay, { resolve, onKeyDown });
+
     $confirmButton.addEventListener('click', () => {
-      document.removeEventListener('keydown', onKeyDown);
-      closeConfirmModalByResult($overlay, resolve, true);
+      teardownConfirmModal($overlay, true);
     });
 
     $cancelButton.addEventListener('click', () => {
-      document.removeEventListener('keydown', onKeyDown);
-      closeConfirmModalByResult($overlay, resolve, false);
+      teardownConfirmModal($overlay, false);
     });
 
     $overlay.addEventListener('click', (event) => {
       if (event.target === $overlay) {
-        document.removeEventListener('keydown', onKeyDown);
-        closeConfirmModalByResult($overlay, resolve, false);
+        teardownConfirmModal($overlay, false);
       }
     });
 

src/lib/client.service.ts

@@ -24,6 +24,12 @@ interface SyncActionResponsePayload {
 export interface ClientServiceOptions {
   distService?: DistService;
   miAPI?: MiAPI;
+  /**
+   * Max time to wait for the browser to respond to `template:sync:action-required`.
+   * After this, the pending promise resolves to `false` and the resolver is removed.
+   * @default 120_000
+   */
+  syncActionTimeoutMs?: number;
 }
 
 export class ClientService {
@@ -32,7 +38,10 @@ export class ClientService {
   private readonly eventMap: Map<string, (this: ClientService, ...attrs: any[]) => void>;
 
   private logger: Logger;
-  private readonly syncActionResolvers: Map<string, (approved: boolean) => void> = new Map();
+  private readonly syncActionResolvers = new Map<
+    string,
+    { resolve: (approved: boolean) => void; timeoutId: ReturnType<typeof setTimeout> }
+  >();
 
   constructor(server: ViteDevServer, opts?: ClientServiceOptions) {
     this.server = server;
@@ -55,6 +64,33 @@ export class ClientService {
     for (const [event, handler] of this.eventMap) {
       ws.on(event, handler);
     }
+
+    ws.on('close', () => {
+      this.clearAllPendingSyncActions(false);
+    });
+
+    ws.on('error', () => {
+      this.clearAllPendingSyncActions(false);
+    });
+  }
+
+  private resolveSyncAction(requestId: string, approved: boolean) {
+    const entry = this.syncActionResolvers.get(requestId);
+
+    if (!entry) {
+      return;
+    }
+
+    clearTimeout(entry.timeoutId);
+    this.syncActionResolvers.delete(requestId);
+    entry.resolve(approved);
+  }
+
+  /** Resolves every pending `requestSyncAction` promise and clears timeouts (e.g. WebSocket closed). */
+  private clearAllPendingSyncActions(approved: boolean) {
+    for (const requestId of [...this.syncActionResolvers.keys()]) {
+      this.resolveSyncAction(requestId, approved);
+    }
   }
 
   onInfoDataRequest() {
@@ -70,21 +106,19 @@ export class ClientService {
       return;
     }
 
-    const resolver = this.syncActionResolvers.get(payload.requestId);
-
-    if (!resolver) {
-      return;
-    }
-
-    this.syncActionResolvers.delete(payload.requestId);
-    resolver(payload.approved);
+    this.resolveSyncAction(payload.requestId, payload.approved);
   }
 
   async requestSyncAction(payload: Omit<SyncActionRequestPayload, 'requestId'>) {
     const requestId = randomUUID();
+    const timeoutMs = this.opts.syncActionTimeoutMs ?? 120_000;
 
     return await new Promise<boolean>((resolve) => {
-      this.syncActionResolvers.set(requestId, resolve);
+      const timeoutId = setTimeout(() => {
+        this.resolveSyncAction(requestId, false);
+      }, timeoutMs);
+
+      this.syncActionResolvers.set(requestId, { resolve, timeoutId });
 
       this.server.ws.send('template:sync:action-required', {
         ...payload,

src/lib/dist.service.ts

@@ -370,6 +370,12 @@ export class DistService {
         if (resolvedCandidates.length === 1) {
           versionManifestPath = resolvedCandidates[0]!;
         }
+
+        if (buildManifest.compat?.versionFileRequired === true && versionManifestPath === null) {
+          throw new Error(
+            `Build manifest requires version file "${buildManifest.versionFile}", but it is missing in backup ZIP`,
+          );
+        }
       } else {
         const versionFileMatcher = this.versionFileTemplateMatcher();
         const versionManifestCandidates = relativePaths.filter((filePath) =>

src/lib/pp.middleware.ts

@@ -152,6 +152,10 @@ export class MiAPI {
     return obj;
   }
 
+  #escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&');
+  }
+
   get personalAccessToken(): string | undefined {
     return this.#personalAccessToken;
   }
@@ -474,7 +478,10 @@ export class MiAPI {
     let result = typeof content === 'string' ? content : content.toString('utf-8');
 
     for (const v of this.#pageVars) {
-      result = result.replace(new RegExp(`\\[${v.name}\\]`, 'g'), v.value);
+      const escapedName = this.#escapeRegExp(v.name);
+      const pageVarRegex = new RegExp(`\\[${escapedName}\\]`, 'g');
+
+      result = result.replace(pageVarRegex, () => v.value);
     }
 
     const dom = new JSDOM(miHudLess ? result : this.#pageTemplate!);

src/plugins/version-plugin.ts

@@ -86,6 +86,10 @@ function resolveVersionFileName(template: string, packageVersion: string, curren
   return template.replace(/\{packageversion\}/g, packageVersion).replace(/\{currentDate\}/g, currentDate);
 }
 
+function stripUrlUserInfo(value: string): string {
+  return value.replace(/^([a-z][a-z\d+.-]*:\/\/)(?:[^/?#@]+(?::[^/?#@]*)?@)/i, '$1');
+}
+
 function normalizeRepositoryUrl(url: string): string {
   const normalizedUrl = url
     .trim()
@@ -96,26 +100,26 @@ function normalizeRepositoryUrl(url: string): string {
   if (scpLikeMatch) {
     const [, , host, repositoryPath] = scpLikeMatch;
 
-    return `https://${host}/${repositoryPath.replace(/^\/+/, '')}`;
+    return stripUrlUserInfo(`https://${host}/${repositoryPath.replace(/^\/+/, '')}`);
   }
 
   const sshProtocolMatch = normalizedUrl.match(/^ssh:\/\/(?:[^@]+@)?([^/:]+)(?::\d+)?\/(.+)$/i);
 
   if (sshProtocolMatch) {
     const [, host, repositoryPath] = sshProtocolMatch;
 
-    return `https://${host}/${repositoryPath.replace(/^\/+/, '')}`;
+    return stripUrlUserInfo(`https://${host}/${repositoryPath.replace(/^\/+/, '')}`);
   }
 
   const gitProtocolMatch = normalizedUrl.match(/^git:\/\/([^/]+)\/(.+)$/i);
 
   if (gitProtocolMatch) {
     const [, host, repositoryPath] = gitProtocolMatch;
 
-    return `https://${host}/${repositoryPath.replace(/^\/+/, '')}`;
+    return stripUrlUserInfo(`https://${host}/${repositoryPath.replace(/^\/+/, '')}`);
   }
 
-  return normalizedUrl;
+  return stripUrlUserInfo(normalizedUrl);
 }
 
 function resolveHelperVersion(): string {

src/shortcuts.ts

@@ -94,8 +94,14 @@ export function bindShortcuts(server: ViteDevServer, opts: BindShortcutsOptions)
   process.stdin.setRawMode(true);
 
   process.stdin.on('data', onInput).setEncoding('utf8').resume();
+  const boundServer = server.httpServer;
 
   const cleanupBinding = () => {
+    if (cleanupActiveShortcutBinding !== cleanupBinding) {
+      return;
+    }
+
+    boundServer.removeListener('close', cleanupBinding);
     process.stdin.off('data', onInput);
 
     if (!hadRawModeEnabled) {
@@ -106,13 +112,11 @@ export function bindShortcuts(server: ViteDevServer, opts: BindShortcutsOptions)
       process.stdin.pause();
     }
 
-    if (cleanupActiveShortcutBinding === cleanupBinding) {
-      cleanupActiveShortcutBinding = null;
-    }
+    cleanupActiveShortcutBinding = null;
   };
 
   cleanupActiveShortcutBinding = cleanupBinding;
-  server.httpServer.on('close', cleanupBinding);
+  boundServer.on('close', cleanupBinding);
 }
 
 const BASE_SHORTCUTS: CLIShortcut[] = [