@xh/hoist 79.0.0-SNAPSHOT.1767027974015 → 79.0.0-SNAPSHOT.1767029174152

package/CHANGELOG.md

@@ -54,6 +54,8 @@
     * `RelativeTimestampProps.options` - provide directly as top-level props
 
 * Improved the efficiency and logging of MsalClient.
+* Improved protections against running stale versions of client app code.
+
 
 ### 📚 Libraries
 * react-grid-layout `1.5.0 → 2.1.1`

package/appcontainer/AppContainerModel.ts

@@ -40,7 +40,7 @@ import {
     TrackService,
     WebSocketService
 } from '@xh/hoist/svc';
-import {checkMinVersion, createSingleton, throwIf} from '@xh/hoist/utils/js';
+import {createSingleton, throwIf} from '@xh/hoist/utils/js';
 import {compact, isEmpty} from 'lodash';
 import {AboutDialogModel} from './AboutDialogModel';
 import {BannerSourceModel} from './BannerSourceModel';
@@ -60,7 +60,6 @@ import {AppStateModel} from './AppStateModel';
 import {PageStateModel} from './PageStateModel';
 import {RouterModel} from './RouterModel';
 import {installServicesAsync} from '../core/impl/InstallServices';
-import {MIN_HOIST_CORE_VERSION} from '../core/XH';
 
 /**
  * Root object for Framework GUI State.
@@ -237,13 +236,6 @@ export class AppContainerModel extends HoistModel {
             await installServicesAsync(TrackService);
             await installServicesAsync([EnvironmentService, PrefService, JsonBlobService]);
 
-            // Confirm hoist-core version after environment service loaded.
-            const hcVersion = XH.getEnv('hoistCoreVersion');
-            throwIf(
-                !checkMinVersion(hcVersion, MIN_HOIST_CORE_VERSION),
-                `This version of Hoist React requires the server to run Hoist Core ≥ v${MIN_HOIST_CORE_VERSION}. Version ${hcVersion} detected.`
-            );
-
             await installServicesAsync([
                 AlertBannerService,
                 AutoRefreshService,

package/build/types/cmp/grid/GridModel.d.ts

@@ -201,12 +201,27 @@ export interface GridConfig {
      * Flags for experimental features. These features are designed for early client-access and
      * testing, but are not yet part of the Hoist API.
      */
-    experimental?: PlainObject;
+    experimental?: GridExperimentalFlags;
     /** Extra app-specific data for the GridModel. */
     appData?: PlainObject;
     /** @internal */
     xhImpl?: boolean;
 }
+interface GridExperimentalFlags {
+    /**
+     * Set to true to enable more optimal row sorting in cases where only small subsets of rows are
+     * updated in configurations where rows have many siblings.
+     * See https://www.ag-grid.com/javascript-data-grid/grid-options/#reference-sort-deltaSort for
+     * more details on where this option may improve (or degrade) performance.
+     */
+    deltaSort?: boolean;
+    /**
+     * Set to true to disable scroll optimization for large grids, where we proactively update the
+     * row heights in ag-grid whenever the data changes to avoid hitching while quickly scrolling
+     * through large grids.
+     */
+    disableScrollOptimization?: boolean;
+}
 /**
  * Core Model for a Grid, specifying the grid's data store, column definitions,
  * sorting/grouping/selection state, and context menu configuration.
@@ -253,7 +268,7 @@ export declare class GridModel extends HoistModel {
     lockColumnGroups: boolean;
     headerMenuDisplay: 'always' | 'hover';
     colDefaults: Partial<ColumnSpec>;
-    experimental: PlainObject;
+    experimental: GridExperimentalFlags;
     onKeyDown: (e: KeyboardEvent) => void;
     onRowClicked: (e: RowClickedEvent) => void;
     onRowDoubleClicked: (e: RowDoubleClickedEvent) => void;
@@ -576,6 +591,10 @@ export declare class GridModel extends HoistModel {
      * Sorts ungrouped items to the bottom.
      */
     defaultGroupSortFn: (a: string, b: string) => number;
+    /** @internal */
+    get deltaSort(): boolean;
+    /** @internal */
+    get disableScrollOptimization(): boolean;
     private buildColumn;
     private autosizeColsInternalAsync;
     private gatherLeaves;
