cx 26.7.3 → 26.7.5

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;
@@ -25,6 +27,7 @@ export interface CxProps {
 export interface CxState {
     deferToken: number;
     data?: any;
+    error?: boolean;
 }
 export declare class Cx extends VDOM.Component<CxProps, CxState> {
     widget: Widget;
@@ -38,12 +41,13 @@ export declare class Cx extends VDOM.Component<CxProps, CxState> {
     };
     renderCount: number;
     unsubscribe?: () => void;
-    componentDidCatch?: (error: Error, info: any) => void;
     forceUpdateCallback: () => void;
     deferCounter: number;
     pendingUpdateTimer?: NodeJS.Timeout;
     unsubscribeIdleRequest?: () => void;
-    stateUpdateDepth: number;
+    owedNotifications: Set<number>;
+    mounted: boolean;
+    burstRoundCounted: boolean;
     constructor(props: CxProps);
     UNSAFE_componentWillReceiveProps(props: CxProps): void;
     getInstance(): Instance;
@@ -51,11 +55,13 @@ export declare class Cx extends VDOM.Component<CxProps, CxState> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     update(): void;
+    issueStateUpdate(seq: number): void;
+    completeNotification(seq: number): void;
     scheduleStateUpdate(): void;
-    onStateUpdateCompleted(): void;
     waitForIdle(): void;
     componentWillUnmount(): void;
     shouldComponentUpdate(props: CxProps, state: CxState): boolean;
-    componentDidCatchHandler(error: Error, info: any): void;
+    static getDerivedStateFromError(): Partial<CxState>;
+    componentDidCatch(error: Error, info: any): void;
 }
 //# sourceMappingURL=Cx.d.ts.map

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;IAsBd,mBAAmB;IAgBnB,sBAAsB;IAatB,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":"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"}

package/build/ui/Cx.js

@@ -10,6 +10,36 @@ import { shallowEquals } from "../util/shallowEquals";
 import { PureContainer } from "./PureContainer";
 import { onIdleCallback } from "../util/onIdleCallback";
 import { getCurrentCulture, pushCulture, popCulture } from "./Culture";
+// On by default. Once a synchronous update burst grows deep, Cx starts issuing updates from microtasks
+// so React's global 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
+// rendering synchronously; 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.
+// Synchronous updates allowed within one burst before Cx switches to issuing updates from 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.
+const defaultSyncBurstLimit = 35;
+let syncBurstLimit = defaultSyncBurstLimit;
+// Microtask-issued updates allowed within one burst before Cx escalates to setTimeout. Deep enough that
+// only a store that never converges reaches it; timeouts let the event loop turn, so the page stays
+// responsive and batchUpdatesAndNotify fallback timers can fire instead of the tab hanging.
+let microtaskBurstLimit = 1000;
+export function enableSyncUpdateCoalescing(limit) {
+    syncBurstLimit = limit ?? defaultSyncBurstLimit;
+}
+export function disableSyncUpdateCoalescing() {
+    syncBurstLimit = Infinity;
+}
+// Module-global because React's nested-update limit is global to the root, not per component. The burst
+// counter resets only when all notifications settle (see completeNotification) -- tying the burst
+// window to unsettled work makes it immune to how React schedules the flushes. Legacy React chains
+// re-entrant updates synchronously within one task, but React 19 may run each round from its own
+// microtask, so no task/microtask boundary is a reliable reset point.
+let syncBurstRounds = 0; // updates issued in the current burst
+let outstandingNotifications = 0; // reported notifications not yet rendered, across all Cx instances
 export class Cx extends VDOM.Component {
     widget;
     store;
@@ -18,13 +48,18 @@ export class Cx extends VDOM.Component {
     flags;
     renderCount;
     unsubscribe;
-    componentDidCatch;
     forceUpdateCallback;
     deferCounter;
     pendingUpdateTimer;
     unsubscribeIdleRequest;
-    // 0 when no synchronous setState is in flight; >0 while one is pending (re-entrancy guard for update())
-    stateUpdateDepth = 0;
+    // store notifications reported to batchUpdatesAndNotify subscribers but not yet rendered and completed
+    owedNotifications = new Set();
+    // setState is not allowed before the component mounts; pre-mount notifications set flags.dirty instead
+    // and componentDidMount picks them up (see update())
+    mounted = false;
+    // true once this instance has contributed to syncBurstRounds for the current render round; cleared on
+    // render, so bursts are counted per round rather than per notification (see update())
+    burstRoundCounted = false;
     constructor(props) {
         super(props);
         if (props.instance) {
@@ -51,14 +86,11 @@ export class Cx extends VDOM.Component {
         if (props.subscribe) {
             this.unsubscribe = this.store.subscribe(this.update.bind(this));
         }
-        this.onStateUpdateCompleted = this.onStateUpdateCompleted.bind(this);
         this.flags = {};
         this.renderCount = 0;
-        if (props.onError)
-            this.componentDidCatch = this.componentDidCatchHandler.bind(this);
         this.forceUpdateCallback = this.forceUpdate.bind(this);
-        this.deferCounter = 0;
-        this.waitForIdle();
+        // deferredUntilIdle content stays hidden until the idle callback scheduled on mount bumps the token
+        this.deferCounter = props.deferredUntilIdle ? 1 : 0;
     }
     UNSAFE_componentWillReceiveProps(props) {
         let newStore = props.instance
@@ -94,12 +126,21 @@ export class Cx extends VDOM.Component {
         throw new Error("Could not resolve a widget instance in the Cx component.");
     }
     render() {
+        this.burstRoundCounted = false;
+        // an error was captured and is being dispatched to the onError callback (see componentDidCatch);
+        // render nothing until the callback repairs the state
+        if (this.state.error)
+            return null;
         if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter)
             return null;
         let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
         return (_jsx(CxContext, { instance: this.getInstance(), flags: this.flags, options: this.props.options, buster: ++this.renderCount, contentFactory: this.props.contentFactory, forceUpdate: this.forceUpdateCallback, cultureInfo: cultureInfo }));
     }
     componentDidMount() {
+        this.mounted = true;
+        // schedule the deferredUntilIdle reveal here rather than in the constructor -- the idle callback
+        // could otherwise fire before the component mounts and issue a setState React does not allow yet
+        this.waitForIdle();
         this.componentDidUpdate();
         if (this.props.options && this.props.options.onPipeUpdate)
             this.props.options.onPipeUpdate(this.update.bind(this));
@@ -112,55 +153,76 @@ export class Cx extends VDOM.Component {
     update() {
         let data = this.store.getData();
         debug(appDataFlag, data);
-        if (this.flags.preparing)
+        if (this.flags.preparing || !this.mounted)
             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;
-                notifyBatchedUpdateStarting();
-                this.setState({ data: data }, this.onStateUpdateCompleted);
+            // Every notification is reported to batchUpdatesAndNotify subscribers up front and completed only
+            // once the setState that renders it commits, so notify callbacks never fire before the DOM reflects
+            // the change. Each notification always gets its own setState; only its timing escalates as the
+            // burst grows: synchronous at first, then from a microtask (lets React's commit finish so its
+            // global nested-update counter resets instead of tripping "Maximum update depth exceeded"), and
+            // finally from a timeout (lets the event loop turn, so a store that never converges degrades to a
+            // responsive page instead of a frozen tab).
+            let seq = notifyBatchedUpdateStarting();
+            this.owedNotifications.add(seq);
+            outstandingNotifications++;
+            // Count render rounds rather than notifications: only the first notification an instance
+            // receives per render round bumps the shared depth (the flag clears on render). This tracks
+            // React's nested-commit count -- the thing the escalation must stay under -- so a round that
+            // writes many values doesn't burn through the budget in one go.
+            if (!this.burstRoundCounted) {
+                this.burstRoundCounted = true;
+                ++syncBurstRounds;
+                if (process.env.NODE_ENV !== "production" && syncBurstRounds === microtaskBurstLimit + 1)
+                    console.error("Cx: store updates are not converging after " +
+                        microtaskBurstLimit +
+                        " render rounds -- possible update loop. Updates are now issued from timeouts to keep the page responsive. Look for code that writes a new value to the store on every render.");
             }
+            if (syncBurstRounds <= syncBurstLimit)
+                this.issueStateUpdate(seq);
+            else if (syncBurstRounds <= microtaskBurstLimit)
+                queueMicrotask(() => this.issueStateUpdate(seq));
+            else
+                setTimeout(() => this.issueStateUpdate(seq), 0);
         }
         else {
             // standard mode: coalesce sequential store commands into a single deferred update
             this.scheduleStateUpdate();
         }
     }
+    // Render the latest store data and report the notification completed once the commit is done, so
+    // batchUpdatesAndNotify resolves only when the DOM reflects the store.
+    issueStateUpdate(seq) {
+        // skip notifications no longer owed -- unmount may have already released them
+        if (!this.owedNotifications.has(seq))
+            return;
+        this.setState({ data: this.store.getData() }, () => this.completeNotification(seq));
+    }
+    completeNotification(seq) {
+        // skip notifications no longer owed -- unmount may have already released them
+        if (!this.owedNotifications.delete(seq))
+            return;
+        outstandingNotifications--;
+        notifyBatchedUpdateCompleted(seq);
+        // everything settled -- the next burst starts fresh, and so does React's nested-update counter
+        // (the commit that settled the last notification ends without scheduling further synchronous work)
+        if (outstandingNotifications === 0)
+            syncBurstRounds = 0;
+    }
     scheduleStateUpdate() {
         if (!this.pendingUpdateTimer) {
-            notifyBatchedUpdateStarting();
+            let seq = notifyBatchedUpdateStarting();
+            this.owedNotifications.add(seq);
+            outstandingNotifications++;
             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);
+                this.setState({ data: this.store.getData() }, () => this.completeNotification(seq));
             }, 0);
         }
     }
-    // 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();
-        notifyBatchedUpdateCompleted();
-        if (this.state.data === latestData) {
-            this.stateUpdateDepth = 0;
-        }
-        else {
-            this.stateUpdateDepth++;
-            if (this.stateUpdateDepth < 20 && isBatchingUpdates())
-                this.setState({ data: latestData }, this.onStateUpdateCompleted);
-            else
-                this.scheduleStateUpdate();
-        }
-    }
     waitForIdle() {
         if (!this.props.deferredUntilIdle)
             return;
@@ -168,12 +230,16 @@ 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() {
+        // Release notifications that will never render so a waiting batchUpdatesAndNotify can settle instead
+        // of waiting out its fallback timeout.
+        for (let seq of this.owedNotifications)
+            this.completeNotification(seq);
         if (this.pendingUpdateTimer)
             clearTimeout(this.pendingUpdateTimer);
         if (this.unsubscribeIdleRequest)
@@ -195,9 +261,22 @@ export class Cx extends VDOM.Component {
             props.parentInstance !== this.props.parentInstance ||
             props.cultureInfo !== this.props.cultureInfo);
     }
-    componentDidCatchHandler(error, info) {
+    // Render null for the failed subtree while the error is dispatched to componentDidCatch below --
+    // returning a state update here is what React expects of an error boundary (rendering the broken
+    // children again would just rethrow).
+    static getDerivedStateFromError() {
+        return { error: true };
+    }
+    componentDidCatch(error, info) {
         this.flags.preparing = false;
+        // without an onError callback this instance is not an error boundary -- rethrow so the error
+        // reaches the nearest ancestor boundary, matching the behavior before getDerivedStateFromError
+        // was introduced
+        if (!this.props.onError)
+            throw error;
         this.props.onError(error, this.getInstance(), info);
+        // the callback had a chance to repair the state (e.g. replace the failing content) -- resume rendering
+        this.setState({ error: false });
     }
 }
 class CxContext extends VDOM.Component {

package/build/ui/batchUpdates.d.ts

@@ -1,6 +1,6 @@
 export declare function batchUpdates(callback: () => void): void;
 export declare function isBatchingUpdates(): boolean;
-export declare function notifyBatchedUpdateStarting(): void;
-export declare function notifyBatchedUpdateCompleted(): void;
+export declare function notifyBatchedUpdateStarting(): number;
+export declare function notifyBatchedUpdateCompleted(seq: number): void;
 export declare function batchUpdatesAndNotify(callback: () => void, notifyCallback: (success: boolean) => void, timeout?: number): void;
 //# sourceMappingURL=batchUpdates.d.ts.map

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":"AAcA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAWvD;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAID,wBAAgB,2BAA2B,IAAI,MAAM,CAMpD;AAED,wBAAgB,4BAA4B,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAS9D;AAED,wBAAgB,qBAAqB,CAClC,QAAQ,EAAE,MAAM,IAAI,EACpB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EAC1C,OAAO,GAAE,MAAa,GACtB,IAAI,CAyBN"}

package/build/ui/batchUpdates.js

@@ -1,6 +1,7 @@
 import { VDOM } from "./VDOM";
 import { SubscriberList } from "../util/SubscriberList";
 let isBatching = 0;
+let updateSequence = 0;
 let promiseSubscribers = new SubscriberList();
 export function batchUpdates(callback) {
     if (VDOM.DOM.unstable_batchedUpdates)
@@ -19,14 +20,22 @@ export function batchUpdates(callback) {
 export function isBatchingUpdates() {
     return isBatching > 0;
 }
+// Returns a sequence number identifying the update; pass it to notifyBatchedUpdateCompleted once the
+// update is rendered.
 export function notifyBatchedUpdateStarting() {
+    let seq = ++updateSequence;
     promiseSubscribers.execute((x) => {
         x.pending++;
     });
+    return seq;
 }
-export function notifyBatchedUpdateCompleted() {
+export function notifyBatchedUpdateCompleted(seq) {
     promiseSubscribers.execute((x) => {
         let cb = x;
+        // ignore updates that started before this subscriber attached -- counting them would let the notify
+        // callback fire before the updates the subscriber is actually waiting on are rendered
+        if (seq <= cb.watermark)
+            return;
         cb.finished++;
         if (cb.finished >= cb.pending)
             cb.complete(true);
@@ -39,6 +48,7 @@ export function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000)
     const update = {
         pending: 0,
         finished: 0,
+        watermark: updateSequence,
         complete: (success) => {
             if (!done) {
                 done = true;