@xh/hoist 86.0.0 → 86.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+
+## 86.0.1 - 2026-06-16
+
+### 🐞 Bug Fixes
+
+* Fixed a circular import introduced in v86 that caused problems for apps using `@ComputeOnce`.
+* Fixed a regression to favorites icon size for `FilterChooser.`
+
+### ⚙️ Technical
+
+* `TrackService`, `PrefService`, and `TraceService` now flush their pending entries reliably when
+  the page is hidden or unloaded, reacting to `XH.pageState` and issuing the flush via
+  `fetch({keepalive: true})` (replacing the less reliable `beforeunload` + normal-fetch approach).
+
+
 ## 86.0.0 - 2026-06-12
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - library upgrades + component API changes)

package/build/types/svc/PrefService.d.ts

@@ -58,9 +58,10 @@ export declare class PrefService extends HoistService {
      */
     pushAsync(key: string, value: any): Promise<void>;
     /**
-     * Push any pending buffered updates to persist newly set values to server.
-     * Called automatically by this app on page unload to avoid dropping changes when e.g. a user
-     * changes and option and then immediately hits a (browser) refresh.
+     * Push any pending buffered updates to persist newly set values to the server.
+     *
+     * Not typically called by applications.  Called automatically by the framework after changes
+     * and when page is hidden/terminated.
      */
     pushPendingAsync(): Promise<void>;
     private pushPendingBuffered;

package/build/types/svc/TraceService.d.ts

@@ -1,4 +1,4 @@
-import { HoistService, InitContext, Span, FullSpanConfig } from '@xh/hoist/core';
+import { HoistService, Span, FullSpanConfig } from '@xh/hoist/core';
 /**
  * Client-side distributed tracing service for Hoist applications.
  *
@@ -30,7 +30,7 @@ export declare class TraceService extends HoistService {
     private conf;
     /** Spans created before config available. */
     private _preConfigSpans;
-    initAsync(ctx: InitContext): Promise<void>;
+    initAsync(): Promise<void>;
     /** Is tracing currently enabled? */
     get enabled(): boolean;
     /**
@@ -64,12 +64,10 @@ export declare class TraceService extends HoistService {
      */
     private exportSpan;
     /**
-     * Push all pending spans to the server.
-     * Called on debounced interval and on page unload.
+     * Flush the queue of pending spans to the server.
+     * @internal - apps should generally allow this service to manage w/its internal debounce.
      */
     pushPendingAsync(): Promise<void>;
-    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
-    private enforceCap;
     /**
      * Called by {@link ConfigService} once `xhTraceConfig` has loaded. Applies sampling
      * decisions to all spans created during early startup and held in the pendingConfig
@@ -83,6 +81,10 @@ export declare class TraceService extends HoistService {
      */
     noteConfigAvailable(): void;
     private pushPendingBuffered;
+    /** Flush all pending spans to the server. */
+    private pushPendingInternalAsync;
+    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
+    private enforceCap;
     /**
      * Resolve a root-span sampling decision: a probabilistic decision from `sampleRules`. Rules
      * match on tag keys; the reserved key `name` matches the span's name (glob-capable, same

package/build/types/svc/TrackService.d.ts

@@ -1,4 +1,4 @@
-import { HoistService, InitContext, TrackOptions } from '@xh/hoist/core';
+import { HoistService, TrackOptions } from '@xh/hoist/core';
 /**
  * Primary service for tracking any activity that an application's admins want to track.
  * Activities are available for viewing/querying in the Admin Console's Client Activity tab.
@@ -9,14 +9,16 @@ export declare class TrackService extends HoistService {
     static instance: TrackService;
     private oncePerSessionSent;
     private pending;
-    initAsync(ctx: InitContext): Promise<void>;
+    initAsync(): Promise<void>;
     get conf(): ActivityTrackingConfig;
     get enabled(): boolean;
     /** Track User Activity. */
     track(options: TrackOptions | string): void;
     /**
      * Flush the queue of pending activity tracking messages to the server.
-     * @internal - apps should generally allow this service to manage w/its internal debounce.
+     *
+     * Not typically called by applications.  Called automatically by the framework via a
+     * debounce and when the page is hidden/terminated.
      */
     pushPendingAsync(): Promise<void>;
     private pushPendingBuffered;

package/build/types/svc/impl/Fetch.d.ts

@@ -0,0 +1,13 @@
+import { CallContextLike } from '@xh/hoist/core';
+import type { FetchOptions } from '../FetchService';
+/**
+ * Post a JSON body, using `fetch({keepalive: true})` when the page is no longer visible so the
+ * request can survive teardown (e.g. a flush as `XH.pageState` goes `hidden`/`frozen`/`terminated`).
+ *
+ * Keepalive bodies share a single browser-wide 64KB budget; if exceeded the request is never sent
+ * and we retry once uncapped (without keepalive), which still completes while the page is alive (the
+ * common `hidden` case). Real server errors are re-thrown, not re-posted.
+ *
+ * @internal
+ */
+export declare function terminationSafePostJson(opts: FetchOptions, ctx?: CallContextLike): Promise<any>;

package/build/types/utils/js/TestUtils.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps } from '@xh/hoist/core';
+import type { HoistProps } from '@xh/hoist/core';
 /**
  * HTML attribute name used to tag elements with stable test identifiers. Use as a computed
  * property key on element specs - e.g. `{[TEST_ID]: 'my-grid'}` - to emit a `data-testid`

package/build/types/utils/react/LayoutPropUtils.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedLayoutProps, PlainObject } from '@xh/hoist/core';
+import type { ResolvedLayoutProps, PlainObject } from '@xh/hoist/core';
 /**
  * These utils support accepting the CSS styles enumerated below as top-level props of a Component,
  * and are typically accessed via the `@LayoutSupport` mixin (for class-based components) or the

package/build/types/utils/react/ReactUtils.d.ts

@@ -1,4 +1,4 @@
-import { Content } from '@xh/hoist/core';
+import type { Content } from '@xh/hoist/core';
 import { ReactElement } from 'react';
 /**
  * Return the display name for either a class-based or functional Component.

package/desktop/cmp/filter/FilterChooser.scss

@@ -93,11 +93,6 @@
 
 .xh-filter-chooser-favorite-icon {
   margin-left: var(--xh-pad-half-px);
-
-  // Matched to GroupingChooser equivalent.
-  &.svg-inline--fa {
-    width: 12px;
-  }
 }
 
 .xh-filter-chooser-favorite {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.0.0",
+  "version": "86.0.1",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -38,8 +38,8 @@
     ]
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "~2.20.0",
-    "@azure/msal-browser": "~5.11.0",
+    "@auth0/auth0-spa-js": "~2.21.1",
+    "@azure/msal-browser": "~5.13.0",
     "@blueprintjs/core": "^6.3.2",
     "@blueprintjs/datetime": "^6.0.6",
     "@codemirror/commands": "~6.10.3",
@@ -69,7 +69,7 @@
     "jwt-decode": "~4.0.0",
     "lodash": "~4.18.0",
     "lodash-inflection": "~1.5.0",
-    "mobx": "~6.15.0",
+    "mobx": "~6.16.1",
     "mobx-react-lite": "~4.1.0",
     "moment": "~2.30.1",
     "numbro": "~2.5.0",

package/svc/PrefService.ts

@@ -8,6 +8,7 @@ import {CallContextLike, HoistService, InitContext, XH} from '@xh/hoist/core';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {debounced, deepFreeze, throwIf} from '@xh/hoist/utils/js';
 import {cloneDeep, forEach, isEmpty, isEqual} from 'lodash';
+import {terminationSafePostJson} from './impl/Fetch';
 
 /**
  * Service to read and set user-specific preference values.
@@ -34,7 +35,13 @@ export class PrefService extends HoistService {
     private _updates = {};
 
     override async initAsync(ctx: InitContext) {
-        window.addEventListener('beforeunload', () => this.pushPendingAsync());
+        // Flush on page teardown while the page is still alive.
+        this.addReaction({
+            track: () => XH.pageState,
+            run: () => {
+                if (!XH.pageIsVisible) this.pushPendingAsync();
+            }
+        });
         return this.loadPrefsAsync(ctx);
     }
 
@@ -112,27 +119,30 @@ export class PrefService extends HoistService {
     }
 
     /**
-     * Push any pending buffered updates to persist newly set values to server.
-     * Called automatically by this app on page unload to avoid dropping changes when e.g. a user
-     * changes and option and then immediately hits a (browser) refresh.
+     * Push any pending buffered updates to persist newly set values to the server.
+     *
+     * Not typically called by applications.  Called automatically by the framework after changes
+     * and when page is hidden/terminated.
      */
     async pushPendingAsync() {
         const updates = this._updates;
         if (isEmpty(updates)) return;
 
+        // Clear synchronously with the capture, so overlapping flushes cannot post twice.
+        this._updates = {};
+
         await this.runner()
             .span('set')
-            .run(async ctx => {
-                this._updates = {};
-                await XH.postJson(
+            .run(ctx =>
+                terminationSafePostJson(
                     {
                         url: 'xh/setPrefs',
                         body: updates,
                         params: {clientUsername: XH.getUsername()}
                     },
                     ctx
-                );
-            });
+                )
+            );
     }
 
     //-------------------
