cx 26.0.12 → 26.0.14

package/src/svg/BoundedObject.ts

@@ -1,101 +1,101 @@
-import { Instance } from "./../ui/Instance";
-import { StyledContainerConfig, ContainerBase } from "../ui/Container";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Prop } from "../ui/Prop";
-import { IRect, Rect } from "./util/Rect";
-
-/** Typed context interface for SVG/layout-related context properties */
-export interface SvgRenderingContext extends RenderingContext {
-   parentRect?: Rect;
-   inSvg?: boolean;
-   addClipRect?: (rect: Rect) => string;
-}
-
-export interface BoundedObjectConfig extends StyledContainerConfig {
-   /**
-    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
-    * One aligns with the bottom/right edge. See Svg for more information.
-    */
-   anchors?: Prop<string | number | IRect>;
-
-   /** Move boundaries specified by the offset. See Svg for more information. */
-   offset?: Prop<string | number | IRect>;
-
-   /** Apply margin to the given boundaries. See Svg for more information. */
-   margin?: Prop<string | number | IRect>;
-
-   /** Padding to be applied to the boundaries rectangle before passing to the children. */
-   padding?: Prop<string | number | IRect>;
-}
-
-export interface BoundedObjectInstance extends Instance {
-   parentRect?: any;
-}
-
-export class BoundedObject<
-   Config extends BoundedObjectConfig = BoundedObjectConfig,
-   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
-> extends ContainerBase<Config, InstanceType> {
-   declare anchors: any;
-   declare margin: any;
-   declare offset: any;
-   declare padding: any;
-
-   declareData(...args: any[]) {
-      return super.declareData(
-         {
-            anchors: undefined,
-            offset: undefined,
-            margin: undefined,
-            padding: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: InstanceType) {
-      super.prepareData(context, instance);
-      var { data } = instance;
-      data.anchors = Rect.convert(data.anchors);
-      data.offset = Rect.convert(data.offset);
-      data.margin = Rect.convertMargin(data.margin);
-      data.padding = Rect.convertMargin(data.padding);
-   }
-
-   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
-      var { data } = instance;
-      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-   }
-
-   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
-      var { data } = instance;
-      if (
-         instance.shouldUpdate ||
-         !instance.cached.parentRect ||
-         !instance.cached.parentRect.isEqual(context.parentRect) ||
-         !data.bounds
-      ) {
-         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
-         instance.parentRect = context.parentRect;
-         instance.cache("parentRect", context.parentRect);
-         instance.markShouldUpdate(context);
-         data.bounds = this.calculateBounds(context, instance);
-         data.childrenBounds = Rect.add(data.bounds, data.padding);
-      }
-   }
-
-   prepare(context: SvgRenderingContext, instance: InstanceType) {
-      this.prepareBounds(context, instance);
-      context.push("parentRect", instance.data.childrenBounds);
-   }
-
-   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
-      context.pop("parentRect");
-   }
-}
-
-BoundedObject.prototype.anchors = 0;
-BoundedObject.prototype.margin = 0;
-BoundedObject.prototype.offset = 0;
-BoundedObject.prototype.padding = 0;
-BoundedObject.prototype.styled = true;
+import { Instance } from "./../ui/Instance";
+import { StyledContainerConfig, ContainerBase } from "../ui/Container";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Prop } from "../ui/Prop";
+import { IRect, Rect } from "./util/Rect";
+
+/** Typed context interface for SVG/layout-related context properties */
+export interface SvgRenderingContext extends RenderingContext {
+   parentRect?: Rect;
+   inSvg?: boolean;
+   addClipRect?: (rect: Rect) => string;
+}
+
+export interface BoundedObjectConfig extends StyledContainerConfig {
+   /**
+    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
+    * One aligns with the bottom/right edge. See Svg for more information.
+    */
+   anchors?: Prop<string | number | IRect>;
+
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Prop<string | number | IRect>;
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Prop<string | number | IRect>;
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Prop<string | number | IRect>;
+}
+
+export interface BoundedObjectInstance extends Instance {
+   parentRect?: any;
+}
+
+export class BoundedObject<
+   Config extends BoundedObjectConfig = BoundedObjectConfig,
+   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
+> extends ContainerBase<Config, InstanceType> {
+   declare anchors: any;
+   declare margin: any;
+   declare offset: any;
+   declare padding: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(
+         {
+            anchors: undefined,
+            offset: undefined,
+            margin: undefined,
+            padding: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType) {
+      super.prepareData(context, instance);
+      var { data } = instance;
+      data.anchors = Rect.convert(data.anchors);
+      data.offset = Rect.convert(data.offset);
+      data.margin = Rect.convertMargin(data.margin);
+      data.padding = Rect.convertMargin(data.padding);
+   }
+
+   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+   }
+
+   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      if (
+         instance.shouldUpdate ||
+         !instance.cached.parentRect ||
+         !instance.cached.parentRect.isEqual(context.parentRect) ||
+         !data.bounds
+      ) {
+         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
+         instance.parentRect = context.parentRect;
+         instance.cache("parentRect", context.parentRect);
+         instance.markShouldUpdate(context);
+         data.bounds = this.calculateBounds(context, instance);
+         data.childrenBounds = Rect.add(data.bounds, data.padding);
+      }
+   }
+
+   prepare(context: SvgRenderingContext, instance: InstanceType) {
+      this.prepareBounds(context, instance);
+      context.push("parentRect", instance.data.childrenBounds);
+   }
+
+   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
+      context.pop("parentRect");
+   }
+}
+
+BoundedObject.prototype.anchors = 0;
+BoundedObject.prototype.margin = 0;
+BoundedObject.prototype.offset = 0;
+BoundedObject.prototype.padding = 0;
+BoundedObject.prototype.styled = true;

