cx 26.1.13 → 26.2.0

package/src/ui/app/startAppLoop.tsx

@@ -6,66 +6,77 @@ import { Store } from "../../data/Store";
 import { Cx } from "../Cx";
 import { Instance } from "../Instance";
 import { Create } from "../../util/Component";
+import { View } from "../../data/View";
 
 export interface StartAppLoopOptions {
-   destroyDelay?: number;
-   removeParentDOMElement?: boolean;
-   [key: string]: any;
+  destroyDelay?: number;
+  removeParentDOMElement?: boolean;
+  [key: string]: any;
 }
 
 export function startAppLoop(
-   parentDOMElement: HTMLElement,
-   storeOrInstance?: Store | Instance,
-   widget?: Create<typeof Widget> | Create<typeof Widget>[],
-   options: StartAppLoopOptions = {},
+  parentDOMElement: HTMLElement,
+  storeOrInstance?: View | Instance,
+  widget?: Create<typeof Widget> | Create<typeof Widget>[],
+  options: StartAppLoopOptions = {},
 ): () => void {
-   if (!parentDOMElement || parentDOMElement.nodeType !== 1)
-      throw new Error("First argument to startAppLoop should be a valid DOM element.");
+  if (!parentDOMElement || parentDOMElement.nodeType !== 1)
+    throw new Error(
+      "First argument to startAppLoop should be a valid DOM element.",
+    );
 
-   let store: Store | undefined;
-   let instance: Instance | undefined;
-   let parentInstance: Instance | undefined;
+  let store: Store | undefined;
+  let instance: Instance | undefined;
+  let parentInstance: Instance | undefined;
 
-   if (!storeOrInstance) storeOrInstance = new Store();
+  if (!storeOrInstance) storeOrInstance = new Store();
 
-   if ((storeOrInstance as any).notify) store = storeOrInstance as Store;
-   else if ((storeOrInstance as any).getChild) {
-      if ((storeOrInstance as any).widget === widget) instance = storeOrInstance as Instance;
-      else parentInstance = storeOrInstance as Instance;
-   } else throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
+  if ((storeOrInstance as any).notify) store = storeOrInstance as Store;
+  else if ((storeOrInstance as any).getChild) {
+    if ((storeOrInstance as any).widget === widget)
+      instance = storeOrInstance as Instance;
+    else parentInstance = storeOrInstance as Instance;
+  } else
+    throw new Error(
+      "Second argument to startAppLoop should be either of type Store or Instance",
+    );
 
-   let content = (
-      <Cx
-         store={store}
-         widget={widget}
-         instance={instance}
-         parentInstance={parentInstance}
-         options={options}
-         subscribe
-      />
-   ) as any;
+  let content = (
+    <Cx
+      store={store}
+      widget={widget}
+      instance={instance}
+      parentInstance={parentInstance}
+      options={options}
+      subscribe
+    />
+  ) as any;
 
-   let root = VDOM.DOM.createRoot(parentDOMElement);
-   root.render(content);
+  let root = VDOM.DOM.createRoot(parentDOMElement);
+  root.render(content);
 
-   let stopped = false;
+  let stopped = false;
 
-   return function () {
-      if (stopped) return;
+  return function () {
+    if (stopped) return;
 
-      stopped = true;
+    stopped = true;
 
-      if (!options.destroyDelay) destroy(parentDOMElement, options, root);
-      else {
-         setTimeout(() => {
-            destroy(parentDOMElement, options, root);
-         }, options.destroyDelay);
-      }
-   };
+    if (!options.destroyDelay) destroy(parentDOMElement, options, root);
+    else {
+      setTimeout(() => {
+        destroy(parentDOMElement, options, root);
+      }, options.destroyDelay);
+    }
+  };
 }
 
