cx 26.7.0 → 26.7.1

package/dist/ui.js

@@ -2094,6 +2094,30 @@ class LinkedListsNode {
 	}
 }
 
+// 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 =
+	typeof performance !== "undefined" && performance.now ? () => performance.now() : () => Date.now();
+let syncUpdateBurstCount = 0;
+let syncUpdateBurstLastAt = 0;
+function trackSyncUpdateBurst() {
+	let t = syncUpdateBurstNow();
+	if (t - syncUpdateBurstLastAt > SYNC_UPDATE_BURST_RESET_MS) syncUpdateBurstCount = 0;
+	syncUpdateBurstLastAt = t;
+	return ++syncUpdateBurstCount > SYNC_UPDATE_BURST_LIMIT;
+}
 class Cx extends VDOM.Component {
 	widget;
 	store;
@@ -2192,7 +2216,11 @@ 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) {
+		// `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(
 				{
@@ -2201,14 +2229,17 @@ class Cx extends VDOM.Component {
 				notifyBatchedUpdateCompleted,
 			);
 		} else {
-			//in standard mode sequential store commands are batched
+			//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: data,
+							data: this.props.limitSyncBursts ? this.store.getData() : data,
 						},
 						notifyBatchedUpdateCompleted,
 					);
@@ -2662,6 +2693,7 @@ class Restate extends PureContainerBase {
 				deferredUntilIdle: instance.data.deferredUntilIdle,
 				idleTimeout: instance.data.idleTimeout,
 				immediate: this.immediate,
+				limitSyncBursts: this.limitSyncBursts,
 				cultureInfo: instance.cultureInfo,
 			},
 			key,
