@metricinsights/pp-dev 1.5.0-beta.15 → 1.5.0-beta.17

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;
@@ -58,10 +56,9 @@ function createPPDevHotContext() {
             scheduleReconnect();
             return;
         }
-        let opened = false;
         socket.addEventListener('open', () => {
-            opened = true;
             reconnectDelay = 1_000;
+            reported = 'connected';
             dispatch('vite:ws:connect', {});
             flushOutbox();
         });
@@ -80,9 +77,11 @@ 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). Only for a socket that was open: a
-            // failed reconnect attempt is not a new disconnect.
-            if (opened) {
+            // (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();
@@ -128,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,
@@ -653,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
@@ -660,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 = {
@@ -832,7 +866,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"
@@ -877,6 +911,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');
             });
         });
@@ -889,7 +926,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) => {
@@ -901,8 +938,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 } : {}),
@@ -923,7 +963,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();
                 }
             });
@@ -1004,20 +1045,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();
     };
@@ -1042,8 +1097,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>
@@ -1059,7 +1114,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();
         });
@@ -1148,12 +1203,50 @@ function createPopupElement(opts) {
     $popup.appendChild($popupContent);
     return $popup;
 }
-
 /**
- * `template:sync:response` code for a sync requested while another one runs. Kept in sync with
- * `SYNC_IN_PROGRESS_CODE` in `src/lib/client.service.ts` (server side, not importable here).
+ * 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.
  */
-const SYNC_IN_PROGRESS_CODE = 'SYNC_IN_PROGRESS';
+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';
 /**
@@ -1168,6 +1261,11 @@ 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);
@@ -1202,7 +1300,10 @@ function initSyncButton(hot, $button, deps) {
             confirmText: payload.confirmText,
             cancelText: payload.cancelText,
         });
-        hot.send('template:sync:action-response', { requestId: payload.requestId, approved });
+        hot.send('template:sync:action-response', {
+            requestId: payload.requestId,
+            approved,
+        });
     });
     hot.on('template:sync:response', (payload) => {
         deps.closeAllConfirmModals();
@@ -1235,7 +1336,11 @@ function initSyncButton(hot, $button, deps) {
     });
     // 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;
         }
@@ -1252,6 +1357,16 @@ function initSyncButton(hot, $button, deps) {
         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', {});
@@ -1329,7 +1444,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();
@@ -1342,32 +1466,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 };
 }