package/src/svg/util/Rect.ts

@@ -1,105 +1,105 @@
-import { isNumber } from "../../util/isNumber";
-import { isArray } from "../../util/isArray";
-
-type RectMargin = string | Rect | Array<string | number>;
-
-export interface IRect {
-   l: number;
-   r: number;
-   t: number;
-   b: number;
-}
-
-export class Rect implements IRect {
-   isRect: boolean = true;
-   l: number = 0; //left;
-   r: number = 0; //right
-   t: number = 0; //top
-   b: number = 0; //bottom
-
-   constructor(config?: { t?: number; r?: number; b?: number; l?: number }) {
-      Object.assign(this, config);
-   }
-
-   width(): number {
-      return this.r - this.l;
-   }
-
-   height(): number {
-      return this.b - this.t;
-   }
-
-   valid(): boolean {
-      return this.r > this.l && this.b > this.t;
-   }
-
-   makeValid(): Rect {
-      return new Rect({
-         l: Math.min(this.l, this.r),
-         r: Math.max(this.l, this.r),
-         t: Math.min(this.t, this.b),
-         b: Math.max(this.t, this.b),
-      });
-   }
-
-   isEqual(r: Rect): boolean {
-      if (!r || !r.isRect) return false;
-
-      return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
-   }
-
-   static add(a: Rect, b: Rect): Rect {
-      return new Rect({
-         l: a.l + b.l,
-         t: a.t + b.t,
-         r: a.r + b.r,
-         b: a.b + b.b,
-      });
-   }
-
-   static multiply(a: Rect, b: Rect): Rect {
-      return new Rect({
-         l: a.l + (a.r - a.l) * b.l,
-         r: a.l + (a.r - a.l) * b.r,
-         t: a.t + (a.b - a.t) * b.t,
-         b: a.t + (a.b - a.t) * b.b,
-      });
-   }
-
-   static margin(r: Rect, m?: RectMargin): Rect {
-      var mr = Rect.convertMargin(m);
-      return Rect.add(r, mr);
-   }
-
-   static convertMargin(m?: RectMargin): Rect {
-      if (!m) return new Rect();
-
-      if ((m as any).isRect) return m as Rect;
-
-      if (isNumber(m)) return new Rect({ l: m as number, t: m as number, r: -(m as number), b: -(m as number) });
-
-      var mr = Rect.convert(m);
-      mr.b = -mr.b;
-      mr.r = -mr.r;
-      return mr;
-   }
-
-   static convert(r?: RectMargin | number): Rect {
-      if (!r) return new Rect({ l: 0, r: 0, t: 0, b: 0 });
-
-      if ((r as any).isRect) return r as Rect;
-
-      if (typeof r === "string") r = r.split(" ");
-
-      if (isArray(r)) {
-         return new Rect({
-            t: parseFloat(r[0] as any),
-            r: parseFloat(r[1] as any),
-            b: parseFloat(r[2] as any),
-            l: parseFloat(r[3] as any),
-         });
-      }
-
-      return new Rect(r as any);
-   }
-}
+import { isNumber } from "../../util/isNumber";
+import { isArray } from "../../util/isArray";
+
+type RectMargin = string | Rect | Array<string | number>;
+
+export interface IRect {
+   l: number;
+   r: number;
+   t: number;
+   b: number;
+}
+
+export class Rect implements IRect {
+   isRect: boolean = true;
+   l: number = 0; //left;
+   r: number = 0; //right
+   t: number = 0; //top
+   b: number = 0; //bottom
+
+   constructor(config?: { t?: number; r?: number; b?: number; l?: number }) {
+      Object.assign(this, config);
+   }
+
+   width(): number {
+      return this.r - this.l;
+   }
+
+   height(): number {
+      return this.b - this.t;
+   }
+
+   valid(): boolean {
+      return this.r > this.l && this.b > this.t;
+   }
+
+   makeValid(): Rect {
+      return new Rect({
+         l: Math.min(this.l, this.r),
+         r: Math.max(this.l, this.r),
+         t: Math.min(this.t, this.b),
+         b: Math.max(this.t, this.b),
+      });
+   }
+
+   isEqual(r?: Rect): boolean {
+      if (!r || !r.isRect) return false;
+
+      return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
+   }
+
+   static add(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + b.l,
+         t: a.t + b.t,
+         r: a.r + b.r,
+         b: a.b + b.b,
+      });
+   }
+
+   static multiply(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + (a.r - a.l) * b.l,
+         r: a.l + (a.r - a.l) * b.r,
+         t: a.t + (a.b - a.t) * b.t,
+         b: a.t + (a.b - a.t) * b.b,
+      });
+   }
+
+   static margin(r: Rect, m?: RectMargin): Rect {
+      var mr = Rect.convertMargin(m);
+      return Rect.add(r, mr);
+   }
+
+   static convertMargin(m?: RectMargin): Rect {
+      if (!m) return new Rect();
+
+      if ((m as any).isRect) return m as Rect;
+
+      if (isNumber(m)) return new Rect({ l: m as number, t: m as number, r: -(m as number), b: -(m as number) });
+
+      var mr = Rect.convert(m);
+      mr.b = -mr.b;
+      mr.r = -mr.r;
+      return mr;
+   }
+
+   static convert(r?: RectMargin | number): Rect {
+      if (!r) return new Rect({ l: 0, r: 0, t: 0, b: 0 });
+
+      if ((r as any).isRect) return r as Rect;
+
+      if (typeof r === "string") r = r.split(" ");
+
+      if (isArray(r)) {
+         return new Rect({
+            t: parseFloat(r[0] as any),
+            r: parseFloat(r[1] as any),
+            b: parseFloat(r[2] as any),
+            l: parseFloat(r[3] as any),
+         });
+      }
+
+      return new Rect(r as any);
+   }
+}

