cx 26.7.1 → 26.7.3

package/src/ui/Cx.tsx

@@ -1,427 +1,422 @@
-/** @jsxImportSource react */
-
-import { Widget, VDOM, getContent } from "./Widget";
-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 { shallowEquals } from "../util/shallowEquals";
-import { PureContainer } from "./PureContainer";
-import { onIdleCallback } from "../util/onIdleCallback";
-import { getCurrentCulture, pushCulture, popCulture, CultureInfo, ResolvedCultureInfo } from "./Culture";
-import { View } from "../data/View";
-import { Config } from "./Prop";
-
-export interface CxProps {
-   widget?: Config;
-   items?: Config;
-   store?: View;
-   instance?: Instance;
-   parentInstance?: Instance;
-   subscribe?: boolean;
-   immediate?: boolean;
-   /** Cap re-entrant synchronous updates: while batching, once a burst of back-to-back updates gets too
-    *  deep, defer the excess to the coalesced (setTimeout) branch instead of updating synchronously. Avoids
-    *  React's "Maximum update depth exceeded" on very large synchronous render bursts (e.g. the initial
-    *  render of a huge document). Off by default; has no effect on instances that don't set it. */
-   limitSyncBursts?: boolean;
-   deferredUntilIdle?: boolean;
-   idleTimeout?: number;
-   options?: any;
-   onError?: (error: Error, instance: Instance, info: any) => void;
-   params?: any;
-   contentFactory?: (props: { children: any }) => any;
-   cultureInfo?: ResolvedCultureInfo;
-}
-
-export interface CxState {
-   deferToken: number;
-   data?: any;
-}
-
-// Optional guard (opt in per-instance via the `limitSyncBursts` prop) against React's "Maximum update depth
-// exceeded" during very large synchronous render bursts. On the initial render of a large document the store
-// can be mutated thousands of times within a single React commit: every Instance.setState wraps store.notify()
-// in batchUpdates(), so isBatchingUpdates() stays true and a subscribed Cx takes its *synchronous* setState
-// branch on each notification. React counts those as nested render-phase updates and aborts past ~50
-// (surfacing as the recoverable "error during concurrent rendering"). When a Cx opts in, once back-to-back
-// updates exceed the limit it falls back to the coalesced setTimeout branch, which renders the latest store
-// data on the next tick. The counter is global (it mirrors React's global nested-update counter) and resets
-// after any idle gap. It is advanced on every update() of an opted-in Cx -- counting only the synchronous
-// branch would let the window reset whenever a deferred update lands between two synchronous ones, so the
-// counter would never reach the limit. performance.now() gives sub-ms resolution (Date.now() is the fallback;
-// Timing.now() can't be used here because it returns 0 in production).
-const SYNC_UPDATE_BURST_LIMIT = 30;
-const SYNC_UPDATE_BURST_RESET_MS = 10;
-const syncUpdateBurstNow: () => number =
-   typeof performance !== "undefined" && performance.now ? () => performance.now() : () => Date.now();
-let syncUpdateBurstCount = 0;
-let syncUpdateBurstLastAt = 0;
-
-function trackSyncUpdateBurst(): boolean {
-   let t = syncUpdateBurstNow();
-   if (t - syncUpdateBurstLastAt > SYNC_UPDATE_BURST_RESET_MS) syncUpdateBurstCount = 0;
-   syncUpdateBurstLastAt = t;
-   return ++syncUpdateBurstCount > SYNC_UPDATE_BURST_LIMIT;
-}
-
-export class Cx extends VDOM.Component<CxProps, CxState> {
-   widget: Widget;
-   store: View;
-   parentInstance?: Instance;
-   instance?: Instance;
-   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
-   renderCount: number;
-   unsubscribe?: () => void;
-   componentDidCatch?: (error: Error, info: any) => void;
-   forceUpdateCallback: () => void;
-   deferCounter: number;
-   pendingUpdateTimer?: NodeJS.Timeout;
-   unsubscribeIdleRequest?: () => void;
-
-   constructor(props: CxProps) {
-      super(props);
-
-      if (props.instance) {
-         this.widget = (props.instance as any).widget;
-         this.store = (props.instance as any).store;
-      } else {
-         this.widget = PureContainer.create({ items: props.widget || props.items });
-
-         if (props.parentInstance) {
-            this.parentInstance = props.parentInstance;
-            this.store = props.store || (this.parentInstance as any).store;
-         } else {
-            this.parentInstance = new Instance(this.widget, "0", undefined, props.store);
-            this.store = props.store!;
-         }
-
-         if (!this.store) throw new Error("Cx component requires a store.");
-      }
-
-      this.state = {
-         deferToken: 0,
-      };
-
-      if (props.subscribe) {
-         this.unsubscribe = this.store.subscribe(this.update.bind(this));
-         (this.state as any).data = this.store.getData();
-      }
-
-      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();
-   }
-
-   UNSAFE_componentWillReceiveProps(props: CxProps): void {
-      let newStore = props.instance
-         ? (props.instance as any).store
-         : props.store
-           ? props.store
-           : (props.parentInstance as any).store;
-
-      if (newStore != this.store) {
-         this.store = newStore;
-         if (this.unsubscribe) this.unsubscribe();
-         if (props.subscribe) this.unsubscribe = this.store.subscribe(this.update.bind(this));
-      }
-
-      if (props.subscribe) {
-         let data = this.store.getData();
-         if (data !== this.state.data) {
-            this.waitForIdle();
-            this.setState({ data });
-         }
-      }
-   }
-
-   getInstance(): Instance {
-      if (this.props.instance) return this.props.instance;
-
-      if (this.instance && (this.instance as any).widget === this.widget) {
-         if ((this.instance as any).parentStore != this.store) (this.instance as any).setParentStore(this.store);
-         return this.instance;
-      }
-
-      if (this.widget && this.parentInstance)
-         return (this.instance = (this.parentInstance as any).getDetachedChild(this.widget, 0, this.store));
-
-      throw new Error("Could not resolve a widget instance in the Cx component.");
-   }
-
-   render() {
-      if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter) return null;
-
-      let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
-
-      return (
-         <CxContext
-            instance={this.getInstance()}
-            flags={this.flags}
-            options={this.props.options}
-            buster={++this.renderCount}
-            contentFactory={this.props.contentFactory}
-            forceUpdate={this.forceUpdateCallback}
-            cultureInfo={cultureInfo}
-         />
-      );
-   }
-
-   componentDidMount(): void {
-      this.componentDidUpdate();
-
-      if (this.props.options && this.props.options.onPipeUpdate)
-         this.props.options.onPipeUpdate(this.update.bind(this));
-   }
-
-   componentDidUpdate(): void {
-      if (this.flags.dirty) {
-         this.update();
-      }
-   }
-
-   update(): void {
-      let data = this.store.getData();
-      debug(appDataFlag, data);
-      if (this.flags.preparing) this.flags.dirty = true;
-      // `immediate` always renders synchronously (its contract). Otherwise, while batching, a Cx that opts in
-      // via `limitSyncBursts` defers once a synchronous burst gets too deep (avoids React's max-update-depth).
-      // Without the flag the condition is unchanged -- trackSyncUpdateBurst() is never even called, so the
-      // guard has zero effect on instances that don't opt in.
-      else if (this.props.immediate || (isBatchingUpdates() && !(this.props.limitSyncBursts && trackSyncUpdateBurst()))) {
-         notifyBatchedUpdateStarting();
-         this.setState({ data: data }, notifyBatchedUpdateCompleted);
-      } else {
-         //in standard mode sequential store commands are batched -- as is any update that exceeds the
-         //synchronous burst limit above, which falls through here to avoid React's max-update-depth abort
-         if (!this.pendingUpdateTimer) {
-            notifyBatchedUpdateStarting();
-            this.pendingUpdateTimer = setTimeout(() => {
-               delete this.pendingUpdateTimer;
-               //for opted-in instances read fresh data at fire time so a deferred (coalesced) update isn't
-               //left stale after a burst; otherwise keep the original captured-data behavior unchanged
-               this.setState(
-                  { data: this.props.limitSyncBursts ? this.store.getData() : data },
-                  notifyBatchedUpdateCompleted,
-               );
-            }, 0);
-         }
-      }
-   }
-
-   waitForIdle(): void {
-      if (!this.props.deferredUntilIdle) return;
-
-      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
-
-      let token = ++this.deferCounter;
-      this.unsubscribeIdleRequest = onIdleCallback(
-         () => {
-            this.setState({ deferToken: token });
-         },
-         {
-            timeout: this.props.idleTimeout || 30000,
-         },
-      );
-   }
-
-   componentWillUnmount(): void {
-      if (this.pendingUpdateTimer) clearTimeout(this.pendingUpdateTimer);
-      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
-      if (this.unsubscribe) this.unsubscribe();
-      if (this.props.options && this.props.options.onPipeUpdate) this.props.options.onPipeUpdate(null);
-   }
-
-   shouldComponentUpdate(props: CxProps, state: CxState): boolean {
-      if (props.deferredUntilIdle && state.deferToken != this.deferCounter) return false;
-
-      return (
-         state !== this.state ||
-         !props.params ||
-         !shallowEquals(props.params, this.props.params) ||
-         props.instance !== this.props.instance ||
-         props.widget !== this.props.widget ||
-         props.store !== this.props.store ||
-         props.parentInstance !== this.props.parentInstance ||
-         props.cultureInfo !== this.props.cultureInfo
-      );
-   }
-
-   componentDidCatchHandler(error: Error, info: any): void {
-      this.flags.preparing = false;
-      this.props.onError!(error, this.getInstance(), info);
-   }
-}
-
-interface CxContextProps {
-   instance: Instance;
-   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
-   options?: any;
-   buster: number;
-   contentFactory?: (props: { children: any }) => any;
-   forceUpdate: () => void;
-   cultureInfo?: ResolvedCultureInfo;
-}
-
-class CxContext extends VDOM.Component<CxContextProps, {}> {
-   renderCount: number;
-   timings: any;
-   content: any;
-   renderingContext?: RenderingContext;
-
-   constructor(props: CxContextProps) {
-      super(props);
-      this.renderCount = 0;
-      this.UNSAFE_componentWillReceiveProps(props);
-   }
-
-   UNSAFE_componentWillReceiveProps(props: CxContextProps): void {
-      this.timings = {
-         start: now(),
-      };
-
-      let { instance, options, contentFactory } = props;
-      let count = 0,
-         visible,
-         context,
-         forceContinue;
-
-      //should not be tracked by parents for destroy
-      if (!(instance as any).detached)
-         throw new Error("The instance passed to a Cx component should be detached from its parent.");
-
-      if (this.props.instance !== instance && (this.props.instance as any).destroyTracked)
-         (this.props.instance as any).destroy();
-
-      this.props.flags.preparing = true;
-
-      if (this.props.cultureInfo) pushCulture(this.props.cultureInfo);
-
-      try {
-         do {
-            count++;
-            forceContinue = false;
-            context = new RenderingContext(options);
-            (context as any).forceUpdate = this.props.forceUpdate;
-            this.props.flags.dirty = false;
-            (instance as any).assignedRenderList = (context as any).getRootRenderList();
-            visible = (instance as any).scheduleExploreIfVisible(context);
-            if (visible) {
-               while (!(context as any).exploreStack.empty()) {
-                  let inst = (context as any).exploreStack.pop();
-                  //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
-                  (inst as any).explore(context);
-               }
-            } else if ((instance as any).destroyTracked) {
-               (instance as any).destroy();
-            }
-
-            if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
-               forceContinue = true;
-               continue;
-            }
-
-            if (visible) {
-               this.timings.afterExplore = now();
-
-               for (let i = 0; i < (context as any).prepareList.length; i++)
-                  (context as any).prepareList[i].prepare(context);
-               this.timings.afterPrepare = now();
-            }
-         } while (
-            forceContinue ||
-            (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8)
-         );
-
-         if (visible) {
-            //walk in reverse order so children get rendered first
-            let renderList = (context as any).getRootRenderList();
-            while (renderList) {
-               for (let i = renderList.data.length - 1; i >= 0; i--) {
-                  renderList.data[i].render(context);
-               }
-               renderList = renderList.right;
-            }
-
-            this.content = getContent((instance as any).vdom);
-            if (contentFactory) this.content = contentFactory({ children: this.content });
-            this.timings.afterRender = now();
-            for (let i = 0; i < (context as any).cleanupList.length; i++)
-               (context as any).cleanupList[i].cleanup(context);
-         } else {
-            this.content = null;
-            this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
-         }
-      } finally {
-         if (this.props.cultureInfo) popCulture(this.props.cultureInfo);
-      }
-
-      this.timings.beforeVDOMRender = now();
-      this.props.flags.preparing = false;
-      this.props.flags.rendering = true;
-      this.renderingContext = context;
-   }
-
-   render() {
-      return this.content;
-   }
-
-   componentDidMount(): void {
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate(): void {
-      this.props.flags.rendering = false;
-      this.timings.afterVDOMRender = now();
-
-      //let {instance} = this.props;
-      //instance.cleanup(this.renderingContext);
-
-      this.timings.afterCleanup = now();
-      this.renderCount++;
-
-      if (process.env.NODE_ENV !== "production") {
-         let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } =
-            this.timings;
-
-         Timing.log(
-            vdomRenderFlag,
-            this.renderCount,
-            "cx",
-            (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms",
-            "vdom",
-            (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms",
-         );
-
-         Timing.log(
-            appLoopFlag,
-            this.renderCount,
-            (this.renderingContext as any).options.name || "main",
-            "total",
-            (afterCleanup - start).toFixed(1) + "ms",
-            "explore",
-            (afterExplore - start).toFixed(1) + "ms",
-            "prepare",
-            (afterPrepare - afterExplore).toFixed(1),
-            "render",
-            (afterRender - afterPrepare).toFixed(1),
-            "vdom",
-            (afterVDOMRender - beforeVDOMRender).toFixed(1),
-            "cleanup",
-            (afterCleanup - afterVDOMRender).toFixed(1),
-         );
-      }
-   }
-
-   componentWillUnmount(): void {
-      let { instance } = this.props;
-      if ((instance as any).destroyTracked) (instance as any).destroy();
-   }
-}
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "./Widget";
+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 { shallowEquals } from "../util/shallowEquals";
+import { PureContainer } from "./PureContainer";
+import { onIdleCallback } from "../util/onIdleCallback";
+import { getCurrentCulture, pushCulture, popCulture, CultureInfo, ResolvedCultureInfo } from "./Culture";
+import { View } from "../data/View";
+import { Config } from "./Prop";
+
+export interface CxProps {
+   widget?: Config;
+   items?: Config;
+   store?: View;
+   instance?: Instance;
+   parentInstance?: Instance;
+   subscribe?: boolean;
+   immediate?: boolean;
+   deferredUntilIdle?: boolean;
+   idleTimeout?: number;
+   options?: any;
+   onError?: (error: Error, instance: Instance, info: any) => void;
+   params?: any;
+   contentFactory?: (props: { children: any }) => any;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+export interface CxState {
+   deferToken: number;
+   data?: any;
+}
+
+export class Cx extends VDOM.Component<CxProps, CxState> {
+   widget: Widget;
+   store: View;
+   parentInstance?: Instance;
+   instance?: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   renderCount: number;
+   unsubscribe?: () => void;
+   componentDidCatch?: (error: Error, info: any) => void;
+   forceUpdateCallback: () => void;
+   deferCounter: number;
+   pendingUpdateTimer?: NodeJS.Timeout;
+   unsubscribeIdleRequest?: () => void;
+   // 0 when no synchronous setState is in flight; >0 while one is pending (re-entrancy guard for update())
+   stateUpdateDepth: number = 0;
+
+   constructor(props: CxProps) {
+      super(props);
+
+      if (props.instance) {
+         this.widget = (props.instance as any).widget;
+         this.store = (props.instance as any).store;
+      } else {
+         this.widget = PureContainer.create({ items: props.widget || props.items });
+
+         if (props.parentInstance) {
+            this.parentInstance = props.parentInstance;
+            this.store = props.store || (this.parentInstance as any).store;
+         } else {
+            this.parentInstance = new Instance(this.widget, "0", undefined, props.store);
+            this.store = props.store!;
+         }
+
+         if (!this.store) throw new Error("Cx component requires a store.");
+      }
+
+      this.state = {
+         deferToken: 0,
+         data: props.subscribe ? this.store.getData() : null,
+      };
+
+      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();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxProps): void {
+      let newStore = props.instance
+         ? (props.instance as any).store
+         : props.store
+           ? props.store
+           : (props.parentInstance as any).store;
+
+      if (newStore != this.store) {
+         this.store = newStore;
+         if (this.unsubscribe) this.unsubscribe();
+         if (props.subscribe) this.unsubscribe = this.store.subscribe(this.update.bind(this));
+      }
+
+      if (props.subscribe) {
+         let data = this.store.getData();
+         if (data !== this.state.data) {
+            this.waitForIdle();
+            this.setState({ data });
+         }
+      }
+   }
+
+   getInstance(): Instance {
+      if (this.props.instance) return this.props.instance;
+
+      if (this.instance && this.instance.widget === this.widget) {
+         if (this.instance.parentStore != this.store) this.instance.setParentStore(this.store);
+         return this.instance;
+      }
+
+      if (this.widget && this.parentInstance)
+         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() {
+      if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter) return null;
+
+      let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
+
+      return (
+         <CxContext
+            instance={this.getInstance()}
+            flags={this.flags}
+            options={this.props.options}
+            buster={++this.renderCount}
+            contentFactory={this.props.contentFactory}
+            forceUpdate={this.forceUpdateCallback}
+            cultureInfo={cultureInfo}
+         />
+      );
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+
+      if (this.props.options && this.props.options.onPipeUpdate)
+         this.props.options.onPipeUpdate(this.update.bind(this));
+   }
+
+   componentDidUpdate(): void {
+      if (this.flags.dirty) {
+         this.update();
+      }
+   }
+
+   update(): void {
+      let data = this.store.getData();
+      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.
+      else if (this.props.immediate || isBatchingUpdates()) {
+         if (this.stateUpdateDepth == 0) {
+            this.stateUpdateDepth = 1;
+            notifyBatchedUpdateStarting();
+            this.setState({ data: data }, this.onStateUpdateCompleted);
+         }
+      } else {
+         // standard mode: coalesce sequential store commands into a single deferred update
+         this.scheduleStateUpdate();
+      }
+   }
+
+   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 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(): void {
+      if (!this.props.deferredUntilIdle) return;
+
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+
+      let token = ++this.deferCounter;
+      this.unsubscribeIdleRequest = onIdleCallback(
+         () => {
+            this.setState({ deferToken: token }, this.onStateUpdateCompleted);
+         },
+         {
+            timeout: this.props.idleTimeout || 30000,
+         },
+      );
+   }
+
+   componentWillUnmount(): void {
+      if (this.pendingUpdateTimer) clearTimeout(this.pendingUpdateTimer);
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+      if (this.unsubscribe) this.unsubscribe();
+      if (this.props.options && this.props.options.onPipeUpdate) this.props.options.onPipeUpdate(null);
+   }
+
+   shouldComponentUpdate(props: CxProps, state: CxState): boolean {
+      if (props.deferredUntilIdle && state.deferToken != this.deferCounter) return false;
+
+      return (
+         state !== this.state ||
+         !props.params ||
+         !shallowEquals(props.params, this.props.params) ||
+         props.instance !== this.props.instance ||
+         props.widget !== this.props.widget ||
+         props.store !== this.props.store ||
+         props.parentInstance !== this.props.parentInstance ||
+         props.cultureInfo !== this.props.cultureInfo
+      );
+   }
+
+   componentDidCatchHandler(error: Error, info: any): void {
+      this.flags.preparing = false;
+      this.props.onError!(error, this.getInstance(), info);
+   }
+}
+
+interface CxContextProps {
+   instance: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   options?: any;
+   buster: number;
+   contentFactory?: (props: { children: any }) => any;
+   forceUpdate: () => void;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+class CxContext extends VDOM.Component<CxContextProps, {}> {
+   renderCount: number;
+   timings: any;
+   content: any;
+   renderingContext?: RenderingContext;
+
+   constructor(props: CxContextProps) {
+      super(props);
+      this.renderCount = 0;
+      this.UNSAFE_componentWillReceiveProps(props);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxContextProps): void {
+      this.timings = {
+         start: now(),
+      };
+
+      let { instance, options, contentFactory } = props;
+      let count = 0,
+         visible,
+         context,
+         forceContinue;
+
+      //should not be tracked by parents for destroy
+      if (!(instance as any).detached)
+         throw new Error("The instance passed to a Cx component should be detached from its parent.");
+
+      if (this.props.instance !== instance && (this.props.instance as any).destroyTracked)
+         (this.props.instance as any).destroy();
+
+      this.props.flags.preparing = true;
+
+      if (this.props.cultureInfo) pushCulture(this.props.cultureInfo);
+
+      try {
+         do {
+            count++;
+            forceContinue = false;
+            context = new RenderingContext(options);
+            (context as any).forceUpdate = this.props.forceUpdate;
+            this.props.flags.dirty = false;
+            (instance as any).assignedRenderList = (context as any).getRootRenderList();
+            visible = (instance as any).scheduleExploreIfVisible(context);
+            if (visible) {
+               while (!(context as any).exploreStack.empty()) {
+                  let inst = (context as any).exploreStack.pop();
+                  //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
+                  (inst as any).explore(context);
+               }
+            } else if ((instance as any).destroyTracked) {
+               (instance as any).destroy();
+            }
+
+            if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
+               forceContinue = true;
+               continue;
+            }
+
+            if (visible) {
+               this.timings.afterExplore = now();
+
+               for (let i = 0; i < (context as any).prepareList.length; i++)
+                  (context as any).prepareList[i].prepare(context);
+               this.timings.afterPrepare = now();
+            }
+         } while (
+            forceContinue ||
+            (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8)
+         );
+
+         if (visible) {
+            //walk in reverse order so children get rendered first
+            let renderList = (context as any).getRootRenderList();
+            while (renderList) {
+               for (let i = renderList.data.length - 1; i >= 0; i--) {
+                  renderList.data[i].render(context);
+               }
+               renderList = renderList.right;
+            }
+
+            this.content = getContent((instance as any).vdom);
+            if (contentFactory) this.content = contentFactory({ children: this.content });
+            this.timings.afterRender = now();
+            for (let i = 0; i < (context as any).cleanupList.length; i++)
+               (context as any).cleanupList[i].cleanup(context);
+         } else {
+            this.content = null;
+            this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
+         }
+      } finally {
+         if (this.props.cultureInfo) popCulture(this.props.cultureInfo);
+      }
+
+      this.timings.beforeVDOMRender = now();
+      this.props.flags.preparing = false;
+      this.props.flags.rendering = true;
+      this.renderingContext = context;
+   }
+
+   render() {
+      return this.content;
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate(): void {
+      this.props.flags.rendering = false;
+      this.timings.afterVDOMRender = now();
+
+      //let {instance} = this.props;
+      //instance.cleanup(this.renderingContext);
+
+      this.timings.afterCleanup = now();
+      this.renderCount++;
+
+      if (process.env.NODE_ENV !== "production") {
+         let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } =
+            this.timings;
+
+         Timing.log(
+            vdomRenderFlag,
+            this.renderCount,
+            "cx",
+            (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms",
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms",
+         );
+
+         Timing.log(
+            appLoopFlag,
+            this.renderCount,
+            (this.renderingContext as any).options.name || "main",
+            "total",
+            (afterCleanup - start).toFixed(1) + "ms",
+            "explore",
+            (afterExplore - start).toFixed(1) + "ms",
+            "prepare",
+            (afterPrepare - afterExplore).toFixed(1),
+            "render",
+            (afterRender - afterPrepare).toFixed(1),
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(1),
+            "cleanup",
+            (afterCleanup - afterVDOMRender).toFixed(1),
+         );
+      }
+   }
+
+   componentWillUnmount(): void {
+      let { instance } = this.props;
+      if ((instance as any).destroyTracked) (instance as any).destroy();
+   }
+}