cx 26.1.0 → 26.1.1

package/src/hooks/invokeCallback.spec.tsx

@@ -5,7 +5,7 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import { invokeCallback } from "./invokeCallback";
 
 describe("invokeCallback", () => {
-   it("works with functions", () => {
+   it("works with functions", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
          invokeCallback(null!, onTest, "works");
          return (
@@ -17,7 +17,7 @@ describe("invokeCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, {
+      const component = await createTestRenderer(store, {
          type: FComp,
          onTest: (v: any) => {
             value = v;
@@ -28,7 +28,7 @@ describe("invokeCallback", () => {
       assert.equal(value, "works");
    });
 
-   it("works with controller methods", () => {
+   it("works with controller methods", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
          return (
             <cx>
@@ -43,7 +43,7 @@ describe("invokeCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, {
+      const component = await createTestRenderer(store, {
          type: FComp,
          onTest: "onTest",
          controller: {

package/src/hooks/resolveCallback.spec.tsx

@@ -5,7 +5,7 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import { resolveCallback } from "./resolveCallback";
 
 describe("resolveCallback", () => {
-   it("works with functions", () => {
+   it("works with functions", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (value: string) => void }) => {
          let callback = resolveCallback(onTest);
          assert(typeof callback === "function");
@@ -19,7 +19,7 @@ describe("resolveCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <FComp
@@ -34,7 +34,7 @@ describe("resolveCallback", () => {
       assert.equal(value, "works");
    });
 
-   it("works with controller methods", () => {
+   it("works with controller methods", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: string | ((value: string) => void) }) => {
          let callback = resolveCallback(onTest);
          assert(typeof callback === "function");
@@ -51,7 +51,7 @@ describe("resolveCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <FComp

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/jsx-dev-runtime.ts

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "./jsx-runtime";
-
-export const jsxDEV = jsx;
-export const jsxsDEV = jsxs;
+import { jsx, jsxs } from "./jsx-runtime";
+
+export const jsxDEV = jsx;
+export const jsxsDEV = jsxs;

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/ui/CSS.ts

@@ -1,87 +1,87 @@
-import { CSSHelper } from "./CSSHelper";
-import { parseStyle } from "../util/parseStyle";
-import { isArray } from "../util/isArray";
-
-function push(list: any[] | undefined, item: any): any[] {
-   if (!item) return list || [];
-   if (!list) list = [];
-   list.push(item);
-   return list;
-}
-
-function pushMore(list: any[] | undefined, itemArray: any[]): any[] {
-   if (!itemArray || itemArray.length == 0) return list || [];
-   if (!list) list = [];
-   list.push.apply(list, itemArray);
-   return list;
-}
-
-function pushMap(list: any[] | undefined, itemArray: any[] | undefined, mapF: (item: any) => any): any[] | undefined {
-   return itemArray ? pushMore(list, itemArray.map(mapF)) : list;
-}
-
-function join(list: any[] | undefined): string | undefined {
-   return list ? list.join(" ") : undefined;
-}
-
-export class CSS {
-   public static classPrefix: string;
-
-   static resolve(...args: any[]): any[] {
-      let list: any[] | undefined = undefined,
-         type: string,
-         arg: any,
-         i: number,
-         key: string;
-
-      for (i = 0; i < args.length; i++) {
-         arg = args[i];
-         if (arg) {
-            type = typeof arg;
-            if (type == "string") list = push(list, arg);
-            else if (type == "object") {
-               if (isArray(arg)) list = pushMore(list, this.resolve(...arg));
-               else for (key in arg) if (arg[key]) list = push(list, key);
-            }
-         }
-      }
-      return list || [];
-   }
-
-   static block(baseClass: string, styleModifiers?: any, stateModifiers?: any): string;
-   static block(baseClass?: string, styleModifiers?: any, stateModifiers?: any): string | undefined {
-      let list: any[] | undefined;
-      if (baseClass) list = push(list, this.classPrefix + "b-" + baseClass);
-      list = pushMap(list, this.resolve(styleModifiers), (m) => this.classPrefix + "m-" + m);
-      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
-      return join(list);
-   }
-
-   static element(baseClass: string, elementClass: string, stateModifiers?: any): string;
-   static element(baseClass?: string, elementClass?: string, stateModifiers?: any): string | undefined {
-      let list: any[] | undefined;
-      if (baseClass && elementClass) list = push(list, this.classPrefix + "e-" + baseClass + "-" + elementClass);
-      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
-      return join(list);
-   }
-
-   static state(stateModifiers: any): string | undefined {
-      return join(pushMap(undefined, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m));
-   }
-
-   static mod(mods: any): string | undefined {
-      return join(pushMap(undefined, this.resolve(mods), (m) => this.classPrefix + "m-" + m));
-   }
-
-   static expand(...args: any[]): string | undefined {
-      return join(this.resolve(...args));
-   }
-
-   static parseStyle(str: any): any {
-      return parseStyle(str);
-   }
-}
-
-CSS.classPrefix = "cx";
-
-CSSHelper.alias("cx", CSS);
+import { CSSHelper } from "./CSSHelper";
+import { parseStyle } from "../util/parseStyle";
+import { isArray } from "../util/isArray";
+
+function push(list: any[] | undefined, item: any): any[] {
+   if (!item) return list || [];
+   if (!list) list = [];
+   list.push(item);
+   return list;
+}
+
+function pushMore(list: any[] | undefined, itemArray: any[]): any[] {
+   if (!itemArray || itemArray.length == 0) return list || [];
+   if (!list) list = [];
+   list.push.apply(list, itemArray);
+   return list;
+}
+
+function pushMap(list: any[] | undefined, itemArray: any[] | undefined, mapF: (item: any) => any): any[] | undefined {
+   return itemArray ? pushMore(list, itemArray.map(mapF)) : list;
+}
+
+function join(list: any[] | undefined): string | undefined {
+   return list ? list.join(" ") : undefined;
+}
+
+export class CSS {
+   public static classPrefix: string;
+
+   static resolve(...args: any[]): any[] {
+      let list: any[] | undefined = undefined,
+         type: string,
+         arg: any,
+         i: number,
+         key: string;
+
+      for (i = 0; i < args.length; i++) {
+         arg = args[i];
+         if (arg) {
+            type = typeof arg;
+            if (type == "string") list = push(list, arg);
+            else if (type == "object") {
+               if (isArray(arg)) list = pushMore(list, this.resolve(...arg));
+               else for (key in arg) if (arg[key]) list = push(list, key);
+            }
+         }
+      }
+      return list || [];
+   }
+
+   static block(baseClass: string, styleModifiers?: any, stateModifiers?: any): string;
+   static block(baseClass?: string, styleModifiers?: any, stateModifiers?: any): string | undefined {
+      let list: any[] | undefined;
+      if (baseClass) list = push(list, this.classPrefix + "b-" + baseClass);
+      list = pushMap(list, this.resolve(styleModifiers), (m) => this.classPrefix + "m-" + m);
+      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
+      return join(list);
+   }
+
+   static element(baseClass: string, elementClass: string, stateModifiers?: any): string;
+   static element(baseClass?: string, elementClass?: string, stateModifiers?: any): string | undefined {
+      let list: any[] | undefined;
+      if (baseClass && elementClass) list = push(list, this.classPrefix + "e-" + baseClass + "-" + elementClass);
+      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
+      return join(list);
+   }
+
+   static state(stateModifiers: any): string | undefined {
+      return join(pushMap(undefined, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m));
+   }
+
+   static mod(mods: any): string | undefined {
+      return join(pushMap(undefined, this.resolve(mods), (m) => this.classPrefix + "m-" + m));
+   }
+
+   static expand(...args: any[]): string | undefined {
+      return join(this.resolve(...args));
+   }
+
+   static parseStyle(str: any): any {
+      return parseStyle(str);
+   }
+}
+
+CSS.classPrefix = "cx";
+
+CSSHelper.alias("cx", CSS);