-function destroy(parentDOMElement: HTMLElement, options: StartAppLoopOptions, root: Root): void {
-   if (root) root.unmount();
-   if (options.removeParentDOMElement && parentDOMElement.parentNode)
-      parentDOMElement.parentNode.removeChild(parentDOMElement);
+function destroy(
+  parentDOMElement: HTMLElement,
+  options: StartAppLoopOptions,
+  root: Root,
+): void {
+  if (root) root.unmount();
+  if (options.removeParentDOMElement && parentDOMElement.parentNode)
+    parentDOMElement.parentNode.removeChild(parentDOMElement);
 }

package/src/ui/app/startHotAppLoop.ts

@@ -1,7 +1,7 @@
-import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
-import { Widget, WidgetConfig } from "../Widget";
-import { Store } from "../../data/Store";
+import { View } from "../../data/View";
 import { Create } from "../../util/Component";
+import { Widget } from "../Widget";
+import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
 
 export interface HotModule {
    hot?: {
@@ -14,7 +14,7 @@ export interface HotModule {
 export function startHotAppLoop(
    appModule: HotModule,
    element: HTMLElement,
-   store: Store,
+   store: View,
    widgets: Create<typeof Widget> | Create<typeof Widget>[],
    options: StartAppLoopOptions = {},
 ): () => void {

package/src/ui/batchUpdates.ts

@@ -1,5 +1,5 @@
-import { VDOM } from './Widget';
-import { SubscriberList } from '../util/SubscriberList';
+import { VDOM } from "./VDOM";
+import { SubscriberList } from "../util/SubscriberList";
 
 interface UpdateCallback {
    pending: number;
@@ -16,13 +16,11 @@ export function batchUpdates(callback: () => void): void {
          isBatching++;
          try {
             callback();
-         }
-         finally {
+         } finally {
             isBatching--;
          }
       });
-   else
-      callback();
+   else callback();
 }
 
 export function isBatchingUpdates(): boolean {
@@ -30,7 +28,7 @@ export function isBatchingUpdates(): boolean {
 }
 
 export function notifyBatchedUpdateStarting(): void {
-   promiseSubscribers.execute((x: any) =>{
+   promiseSubscribers.execute((x: any) => {
       (x as UpdateCallback).pending++;
    });
 }
@@ -39,14 +37,15 @@ export function notifyBatchedUpdateCompleted(): void {
    promiseSubscribers.execute((x: any) => {
       let cb = x as UpdateCallback;
       cb.finished++;
-      if (cb.finished >= cb.pending)
-         cb.complete(true);
+      if (cb.finished >= cb.pending) cb.complete(true);
    });
 }
 
-let updateId = 0;
-
-export function batchUpdatesAndNotify(callback: () => void, notifyCallback: (success: boolean) => void, timeout: number = 1000): void {
+export function batchUpdatesAndNotify(
+   callback: () => void,
+   notifyCallback: (success: boolean) => void,
+   timeout: number = 1000,
+): void {
    let done = false;
    let timer: NodeJS.Timeout | undefined;
    let unsubscribe: (() => void) | undefined;
@@ -57,21 +56,17 @@ export function batchUpdatesAndNotify(callback: () => void, notifyCallback: (suc
       complete: (success?: boolean) => {
          if (!done) {
             done = true;
-            if (timer)
-               clearInterval(timer);
-            if (unsubscribe)
-               unsubscribe();
+            if (timer) clearInterval(timer);
+            if (unsubscribe) unsubscribe();
             notifyCallback(!!success);
          }
-      }
+      },
    };
 
    unsubscribe = promiseSubscribers.subscribe(update as any);
 
    batchUpdates(callback);
 
-   if (update.pending <= update.finished)
-      update.complete(true);
-   else
-      timer = setTimeout(update.complete, timeout);
+   if (update.pending <= update.finished) update.complete(true);
+   else timer = setTimeout(update.complete, timeout);
 }

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/Button.tsx

@@ -41,14 +41,6 @@ export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disable
    /** Set to `false` to disable the button. */
    enabled?: BooleanProp;
 
-   /**
-    * Click handler.
-    *
-    * @param e - Event.
-    * @param instance - Cx widget instance that fired the event.
-    */
-   onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
-
    /** Button type. */
    type?: "submit" | "button";
 

package/src/widgets/HtmlElement.spec.tsx

@@ -3,87 +3,115 @@ import assert from "assert";
 import { createTestRenderer } from "../util/test/createTestRenderer";
 import { bind } from "../ui/bind";
 import { VDOM } from "../ui/Widget";
+import { Instance } from "../ui/Instance";
 
 describe("HtmlElement", () => {
-   it("renders textual content provided through the text property", async () => {
-      let widget = (
-         <cx>
-            <div text={bind("text")} />
-         </cx>
-      );
+  it("renders textual content provided through the text property", async () => {
+    let widget = (
+      <cx>
+        <div text={bind("text")} />
+      </cx>
+    );
 
-      let store = new Store({
-         data: {
-            text: "Test",
-         },
-      });
+    let store = new Store({
+      data: {
+        text: "Test",
+      },
+    });
 
-      const component = await createTestRenderer(store, widget);
+    const component = await createTestRenderer(store, widget);
 
-      let tree = component.toJSON();
-      assert(tree && !Array.isArray(tree), "Expected single element");
-      assert.equal(tree.type, "div");
-      assert.deepEqual(tree.children, ["Test"]);
-   });
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "div");
+    assert.deepEqual(tree.children, ["Test"]);
+  });
 
-   it("allows spread bindings", async () => {
-      let store = new Store({
-         data: {
-            title: "title",
-         },
-      });
+  it("allows spread bindings", async () => {
+    let store = new Store({
+      data: {
+        title: "title",
+      },
+    });
 
-      const component = await createTestRenderer(
-         store,
-         <cx>
-            <a href="#" {...{ title: { bind: "title" } }}>
-               Link
-            </a>
-         </cx>,
-      );
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <a href="#" {...{ title: { bind: "title" } }}>
+          Link
+        </a>
+      </cx>,
+    );
 
-      let tree = component.toJSON();
-      assert(tree && !Array.isArray(tree), "Expected single element");
-      assert.deepEqual(tree, {
-         type: "a",
-         children: ["Link"],
-         props: {
-            href: "#",
-            title: "title",
-         },
-      });
-   });
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.deepEqual(tree, {
+      type: "a",
+      children: ["Link"],
+      props: {
+        href: "#",
+        title: "title",
+      },
+    });
+  });
 
-   it("supports SVG elements with camelCase attributes", async () => {
-      let store = new Store();
+  it("supports SVG elements with camelCase attributes", async () => {
+    let store = new Store();
 
-      const component = await createTestRenderer(
-         store,
-         <cx>
-            <svg>
-               <path
-                  d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
-                  fill="none"
-                  stroke="#343434"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="12"
-               />
-            </svg>
-         </cx>,
-      );
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <svg>
+          <path
+            d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
+            fill="none"
+            stroke="#343434"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="12"
+          />
+        </svg>
+      </cx>,
+    );
 
-      let tree = component.toJSON();
-      assert(tree && !Array.isArray(tree), "Expected single element");
-      assert.equal(tree.type, "svg");
-      assert(tree.children && tree.children.length === 1, "Expected one child");
-      let path = tree.children[0] as any;
-      assert.equal(path.type, "path");
-      assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
-      assert.equal(path.props.fill, "none");
-      assert.equal(path.props.stroke, "#343434");
-      assert.equal(path.props.strokeLinecap, "round");
-      assert.equal(path.props.strokeLinejoin, "round");
-      assert.equal(path.props.strokeWidth, "12");
-   });
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "svg");
+    assert(tree.children && tree.children.length === 1, "Expected one child");
+    let path = tree.children[0] as any;
+    assert.equal(path.type, "path");
+    assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
+    assert.equal(path.props.fill, "none");
+    assert.equal(path.props.stroke, "#343434");
+    assert.equal(path.props.strokeLinecap, "round");
+    assert.equal(path.props.strokeLinejoin, "round");
+    assert.equal(path.props.strokeWidth, "12");
+  });
+
+  it("infers event handler parameter types", async () => {
+    let clickedWith: {
+      event: React.MouseEvent<HTMLButtonElement>;
+      instance: Instance;
+    } | null = null;
+
+    let store = new Store();
+
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <button
+          onClick={(e, instance) => {
+            // TypeScript should infer e as React.MouseEvent<HTMLButtonElement> and instance as Instance
+            clickedWith = { event: e, instance };
+          }}
+        >
+          Click me
+        </button>
+      </cx>,
+    );
+
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "button");
+  });
 });

package/src/widgets/HtmlElement.tsx

@@ -67,18 +67,19 @@ type CxEventHandler<T> = T extends (event: infer E) => any
 // Note: For string literal union props (like SVG's strokeLinecap), we also accept `string`
 // because TypeScript widens string literals to `string` in JSX attribute syntax.
 // This is a known TypeScript behavior where `<path strokeLinecap="round"/>` infers "round" as string.
+// We exclude style/className/class as they're handled by StyledContainerConfig with better CxJS types.
 type TransformHtmlElementProps<T> = {
-  [K in keyof T]: K extends "children"
+  [K in keyof T as K extends "style" | "className" | "class"
+    ? never
+    : K]: K extends "children"
     ? ChildNode | ChildNode[]
-    : K extends "className" | "class"
-      ? ClassProp
-      : IsEventHandler<K, T[K]> extends true
-        ? CxEventHandler<T[K]>
-        : string extends T[K]
-          ? Prop<T[K]> // Plain string props - no change needed
-          : NonNullable<T[K]> extends string
-            ? Prop<T[K]> | string // String literal unions - accept string for JSX compatibility
-            : Prop<T[K]>;
+    : IsEventHandler<K, T[K]> extends true
+      ? CxEventHandler<T[K]>
+      : string extends T[K]
+        ? Prop<T[K]> // Plain string props - no change needed
+        : NonNullable<T[K]> extends string
+          ? Prop<T[K]> | string // String literal unions - accept string for JSX compatibility
+          : Prop<T[K]>;
 };
 
 /** Base HtmlElement configuration - core CxJS properties for extension by widgets */