@metricinsights/pp-dev 1.5.0-beta.3 → 1.5.0-beta.31

package/dist/client/client.js

@@ -1,17 +1,13 @@
 /**
- * Minimal `import.meta.hot`-compatible context for environments without Vite HMR
- * (e.g. the `pp-dev next` server). The dev-panel client only uses `hot.on()` and
- * `hot.send()`; this shim implements those over a raw WebSocket using the same
- * custom-event wire shape Vite uses: `{ type: 'custom', event, data }`.
- *
- * Used only as a fallback: when `import.meta.hot` exists (Vite), that is used
- * instead and this code never runs.
- */
-/**
- * WebSocket path the pp-dev Next.js server listens on for dev-panel messages.
- * Kept in sync with `PP_DEV_HMR_WS_PATH` in `src/constants.ts` (server side).
+ * The WebSocket messages between the dev server and the dev panel, for both sides: the server
+ * (`src/lib/client.service.ts`, `src/lib/pp-ws-server.ts`) and the panel (`src/client/**`) import
+ * them from here, so they can't drift apart. No Node or DOM imports: the panel bundle includes it.
  */
+/** WebSocket path the `pp-dev next` server listens on for dev-panel messages. */
 const PP_DEV_HMR_WS_PATH = '/@pp-dev-hmr';
