cx 26.0.11 → 26.0.13

package/src/ui/exprHelpers.spec.ts

@@ -0,0 +1,379 @@
+import {
+   truthy,
+   falsy,
+   isTrue,
+   isFalse,
+   hasValue,
+   isEmpty,
+   isNonEmpty,
+   lessThan,
+   lessThanOrEqual,
+   greaterThan,
+   greaterThanOrEqual,
+   equal,
+   notEqual,
+   strictEqual,
+   strictNotEqual,
+} from "./exprHelpers";
+import assert from "assert";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+interface Model {
+   value: number;
+   name: string;
+   flag: boolean;
+   nullable: string | null | undefined;
+   items: string[];
+}
+
+describe("exprHelpers", function () {
+   const m = createAccessorModelProxy<Model>();
+
+   describe("truthy", function () {
+      it("returns true for truthy values", function () {
+         const selector = truthy(m.value);
+         assert.strictEqual(selector({ value: 1 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns false for falsy values", function () {
+         const selector = truthy(m.value);
+         assert.strictEqual(selector({ value: 0 }), false);
+      });
+
+      it("returns true for non-empty strings", function () {
+         const selector = truthy(m.name);
+         assert.strictEqual(selector({ name: "hello" }), true);
+      });
+
+      it("returns false for empty strings", function () {
+         const selector = truthy(m.name);
+         assert.strictEqual(selector({ name: "" }), false);
+      });
+
+      it("returns false for null", function () {
+         const selector = truthy(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+   });
+
+   describe("falsy", function () {
+      it("returns false for truthy values", function () {
+         const selector = falsy(m.flag);
+         assert.strictEqual(selector({ flag: true }), false);
+      });
+
+      it("returns true for falsy values", function () {
+         const selector = falsy(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns true for null", function () {
+         const selector = falsy(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), true);
+      });
+
+      it("returns true for zero", function () {
+         const selector = falsy(m.value);
+         assert.strictEqual(selector({ value: 0 }), true);
+      });
+
+      it("returns true for empty string", function () {
+         const selector = falsy(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+   });
+
+   describe("isTrue", function () {
+      it("returns true only for strictly true", function () {
+         const selector = isTrue(m.flag);
+         assert.strictEqual(selector({ flag: true }), true);
+      });
+
+      it("returns false for truthy values that are not true", function () {
+         const selector = isTrue(m.value);
+         assert.strictEqual(selector({ value: 1 }), false);
+         assert.strictEqual(selector({ value: "true" }), false);
+      });
+
+      it("returns false for false", function () {
+         const selector = isTrue(m.flag);
+         assert.strictEqual(selector({ flag: false }), false);
+      });
+   });
+
+   describe("isFalse", function () {
+      it("returns true only for strictly false", function () {
+         const selector = isFalse(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns false for falsy values that are not false", function () {
+         const selector = isFalse(m.value);
+         assert.strictEqual(selector({ value: 0 }), false);
+         assert.strictEqual(selector({ value: null }), false);
+         assert.strictEqual(selector({ value: "" }), false);
+      });
+
+      it("returns false for true", function () {
+         const selector = isFalse(m.flag);
+         assert.strictEqual(selector({ flag: true }), false);
+      });
+   });
+
+   describe("hasValue", function () {
+      it("returns true for defined values", function () {
+         const selector = hasValue(m.value);
+         assert.strictEqual(selector({ value: 0 }), true);
+         assert.strictEqual(selector({ value: 1 }), true);
+      });
+
+      it("returns true for empty string", function () {
+         const selector = hasValue(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+
+      it("returns true for false", function () {
+         const selector = hasValue(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns false for null", function () {
+         const selector = hasValue(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+
+      it("returns false for undefined", function () {
+         const selector = hasValue(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("isEmpty", function () {
+      it("returns true for empty string", function () {
+         const selector = isEmpty(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+
+      it("returns false for non-empty string", function () {
+         const selector = isEmpty(m.name);
+         assert.strictEqual(selector({ name: "hello" }), false);
+      });
+
+      it("returns true for empty array", function () {
+         const selector = isEmpty(m.items);
+         assert.strictEqual(selector({ items: [] }), true);
+      });
+
+      it("returns false for non-empty array", function () {
+         const selector = isEmpty(m.items);
+         assert.strictEqual(selector({ items: ["a", "b"] }), false);
+      });
+
+      it("returns true for null", function () {
+         const selector = isEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), true);
+      });
+
+      it("returns true for undefined", function () {
+         const selector = isEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+
+   describe("isNonEmpty", function () {
+      it("returns false for empty string", function () {
+         const selector = isNonEmpty(m.name);
+         assert.strictEqual(selector({ name: "" }), false);
+      });
+
+      it("returns true for non-empty string", function () {
+         const selector = isNonEmpty(m.name);
+         assert.strictEqual(selector({ name: "hello" }), true);
+      });
+
+      it("returns false for empty array", function () {
+         const selector = isNonEmpty(m.items);
+         assert.strictEqual(selector({ items: [] }), false);
+      });
+
+      it("returns true for non-empty array", function () {
+         const selector = isNonEmpty(m.items);
+         assert.strictEqual(selector({ items: ["a", "b"] }), true);
+      });
+
+      it("returns false for null", function () {
+         const selector = isNonEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+
+      it("returns false for undefined", function () {
+         const selector = isNonEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("lessThan", function () {
+      it("returns true when value is less than target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 9 }), true);
+      });
+
+      it("returns false when value is equal to target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns false when value is greater than target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), false);
+         assert.strictEqual(selector({ value: 100 }), false);
+      });
+   });
+
+   describe("lessThanOrEqual", function () {
+      it("returns true when value is less than target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 9 }), true);
+      });
+
+      it("returns true when value is equal to target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value is greater than target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), false);
+         assert.strictEqual(selector({ value: 100 }), false);
+      });
+   });
+
+   describe("greaterThan", function () {
+      it("returns true when value is greater than target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns false when value is equal to target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns false when value is less than target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 9 }), false);
+      });
+   });
+
+   describe("greaterThanOrEqual", function () {
+      it("returns true when value is greater than target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns true when value is equal to target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value is less than target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 9 }), false);
+      });
+   });
+
+   describe("equal (loose equality)", function () {
+      it("returns true when value equals target", function () {
+         const selector = equal(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value does not equal target", function () {
+         const selector = equal(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 11 }), false);
+      });
+
+      it("works with string values", function () {
+         const selector = equal(m.name, "hello");
+         assert.strictEqual(selector({ name: "hello" }), true);
+         assert.strictEqual(selector({ name: "world" }), false);
+      });
+
+      it("uses loose equality (null == undefined)", function () {
+         const selector = equal(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), true);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+
+   describe("notEqual (loose inequality)", function () {
+      it("returns false when value equals target", function () {
+         const selector = notEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns true when value does not equal target", function () {
+         const selector = notEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 11 }), true);
+      });
+
+      it("works with string values", function () {
+         const selector = notEqual(m.name, "hello");
+         assert.strictEqual(selector({ name: "hello" }), false);
+         assert.strictEqual(selector({ name: "world" }), true);
+      });
+
+      it("uses loose inequality (null == undefined)", function () {
+         const selector = notEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), false);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("strictEqual", function () {
+      it("returns true when value strictly equals target", function () {
+         const selector = strictEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value does not strictly equal target", function () {
+         const selector = strictEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 11 }), false);
+      });
+
+      it("uses strict equality (null !== undefined)", function () {
+         const selector = strictEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), true);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("strictNotEqual", function () {
+      it("returns false when value strictly equals target", function () {
+         const selector = strictNotEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns true when value does not strictly equal target", function () {
+         const selector = strictNotEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 11 }), true);
+      });
+
+      it("uses strict inequality (null !== undefined)", function () {
+         const selector = strictNotEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), false);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+});

package/src/ui/exprHelpers.ts

@@ -0,0 +1,78 @@
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+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);
+}

package/src/ui/index.ts

@@ -1,46 +1,47 @@
-export * from "./Prop";
-export * from "./Controller";
-export * from "./Widget";
-export * from "./Container";
-export * from "./PureContainer";
-export * from "./Repeater";
-export * from "./Rescope";
-export * from "./StaticText";
-export * from "./Text";
-export * from "./CSS";
-export * from "./CSSHelper";
-export * from "./FocusManager";
-export * from "./ResizeManager";
-export * from "./ZIndexManager";
-export * from "./Format";
-export * from "./Culture";
-export * from "./Localization";
-export * from "./Cx";
-export * from "./Instance";
-export * from "./RenderingContext";
-export * from "./ContentResolver";
-export * from "./batchUpdates";
-export * from "./IsolatedScope";
-export * from "./DetachedScope";
-export * from "./Restate";
-export * from "./DataProxy";
-export * from "./keyboardShortcuts";
-export * from "./StructuredInstanceDataAccessor";
-export * from "./HoverSync";
-
-export * from "./createFunctionalComponent";
-export * from "./flattenProps";
-
-export * from "./selection/index";
-export * from "./layout/index";
-export * from "./app/index";
-export * from "./adapter/index";
-
-export * from "./bind";
-export * from "./tpl";
-export * from "./expr";
-
-//re-export computable here
-import { computable } from "../data/computable";
-import { createAccessorModelProxy, AccessorChain } from "../data/createAccessorModelProxy";
-export { computable, createAccessorModelProxy, AccessorChain };
+export * from "./Prop";
+export * from "./Controller";
+export * from "./Widget";
+export * from "./Container";
+export * from "./PureContainer";
+export * from "./Repeater";
+export * from "./Rescope";
+export * from "./StaticText";
+export * from "./Text";
+export * from "./CSS";
+export * from "./CSSHelper";
+export * from "./FocusManager";
+export * from "./ResizeManager";
+export * from "./ZIndexManager";
+export * from "./Format";
+export * from "./Culture";
+export * from "./Localization";
+export * from "./Cx";
+export * from "./Instance";
+export * from "./RenderingContext";
+export * from "./ContentResolver";
+export * from "./batchUpdates";
+export * from "./IsolatedScope";
+export * from "./DetachedScope";
+export * from "./Restate";
+export * from "./DataProxy";
+export * from "./keyboardShortcuts";
+export * from "./StructuredInstanceDataAccessor";
+export * from "./HoverSync";
+
+export * from "./createFunctionalComponent";
+export * from "./flattenProps";
+
+export * from "./selection/index";
+export * from "./layout/index";
+export * from "./app/index";
+export * from "./adapter/index";
+
+export * from "./bind";
+export * from "./tpl";
+export * from "./expr";
+export * from "./exprHelpers";
+
+//re-export computable here
+import { computable } from "../data/computable";
+import { createAccessorModelProxy, AccessorChain } from "../data/createAccessorModelProxy";
+export { computable, createAccessorModelProxy, AccessorChain };

package/src/ui/layout/Content.ts

@@ -1,30 +1,30 @@
-import { Widget } from "../Widget";
-import { PureContainerBase, PureContainerConfig } from "../PureContainer";
-import { Instance } from "../Instance";
-
-export interface ContentConfig extends PureContainerConfig {
-   /** Placeholder name where the content is rendered. */
-   name?: string;
-
-   /** Placeholder name where the content is rendered. */
-   for?: string;
-}
-
-export class Content extends PureContainerBase<ContentConfig, Instance> {
-   declare name?: string;
-   declare for?: string;
-
-   constructor(config?: ContentConfig) {
-      super(config);
-   }
-
-   init(): void {
-      super.init();
-      if (!this.putInto) this.putInto = this.for || this.name;
-   }
-}
-
-Content.prototype.name = "body";
-Content.prototype.isContent = true;
-
-Widget.alias("content", Content);
+import { Widget } from "../Widget";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { Instance } from "../Instance";
+
+export interface ContentConfig extends PureContainerConfig {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
+
+   /** Placeholder name where the content is rendered. */
+   for?: string;
+}
+
+export class Content extends PureContainerBase<ContentConfig, Instance> {
+   declare name?: string;
+   declare for?: string;
+
+   constructor(config?: ContentConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+      if (!this.putInto) this.putInto = this.for || this.name;
+   }
+}
+
+Content.prototype.name = "body";
+Content.prototype.isContent = true;
+
+Widget.alias("content", Content);

package/src/ui/layout/FirstVisibleChildLayout.spec.tsx

@@ -129,7 +129,7 @@ describe("FirstVisibleChildLayout", () => {
       let widget = (
          <cx>
             <div layout={FirstVisibleChildLayout}>
-               <FC dummy>
+               <FC>
                   <header visible={false}></header>
                </FC>
                <main></main>