@dev-crew-berlin/enter-js-utils 0.98.10 → 0.98.12

package/dist/api-client/api-base.js

@@ -5,15 +5,22 @@ const BACKOFF_INITIAL_MS = 1_000;
 const BACKOFF_MAX_MS = 30_000;
 const BACKOFF_RESET_AFTER_MS = 10_000;
 const WATCHDOG_TIMEOUT_MS = 45_000;
-function sleep(ms, signal) {
+function sleep(ms, ...signals) {
   return new Promise(resolve => {
     const timer = setTimeout(resolve, ms);
-    signal.addEventListener('abort', () => {
+    const cleanup = () => {
       clearTimeout(timer);
       resolve();
-    }, {
-      once: true
-    });
+    };
+    for (const signal of signals) {
+      if (signal.aborted) {
+        cleanup();
+        return;
+      }
+      signal.addEventListener('abort', cleanup, {
+        once: true
+      });
+    }
   });
 }
 export default class APIBase {
@@ -182,11 +189,38 @@ export default class APIBase {
     let lastEventId = options.initialLastEventId ?? null;
     let backoffMs = BACKOFF_INITIAL_MS;
     let isFirstConnect = true;
+
+    // iOS standalone PWAs are frozen when backgrounded; the heartbeat watchdog
+    // cannot fire while JS is suspended. When the user returns to the app the
+    // foreground events fire immediately, so we use them as a hard-reconnect
+    // trigger instead of waiting for the watchdog.
+    let currentWakeController = null;
+    const onForegroundResume = () => {
+      backoffMs = BACKOFF_INITIAL_MS;
+      currentWakeController?.abort();
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') onForegroundResume();
+    };
+    const hasDocument = typeof document !== 'undefined';
+    if (hasDocument) {
+      document.addEventListener('visibilitychange', onVisibilityChange);
+      document.addEventListener('pageshow', onForegroundResume);
+    }
     try {
       while (!outerAbort.signal.aborted) {
         // Fresh abort controller per attempt so the watchdog or a read error
         // on one attempt cannot bleed into the next.
         const attemptAbort = new AbortController();
+        // wakeController is aborted by foreground events to immediately skip
+        // the backoff sleep and break out of a wedged reader.read() race.
+        const wakeController = new AbortController();
+        currentWakeController = wakeController;
+        // Propagate a foreground wake to the in-flight fetch so it is
+        // cancelled and we open a fresh connection right away.
+        wakeController.signal.addEventListener('abort', () => attemptAbort.abort(), {
+          once: true
+        });
         const propagateAbort = () => attemptAbort.abort();
         outerAbort.signal.addEventListener('abort', propagateAbort);
         const hadCursor = lastEventId !== null;
@@ -223,7 +257,7 @@ export default class APIBase {
             for await (const {
               data,
               id
-            } of this.readSseEvents(res.data.body, attemptAbort, onReset)) {
+            } of this.readSseEvents(res.data.body, attemptAbort, onReset, wakeController.signal)) {
               if (id) lastEventId = id;
               yield data;
             }
@@ -242,13 +276,17 @@ export default class APIBase {
         const lived = connectedAt > 0 ? Date.now() - connectedAt : 0;
         if (lived >= BACKOFF_RESET_AFTER_MS) backoffMs = BACKOFF_INITIAL_MS;
         onConnectionChange?.('reconnecting');
-        await sleep(backoffMs, outerAbort.signal);
+        await sleep(backoffMs, outerAbort.signal, wakeController.signal);
         backoffMs = Math.min(backoffMs * 2, BACKOFF_MAX_MS) * (0.5 + Math.random());
       }
     } finally {
       // Aborting here also unblocks any in-progress sleep() call.
       outerAbort.abort();
       externalSignal?.removeEventListener('abort', onExternalAbort);
+      if (hasDocument) {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        document.removeEventListener('pageshow', onForegroundResume);
+      }
     }
   }
 
@@ -257,7 +295,7 @@ export default class APIBase {
   // if no message arrives within WATCHDOG_TIMEOUT_MS the connection is
   // considered half-open (common on mobile networks) and is aborted so the
   // outer loop can reconnect.
-  async *readSseEvents(body, attemptAbort, onReset) {
+  async *readSseEvents(body, attemptAbort, onReset, wakeSignal) {
     const reader = body.pipeThrough(new TextDecoderStream()).pipeThrough(new EventSourceParserStream()).getReader();
     let watchdogTimer = null;
     const resetWatchdog = () => {
@@ -265,12 +303,27 @@ export default class APIBase {
       watchdogTimer = setTimeout(() => attemptAbort.abort(), WATCHDOG_TIMEOUT_MS);
     };
     resetWatchdog();
+
+    // Resolves to a sentinel when a foreground-resume event fires. Racing
+    // reader.read() against this promise means the loop can advance to a
+    // fresh connection even if the old read is permanently wedged (iOS).
+    const reconnect = new Promise(resolve => {
+      if (wakeSignal.aborted) {
+        resolve('reconnect');
+        return;
+      }
+      wakeSignal.addEventListener('abort', () => resolve('reconnect'), {
+        once: true
+      });
+    });
     try {
       while (true) {
+        const result = await Promise.race([reader.read(), reconnect]);
+        if (result === 'reconnect') break;
         const {
           done,
           value: event
-        } = await reader.read();
+        } = result;
         if (done) break;
 
         // Any message — including heartbeats — proves the connection is alive.

package/dist/api-client/api-client.test.js

@@ -645,6 +645,196 @@ describe('resilientStream', () => {
     await pending;
   });
 });
+
+// Minimal document stub for foreground-event tests (test env is node, no DOM).
+// visibilityState and dispatch() let tests simulate visibilitychange / pageshow.
+function makeMockDocument() {
+  const listeners = new Map();
+  return {
+    visibilityState: 'visible',
+    addEventListener(type, fn) {
+      if (!listeners.has(type)) listeners.set(type, new Set());
+      listeners.get(type).add(fn);
+    },
+    removeEventListener(type, fn) {
+      listeners.get(type)?.delete(fn);
+    },
+    dispatch(type) {
+      for (const fn of listeners.get(type) ?? []) fn(new Event(type));
+    },
+    listenerCount(type) {
+      return listeners.get(type)?.size ?? 0;
+    }
+  };
+}
+
+// A stream that delivers initialChunks immediately but never closes and never
+// errors, so reader.read() hangs forever once the chunks are consumed.
+function makeWedgedStream(initialChunks = []) {
+  return new ReadableStream({
+    start(controller) {
+      for (const chunk of initialChunks) controller.enqueue(chunk);
+      // deliberately never closed or errored
+    }
+  });
+}
+describe('foreground reconnect (visibilitychange / pageshow)', () => {
+  let mockDoc;
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockDoc = makeMockDocument();
+    vi.stubGlobal('document', mockDoc);
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  // ─── immediate reconnect on visibilitychange ──────────────────────────────
+
+  it('reconnects immediately on visibilitychange without waiting for backoff', async () => {
+    let connectionCount = 0;
+    vi.stubGlobal('fetch', (_url, init) => {
+      connectionCount++;
+      // All connections return a silent stream (never delivers events)
+      return Promise.resolve(okResponse(makeSilentStream(init.signal)));
+    });
+    const abortController = new AbortController();
+    const api = makeAPI();
+    const gen = api.subscribe('/test', {
+      signal: abortController.signal
+    });
+    gen.next();
+    await flushMicrotasks();
+    expect(connectionCount).toBe(1);
+
+    // Simulate returning to foreground — should trigger immediate reconnect
+    mockDoc.visibilityState = 'visible';
+    mockDoc.dispatch('visibilitychange');
+    await flushMicrotasks();
+
+    // New connection opened without advancing fake timers at all
+    expect(connectionCount).toBeGreaterThanOrEqual(2);
+    abortController.abort();
+    await gen.return(undefined);
+  });
+  it('reconnects immediately on pageshow without waiting for backoff', async () => {
+    let connectionCount = 0;
+    vi.stubGlobal('fetch', (_url, init) => {
+      connectionCount++;
+      return Promise.resolve(okResponse(makeSilentStream(init.signal)));
+    });
+    const abortController = new AbortController();
+    const api = makeAPI();
+    const gen = api.subscribe('/test', {
+      signal: abortController.signal
+    });
+    gen.next();
+    await flushMicrotasks();
+    expect(connectionCount).toBe(1);
+    mockDoc.dispatch('pageshow');
+    await flushMicrotasks();
+    expect(connectionCount).toBeGreaterThanOrEqual(2);
+    abortController.abort();
+    await gen.return(undefined);
+  });
+
+  // ─── Last-Event-ID carried on foreground reconnect ────────────────────────
+
+  it('foreground reconnect carries Last-Event-ID from last received event', async () => {
+    const capturedInits = [];
+    vi.stubGlobal('fetch', (_url, init) => {
+      capturedInits.push(init);
+      if (capturedInits.length === 1) {
+        // First connection: delivers one event with cursor, then hangs
+        return Promise.resolve(okResponse(makeWedgedStream([sseChunk([{
+          id: 'cursor-42',
+          data: '{"n":1}'
+        }])])));
+      }
+      // Second+ connections: abort-responsive so the test can clean up
+      return Promise.resolve(okResponse(makeSilentStream(init.signal)));
+    });
+    const abortController = new AbortController();
+    const api = makeAPI();
+    const gen = api.subscribe('/test', {
+      signal: abortController.signal
+    });
+
+    // Consume the first event; generator is now suspended at 'yield data'
+    const response1 = await gen.next();
+    expect(response1.value).toEqual({
+      n: 1
+    });
+
+    // Drive the generator forward so it re-enters readSseEvents's Promise.race.
+    // Without this call the generator stays frozen at 'yield data' and the
+    // foreground event cannot be picked up until the consumer drives it.
+    const nextPromise = gen.next();
+    await flushMicrotasks();
+
+    // Foreground event fires while reader.read() is wedged on the first stream
+    mockDoc.visibilityState = 'visible';
+    mockDoc.dispatch('visibilitychange');
+    await flushMicrotasks();
+    expect(capturedInits.length).toBeGreaterThanOrEqual(2);
+    const secondHeaders = capturedInits[1]?.headers;
+    expect(secondHeaders?.['Last-Event-ID']).toBe('cursor-42');
+    abortController.abort();
+    await nextPromise;
+  });
+
+  // ─── wedged read — recovery without stream closing ────────────────────────
+
+  it('recovers even when the prior response body never closes', async () => {
+    let connectionCount = 0;
+    vi.stubGlobal('fetch', (_url, init) => {
+      connectionCount++;
+      if (connectionCount === 1) {
+        // First connection is truly wedged — reader.read() hangs forever and
+        // the stream ignores the abort signal, simulating iOS zombie streams.
+        return Promise.resolve(okResponse(makeWedgedStream()));
+      }
+      // Subsequent connections are abort-responsive so the test can clean up.
+      return Promise.resolve(okResponse(makeSilentStream(init.signal)));
+    });
+    const abortController = new AbortController();
+    const api = makeAPI();
+    const gen = api.subscribe('/test', {
+      signal: abortController.signal
+    });
+    gen.next();
+    await flushMicrotasks();
+    expect(connectionCount).toBe(1);
+
+    // Foreground event — must open new connection even though the first
+    // stream body is completely wedged and reader.read() never resolves.
+    mockDoc.visibilityState = 'visible';
+    mockDoc.dispatch('visibilitychange');
+    await flushMicrotasks();
+    expect(connectionCount).toBeGreaterThanOrEqual(2);
+    abortController.abort();
+    await gen.return(undefined);
+  });
+
+  // ─── no listener / timer leaks ────────────────────────────────────────────
+
+  it('removes visibilitychange and pageshow listeners after consumer aborts', async () => {
+    vi.stubGlobal('fetch', (_url, init) => Promise.resolve(okResponse(makeSilentStream(init.signal))));
+    const abortController = new AbortController();
+    const api = makeAPI();
+    const pending = api.subscribe('/test', {
+      signal: abortController.signal
+    }).next();
+    await flushMicrotasks();
+    expect(mockDoc.listenerCount('visibilitychange')).toBe(1);
+    expect(mockDoc.listenerCount('pageshow')).toBe(1);
+    abortController.abort();
+    await pending;
+    expect(mockDoc.listenerCount('visibilitychange')).toBe(0);
+    expect(mockDoc.listenerCount('pageshow')).toBe(0);
+  });
+});
 function makeFullAPI() {
   return new API({
     credentials: {

package/dist/ui/companion-info.d.ts

@@ -3,6 +3,9 @@ import 'styled-jsx';
 type Props = {
     companionStatus: {
         isCompanion: false;
+        companionNames?: {
+            [attendeeId: string]: string;
+        };
     } | {
         isCompanion: true;
         mainGuestId: string;

package/dist/ui/companion-info.js

@@ -3,13 +3,29 @@ import React from 'react';
 import 'styled-jsx';
 import { colors, fonts } from '../lib/theme';
 export const CompanionInfo = props => {
-  if (!props.companionStatus.isCompanion) return null;
-  return /*#__PURE__*/React.createElement("p", {
-    className: _JSXStyle.dynamic([["21346984", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-info'
-  }, "companion of", ' ', /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["21346984", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-name'
-  }, props.companionStatus.mainGuestName), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "21346984",
+  if (props.companionStatus.isCompanion) {
+    return /*#__PURE__*/React.createElement("p", {
+      className: _JSXStyle.dynamic([["747595454", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-info'
+    }, "companion of", ' ', /*#__PURE__*/React.createElement("span", {
+      className: _JSXStyle.dynamic([["747595454", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-name'
+    }, props.companionStatus.mainGuestName), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "747595454",
+      dynamic: [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]
+    }, `.companion-info.__jsx-style-dynamic-selector{margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companion-name.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};}`));
+  }
+  const companionNames = Object.values(props.companionStatus.companionNames ?? {});
+  if (companionNames.length === 0) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-info'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-label'
+  }, "companions:"), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-list'
+  }, companionNames.map((name, index) => /*#__PURE__*/React.createElement("span", {
+    key: index,
+    className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-name'
+  }, name))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2921445348",
     dynamic: [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]
-  }, `.companion-info.__jsx-style-dynamic-selector{margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companion-name.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};}`));
+  }, `.companions-info.__jsx-style-dynamic-selector{display:grid;grid-template-columns:auto 1fr;-webkit-column-gap:0.6rem;column-gap:0.6rem;margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companions-label.__jsx-style-dynamic-selector{white-space:nowrap;}.companions-list.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.companions-list.__jsx-style-dynamic-selector .companion-name.__jsx-style-dynamic-selector{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content;color:${colors.enterDarkGrey};}`));
 };

package/dist/ui/companion-info.stories.js

@@ -19,4 +19,15 @@ export const NotACompanion = {
       isCompanion: false
     }
   }
+};
+export const WithCompanions = {
+  args: {
+    companionStatus: {
+      isCompanion: false,
+      companionNames: {
+        'companion-1': 'Erika Musterfrau',
+        'companion-2': 'John Doe'
+      }
+    }
+  }
 };

package/dist/ui/form-elements/input.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, InputHTMLAttributes } from 'react';
 type Props = InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
+    label?: string;
 };
 export declare const Input: FunctionComponent<Props>;
 export {};

package/dist/ui/form-elements/select.d.ts

@@ -1,6 +1,6 @@
 import React, { SelectHTMLAttributes } from 'react';
 type Props<Option> = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value'> & {
-    label: string;
+    label?: string;
     value?: Option;
     options: Option[];
     onChange: (option: Option) => void;

package/dist/ui/form-elements/select.js

@@ -24,14 +24,14 @@ export function Select({
     id: id,
     value: value,
     onChange: e => onChange(e.target.value),
-    className: _JSXStyle.dynamic([["4146534212", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
+    className: _JSXStyle.dynamic([["3612400046", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
   }), options.map(option => /*#__PURE__*/React.createElement("option", {
     key: option,
     value: option,
     disabled: optionDisabled(option),
-    className: _JSXStyle.dynamic([["4146534212", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]])
+    className: _JSXStyle.dynamic([["3612400046", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]])
   }, optionFormat(option)))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4146534212",
+    id: "3612400046",
     dynamic: [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]
-  }, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;display:block;width:100%;padding:0.55rem 2.25rem 0.55rem 0.875rem;color:${colors.enterDarkGrey};background-color:#ffffff;border:1px solid #e5e7eb;border-radius:0.75rem;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);-webkit-transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.75rem center;background-size:12px;margin-bottom:1rem;}select.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}select.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}select.__jsx-style-dynamic-selector:disabled{color:#9ca3af;background-color:#f9fafb;cursor:not-allowed;}option.__jsx-style-dynamic-selector:disabled{color:#9ca3af;}`));
+  }, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;display:block;width:100%;padding:0.55rem 2.25rem 0.55rem 0.875rem;color:${colors.enterDarkGrey};background-color:#ffffff;border:1px solid #e5e7eb;border-radius:999px;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);-webkit-transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.75rem center;background-size:12px;margin-bottom:1rem;}select.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}select.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}select.__jsx-style-dynamic-selector:disabled{color:#9ca3af;background-color:#f9fafb;cursor:not-allowed;}option.__jsx-style-dynamic-selector:disabled{color:#9ca3af;}`));
 }

package/dist/ui/tag.js

@@ -14,9 +14,9 @@ function getContrastYIQ(hexcolor) {
 export const Tag = props => {
   const textColor = getContrastYIQ(props.color ?? '#ffffff');
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2799826206", [fonts.primary, props.big ? '14px' : '0.8em', textColor === 'black' ? colors.enterDarkGrey : 'white', props.color ? props.color : 'transparent', colors.enterGrey, props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em']]]) + " " + 'tag'
+    className: _JSXStyle.dynamic([["2236124549", [fonts.primary, props.big ? '14px' : '0.8em', textColor === 'black' ? colors.enterDarkGrey : 'white', props.color ? props.color : 'transparent', colors.enterGrey, props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em']]]) + " " + 'tag'
   }, props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2799826206",
+    id: "2236124549",
     dynamic: [fonts.primary, props.big ? '14px' : '0.8em', textColor === 'black' ? colors.enterDarkGrey : 'white', props.color ? props.color : 'transparent', colors.enterGrey, props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em']
-  }, `.tag.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:${props.big ? '14px' : '0.8em'};color:${textColor === 'black' ? colors.enterDarkGrey : 'white'};text-transform:uppercase;display:inline-block;background-color:${props.color ? props.color : 'transparent'};border-radius:2px;border:1px solid ${colors.enterGrey};padding:2px 8px;margin:${props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em'};word-wrap:anywhere;}`));
+  }, `.tag.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:${props.big ? '14px' : '0.8em'};color:${textColor === 'black' ? colors.enterDarkGrey : 'white'};text-transform:uppercase;display:inline-block;background-color:${props.color ? props.color : 'transparent'};border-radius:2px;border:1px solid ${colors.enterGrey};padding:2px 8px;margin:${props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em'};word-wrap:anywhere;border-radius:8px;}`));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.98.10",
+  "version": "0.98.12",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",