+/** `template:sync:response` code for a sync requested while another one runs. */
+const SYNC_IN_PROGRESS_CODE = 'SYNC_IN_PROGRESS';
+
 const MAX_OUTBOX_SIZE = 50;
 function resolveWebSocketUrl() {
     const { protocol, host } = window.location;
@@ -23,6 +19,8 @@ function createPPDevHotContext() {
     /** Outgoing messages queued while the socket is not OPEN; flushed on connect. */
     const outbox = [];
     let socket = null;
+    /** The connection state last reported to the panel, so each change is reported once. */
+    let reported = null;
     let reconnectTimer = null;
     let reconnectDelay = 1_000;
     const MAX_RECONNECT_DELAY = 10_000;
@@ -60,6 +58,8 @@ function createPPDevHotContext() {
         }
         socket.addEventListener('open', () => {
             reconnectDelay = 1_000;
+            reported = 'connected';
+            dispatch('vite:ws:connect', {});
             flushOutbox();
         });
         socket.addEventListener('message', (ev) => {
@@ -76,6 +76,14 @@ function createPPDevHotContext() {
         });
         socket.addEventListener('close', () => {
             socket = null;
+            // Same events as Vite's own HMR client, so the panel can tell a lost connection apart
+            // (e.g. a sync whose response will never arrive, or a click that can't be sent). Once per
+            // loss: each failed reconnect attempt is not a new one, but a first connection that never
+            // opened is.
+            if (reported !== 'disconnected') {
+                reported = 'disconnected';
+                dispatch('vite:ws:disconnect', {});
+            }
             scheduleReconnect();
         });
         socket.addEventListener('error', () => {
@@ -119,6 +127,9 @@ function createPPDevHotContext() {
                 outbox.push(payload);
             }
         },
+        // Not part of Vite's API: lets the panel tell an open connection from one still connecting, whose
+        // queued messages would go out whenever it opens (see `src/client/sync-button.ts`).
+        isConnected: () => socket?.readyState === WebSocket.OPEN,
         // Unused by the dev-panel client; provided as no-ops to satisfy the shape.
         accept: noop,
         acceptExports: noop,
@@ -644,6 +655,37 @@ function initPanelSettings($panel, controller, hooks) {
     });
 }
 
+/**
+ * The rules for a saved user's name, which is also its host (`<name>.localhost`), for both sides:
+ * the server checks them (`src/lib/user-registry.ts`) and the dev panel's Users popover
+ * (`src/client/users-panel.ts`) checks them as you type. No Node or DOM imports: the panel bundle
+ * includes it.
+ */
+/** Longest user name; well under the 63 characters a DNS label allows. */
+const MAX_USER_NAME_LENGTH = 32;
+/**
+ * A DNS label: lowercase latin letters, digits and `-`, starting with a letter and not ending with
+ * `-`. Also used as an input's `pattern`, which browsers compile with the `v` flag: there an
+ * unescaped `-` in a class is a syntax error, and the whole pattern was silently ignored.
+ */
+const USER_NAME_PATTERN = String.raw `[a-z](?:[a-z0-9\-]*[a-z0-9])?`;
+const USER_NAME_REGEXP = new RegExp(`^(?:${USER_NAME_PATTERN})$`);
+/** The suffix of a user's host: `viewer` works on `viewer.localhost`. */
+const USER_HOST_SUFFIX = '.localhost';
+/** Why `name` can't be a user name, or `undefined` if it can. */
+function getUserNameError(name) {
+    if (!name) {
+        return 'The name is required';
+    }
+    if (name.length > MAX_USER_NAME_LENGTH) {
+        return `The name must be at most ${MAX_USER_NAME_LENGTH} characters long`;
+    }
+    if (!USER_NAME_REGEXP.test(name)) {
+        return 'The name may contain only lowercase latin letters, digits and "-", must start with a letter and must not end with "-"';
+    }
+    return undefined;
+}
+
 /**
  * The dev panel's "Users" popover (PP-4597): the user of this tab, the saved users (open as, log
  * in, make default, remove) and adding a user by API token or by username + password. Each user
@@ -651,7 +693,8 @@ function initPanelSettings($panel, controller, hooks) {
  */
 const USERS_API = '/@api/users';
 const REFRESH_INTERVAL = 3000;
-const USER_HOST_REGEXP = /^([a-z](?:[a-z0-9-]*[a-z0-9])?)\.localhost$/;
+// The server's name rules (src/shared/user-names.ts), not a copy of them.
+const USER_HOST_REGEXP = new RegExp(`^(${USER_NAME_PATTERN})${USER_HOST_SUFFIX.replace('.', '\\.')}$`);
 /** Marks the user this tab works as, apart from the radio, which picks localhost's user. */
 const THIS_TAB_BADGE = '<span class="pp-dev-info__users-badge">this tab</span>';
 const STATE_LABELS = {
@@ -716,6 +759,9 @@ function initUsersPanel($panel, hooks) {
     let data = null;
     // What the list shows now, so a refresh with the same data leaves it (and the focus) alone.
     let renderedData = '';
+    // Only the latest refresh paints: two quick default switches sent two, and the first one's
+    // answer, arriving last, drew the state before the second.
+    let refreshSeq = 0;
     // The token user being edited, whose row shows the edit form instead.
     let editing = null;
     const onDocClick = (ev) => {
@@ -823,7 +869,7 @@ function initUsersPanel($panel, hooks) {
                 const name = escapeHtml(user.name);
                 if (user.kind === 'token' && user.name === editing) {
                     return `<form class="pp-dev-info__users-row pp-dev-info__users-edit" data-user="${name}">
-            <input class="pp-dev-info__users-input pp-dev-info__users-edit-name" value="${name}" maxlength="32"
+            <input class="pp-dev-info__users-input pp-dev-info__users-edit-name" value="${name}" maxlength="${MAX_USER_NAME_LENGTH}" pattern="${USER_NAME_PATTERN}"
               autocomplete="off" spellcheck="false" aria-label="Name" data-focus-key="${name}:edit-name"
               title="Lowercase latin letters, digits and -, starting with a letter. The user opens on <name>.localhost." />
             <input class="pp-dev-info__users-input pp-dev-info__users-edit-token" type="password" autocomplete="off"
@@ -868,6 +914,9 @@ function initUsersPanel($panel, hooks) {
             $open.addEventListener('click', (ev) => {
                 ev.preventDefault();
                 const target = $open.dataset.open;
+                if (!target) {
+                    return;
+                }
                 window.open($open.dataset.raw ? target : samePageOn(target), '_blank');
             });
         });
@@ -880,7 +929,7 @@ function initUsersPanel($panel, hooks) {
         $list.querySelectorAll('[data-edit]').forEach(($edit) => {
             $edit.addEventListener('click', (ev) => {
                 ev.preventDefault();
-                startEditing($edit.dataset.edit);
+                startEditing($edit.dataset.edit ?? null);
             });
         });
         $list.querySelector('[data-cancel-edit]')?.addEventListener('click', (ev) => {
@@ -892,8 +941,11 @@ function initUsersPanel($panel, hooks) {
             ev.preventDefault();
             const name = editing;
             const $form = ev.currentTarget;
-            const newName = $form.querySelector('.pp-dev-info__users-edit-name').value.trim();
-            const token = $form.querySelector('.pp-dev-info__users-edit-token').value.trim();
+            if (!name) {
+                return;
+            }
+            const newName = $form.querySelector('.pp-dev-info__users-edit-name')?.value.trim() ?? '';
+            const token = $form.querySelector('.pp-dev-info__users-edit-token')?.value.trim() ?? '';
             const response = await request('PATCH', `${USERS_API}/${encodeURIComponent(name)}`, {
                 name: newName,
                 ...(token ? { token } : {}),
@@ -914,7 +966,8 @@ function initUsersPanel($panel, hooks) {
         $list.querySelectorAll('[data-remove]').forEach(($remove) => {
             $remove.addEventListener('click', async (ev) => {
                 ev.preventDefault();
-                if (await request('DELETE', `${USERS_API}/${encodeURIComponent($remove.dataset.remove)}`)) {
+                const name = $remove.dataset.remove;
+                if (name && (await request('DELETE', `${USERS_API}/${encodeURIComponent(name)}`))) {
                     await refresh();
                 }
             });
@@ -950,12 +1003,17 @@ function initUsersPanel($panel, hooks) {
         }
     };
     const refresh = async () => {
+        const seq = ++refreshSeq;
         try {
             const response = await fetch(USERS_API);
             if (!response.ok) {
                 return;
             }
-            data = (await response.json());
+            const loaded = (await response.json());
+            if (seq !== refreshSeq) {
+                return;
+            }
+            data = loaded;
             renderList();
             renderAvailability();
         }
@@ -995,20 +1053,34 @@ function initUsersPanel($panel, hooks) {
         const $name = $popover.querySelector('.pp-dev-info__users-name-input');
         const $token = $popover.querySelector('.pp-dev-info__users-token');
         const $submit = $popover.querySelector('.pp-dev-info__users-submit');
-        const body = addKind === 'token'
-            ? { name: $name.value.trim(), token: $token.value }
-            : { name: $name.value.trim(), kind: 'session' };
+        if (!$name || !$token || !$submit) {
+            return;
+        }
+        const name = $name.value.trim();
+        const nameError = getUserNameError(name);
+        if (nameError) {
+            setError(nameError);
+            return;
+        }
+        const body = addKind === 'token' ? { name, token: $token.value } : { name, kind: 'session' };
+        // A session user logs in on a tab of its own. Opened here, while the click still counts as the
+        // user's: opened after the request, Safari and Chrome blocked it as a popup.
+        const loginTab = addKind === 'session' ? window.open('', '_blank') : null;
         $submit.disabled = true;
         const response = await request('POST', USERS_API, body);
         $submit.disabled = false;
         if (!response) {
+            loginTab?.close();
             return;
         }
         const { user } = (await response.json());
         $name.value = '';
         $token.value = '';
-        if (user.kind === 'session' && user.loginUrl) {
-            window.open(user.loginUrl, '_blank');
+        if (user.kind === 'session' && user.loginUrl && loginTab) {
+            loginTab.location.href = user.loginUrl;
+        }
+        else {
+            loginTab?.close();
         }
         await refresh();
     };
@@ -1033,8 +1105,8 @@ function initUsersPanel($panel, hooks) {
           <button type="button" class="pp-dev-info__theme-btn pp-dev-info__users-kind" data-kind="token">API token</button>
           <button type="button" class="pp-dev-info__theme-btn pp-dev-info__users-kind" data-kind="session">Username + password</button>
         </div>
-        <input class="pp-dev-info__users-input pp-dev-info__users-name-input" placeholder="Name, e.g. viewer" maxlength="32"
-          autocomplete="off" spellcheck="false" pattern="[a-z]([a-z0-9-]*[a-z0-9])?"
+        <input class="pp-dev-info__users-input pp-dev-info__users-name-input" placeholder="Name, e.g. viewer" maxlength="${MAX_USER_NAME_LENGTH}"
+          autocomplete="off" spellcheck="false" pattern="${USER_NAME_PATTERN}"
           title="Lowercase latin letters, digits and -, starting with a letter. The user opens on <name>.localhost." />
         <input class="pp-dev-info__users-input pp-dev-info__users-token" type="password" placeholder="API token" autocomplete="off" />
         <button type="submit" class="pp-dev-info__vars-btn pp-dev-info__users-submit">Add user</button>
@@ -1050,7 +1122,7 @@ function initUsersPanel($panel, hooks) {
                 renderKind();
             });
         });
-        $popover.querySelector('.pp-dev-info__users-add').addEventListener('submit', (ev) => {
+        $popover.querySelector('.pp-dev-info__users-add')?.addEventListener('submit', (ev) => {
             ev.preventDefault();
             submit();
         });
@@ -1139,6 +1211,175 @@ function createPopupElement(opts) {
     $popup.appendChild($popupContent);
     return $popup;
 }
+/**
+ * Calls `onElapsed` once the page has been visible for `duration` ms in all (time in a hidden tab
+ * doesn't count). Returns a function that stops waiting, which also removes the page's
+ * `visibilitychange` listener: one used to stay behind for every popup ever shown.
+ */
+function startAutoDismiss(duration, onElapsed) {
+    let remaining = duration;
+    let lastUpdate = Date.now();
+    let visible = true;
+    let frame;
+    const tick = () => {
+        frame = undefined;
+        if (!visible) {
+            return;
+        }
+        const now = Date.now();
+        remaining -= now - lastUpdate;
+        lastUpdate = now;
+        if (remaining <= 0) {
+            stop();
+            onElapsed();
+            return;
+        }
+        frame = requestAnimationFrame(tick);
+    };
+    const onVisibilityChange = () => {
+        visible = !document.hidden;
+        if (visible) {
+            lastUpdate = Date.now();
+            frame ??= requestAnimationFrame(tick);
+        }
+    };
+    const stop = () => {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        if (frame !== undefined) {
+            cancelAnimationFrame(frame);
+            frame = undefined;
+        }
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    frame = requestAnimationFrame(tick);
+    return stop;
+}
+
+const TITLE_AVAILABLE = 'Sync template';
+const TITLE_UNAVAILABLE = 'Sync is unavailable on this instance';
+/**
+ * Wires the dev panel's "Sync template" button to the dev server.
+ *
+ * The button is disabled while a sync runs, so a double click can't start a second build, and is
+ * enabled again by whatever ends the sync: its response, or a lost connection. It stays disabled
+ * only when the server says sync is unavailable on this instance (`config.canSync === false`);
+ * a failed sync (MI unreachable, a build error) can simply be retried.
+ */
+function initSyncButton(hot, $button, deps) {
+    const reload = deps.reload ?? (() => window.location.reload());
+    let available = !$button.disabled && !$button.classList.contains('disabled');
+    let syncing = false;
+    // Vite's connection is taken as open until reported lost: it may have opened before these handlers
+    // were registered, and its client reloads the page once a lost one is back. The `pp-dev next`
+    // transport says itself whether its socket is open, also while the first one is still connecting.
+    let connected = true;
+    const isConnected = () => connected && (hot.isConnected?.() ?? true);
+    const applyState = () => {
+        $button.disabled = syncing || !available;
+        $button.classList.toggle('syncing', syncing);
+        $button.classList.toggle('disabled', !available);
+        $button.title = available ? TITLE_AVAILABLE : TITLE_UNAVAILABLE;
+        if (syncing) {
+            $button.setAttribute('aria-busy', 'true');
+        }
+        else {
+            $button.removeAttribute('aria-busy');
+        }
+    };
+    const endSync = () => {
+        syncing = false;
+        applyState();
+    };
+    hot.on('client:config:update', (data) => {
+        if (typeof data?.config?.canSync !== 'boolean') {
+            return;
+        }
+        // The server sends `canSync: true` at the start of every sync: it must not enable the
+        // button while that sync runs, which `applyState` takes care of.
+        available = data.config.canSync;
+        applyState();
+    });
+    hot.on('template:sync:action-required', async (payload) => {
+        // The spinner keeps running while a confirmation modal is shown: the sync is still in
+        // progress and only ends on `template:sync:response`.
+        const approved = await deps.confirmModal({
+            title: payload.title,
+            content: payload.content,
+            confirmText: payload.confirmText,
+            cancelText: payload.cancelText,
+        });
+        hot.send('template:sync:action-response', {
+            requestId: payload.requestId,
+            approved,
+        });
+    });
+    hot.on('template:sync:response', (payload) => {
+        deps.closeAllConfirmModals();
+        if ('error' in payload && payload.config?.canSync === false) {
+            available = false;
+        }
+        endSync();
+        if ('cancelled' in payload && payload.cancelled) {
+            deps.infoPopup({ title: 'Sync cancelled', content: payload.message, type: 'warning' });
+            return;
+        }
+        if ('error' in payload && typeof payload.error !== 'undefined') {
+            if (payload.code === SYNC_IN_PROGRESS_CODE) {
+                deps.infoPopup({ title: 'Sync already running', content: payload.error, type: 'warning' });
+                return;
+            }
+            deps.infoPopup({ title: 'Sync error', content: payload.error, type: 'danger' });
+            if (payload.refresh) {
+                setTimeout(reload);
+            }
+            return;
+        }
+        if ('syncedAt' in payload && typeof payload.syncedAt !== 'undefined') {
+            deps.infoPopup({
+                title: 'Sync success',
+                content: `Synced at ${new Date(payload.syncedAt).toLocaleString()}.\nBackup filename: ${payload.backupFilename}`,
+                type: 'success',
+            });
+        }
+    });
+    // A response sent to a socket that has closed never arrives. Without this, the button would
+    // spin, disabled, until the page is reloaded.
+    hot.on('vite:ws:connect', () => {
+        connected = true;
+    });
+    hot.on('vite:ws:disconnect', () => {
+        connected = false;
+        if (!syncing) {
+            return;
+        }
+        deps.closeAllConfirmModals();
+        endSync();
+        deps.infoPopup({
+            title: 'Sync result unknown',
+            content: 'The connection to the dev server was lost during the sync. Check its terminal for the result before syncing again.',
+            type: 'warning',
+        });
+    });
+    $button.addEventListener('click', (ev) => {
+        ev.preventDefault();
+        if (syncing || !available) {
+            return;
+        }
+        // Sent now, the request would wait for a reconnect with the button spinning, and start a sync
+        // whenever that happens. Say so instead, and let the click be repeated once connected.
+        if (!isConnected()) {
+            deps.infoPopup({
+                title: 'No connection',
+                content: 'The dev server is not connected. Check that it is running, then try again.',
+                type: 'warning',
+            });
+            return;
+        }
+        syncing = true;
+        applyState();
+        hot.send('template:sync', {});
+    });
+}
 
 /// <reference types="vite/client" />
 // Applied unconditionally (even if the panel itself is hidden) — this is what makes the
@@ -1211,7 +1452,16 @@ function animatePopup($popup, type) {
 function infoPopup(opts) {
     const $popup = createPopupElement(opts);
     const $closeButton = $popup.querySelector('.pp-dev-info__popup-title-close');
+    let removed = false;
+    let stopAutoDismiss;
+    // Once only: closing it by hand used to leave its timer running, which removed it again and
+    // counted it out of `activePopups` twice.
     const removePopup = async () => {
+        if (removed) {
+            return;
+        }
+        removed = true;
+        stopAutoDismiss?.();
         await animatePopup($popup, 'exit');
         $popup.remove();
         updatePopupPositions();
@@ -1224,32 +1474,7 @@ function infoPopup(opts) {
     animatePopup($popup, 'enter');
     const duration = opts.duration ?? 10000;
     if (duration > 0) {
-        let remainingTime = duration;
-        let lastUpdate = Date.now();
-        let isVisible = true;
-        const scheduleDismiss = () => {
-            if (!isVisible) {
-                return;
-            }
-            const now = Date.now();
-            const elapsed = now - lastUpdate;
-            remainingTime -= elapsed;
-            lastUpdate = now;
-            if (remainingTime <= 0) {
-                removePopup();
-                return;
-            }
-            requestAnimationFrame(scheduleDismiss);
-        };
-        // Handle visibility change
-        document.addEventListener('visibilitychange', () => {
-            isVisible = !document.hidden;
-            if (isVisible) {
-                lastUpdate = Date.now();
-                requestAnimationFrame(scheduleDismiss);
-            }
-        });
-        requestAnimationFrame(scheduleDismiss);
+        stopAutoDismiss = startAutoDismiss(duration, removePopup);
     }
     return { close: removePopup };
 }
@@ -1372,82 +1597,9 @@ if (hot) {
     hot.on('redirect', (data) => {
         window.location.href = data.url;
     });
-    hot.on('client:config:update', (data) => {
-        if (typeof data.config?.canSync === 'boolean') {
-            if (data.config.canSync) {
-                const $syncButton = document.getElementById('sync-template');
-                if ($syncButton) {
-                    $syncButton.disabled = false;
-                    $syncButton.classList.remove('disabled');
-                    $syncButton.title = 'Sync template';
-                }
-            }
-            else {
-                const $syncButton = document.getElementById('sync-template');
-                if ($syncButton) {
-                    $syncButton.disabled = true;
-                    $syncButton.classList.add('disabled');
-                    $syncButton.title = 'Sync is unavailable on this instance';
-                }
-            }
-        }
-    });
     const $syncButton = document.getElementById('sync-template');
     if ($syncButton) {
-        hot.on('template:sync:action-required', async (payload) => {
-            // Keep the sync spinner running while a confirmation modal is shown — the sync
-            // process is still in progress and only ends on `template:sync:response`.
-            const approved = await confirmModal({
-                title: payload.title,
-                content: payload.content,
-                confirmText: payload.confirmText,
-                cancelText: payload.cancelText,
-            });
-            hot.send('template:sync:action-response', {
-                requestId: payload.requestId,
-                approved,
-            });
-        });
-        hot.on('template:sync:response', (payload) => {
-            closeAllConfirmModals();
-            $syncButton.classList.remove('syncing');
-            if ('cancelled' in payload && payload.cancelled) {
-                infoPopup({
-                    title: 'Sync cancelled',
-                    content: payload.message,
-                    type: 'warning',
-                });
-            }
-            else if ('error' in payload && typeof payload.error !== 'undefined') {
-                infoPopup({
-                    title: 'Sync error',
-                    content: payload.error,
-                    type: 'danger',
-                });
-                if (payload.refresh) {
-                    setTimeout(() => {
-                        window.location.reload();
-                    });
-                }
-                else {
-                    $syncButton.disabled = true;
-                    $syncButton.classList.add('disabled');
-                    $syncButton.title = 'Sync is unavailable on this instance';
-                }
-            }
-            else if ('syncedAt' in payload && typeof payload.syncedAt !== 'undefined') {
-                infoPopup({
-                    title: 'Sync success',
-                    content: `Synced at ${new Date(payload.syncedAt).toLocaleString()}.\nBackup filename: ${payload.backupFilename}`,
-                    type: 'success',
-                });
-            }
-        });
-        $syncButton.addEventListener('click', (ev) => {
-            ev.preventDefault();
-            $syncButton.classList.add('syncing');
-            hot.send('template:sync', {});
-        });
+        initSyncButton(hot, $syncButton, { infoPopup, confirmModal, closeAllConfirmModals });
     }
     hot.on('page-variables:reload:response', (payload) => {
         pendingReloadVariablesPopup?.close();