cx 26.7.2 → 26.7.4

package/build/ui/Cx.d.ts

@@ -4,6 +4,8 @@ import { Instance } from "./Instance";
 import { ResolvedCultureInfo } from "./Culture";
 import { View } from "../data/View";
 import { Config } from "./Prop";
+export declare function enableSyncUpdateCoalescing(limit?: number): void;
+export declare function disableSyncUpdateCoalescing(): void;
 export interface CxProps {
     widget?: Config;
     items?: Config;
@@ -43,7 +45,7 @@ export declare class Cx extends VDOM.Component<CxProps, CxState> {
     deferCounter: number;
     pendingUpdateTimer?: NodeJS.Timeout;
     unsubscribeIdleRequest?: () => void;
-    stateUpdateDepth: number;
+    stateUpdateInFlight: boolean;
     constructor(props: CxProps);
     UNSAFE_componentWillReceiveProps(props: CxProps): void;
     getInstance(): Instance;
@@ -51,6 +53,8 @@ export declare class Cx extends VDOM.Component<CxProps, CxState> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     update(): void;
+    issueSyncSetState(): void;
+    scheduleStateUpdate(): void;
     onStateUpdateCompleted(): void;
     waitForIdle(): void;
     componentWillUnmount(): void;

package/build/ui/Cx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cx.d.ts","sourceRoot":"","sources":["../../src/ui/Cx.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAE7B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC,OAAO,EAA2D,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACzG,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,WAAW,OAAO;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,GAAG,CAAA;KAAE,KAAK,GAAG,CAAC;IACnD,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,WAAW,OAAO;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;CACb;AAED,qBAAa,EAAG,SAAQ,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpC,gBAAgB,EAAE,MAAM,CAAK;gBAEjB,KAAK,EAAE,OAAO;IA0C1B,gCAAgC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAsBtD,WAAW,IAAI,QAAQ;IAcvB,MAAM;IAkBN,iBAAiB,IAAI,IAAI;IAOzB,kBAAkB,IAAI,IAAI;IAM1B,MAAM,IAAI,IAAI;IAkCd,sBAAsB;IAWtB,WAAW,IAAI,IAAI;IAgBnB,oBAAoB,IAAI,IAAI;IAO5B,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO;IAe9D,wBAAwB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI;CAIzD"}
+{"version":3,"file":"Cx.d.ts","sourceRoot":"","sources":["../../src/ui/Cx.tsx"],"names":[],"mappings":"AAAA,6BAA6B;AAE7B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,OAAO,EAA2D,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACzG,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAgBhC,wBAAgB,0BAA0B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAG/D;AACD,wBAAgB,2BAA2B,IAAI,IAAI,CAElD;AASD,MAAM,WAAW,OAAO;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,GAAG,CAAA;KAAE,KAAK,GAAG,CAAC;IACnD,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,WAAW,OAAO;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;CACb;AAED,qBAAa,EAAG,SAAQ,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGpC,mBAAmB,EAAE,OAAO,CAAS;gBAEzB,KAAK,EAAE,OAAO;IA0C1B,gCAAgC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAsBtD,WAAW,IAAI,QAAQ;IAcvB,MAAM;IAkBN,iBAAiB,IAAI,IAAI;IAOzB,kBAAkB,IAAI,IAAI;IAM1B,MAAM,IAAI,IAAI;IAmCd,iBAAiB,IAAI,IAAI;IAezB,mBAAmB;IAgBnB,sBAAsB;IAatB,WAAW,IAAI,IAAI;IAgBnB,oBAAoB,IAAI,IAAI;IAc5B,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO;IAe9D,wBAAwB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI;CAIzD"}

package/build/ui/Cx.js

@@ -5,11 +5,37 @@ import { Instance } from "./Instance";
 import { RenderingContext } from "./RenderingContext";
 import { debug, appDataFlag } from "../util/Debug";
 import { Timing, now, appLoopFlag, vdomRenderFlag } from "../util/Timing";
-import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } from "./batchUpdates";
+import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted, hasBatchedUpdateSubscribers, } from "./batchUpdates";
 import { shallowEquals } from "../util/shallowEquals";
 import { PureContainer } from "./PureContainer";
 import { onIdleCallback } from "../util/onIdleCallback";
 import { getCurrentCulture, pushCulture, popCulture } from "./Culture";
