cx 26.0.14 → 26.1.1

package/src/hooks/store.spec.tsx

@@ -7,7 +7,7 @@ import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { ref } from "./store";
 
 describe("ref", () => {
-   it("allows store references in functional components", () => {
+   it("allows store references in functional components", async () => {
       const FComp = createFunctionalComponent(({}) => {
          let testValue = ref({ bind: "x", defaultValue: 10 });
          return (
@@ -19,7 +19,7 @@ describe("ref", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -29,7 +29,7 @@ describe("ref", () => {
       });
    });
 
-   it("can be used to adapt any prop passed to a functional component", () => {
+   it("can be used to adapt any prop passed to a functional component", async () => {
       const FComp = createFunctionalComponent(({ value }: { value: Prop<any> }) => {
          return (
             <cx>
@@ -40,8 +40,8 @@ describe("ref", () => {
 
       let store = new Store({ data: { value: 100 } });
 
-      function test(value: Prop<any>, expectation: any) {
-         const component = createTestRenderer(store, <FComp value={value} />);
+      async function test(value: Prop<any>, expectation: any) {
+         const component = await createTestRenderer(store, <FComp value={value} />);
          let tree = component.toJSON();
          assert.deepEqual(tree, {
             type: "div",
@@ -50,18 +50,18 @@ describe("ref", () => {
          });
       }
 
-      test({ bind: "value" }, "x100");
-      test({ expr: "{value}" }, "x100");
-      test({ tpl: "{value:n;2}" }, "x100.00");
-      test(200, "x200");
-      test(() => 500, "x500");
-      test(
+      await test({ bind: "value" }, "x100");
+      await test({ expr: "{value}" }, "x100");
+      await test({ tpl: "{value:n;2}" }, "x100.00");
+      await test(200, "x200");
+      await test(() => 500, "x500");
+      await test(
          computable("value", (value: string) => value + 100),
          "x200",
       );
-      test(null, "xnull");
-      test(undefined, "xundefined");
-      test(0, "x0");
-      test(false, "xfalse");
+      await test(null, "xnull");
+      await test(undefined, "xundefined");
+      await test(0, "x0");
+      await test(false, "xfalse");
    });
 });

package/src/hooks/useTrigger.spec.tsx

@@ -1,11 +1,11 @@
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { useTrigger } from "./useTrigger";
 
 describe("useTrigger", () => {
-   it("works", () => {
+   it("works", async () => {
       let last = null;
 
       const FComp = createFunctionalComponent(({ ...props }) => {
@@ -23,17 +23,19 @@ describe("useTrigger", () => {
       let store = new Store();
       let test = store.ref("test", 1);
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });
 
-   it("fires immediately if the last argument is true", () => {
+   it("fires immediately if the last argument is true", async () => {
       let last = null;
 
       const FComp = createFunctionalComponent(({ ...props }) => {
@@ -55,17 +57,19 @@ describe("useTrigger", () => {
       let store = new Store();
       let test = store.ref("test", 1);
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, 1);
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });
 
-   it("accepts refs as arguments", () => {
+   it("accepts refs as arguments", async () => {
       let last = null;
 
       let store = new Store();
@@ -87,12 +91,14 @@ describe("useTrigger", () => {
          );
       });
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, 1);
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });

package/src/hooks/useTrigger.ts

@@ -1,26 +1,26 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { isArray } from "../util/isArray";
-import { computable, ComputableSelector } from "../data/computable";
-import { useStore } from "./store";
-
-export function addExploreCallback(callback: (...args: any[]) => any): () => void {
-   let instance = getCurrentInstance();
-   if (!instance.computables) instance.computables = [];
-   instance.computables.push(callback);
-   return () => {
-      if (instance.computables) {
-         instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
-      }
-   };
-}
-
-export function useTrigger(
-   args: ComputableSelector[],
-   callback: (...args: any[]) => void,
-   autoRun?: boolean,
-): () => void {
-   if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
-   let store = useStore();
-   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
-   return addExploreCallback(selector);
-}
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { isArray } from "../util/isArray";
+import { computable, ComputableSelector } from "../data/computable";
+import { useStore } from "./store";
+
+export function addExploreCallback(callback: (...args: any[]) => any): () => void {
+   let instance = getCurrentInstance();
+   if (!instance.computables) instance.computables = [];
+   instance.computables.push(callback);
+   return () => {
+      if (instance.computables) {
+         instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
+      }
+   };
+}
+
+export function useTrigger(
+   args: ComputableSelector[],
+   callback: (...args: any[]) => void,
+   autoRun?: boolean,
+): () => void {
+   if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
+   let store = useStore();
+   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
+   return addExploreCallback(selector);
+}

package/src/index.scss

@@ -1,6 +1,6 @@
-@import "global";
-@import "util/index";
-@import "ui/index";
-@import "widgets/index";
-@import "svg/index";
-@import "charts/index";
+@import "global";
+@import "util/index";
+@import "ui/index";
+@import "widgets/index";
+@import "svg/index";
+@import "charts/index";

package/src/jsx-runtime.ts

@@ -1,79 +1,79 @@
-import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
-import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
-import { Widget } from "./ui/Widget";
-import { isArray } from "./util/isArray";
-import { isString } from "./util/isString";
-import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
-import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
-
-export function jsx(typeName: any, props: any, key?: string): any {
-   if (isArray(typeName)) return typeName;
-
-   // if (isFunction(typeName) && isUndefined(props))
-   //    return createFunctionalComponent((config) => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
-
-   if (props.children && props.children.length == 1) props.children = props.children[0];
-
-   if (typeName == "cx") return props.children;
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
-      props.tag = typeName;
-      typeName = HtmlElement;
-   }
-   // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
-   else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
-      props.componentType = typeName;
-      typeName = ReactElementWrapper;
-   }
-
-   return {
-      $type: typeName,
-      ...props,
-      jsxAttributes: props && Object.keys(props),
-   };
-}
-
-export const jsxs = jsx;
-
-type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
-
-type CxIntrinsicElements = {
-   [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
-};
-
-// Helper type to transform props for React components (but not CxJS functional components)
-// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
-// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
-type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
-   ? P // CxJS functional components already have proper types
-   : [C] extends [FunctionComponent<any>]
-     ? ReactElementWrapperConfig<P>
-     : [C] extends [ComponentClass<any>]
-       ? ReactElementWrapperConfig<P>
-       : P;
-
-export namespace JSX {
-   /**
-    * Base class for JSX element instances.
-    * All widgets must extend from Widget class or React.Component.
-    */
-   export type ElementClass = Widget<any> | React.Component<any, any>;
-
-   /**
-    * Intrinsic JSX elements (HTML-like tags).
-    * Supports HTML elements that map to HtmlElement widgets.
-    */
-   export interface IntrinsicElements extends CxIntrinsicElements {
-      cx: any;
-   }
-
-   /**
-    * Transform props for React function components used in CxJS JSX.
-    * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
-    */
-   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
-}
+import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
+import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
+import { Widget } from "./ui/Widget";
+import { isArray } from "./util/isArray";
+import { isString } from "./util/isString";
+import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
+import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
+
+export function jsx(typeName: any, props: any, key?: string): any {
+   if (isArray(typeName)) return typeName;
+
+   // if (isFunction(typeName) && isUndefined(props))
+   //    return createFunctionalComponent((config) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
+
+   if (props.children && props.children.length == 1) props.children = props.children[0];
+
+   if (typeName == "cx") return props.children;
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
+      props.tag = typeName;
+      typeName = HtmlElement;
+   }
+   // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
+   else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
+      props.componentType = typeName;
+      typeName = ReactElementWrapper;
+   }
+
+   return {
+      $type: typeName,
+      ...props,
+      jsxAttributes: props && Object.keys(props),
+   };
+}
+
+export const jsxs = jsx;
+
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+
+type CxIntrinsicElements = {
+   [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
+};
+
+// Helper type to transform props for React components (but not CxJS functional components)
+// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
+// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
+type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
+   ? P // CxJS functional components already have proper types
+   : [C] extends [FunctionComponent<any>]
+     ? ReactElementWrapperConfig<P>
+     : [C] extends [ComponentClass<any>]
+       ? ReactElementWrapperConfig<P>
+       : P;
+
+export namespace JSX {
+   /**
+    * Base class for JSX element instances.
+    * All widgets must extend from Widget class or React.Component.
+    */
+   export type ElementClass = Widget<any> | React.Component<any, any>;
+
+   /**
+    * Intrinsic JSX elements (HTML-like tags).
+    * Supports HTML elements that map to HtmlElement widgets.
+    */
+   export interface IntrinsicElements extends CxIntrinsicElements {
+      cx: any;
+   }
+
+   /**
+    * Transform props for React function components used in CxJS JSX.
+    * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
+    */
+   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
+}

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;