cx 26.0.12 → 26.0.13

package/src/ui/app/Url.spec.ts

@@ -1,50 +1,50 @@
-import { Url } from "./Url";
-import Route from "route-parser";
-import assert from "assert";
-describe("Url", function () {
-   describe(".unresolve", function () {
-      it("preserves query parameters", function () {
-         Url.absoluteBase = "https://cxjs.io/docs/";
-         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
-      });
-
-      it("doesn't touch unresolved urls", function () {
-         assert.equal("~/test", Url.unresolve("~/test"));
-      });
-   });
-
-   describe(".getBaseFromScriptSrc", () => {
-      it("ignores query strings", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
-      });
-
-      it("allows wildcards", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
-      });
-
-      it("works for an application folder", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
-      });
-   });
-});
-
-describe("Route", function () {
-   it("matches query param", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1");
-      assert(result !== false);
-      assert.equal(result.state, "1");
-   });
-
-   it("matches routes with extra query params", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1&more=2");
-      assert(result);
-   });
-
-   it.skip("matches query params in any order", function () {
-      let route = new Route("~/?a=:a&b=:b");
-      let result = route.match("~/?b=1&a=2");
-      assert(result);
-   });
-});
+import { Url } from "./Url";
+import Route from "route-parser";
+import assert from "assert";
+describe("Url", function () {
+   describe(".unresolve", function () {
+      it("preserves query parameters", function () {
+         Url.absoluteBase = "https://cxjs.io/docs/";
+         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
+      });
+
+      it("doesn't touch unresolved urls", function () {
+         assert.equal("~/test", Url.unresolve("~/test"));
+      });
+   });
+
+   describe(".getBaseFromScriptSrc", () => {
+      it("ignores query strings", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
+      });
+
+      it("allows wildcards", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
+      });
+
+      it("works for an application folder", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
+      });
+   });
+});
+
+describe("Route", function () {
+   it("matches query param", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1");
+      assert(result !== false);
+      assert.equal(result.state, "1");
+   });
+
+   it("matches routes with extra query params", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1&more=2");
+      assert(result);
+   });
+
+   it.skip("matches query params in any order", function () {
+      let route = new Route("~/?a=:a&b=:b");
+      let result = route.match("~/?b=1&a=2");
+      assert(result);
+   });
+});

package/src/ui/app/startHotAppLoop.ts

@@ -1,41 +1,41 @@
-import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
-import { Widget, WidgetConfig } from "../Widget";
-import { Store } from "../../data/Store";
-import { Create } from "../../util/Component";
-
-export interface HotModule {
-   hot?: {
-      accept: () => void;
-      dispose: (callback: (data: any) => void) => void;
-      data?: any;
-   };
-}
-
-export function startHotAppLoop(
-   appModule: HotModule,
-   element: HTMLElement,
-   store: Store,
-   widgets: Create<typeof Widget> | Create<typeof Widget>[],
-   options: StartAppLoopOptions = {},
-): () => void {
-   let stop: (() => void) | undefined;
-   //webpack (HMR)
-   if (appModule.hot) {
-      // accept itself
-      appModule.hot.accept();
-
-      // remember data on dispose
-      appModule.hot.dispose(function (data: any) {
-         data.state = store.getData();
-         if (stop) stop();
-      });
-
-      //apply data on hot replace
-      if (appModule.hot.data) store.load(appModule.hot.data.state);
-   }
-
-   Widget.resetCounter();
-
-   //app loop
-   return (stop = startAppLoop(element, store, widgets, options));
-}
+import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
+import { Widget, WidgetConfig } from "../Widget";
+import { Store } from "../../data/Store";
+import { Create } from "../../util/Component";
+
+export interface HotModule {
+   hot?: {
+      accept: () => void;
+      dispose: (callback: (data: any) => void) => void;
+      data?: any;
+   };
+}
+
+export function startHotAppLoop(
+   appModule: HotModule,
+   element: HTMLElement,
+   store: Store,
+   widgets: Create<typeof Widget> | Create<typeof Widget>[],
+   options: StartAppLoopOptions = {},
+): () => void {
+   let stop: (() => void) | undefined;
+   //webpack (HMR)
+   if (appModule.hot) {
+      // accept itself
+      appModule.hot.accept();
+
+      // remember data on dispose
+      appModule.hot.dispose(function (data: any) {
+         data.state = store.getData();
+         if (stop) stop();
+      });
+
+      //apply data on hot replace
+      if (appModule.hot.data?.state) store.load(appModule.hot.data.state);
+   }
+
+   Widget.resetCounter();
+
+   //app loop
+   return (stop = startAppLoop(element, store, widgets, options));
+}