@@ -2671,6 +2703,7 @@ class Restate extends PureContainerBase {
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
 Restate.prototype.immediate = false;
+Restate.prototype.limitSyncBursts = false;
 Restate.prototype.culture = null;
 const PrivateStore = Restate;
 class RestateStore extends Store {

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.1",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/ui/Cx.tsx

@@ -21,6 +21,11 @@ export interface CxProps {
    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;
@@ -35,6 +40,32 @@ export interface CxState {
    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;
@@ -160,16 +191,26 @@ export class Cx extends VDOM.Component<CxProps, CxState> {
       let data = this.store.getData();
       debug(appDataFlag, data);
       if (this.flags.preparing) this.flags.dirty = true;
-      else if (isBatchingUpdates() || this.props.immediate) {
+      // `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
+         //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;
-               this.setState({ data: data }, notifyBatchedUpdateCompleted);
+               //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);
          }
       }

package/src/ui/DataProxy.ts

@@ -1,55 +1,55 @@
-import { AccessorChain } from "../data";
-import { NestedDataView } from "../data/NestedDataView";
-import { StructuredProp, WritableProp } from "./Prop";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-
-export interface DataProxyConfig extends PureContainerConfig {
-   /** Data object with computed values to be exposed in the local store. */
-   data?: StructuredProp;
-
-   /** Binding to a value to be exposed under the `alias` name. */
-   value?: WritableProp<any>;
-
-   /** Alias name under which `value` is exposed in the local store. */
-   alias?: string | AccessorChain<any>;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that local store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export class DataProxy extends PureContainerBase<DataProxyConfig> {
-   declare data?: any;
-   declare alias?: string;
-   declare value?: any;
-   declare immutable: boolean;
-   declare sealed: boolean;
-
-   init() {
-      if (!this.data) this.data = {};
-
-      if (this.alias) this.data[this.alias] = this.value;
-
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new NestedDataView({
-         store: instance.parentStore,
-         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
-         immutable: this.immutable,
-         sealed: this.sealed,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-DataProxy.prototype.immutable = false;
-DataProxy.prototype.sealed = false;
+import { AccessorChain } from "../data";
+import { NestedDataView } from "../data/NestedDataView";
+import { StructuredProp, WritableProp } from "./Prop";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+
+export interface DataProxyConfig extends PureContainerConfig {
+   /** Data object with computed values to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Binding to a value to be exposed under the `alias` name. */
+   value?: WritableProp<any>;
+
+   /** Alias name under which `value` is exposed in the local store. */
+   alias?: string | AccessorChain<any>;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that local store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export class DataProxy extends PureContainerBase<DataProxyConfig> {
+   declare data?: any;
+   declare alias?: string;
+   declare value?: any;
+   declare immutable: boolean;
+   declare sealed: boolean;
+
+   init() {
+      if (!this.data) this.data = {};
+
+      if (this.alias) this.data[this.alias] = this.value;
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new NestedDataView({
+         store: instance.parentStore,
+         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+         immutable: this.immutable,
+         sealed: this.sealed,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;

package/src/ui/Rescope.ts

@@ -1,50 +1,50 @@
-import { Widget } from "./Widget";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { Binding } from "../data/Binding";
-import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-import { isObject } from "../util/isObject";
-import { StructuredProp } from "./Prop";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-
-export interface RescopeConfig extends PureContainerConfig {
-   bind: string | AccessorChain<any>;
-   rootName?: string | AccessorChain<any>;
-   rootAlias?: string | AccessorChain<any>;
-   data?: StructuredProp;
-}
-
-export class Rescope extends PureContainerBase<RescopeConfig> {
-   declare bind: string;
-   declare binding: any;
-   declare rootAlias?: string;
-   declare rootName: string;
-   declare data?: any;
-
-   init() {
-      this.binding = Binding.get(this.bind);
-      if (this.rootAlias) this.rootName = this.rootAlias;
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new ZoomIntoPropertyView({
-         store: instance.parentStore,
-         binding: this.binding,
-         rootName: this.rootName,
-         nestedData: isObject(this.data)
-            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
-            : undefined,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-
-Widget.alias("rescope", Rescope);
+import { Widget } from "./Widget";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+import { StructuredProp } from "./Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export interface RescopeConfig extends PureContainerConfig {
+   bind: string | AccessorChain<any>;
+   rootName?: string | AccessorChain<any>;
+   rootAlias?: string | AccessorChain<any>;
+   data?: StructuredProp;
+}
+
+export class Rescope extends PureContainerBase<RescopeConfig> {
+   declare bind: string;
+   declare binding: any;
+   declare rootAlias?: string;
+   declare rootName: string;
+   declare data?: any;
+
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : undefined,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);

package/src/ui/Restate.tsx

@@ -33,6 +33,12 @@ export interface RestateConfig extends PureContainerConfig {
    /** Set to `true` to disable batching of updates. */
    immediate?: boolean;
 
+   /** Cap re-entrant synchronous updates on the detached `Cx` this Restate renders: once a burst of
+    *  back-to-back updates gets too deep, defer the excess to the coalesced branch instead of updating
+    *  synchronously. Avoids React's "Maximum update depth exceeded" on very large synchronous render bursts.
+    *  Only applies in `detached` mode (a non-detached Restate has no `Cx` of its own). Off by default. */
+   limitSyncBursts?: boolean;
+
    /** Error handler callback. */
    onError?: (error: Error, instance: Instance) => void;
 
@@ -53,6 +59,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
    declare onError?: (error: Error, instance: Instance) => void;
    declare waitForIdle: boolean;
    declare immediate: boolean;
+   declare limitSyncBursts: boolean;
 
    declareData(...args: any[]) {
       return super.declareData(...args, {
@@ -138,6 +145,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
             deferredUntilIdle={instance.data.deferredUntilIdle}
             idleTimeout={instance.data.idleTimeout}
             immediate={this.immediate}
+            limitSyncBursts={this.limitSyncBursts}
             cultureInfo={instance.cultureInfo}
          />
       );
@@ -147,6 +155,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
 Restate.prototype.immediate = false;
+Restate.prototype.limitSyncBursts = false;
 Restate.prototype.culture = null;
 
 export const PrivateStore = Restate;

package/src/ui/exprHelpers.ts

@@ -1,96 +1,96 @@
-import { computable } from "../data/computable";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-import { Selector } from "../data/Selector";
-import { Format } from "../util/Format";
-import { expr } from "./expr";
-
-/** Returns a selector that converts the value to boolean using !! */
-export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !!x);
-}
-
-/** Returns a selector that checks if the value is falsy using ! */
-export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !x);
-}
-
-/** Returns a selector that checks if the value is strictly true (=== true) */
-export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === true);
-}
-
-/** Returns a selector that checks if the value is strictly false (=== false) */
-export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === false);
-}
-
-/** Returns a selector that checks if the value is not null or undefined (x != null) */
-export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => x != null);
-}
-
-/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
-export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x == null || x.length === 0);
-}
-
-/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
-export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x != null && x.length > 0);
-}
-
-/** Returns a selector that checks if the value is less than the given value */
-export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x < value);
-}
-
-/** Returns a selector that checks if the value is less than or equal to the given value */
-export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x <= value);
-}
-
-/** Returns a selector that checks if the value is greater than the given value */
-export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x > value);
-}
-
-/** Returns a selector that checks if the value is greater than or equal to the given value */
-export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x >= value);
-}
-
-/** Returns a selector that checks if the value equals the given value using == */
-export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x == value);
-}
-
-/** Returns a selector that checks if the value does not equal the given value using != */
-export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x != value);
-}
-
-/** Returns a selector that checks if the value strictly equals the given value using === */
-export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x === value);
-}
-
-/** Returns a selector that checks if the value strictly does not equal the given value using !== */
-export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x !== value);
-}
-
-/** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2"
- * @param arg - The accessor chain to the value
- * @param fmt - The format string
- * @param nullText - Optional text to display for null/undefined values
- * @example
- * format(m.price, "n;2") // formats as number with 2 decimal places
- * format(m.date, "d") // formats as date
- * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
- * format(m.value, "n;2", "N/A") // shows "N/A" for null values
- */
-export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
-   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
-   return computable(arg, (x) => Format.value(x, f));
-}
+import { computable } from "../data/computable";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Format } from "../util/Format";
+import { expr } from "./expr";
+
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !!x);
+}
+
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !x);
+}
+
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === true);
+}
+
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === false);
+}
+
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => x != null);
+}
+
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x == null || x.length === 0);
+}
+
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x != null && x.length > 0);
+}
+
+/** Returns a selector that checks if the value is less than the given value */
+export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x < value);
+}
+
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x <= value);
+}
+
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x > value);
+}
+
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x >= value);
+}
+
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x == value);
+}
+
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x != value);
+}
+
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x === value);
+}
+
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x !== value);
+}
+
+/** Returns a selector that formats the value using the specified format string.
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
+ * @example
+ * format(m.price, "n;2") // formats as number with 2 decimal places
+ * format(m.date, "d") // formats as date
+ * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
+ */
+export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
+   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+   return computable(arg, (x) => Format.value(x, f));
+}

package/src/widgets/DocumentTitle.ts

@@ -80,6 +80,8 @@ export class DocumentTitle extends Widget<DocumentTitleConfig> {
    }
 
    prepare(context: RenderingContext, instance: Instance): void {
+      if (typeof document == "undefined") return;
+
       if ((context as any).documentTitle.activeInstance == instance)
          document.title = (context as any).documentTitle.title;
    }