package/src/ui/CSSHelper.ts

@@ -1,17 +1,17 @@
-var cssHelperCache: { [key: string]: any } = {};
-
-export class CSSHelper {
-   static get(code: string): any {
-      var helper = cssHelperCache[code];
-      if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
-      return helper;
-   }
-
-   static register(code: string, helper: any): void {
-      cssHelperCache[code] = helper;
-   }
-
-   static alias(code: string, helper: any): void {
-      cssHelperCache[code] = helper;
-   }
-}
+var cssHelperCache: { [key: string]: any } = {};
+
+export class CSSHelper {
+   static get(code: string): any {
+      var helper = cssHelperCache[code];
+      if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
+      return helper;
+   }
+
+   static register(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+
+   static alias(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+}

package/src/ui/ContentResolver.spec.tsx

@@ -4,6 +4,8 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import assert from "assert";
 import { bind } from "./bind";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Prop } from "./Prop";
+import { stringTemplate } from "../data/StringTemplate";
 
 interface TestModel {
    user: {
@@ -18,10 +20,7 @@ describe("ContentResolver", () => {
       let widget = (
          <cx>
             <div>
-               <ContentResolver
-                  params={{ name: bind("name") }}
-                  onResolve={(params) => <span text={params.name} />}
-               />
+               <ContentResolver params={{ name: bind("name") }} onResolve={(params) => <span text={params.name} />} />
             </div>
          </cx>
       );
@@ -177,11 +176,7 @@ describe("ContentResolver", () => {
       let widget = (
          <cx>
             <div>
-               <ContentResolver
-                  mode="prepend"
-                  params={{ show: true }}
-                  onResolve={() => <span>Prepended</span>}
-               >
+               <ContentResolver mode="prepend" params={{ show: true }} onResolve={() => <span>Prepended</span>}>
                   <span>Original</span>
                </ContentResolver>
             </div>
@@ -215,11 +210,7 @@ describe("ContentResolver", () => {
       let widget = (
          <cx>
             <div>
-               <ContentResolver
-                  mode="append"
-                  params={{ show: true }}
-                  onResolve={() => <span>Appended</span>}
-               >
+               <ContentResolver mode="append" params={{ show: true }} onResolve={() => <span>Appended</span>}>
                   <span>Original</span>
                </ContentResolver>
             </div>
@@ -354,11 +345,7 @@ describe("ContentResolver", () => {
                      const name: string = params.name;
                      const age: number = params.age;
                      const active: boolean = params.active;
-                     return (
-                        <span
-                           text={`${name} is ${age} years old and ${active ? "active" : "inactive"}`}
-                        />
-                     );
+                     return <span text={`${name} is ${age} years old and ${active ? "active" : "inactive"}`} />;
                   }}
                />
             </div>
@@ -427,4 +414,170 @@ describe("ContentResolver", () => {
          ],
       });
    });
+
+   it("supports simple Prop params (non-structured)", () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // Test using a single AccessorChain as params instead of an object
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={model.user.name}
+                  onResolve={(name) => {
+                     // name should be typed as string (from AccessorChain<string>)
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Alice",
+               age: 25,
+               active: true,
+            },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Alice!"],
+            },
+         ],
+      });
+   });
+
+   it("supports simple bind() as params", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={bind("count")}
+                  onResolve={(count) => {
+                     return <span text={`Count: ${count}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            count: 42,
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Count: 42"],
+            },
+         ],
+      });
+   });
+
+   it("resolves Selector<string> | null to string | null", () => {
+      const text: string | null = "Hello {user.name}";
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{
+                     text: text ? stringTemplate(text) : null,
+                  }}
+                  onResolve={(params) => {
+                     // params.text should be string | null
+                     const typedText: string | null = params.text;
+                     // @ts-expect-error - params.text should not be 'any' or broader type
+                     const shouldFail: number = params.text;
+                     return <span text={typedText ?? "no text"} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: { name: "World", age: 30, active: true },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "span", props: {}, children: ["Hello World"] }],
+      });
+   });
+
+   it("resolves Prop<string> to string (not any)", () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // When params is typed as Prop<string>, onResolve should receive string (not any)
+      // This tests that the union type Prop<T> correctly extracts T
+      const typedParam: Prop<string> = model.user.name;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={typedParam}
+                  onResolve={(name) => {
+                     // name should be typed as string, not any
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Bob",
+               age: 35,
+               active: false,
+            },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Bob!"],
+            },
+         ],
+      });
+   });
 });