+// On by default. Cx coalesces re-entrant synchronous updates and, once a burst grows deep, yields to a
+// microtask so React's global per-root nested-update counter resets before continuing -- preventing
+// "Maximum update depth exceeded" on large renders that write to the store while they render (e.g. a
+// several-hundred-page report). For updates that settle in a single render -- virtually all of them --
+// this is equivalent to the previous behavior; it only diverges under a deep re-entrant render burst.
+// If you suspect it causes trouble, opt out at app startup with disableSyncUpdateCoalescing() -- and
+// please report the issue so it can be fixed.
+let coalesceSyncUpdates = true;
+// Consecutive commit-phase re-render rounds allowed before Cx yields to a microtask. Kept under React's
+// ~50 nested-update limit (which is global to the root, not per component); the default trades a little
+// initial-render time for a safety margin. Override via enableSyncUpdateCoalescing(limit) if needed.
+let syncBurstLimit = 35;
+export function enableSyncUpdateCoalescing(limit) {
+    coalesceSyncUpdates = true;
+    if (limit != null)
+        syncBurstLimit = limit;
+}
+export function disableSyncUpdateCoalescing() {
+    coalesceSyncUpdates = false;
+}
+// Module-global because React's nested-update limit is global to the root, not per component. A large
+// initial render can re-render the root Cx and every detached page Restate hundreds of times in one
+// synchronous burst; once the burst grows past syncBurstLimit we yield so React's commit finishes
+// without a synchronously-scheduled follow-up (which resets its counter) before we render again.
+let activeSyncUpdates = 0; // Cx instances with a synchronous setState in flight
+let syncBurstRounds = 0; // commit-phase re-render rounds issued since the last yield / burst start
 export class Cx extends VDOM.Component {
     widget;
     store;
@@ -23,8 +49,9 @@ export class Cx extends VDOM.Component {
     deferCounter;
     pendingUpdateTimer;
     unsubscribeIdleRequest;
-    // 0 when no synchronous setState is in flight; >0 while one is pending (re-entrancy guard for update())
-    stateUpdateDepth = 0;
+    // true while a coalesced synchronous setState is in flight for this Cx (re-entrancy guard for update());
+    // only used when coalesceSyncUpdates is enabled
+    stateUpdateInFlight = false;
     constructor(props) {
         super(props);
         if (props.instance) {
@@ -46,10 +73,10 @@ export class Cx extends VDOM.Component {
         }
         this.state = {
             deferToken: 0,
+            data: props.subscribe ? this.store.getData() : null,
         };
         if (props.subscribe) {
             this.unsubscribe = this.store.subscribe(this.update.bind(this));
-            this.state.data = this.store.getData();
         }
         this.onStateUpdateCompleted = this.onStateUpdateCompleted.bind(this);
         this.flags = {};
@@ -114,47 +141,81 @@ export class Cx extends VDOM.Component {
         debug(appDataFlag, data);
         if (this.flags.preparing)
             this.flags.dirty = true;
-        // Synchronous path (while batching, or for `immediate` instances). At most one setState may be in flight
-        // per Cx: if one is already pending (stateUpdateDepth != 0) skip issuing another. Re-entrant setStates
-        // nested deep -- e.g. a large initial render that writes to the store while it renders -- are what trip
-        // React's "Maximum update depth exceeded"; coalescing them into a single in-flight update avoids that.
-        // The pending update's completion callback re-reads the store and renders again if it changed
-        // (see onStateUpdateCompleted), so no change is dropped.
+        // Synchronous path: while batching (incl. batchUpdatesAndNotify, which page-breaking relies on) or for
+        // `immediate` instances.
         else if (this.props.immediate || isBatchingUpdates()) {
-            if (this.stateUpdateDepth == 0) {
-                this.stateUpdateDepth = 1;
+            if (!coalesceSyncUpdates) {
+                // Opt-out path (disableSyncUpdateCoalescing()): the original behavior -- render synchronously
+                // for every update, no coalescing.
                 notifyBatchedUpdateStarting();
-                this.setState({ data: data }, this.onStateUpdateCompleted);
+                this.setState({ data: data }, notifyBatchedUpdateCompleted);
+                return;
             }
+            // Coalescing enabled: at most one setState may be in flight per Cx. Re-entrant update() calls (the
+            // render itself writing to the store, as happens throughout a large initial render) are skipped --
+            // the in-flight round re-reads the store on completion (see onStateUpdateCompleted), so nothing is
+            // dropped. Nesting these setStates deep is what trips React's "Maximum update depth exceeded".
+            if (this.stateUpdateInFlight)
+                return;
+            if (activeSyncUpdates === 0)
+                syncBurstRounds = 0; // fresh burst -> reset the shared round counter
+            activeSyncUpdates++;
+            this.stateUpdateInFlight = true;
+            notifyBatchedUpdateStarting();
+            this.issueSyncSetState();
         }
         else {
             // standard mode: coalesce sequential store commands into a single deferred update
-            if (!this.pendingUpdateTimer) {
-                notifyBatchedUpdateStarting();
-                this.pendingUpdateTimer = setTimeout(() => {
-                    delete this.pendingUpdateTimer;
-                    // read fresh data at fire time so the coalesced update renders the latest store state
-                    this.setState({ data: this.store.getData() }, notifyBatchedUpdateCompleted);
-                }, 0);
-            }
+            this.scheduleStateUpdate();
         }
     }
-    // Completion callback for the synchronous setState above. If the store changed while that update was
-    // rendering -- i.e. the render itself wrote to the store, as happens throughout a large initial render --
-    // render once more with the latest data, keeping this callback armed; otherwise the burst has settled, so
-    // clear the in-flight flag and report completion. Re-arming coalesces until the store reaches a fixpoint;
-    // a genuinely non-converging update loop is still caught by React's own max-update-depth guard.
-    onStateUpdateCompleted() {
-        let latestData = this.store.getData();
-        if (this.state.data === latestData) {
-            this.stateUpdateDepth = 0;
-            notifyBatchedUpdateCompleted();
+    // Issue the next synchronous render round (coalescing path). Once a burst grows past SYNC_BURST_LIMIT we
+    // render from a microtask instead, so React's commit finishes without a synchronously-scheduled follow-up
+    // and its global nested-update counter resets before we continue. The yield is suppressed while a
+    // batchUpdatesAndNotify is in flight: page-breaking convergence is shallow, so staying fully synchronous
+    // keeps its notify callback firing right after the change commits (and the counter never gets near 50).
+    issueSyncSetState() {
+        if (hasBatchedUpdateSubscribers() || ++syncBurstRounds <= syncBurstLimit) {
+            this.setState({ data: this.store.getData() }, this.onStateUpdateCompleted);
         }
         else {
-            this.stateUpdateDepth++;
-            this.setState({ data: latestData }, this.onStateUpdateCompleted);
+            queueMicrotask(() => {
+                // The event loop has turned, so React's global nested-update counter has reset; realign ours.
+                // Resetting here (not before scheduling) keeps the counter high through the rest of the current
+                // commit, so any other Cx re-arming in the same commit also yields instead of extending the chain.
+                syncBurstRounds = 0;
+                if (this.stateUpdateInFlight)
+                    this.setState({ data: this.store.getData() }, this.onStateUpdateCompleted);
+            });
+        }
+    }
+    scheduleStateUpdate() {
+        if (!this.pendingUpdateTimer) {
+            notifyBatchedUpdateStarting();
+            this.pendingUpdateTimer = setTimeout(() => {
+                delete this.pendingUpdateTimer;
+                // read fresh data at fire time so the coalesced update renders the latest store state
+                this.setState({ data: this.store.getData() }, notifyBatchedUpdateCompleted);
+            }, 0);
         }
     }
+    // Completion callback for the coalescing path's setState. React runs it after the commit, so the DOM
+    // already reflects this render. If the render wrote to the store, run another round -- keeping the
+    // batched-update accounting balanced (open the next round before closing this one) so `finished` never
+    // catches `pending` mid-convergence and batchUpdatesAndNotify resolves only at the store fixpoint.
+    // Otherwise the burst has settled: clear the in-flight flag and report completion.
+    onStateUpdateCompleted() {
+        if (this.state.data === this.store.getData()) {
+            // Converged: the store didn't change while this round rendered, so the DOM is up to date.
+            this.stateUpdateInFlight = false;
+            activeSyncUpdates--;
+            notifyBatchedUpdateCompleted();
+            return;
+        }
+        notifyBatchedUpdateStarting(); // open the next round
+        notifyBatchedUpdateCompleted(); // close this one
+        this.issueSyncSetState();
+    }
     waitForIdle() {
         if (!this.props.deferredUntilIdle)
             return;
@@ -162,12 +223,19 @@ export class Cx extends VDOM.Component {
             this.unsubscribeIdleRequest();
         let token = ++this.deferCounter;
         this.unsubscribeIdleRequest = onIdleCallback(() => {
-            this.setState({ deferToken: token }, this.onStateUpdateCompleted);
+            this.setState({ deferToken: token });
         }, {
             timeout: this.props.idleTimeout || 30000,
         });
     }
     componentWillUnmount() {
+        if (this.stateUpdateInFlight) {
+            // Release the open pending round so a waiting batchUpdatesAndNotify can settle instead of waiting
+            // out its fallback timeout, and keep the shared in-flight refcount balanced.
+            this.stateUpdateInFlight = false;
+            activeSyncUpdates--;
+            notifyBatchedUpdateCompleted();
+        }
         if (this.pendingUpdateTimer)
             clearTimeout(this.pendingUpdateTimer);
         if (this.unsubscribeIdleRequest)

package/build/ui/batchUpdates.d.ts

@@ -1,5 +1,6 @@
 export declare function batchUpdates(callback: () => void): void;
 export declare function isBatchingUpdates(): boolean;
+export declare function hasBatchedUpdateSubscribers(): boolean;
 export declare function notifyBatchedUpdateStarting(): void;
 export declare function notifyBatchedUpdateCompleted(): void;
 export declare function batchUpdatesAndNotify(callback: () => void, notifyCallback: (success: boolean) => void, timeout?: number): void;

package/build/ui/batchUpdates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"batchUpdates.d.ts","sourceRoot":"","sources":["../../src/ui/batchUpdates.ts"],"names":[],"mappings":"AAYA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAWvD;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED,wBAAgB,2BAA2B,IAAI,IAAI,CAIlD;AAED,wBAAgB,4BAA4B,IAAI,IAAI,CAMnD;AAED,wBAAgB,qBAAqB,CAClC,QAAQ,EAAE,MAAM,IAAI,EACpB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EAC1C,OAAO,GAAE,MAAa,GACtB,IAAI,CAwBN"}
+{"version":3,"file":"batchUpdates.d.ts","sourceRoot":"","sources":["../../src/ui/batchUpdates.ts"],"names":[],"mappings":"AAYA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAWvD;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAKD,wBAAgB,2BAA2B,IAAI,OAAO,CAErD;AAED,wBAAgB,2BAA2B,IAAI,IAAI,CAIlD;AAED,wBAAgB,4BAA4B,IAAI,IAAI,CAMnD;AAED,wBAAgB,qBAAqB,CAClC,QAAQ,EAAE,MAAM,IAAI,EACpB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EAC1C,OAAO,GAAE,MAAa,GACtB,IAAI,CAwBN"}

package/build/ui/batchUpdates.js

@@ -19,6 +19,12 @@ export function batchUpdates(callback) {
 export function isBatchingUpdates() {
     return isBatching > 0;
 }
+// True while a batchUpdatesAndNotify accumulator is subscribed, i.e. some caller is waiting for the
+// current batch's renders to finish. Cx uses this to stay fully synchronous during page-breaking so the
+// notify callback still fires right after the change commits.
+export function hasBatchedUpdateSubscribers() {
+    return !promiseSubscribers.isEmpty();
+}
 export function notifyBatchedUpdateStarting() {
     promiseSubscribers.execute((x) => {
         x.pending++;