cx 26.7.4 → 26.7.5

package/build/ui/Cx.d.ts

@@ -27,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;
@@ -40,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;
-    stateUpdateInFlight: boolean;
+    owedNotifications: Set<number>;
+    mounted: boolean;
+    burstRoundCounted: boolean;
     constructor(props: CxProps);
     UNSAFE_componentWillReceiveProps(props: CxProps): void;
     getInstance(): Instance;
@@ -53,12 +55,13 @@ export declare class Cx extends VDOM.Component<CxProps, CxState> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     update(): void;
-    issueSyncSetState(): 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;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"}
+{"version":3,"file":"Cx.d.ts","sourceRoot":"","sources":["../../src/ui/Cx.tsx"],"names":[],"mappings":"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"}

package/build/ui/Cx.js

@@ -5,37 +5,41 @@ 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, hasBatchedUpdateSubscribers, } from "./batchUpdates";
+import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } 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;
+// 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) {
-    coalesceSyncUpdates = true;
-    if (limit != null)
-        syncBurstLimit = limit;
+    syncBurstLimit = limit ?? defaultSyncBurstLimit;
 }
 export function disableSyncUpdateCoalescing() {
-    coalesceSyncUpdates = false;
+    syncBurstLimit = Infinity;
 }
-// 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
+// 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;
@@ -44,14 +48,18 @@ export class Cx extends VDOM.Component {
     flags;
     renderCount;
     unsubscribe;
-    componentDidCatch;
     forceUpdateCallback;
     deferCounter;
     pendingUpdateTimer;
     unsubscribeIdleRequest;
-    // 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;
+    // 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) {
@@ -78,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
@@ -121,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));
@@ -139,83 +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 (incl. batchUpdatesAndNotify, which page-breaking relies on) or for
         // `immediate` instances.
         else if (this.props.immediate || isBatchingUpdates()) {
-            if (!coalesceSyncUpdates) {
-                // Opt-out path (disableSyncUpdateCoalescing()): the original behavior -- render synchronously
-                // for every update, no coalescing.
-                notifyBatchedUpdateStarting();
-                this.setState({ data: data }, notifyBatchedUpdateCompleted);
-                return;
+            // 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.");
             }
-            // 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();
+            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();
         }
     }
-    // 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 {
-            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);
-            });
-        }
+    // 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 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;
@@ -229,13 +236,10 @@ export class Cx extends VDOM.Component {
         });
     }
     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();
-        }
+        // 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)
@@ -257,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,7 +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 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;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"}
+{"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,20 +20,22 @@ 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();
-}
+// 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);
@@ -45,6 +48,7 @@ export function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000)
     const update = {
         pending: 0,
         finished: 0,
+        watermark: updateSequence,
         complete: (success) => {
             if (!done) {
                 done = true;