@@ -140,7 +150,7 @@ export class PrefService extends HoistService {
     //-------------------
     @debounced(5 * SECONDS)
     private pushPendingBuffered() {
-        this.pushPendingAsync();
+        void this.pushPendingAsync();
     }
 
     private async loadPrefsAsync(ctx: CallContextLike) {

package/svc/TraceService.ts

@@ -4,10 +4,11 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistService, InitContext, PlainObject, XH, Span, FullSpanConfig} from '@xh/hoist/core';
+import {HoistService, PlainObject, XH, Span, FullSpanConfig} from '@xh/hoist/core';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {debounced, parseNameSource} from '@xh/hoist/utils/js';
-import {every, forEach, groupBy, isEmpty, isString, omitBy} from 'lodash';
+import {every, forEach, groupBy, isEmpty, isString, omitBy, takeRight} from 'lodash';
+import {terminationSafePostJson} from './impl/Fetch';
 
 /**
  * Client-side distributed tracing service for Hoist applications.
@@ -48,8 +49,14 @@ export class TraceService extends HoistService {
     //------------------
     // Initialization
     //------------------
-    override async initAsync(ctx: InitContext) {
-        window.addEventListener('beforeunload', () => this.pushPendingAsync());
+    override async initAsync() {
+        // Flush on page teardown while the page is still alive.
+        this.addReaction({
+            track: () => XH.pageState,
+            run: () => {
+                if (!XH.pageIsVisible) this.pushPendingInternalAsync();
+            }
+        });
     }
 
     //------------------
@@ -159,44 +166,11 @@ export class TraceService extends HoistService {
     }
 
     /**
-     * Push all pending spans to the server.
-     * Called on debounced interval and on page unload.
+     * Flush the queue of pending spans to the server.
+     * @internal - apps should generally allow this service to manage w/its internal debounce.
      */
     async pushPendingAsync() {
-        const spans = this._pending;
-        if (isEmpty(spans)) return;
-
-        this._pending = [];
-        try {
-            await XH.postJson({
-                url: 'xh/submitSpans',
-                body: spans.map(s => s.toJSON()),
-                params: {
-                    clientUsername: XH.getUsername()
-                }
-            });
-        } catch (e) {
-            if (isRetryableError(e)) {
-                // Transient failure - re-queue the batch (ahead of newer spans) to retry on the
-                // next flush, then bound the buffer in case the outage is prolonged.
-                this._pending = [...spans, ...this._pending];
-                this.enforceCap();
-                this.logError('Failed to push spans - will retry on next flush', e);
-            } else {
-                // Permanent (client-side) rejection - drop the batch so it can't deadlock the
-                // pipe (e.g. a session mismatch or oversized payload would fail forever).
-                this.logError('Server rejected span batch - dropping', e);
-            }
-        }
-    }
-
-    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
-    private enforceCap() {
-        const {_pending} = this,
-            {MAX_PENDING} = TraceService;
-        if (_pending.length > MAX_PENDING) {
-            _pending.splice(0, _pending.length - MAX_PENDING);
-        }
+        return this.pushPendingInternalAsync();
     }
 
     /**
@@ -237,7 +211,45 @@ export class TraceService extends HoistService {
 
     @debounced(5 * SECONDS)
     private pushPendingBuffered() {
-        void this.pushPendingAsync();
+        void this.pushPendingInternalAsync();
+    }
+
+    /** Flush all pending spans to the server. */
+    private async pushPendingInternalAsync() {
+        const spans = this._pending;
+        if (isEmpty(spans)) return;
+
+        // Clear synchronously with the capture, so overlapping flushes cannot post twice.
+        this._pending = [];
+        try {
+            await terminationSafePostJson({
+                url: 'xh/submitSpans',
+                body: spans.map(s => s.toJSON()),
+                params: {
+                    clientUsername: XH.getUsername()
+                }
+            });
+        } catch (e) {
+            if (isRetryableError(e)) {
+                // Transient failure - re-queue the batch (ahead of newer spans) to retry on the
+                // next flush, then bound the buffer in case the outage is prolonged.
+                this._pending = [...spans, ...this._pending];
+                this.enforceCap();
+                this.logError('Failed to push spans - will retry on next flush', e);
+            } else {
+                // Permanent (client-side) rejection - drop the batch so it can't deadlock the
+                // pipe (e.g. a session mismatch or oversized payload would fail forever).
+                this.logError('Server rejected span batch - dropping', e);
+            }
+        }
+    }
+
+    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
+    private enforceCap() {
+        const {MAX_PENDING} = TraceService;
+        if (this._pending.length > MAX_PENDING) {
+            this._pending = takeRight(this._pending, MAX_PENDING);
+        }
     }
 
     /**

package/svc/TrackService.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistService, InitContext, PlainObject, TrackOptions, XH} from '@xh/hoist/core';
+import {HoistService, PlainObject, TrackOptions, XH} from '@xh/hoist/core';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {debounced, stripTags, withDefault} from '@xh/hoist/utils/js';
 import {isEmpty, isNil, isString} from 'lodash';
+import {terminationSafePostJson} from './impl/Fetch';
 
 /**
  * Primary service for tracking any activity that an application's admins want to track.
@@ -23,8 +24,14 @@ export class TrackService extends HoistService {
     private oncePerSessionSent = new Map();
     private pending: PlainObject[] = [];
 
-    override async initAsync(ctx: InitContext) {
-        window.addEventListener('beforeunload', () => this.pushPendingAsync());
+    override async initAsync() {
+        // Flush on page teardown while the page is still alive
+        this.addReaction({
+            track: () => XH.pageState,
+            run: () => {
+                if (!XH.pageIsVisible) this.pushPendingAsync();
+            }
+        });
     }
 
     get conf(): ActivityTrackingConfig {
@@ -94,25 +101,29 @@ export class TrackService extends HoistService {
 
     /**
      * Flush the queue of pending activity tracking messages to the server.
-     * @internal - apps should generally allow this service to manage w/its internal debounce.
+     *
+     * Not typically called by applications.  Called automatically by the framework via a
+     * debounce and when the page is hidden/terminated.
      */
     async pushPendingAsync() {
         const {pending} = this;
         if (isEmpty(pending)) return;
 
+        // Clear synchronously with the capture, so overlapping flushes cannot post twice.
+        this.pending = [];
+
         await this.runner()
             .span('push')
-            .run(async ctx => {
-                this.pending = [];
-                await XH.postJson(
+            .run(ctx =>
+                terminationSafePostJson(
                     {
                         url: 'xh/track',
                         body: {entries: pending},
                         params: {clientUsername: XH.getUsername()}
                     },
                     ctx
-                );
-            });
+                )
+            );
     }
 
     //------------------
@@ -120,7 +131,7 @@ export class TrackService extends HoistService {
     //------------------
     @debounced(10 * SECONDS)
     private pushPendingBuffered() {
-        this.pushPendingAsync();
+        void this.pushPendingAsync();
     }
 
     private toServerJson(options: TrackOptions): PlainObject {

package/svc/impl/Fetch.ts

@@ -0,0 +1,33 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {CallContextLike, XH} from '@xh/hoist/core';
+import type {FetchOptions} from '../FetchService';
+
+/**
+ * Post a JSON body, using `fetch({keepalive: true})` when the page is no longer visible so the
+ * request can survive teardown (e.g. a flush as `XH.pageState` goes `hidden`/`frozen`/`terminated`).
+ *
+ * Keepalive bodies share a single browser-wide 64KB budget; if exceeded the request is never sent
+ * and we retry once uncapped (without keepalive), which still completes while the page is alive (the
+ * common `hidden` case). Real server errors are re-thrown, not re-posted.
+ *
+ * @internal
+ */
+export async function terminationSafePostJson(
+    opts: FetchOptions,
+    ctx?: CallContextLike
+): Promise<any> {
+    if (XH.pageIsVisible) return XH.postJson(opts, ctx);
+
+    try {
+        return await XH.postJson({...opts, fetchOpts: {...opts.fetchOpts, keepalive: true}}, ctx);
+    } catch (e: any) {
+        // Retry uncapped if keepalive was never sent (over-budget); re-throw real server errors.
+        if (e.isServerUnavailable) return XH.postJson(opts, ctx);
+        throw e;
+    }
+}

package/utils/js/ClipboardUtils.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {XH} from '@xh/hoist/core';
+import {Exception} from '@xh/hoist/exception';
 
 /**
  * Copy the given text to the system clipboard.
@@ -53,5 +53,5 @@ function copyViaExecCommand(text: string): void {
         selection.removeAllRanges();
         document.body.removeChild(span);
     }
-    if (!success) throw XH.exception('Clipboard copy not allowed');
+    if (!success) throw Exception.create('Clipboard copy not allowed');
 }

package/utils/js/TestUtils.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistProps} from '@xh/hoist/core';
+import type {HoistProps} from '@xh/hoist/core';
 import {isString} from 'lodash';
 
 /**

package/utils/react/LayoutPropUtils.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {LayoutProps, ResolvedLayoutProps, PlainObject} from '@xh/hoist/core';
+import type {LayoutProps, ResolvedLayoutProps, PlainObject} from '@xh/hoist/core';
 import {forOwn, isEmpty, isNumber, isString, isNil, omit, pick} from 'lodash';
 
 const XH_PAD_VAR = 'var(--xh-pad-px)';

package/utils/react/ReactUtils.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {Content} from '@xh/hoist/core';
+import type {Content} from '@xh/hoist/core';
 import {ReactElement, cloneElement, createElement, isValidElement} from 'react';
 import {isFunction, isNil} from 'lodash';
 import {renderToStaticMarkup as reactRenderToStaticMarkup} from 'react-dom/server';