@@ -601,3 +620,4 @@ export declare class GridModel extends HoistModel {
     private createGroupBorderFn;
     private getDefaultStateForColumn;
 }
+export {};

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

@@ -28,8 +28,6 @@ export declare class EnvironmentService extends HoistService {
     get appEnvironment(): AppEnvironment;
     isProduction(): boolean;
     isTest(): boolean;
-    isMinHoistCoreVersion(version: string): boolean;
-    isMaxHoistCoreVersion(version: string): boolean;
     /**
      * Update critical environment information from server, including current app version + build,
      * upgrade prompt mode, and alert banner.
@@ -38,6 +36,7 @@ export declare class EnvironmentService extends HoistService {
      */
     pollServerAsync(): Promise<void>;
     constructor();
+    private ensureVersionRunnable;
     private startPolling;
     private setServerInfo;
     private get pollIntervalMs();

package/cmp/grid/Grid.ts

@@ -196,9 +196,10 @@ export class GridLocalModel extends HoistModel {
 
     private createDefaultAgOptions(): GridOptions {
         const {model} = this,
-            {clicksToEdit, selModel} = model;
+            {clicksToEdit, selModel, deltaSort} = model;
 
         let ret: GridOptions = {
+            deltaSort,
             animateRows: false,
             suppressColumnVirtualisation: !model.useVirtualColumns,
             getRowId: ({data}) => data.agId,
@@ -442,6 +443,7 @@ export class GridLocalModel extends HoistModel {
         // when node is rendered in viewport.
         const {model, agOptions} = this;
         return (
+            !model.disableScrollOptimization &&
             agOptions.getRowHeight &&
             !agOptions.rowHeight &&
             !model.getVisibleLeafColumns().some(c => c.autoHeight)
@@ -450,6 +452,7 @@ export class GridLocalModel extends HoistModel {
 
     applyScrollOptimization() {
         if (!this.useScrollOptimization) return;
+
         const {agApi} = this.model,
             {getRowHeight} = this.agOptions,
             params = {api: agApi, context: null} as any;
@@ -605,6 +608,14 @@ export class GridLocalModel extends HoistModel {
             }
         }
 
+        // Early out if the data hasn't actually changed
+        if (
+            isEqual(pinnedTopRowData, agGridModel.getPinnedTopRowData()) &&
+            isEqual(pinnedBottomRowData, agGridModel.getPinnedBottomRowData())
+        ) {
+            return;
+        }
+
         agApi.updateGridOptions({
             pinnedTopRowData,
             pinnedBottomRowData
@@ -690,7 +701,9 @@ export class GridLocalModel extends HoistModel {
             model.autosizeAsync({columns});
         }
 
-        model.noteAgExpandStateChange();
+        if (model.treeMode || !isEmpty(model.groupBy)) {
+            model.noteAgExpandStateChange();
+        }
 
         this.prevRs = newRs;
         this.applyScrollOptimization();

package/cmp/grid/GridModel.ts

@@ -357,7 +357,7 @@ export interface GridConfig {
      * Flags for experimental features. These features are designed for early client-access and
      * testing, but are not yet part of the Hoist API.
      */
-    experimental?: PlainObject;
+    experimental?: GridExperimentalFlags;
 
     /** Extra app-specific data for the GridModel. */
     appData?: PlainObject;
@@ -366,6 +366,23 @@ export interface GridConfig {
     xhImpl?: boolean;
 }
 
+interface GridExperimentalFlags {
+    /**
+     * Set to true to enable more optimal row sorting in cases where only small subsets of rows are
+     * updated in configurations where rows have many siblings.
+     * See https://www.ag-grid.com/javascript-data-grid/grid-options/#reference-sort-deltaSort for
+     * more details on where this option may improve (or degrade) performance.
+     */
+    deltaSort?: boolean;
+
+    /**
+     * Set to true to disable scroll optimization for large grids, where we proactively update the
+     * row heights in ag-grid whenever the data changes to avoid hitching while quickly scrolling
+     * through large grids.
+     */
+    disableScrollOptimization?: boolean;
+}
+
 /**
  * Core Model for a Grid, specifying the grid's data store, column definitions,
  * sorting/grouping/selection state, and context menu configuration.
@@ -420,7 +437,7 @@ export class GridModel extends HoistModel {
     lockColumnGroups: boolean;
     headerMenuDisplay: 'always' | 'hover';
     colDefaults: Partial<ColumnSpec>;
-    experimental: PlainObject;
+    experimental: GridExperimentalFlags;
     onKeyDown: (e: KeyboardEvent) => void;
     onRowClicked: (e: RowClickedEvent) => void;
     onRowDoubleClicked: (e: RowDoubleClickedEvent) => void;
@@ -1565,6 +1582,16 @@ export class GridModel extends HoistModel {
         return a.localeCompare(b);
     };
 
+    /** @internal */
+    get deltaSort() {
+        return !!this.experimental.deltaSort;
+    }
+
+    /** @internal */
+    get disableScrollOptimization() {
+        return !!this.experimental.disableScrollOptimization;
+    }
+
     //-----------------------
     // Implementation
     //-----------------------
@@ -1887,7 +1914,7 @@ export class GridModel extends HoistModel {
         return new GridFilterModel({bind: this.store, ...filterModel}, this);
     }
 
-    private parseExperimental(experimental) {
+    private parseExperimental(experimental: GridExperimentalFlags) {
         return {
             ...XH.getConf('xhGridExperimental', {}),
             ...experimental

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1767027974015",
+  "version": "79.0.0-SNAPSHOT.1767029174152",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/EnvironmentService.ts

@@ -11,10 +11,11 @@ import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import hoistPkg from '@xh/hoist/package.json';
 import {Timer} from '@xh/hoist/utils/async';
 import {MINUTES, SECONDS} from '@xh/hoist/utils/datetime';
-import {checkMaxVersion, checkMinVersion, deepFreeze} from '@xh/hoist/utils/js';
+import {checkMinVersion, deepFreeze, throwIf} from '@xh/hoist/utils/js';
 import {defaults, isFinite} from 'lodash';
 import mobxPkg from 'mobx/package.json';
 import {version as reactVersion} from 'react';
+import {MIN_HOIST_CORE_VERSION} from '../core/XH';
 
 /**
  * Load and report on the client and server environment, including software versions, timezones, and
@@ -78,6 +79,8 @@ export class EnvironmentService extends HoistService {
 
         this.setServerInfo(instanceName, serverEnv.appVersion, serverEnv.appBuild);
 
+        this.ensureVersionRunnable();
+
         this.pollConfig = pollConfig;
         this.addReaction({
             when: () => XH.appIsRunning,
@@ -104,14 +107,6 @@ export class EnvironmentService extends HoistService {
         return this.appEnvironment === 'Test';
     }
 
-    isMinHoistCoreVersion(version: string): boolean {
-        return checkMinVersion(this.get('hoistCoreVersion'), version);
-    }
-
-    isMaxHoistCoreVersion(version: string): boolean {
-        return checkMaxVersion(this.get('hoistCoreVersion'), version);
-    }
-
     /**
      * Update critical environment information from server, including current app version + build,
      * upgrade prompt mode, and alert banner.
@@ -165,6 +160,31 @@ export class EnvironmentService extends HoistService {
         makeObservable(this);
     }
 
+    private ensureVersionRunnable() {
+        const hcVersion = this.get('hoistCoreVersion'),
+            clientVersion = this.get('appVersion'),
+            serverVersion = this.serverVersion;
+
+        // Check for client/server mismatch version.  It's an ok transitory state *during* the
+        // client app lifetime, but app should *never* start this way, would indicate caching issue.
+        throwIf(
+            clientVersion != serverVersion,
+            XH.exception(
+                `The version of this client (${clientVersion}) is out of sync with the
+                available server (${serverVersion}). Please reload to continue.`
+            )
+        );
+
+        // Confirm hoist-core/react version mismatch (developer issue)
+        throwIf(
+            !checkMinVersion(hcVersion, MIN_HOIST_CORE_VERSION),
+            XH.exception(
+                `This version of Hoist React requires the server to run
+                Hoist Core ≥ v${MIN_HOIST_CORE_VERSION}. Version ${hcVersion} detected.`
+            )
+        );
+    }
+
     private startPolling() {
         this.pollTimer = Timer.create({
             runFn: () => this.pollServerAsync(),