package/src/ui/createFunctionalComponent.spec.tsx

@@ -12,6 +12,59 @@ import { Repeater } from "./Repeater";
 import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
 import { useStoreMethods } from "../hooks";
 
+describe("createFunctionalComponent type safety", () => {
+   interface MyComponentProps {
+      title: string;
+      count: number;
+      optional?: boolean;
+   }
+
+   const TypedComponent = createFunctionalComponent<MyComponentProps>(({ title, count, optional }) => (
+      <cx>
+         <div text={title} />
+         <div text={String(count)} />
+         {optional && <div text="optional shown" />}
+      </cx>
+   ));
+
+   it("rejects non-existing properties", () => {
+      const widget = (
+         <cx>
+            <TypedComponent
+               title="Test"
+               count={5}
+               // @ts-expect-error - nonExisting does not exist on MyComponentProps
+               nonExisting="invalid"
+            />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+
+   it("rejects wrong property type", () => {
+      const widget = (
+         <cx>
+            <TypedComponent
+               title="Test"
+               // @ts-expect-error - count should be number, not string
+               count="wrong"
+            />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+
+   it("rejects missing required properties", () => {
+      const widget = (
+         <cx>
+            {/* @ts-expect-error - count is required but missing */}
+            <TypedComponent title="Test" />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+});
+
 describe("createFunctionalComponent", () => {
    it("allows spread", () => {
       const SuperDiv = createFunctionalComponent(({ ...props }) => {

package/src/ui/createFunctionalComponent.ts

@@ -1,65 +1,86 @@
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { flattenProps } from "../ui/flattenProps";
-import { PureContainer } from "./PureContainer";
-import { UseParentLayout } from "./layout/UseParentLayout";
-import { isDefined } from "../util/isDefined";
-
-let currentInstance: any = null;
-
-class FunctionalComponent extends PureContainer {
-   declare childrenFactory: (props: any) => any;
-   declare props: any;
-
-   initInstance(context: any, instance: any) {
-      instance.store = instance.parentStore;
-      this.clear();
-      currentInstance = instance;
-      this.add(this.childrenFactory(this.props));
-      instance.content = this.layout ? this.layout.items : this.items;
-      this.clear();
-      currentInstance = null;
-   }
-
-   explore(context: any, instance: any) {
-      if (this.layout) this.layout.items = instance.content;
-      else this.items = instance.content;
-      this.exploreItems(context, instance, instance.content);
-      if (instance.computables) {
-         instance.computables.forEach((cb: any) => cb(instance.store.getData()));
-      }
-   }
-}
-
-export function createFunctionalComponent(factory: any) {
-   if (isComponentFactory(factory)) return factory;
-
-   return createComponentFactory(factory, (props: any = {}) => {
-      let innerProps = flattenProps(props);
-      delete innerProps.visible;
-      delete innerProps.if;
-      delete innerProps.controller;
-      delete innerProps.layout;
-      delete innerProps.outerLayout;
-      delete innerProps.putInto;
-      delete innerProps.contentFor;
-      delete innerProps.jsxAttributes;
-      delete innerProps.$type;
-      delete innerProps.vdomKey;
-
-      return {
-         type: FunctionalComponent,
-         visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
-         layout: props.layout || UseParentLayout,
-         controller: props.controller,
-         outerLayout: props.outerLayout,
-         putInto: props.contentFor || props.putInto,
-         vdomKey: props.vdomKey,
-         childrenFactory: factory,
-         props: innerProps,
-      };
-   });
-}
-
-export function getCurrentInstance() {
-   return currentInstance;
-}
+import { flattenProps } from "../ui/flattenProps";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { isDefined } from "../util/isDefined";
+import { ChildNode } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { UseParentLayout } from "./layout/UseParentLayout";
+
+let currentInstance: any = null;
+
+export interface FunctionalComponentConfig extends PureContainerConfig {
+   /** Factory function that creates children based on props. */
+   childrenFactory?: (props: any) => ChildNode | ChildNode[];
+
+   /** Props passed to the children factory. */
+   props?: any;
+}
+
+class FunctionalComponent extends PureContainerBase<FunctionalComponentConfig> {
+   declare childrenFactory: (props: any) => any;
+   declare props: any;
+
+   constructor(config?: FunctionalComponentConfig) {
+      super(config);
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = instance.parentStore;
+      this.clear();
+      currentInstance = instance;
+      this.add(this.childrenFactory(this.props));
+      instance.content = this.layout ? this.layout.items : this.items;
+      this.clear();
+      currentInstance = null;
+   }
+
+   explore(context: any, instance: any) {
+      if (this.layout) this.layout.items = instance.content;
+      else this.items = instance.content;
+      this.exploreItems(context, instance, instance.content);
+      if (instance.computables) {
+         instance.computables.forEach((cb: any) => cb(instance.store.getData()));
+      }
+   }
+}
+
+/** Brand type to mark CxJS functional components */
+export interface CxFunctionalComponent<Props = any> {
+   (props: Props & PureContainerConfig): any;
+   __cxFunctionalComponent: true;
+}
+
+export function createFunctionalComponent<Props = any>(
+   factory: (props: Props) => ChildNode | ChildNode[],
+): CxFunctionalComponent<Props> {
+   if (isComponentFactory(factory)) return factory as any;
+
+   return createComponentFactory(factory, (props: any = {}) => {
+      let innerProps = flattenProps(props);
+      delete innerProps.visible;
+      delete innerProps.if;
+      delete innerProps.controller;
+      delete innerProps.layout;
+      delete innerProps.outerLayout;
+      delete innerProps.putInto;
+      delete innerProps.contentFor;
+      delete innerProps.jsxAttributes;
+      delete innerProps.$type;
+      delete innerProps.vdomKey;
+
+      return {
+         type: FunctionalComponent,
+         visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
+         layout: props.layout || UseParentLayout,
+         controller: props.controller,
+         outerLayout: props.outerLayout,
+         putInto: props.contentFor || props.putInto,
+         vdomKey: props.vdomKey,
+         childrenFactory: factory,
+         props: innerProps,
+      };
+   });
+}
+
+export function getCurrentInstance() {
+   return currentInstance;
+}

package/src/ui/expr.ts

@@ -4,6 +4,9 @@ import { AccessorChain } from "../data/createAccessorModelProxy";
 import { Selector } from "../data/Selector";
 import { Expr } from "./Prop";
 
+// Helper type to infer value type from AccessorChain, handling `any` correctly
+type InferAccessorValue<T> = 0 extends 1 & T ? any : T extends AccessorChain<infer V> ? V : never;
+
 export function expr(code: string): Expr;
 export function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
 export function expr<V1, V2, R>(
@@ -25,7 +28,7 @@ export function expr<V1, V2, V3, V4, R>(
    compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R,
 ): Selector<R>;
 export function expr<T extends AccessorChain<any>[], R>(
-   ...args: [...accessors: T, compute: (...values: { [K in keyof T]: T[K] extends AccessorChain<infer V> ? V : never }) => R]
+   ...args: [...accessors: T, compute: (...values: { [K in keyof T]: InferAccessorValue<T[K]> }) => R]
 ): Selector<R>;
 export function expr(...args: any[]): any {
    let text = args[0];