cx 26.7.0 → 26.7.2

package/dist/ui.js

@@ -2107,6 +2107,8 @@ 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;
 	constructor(props) {
 		super(props);
 		if (props.instance) {
@@ -2132,6 +2134,7 @@ class Cx extends VDOM.Component {
 			this.unsubscribe = this.store.subscribe(this.update.bind(this));
 			this.state.data = this.store.getData();
 		}
+		this.onStateUpdateCompleted = this.onStateUpdateCompleted.bind(this);
 		this.flags = {};
 		this.renderCount = 0;
 		if (props.onError) this.componentDidCatch = this.componentDidCatchHandler.bind(this);
@@ -2163,7 +2166,7 @@ class Cx extends VDOM.Component {
 			return this.instance;
 		}
 		if (this.widget && this.parentInstance)
-			return (this.instance = this.parentInstance.getDetachedChild(this.widget, 0, this.store));
+			return (this.instance = this.parentInstance.getDetachedChild(this.widget, "0", this.store));
 		throw new Error("Could not resolve a widget instance in the Cx component.");
 	}
 	render() {
@@ -2192,23 +2195,33 @@ class Cx extends VDOM.Component {
 		let data = this.store.getData();
 		debug(appDataFlag, data);
 		if (this.flags.preparing) this.flags.dirty = true;
-		else if (isBatchingUpdates() || this.props.immediate) {
-			notifyBatchedUpdateStarting();
-			this.setState(
-				{
-					data: data,
-				},
-				notifyBatchedUpdateCompleted,
-			);
+		// 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.
+		else if (this.props.immediate || isBatchingUpdates()) {
+			if (this.stateUpdateDepth == 0) {
+				this.stateUpdateDepth = 1;
+				notifyBatchedUpdateStarting();
+				this.setState(
+					{
+						data: data,
+					},
+					this.onStateUpdateCompleted,
+				);
+			}
 		} else {
-			//in standard mode sequential store commands are batched
+			// 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: data,
+							data: this.store.getData(),
 						},
 						notifyBatchedUpdateCompleted,
 					);
@@ -2216,15 +2229,38 @@ class Cx extends VDOM.Component {
 			}
 		}
 	}
+	// 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();
+		} else {
+			this.stateUpdateDepth++;
+			this.setState(
+				{
+					data: latestData,
+				},
+				this.onStateUpdateCompleted,
+			);
+		}
+	}
 	waitForIdle() {
 		if (!this.props.deferredUntilIdle) return;
 		if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
 		let token = ++this.deferCounter;
 		this.unsubscribeIdleRequest = onIdleCallback(
 			() => {
-				this.setState({
-					deferToken: token,
-				});
+				this.setState(
+					{
+						deferToken: token,
+					},
+					this.onStateUpdateCompleted,
+				);
 			},
 			{
 				timeout: this.props.idleTimeout || 30000,

package/dist/widgets.js

@@ -1124,6 +1124,7 @@ class DocumentTitle extends Widget {
 		super.explore(context, instance);
 	}
 	prepare(context, instance) {
+		if (typeof document == "undefined") return;
 		if (context.documentTitle.activeInstance == instance) document.title = context.documentTitle.title;
 	}
 	render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.7.0",
+  "version": "26.7.2",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {