cx 26.4.1 → 26.4.2

package/src/charts/shapes.tsx

@@ -35,39 +35,45 @@ export function getAvailableShapes(): string[] {
 }
 
 export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <circle key={key} {...rest} cx={cx} cy={cy} r={size / 2} />;
 }
 registerShape("circle", circle);
 
 export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
 }
 registerShape("square", square);
 registerShape("rect", square);
 
 export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
 }
 registerShape("bar", bar);
 
 export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
 }
 registerShape("column", column);
 
 export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+   const { key, ...rest } = props ?? {};
+   return <line key={key} {...rest} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
 }
 registerShape("line", line);
 registerShape("hline", line);
 
 export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <line key={key} {...rest} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
 }
 registerShape("vline", vline);
 
@@ -80,7 +86,8 @@ export function triangle(cx: number, cy: number, size: number, props?: Config, o
    d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
    d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
    d += `Z`;
-   return <path {...props} d={d} />;
+   const { key, ...rest } = props ?? {};
+   return <path key={key} {...rest} d={d} />;
 }
 
 registerShape("triangle", triangle);

package/src/data/createAccessorModelProxy.ts

@@ -1,66 +1,66 @@
-// Homomorphic mapped type preserves Go-to-Definition in IDEs
-// -? strips optionality, as clause filters conflicting method names
-type AccessorChainMap<M> = {
-   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
-};
-
-// Check if a type is `any` using the intersection trick
-type IsAny<T> = 0 extends 1 & T ? true : false;
-
-export type AccessorChain<M> = (IsAny<M> extends true
-   ? { [key: string]: any } // Allow any property access for `any` type
-   : [M] extends [object]
-     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
-     : [NonNullable<M>] extends [object]
-       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
-       : {}) & {
-   toString(): string;
-   valueOf(): M | undefined;
-   nameOf(): string;
-};
-
-const emptyFn = () => {};
-
-export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
-   let lastOp: string | null = null;
-
-   const proxy = new Proxy(emptyFn, {
-      get: (_, name: string | symbol) => {
-         if (typeof name !== "string") return proxy;
-
-         switch (name) {
-            case "isAccessorChain":
-               return true;
-
-            case "toString":
-            case "valueOf":
-            case "nameOf":
-               lastOp = name;
-               return proxy;
-         }
-
-         let newChain = chain;
-         if (newChain.length > 0) newChain += ".";
-         newChain += name;
-         return createAccessorModelProxy(newChain);
-      },
-
-      apply(): string {
-         switch (lastOp) {
-            case "nameOf":
-               const lastDotIndex = chain.lastIndexOf(".");
-               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
-
-            default:
-               return chain;
-         }
-      },
-   });
-   return proxy as unknown as AccessorChain<M>;
-}
-
-export const createModel = createAccessorModelProxy;
-
-export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
-   return value != null && !!(value as any).isAccessorChain;
-}
+// Homomorphic mapped type preserves Go-to-Definition in IDEs
+// -? strips optionality, as clause filters conflicting method names
+type AccessorChainMap<M> = {
+   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
+};
+
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+export type AccessorChain<M> = (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : [M] extends [object]
+     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
+     : [NonNullable<M>] extends [object]
+       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
+       : {}) & {
+   toString(): string;
+   valueOf(): M | undefined;
+   nameOf(): string;
+};
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export const createModel = createAccessorModelProxy;
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}

package/src/ui/DataProxy.ts

@@ -1,55 +1,55 @@
-import { AccessorChain } from "../data";
-import { NestedDataView } from "../data/NestedDataView";
-import { StructuredProp, WritableProp } from "./Prop";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-
-export interface DataProxyConfig extends PureContainerConfig {
-   /** Data object with computed values to be exposed in the local store. */
-   data?: StructuredProp;
-
-   /** Binding to a value to be exposed under the `alias` name. */
-   value?: WritableProp<any>;
-
-   /** Alias name under which `value` is exposed in the local store. */
-   alias?: string | AccessorChain<any>;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that local store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export class DataProxy extends PureContainerBase<DataProxyConfig> {
-   declare data?: any;
-   declare alias?: string;
-   declare value?: any;
-   declare immutable: boolean;
-   declare sealed: boolean;
-
-   init() {
-      if (!this.data) this.data = {};
-
-      if (this.alias) this.data[this.alias] = this.value;
-
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new NestedDataView({
-         store: instance.parentStore,
-         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
-         immutable: this.immutable,
-         sealed: this.sealed,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-DataProxy.prototype.immutable = false;
-DataProxy.prototype.sealed = false;
+import { AccessorChain } from "../data";
+import { NestedDataView } from "../data/NestedDataView";
+import { StructuredProp, WritableProp } from "./Prop";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+
+export interface DataProxyConfig extends PureContainerConfig {
+   /** Data object with computed values to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Binding to a value to be exposed under the `alias` name. */
+   value?: WritableProp<any>;
+
+   /** Alias name under which `value` is exposed in the local store. */
+   alias?: string | AccessorChain<any>;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that local store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export class DataProxy extends PureContainerBase<DataProxyConfig> {
+   declare data?: any;
+   declare alias?: string;
+   declare value?: any;
+   declare immutable: boolean;
+   declare sealed: boolean;
+
+   init() {
+      if (!this.data) this.data = {};
+
+      if (this.alias) this.data[this.alias] = this.value;
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new NestedDataView({
+         store: instance.parentStore,
+         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+         immutable: this.immutable,
+         sealed: this.sealed,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;

package/src/ui/Repeater.spec.tsx

@@ -1,181 +1,181 @@
-import { Store } from "../data/Store";
-import { Repeater } from "./Repeater";
-import { bind } from "./bind";
-import { createTestRenderer, act } from "../util/test/createTestRenderer";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-
-import assert from "assert";
-
-describe("Repeater", () => {
-   it("allows sorting", async () => {
-      let data = [
-         {
-            value: "C",
-         },
-         {
-            value: "B",
-         },
-         {
-            value: "A",
-         },
-      ];
-
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div text={bind("$item.value")} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-   });
-
-   it("changes are properly updated", async () => {
-      let divInstances: any[] = [];
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div
-                     text={bind("$item.value")}
-                     onExplore={(context, instance) => {
-                        divInstances.push(instance);
-                     }}
-                  />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            data: [
-               {
-                  value: "C",
-               },
-               {
-                  value: "B",
-               },
-            ],
-         },
-      });
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      divInstances = [];
-
-      await act(async () => {
-         store.update("data", (data) => [{ value: "A" }, ...data]);
-      });
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      assert.equal(divInstances.length, 3);
-      assert.equal(divInstances[0].store.get("$item.value"), "A");
-      assert.equal(divInstances[1].store.get("$item.value"), "B");
-      assert.equal(divInstances[2].store.get("$item.value"), "C");
-   });
-
-   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
-      interface Item {
-         name: string;
-         active: boolean;
-      }
-
-      interface AppModel {
-         items: Item[];
-         $item: Item;
-      }
-
-      const m = createAccessorModelProxy<AppModel>();
-
-      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
-      const widget = (
-         <cx>
-            <div>
-               <Repeater
-                  records={m.items}
-                  recordAlias={m.$item}
-                  onCreateFilter={() => (record) => {
-                     // If T is correctly inferred as Item, record.name should be string
-                     const name: string = record.name;
-                     // @ts-expect-error - record.name should be string, not number
-                     const wrong: number = record.name;
-                     return record.active;
-                  }}
-               >
-                  <div text={m.$item.name} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      assert.ok(widget);
-   });
-});
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+import assert from "assert";
+
+describe("Repeater", () => {
+   it("allows sorting", async () => {
+      let data = [
+         {
+            value: "C",
+         },
+         {
+            value: "B",
+         },
+         {
+            value: "A",
+         },
+      ];
+
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div text={bind("$item.value")} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+   });
+
+   it("changes are properly updated", async () => {
+      let divInstances: any[] = [];
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div
+                     text={bind("$item.value")}
+                     onExplore={(context, instance) => {
+                        divInstances.push(instance);
+                     }}
+                  />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            data: [
+               {
+                  value: "C",
+               },
+               {
+                  value: "B",
+               },
+            ],
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      divInstances = [];
+
+      await act(async () => {
+         store.update("data", (data) => [{ value: "A" }, ...data]);
+      });
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      assert.equal(divInstances.length, 3);
+      assert.equal(divInstances[0].store.get("$item.value"), "A");
+      assert.equal(divInstances[1].store.get("$item.value"), "B");
+      assert.equal(divInstances[2].store.get("$item.value"), "C");
+   });
+
+   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
+      interface Item {
+         name: string;
+         active: boolean;
+      }
+
+      interface AppModel {
+         items: Item[];
+         $item: Item;
+      }
+
+      const m = createAccessorModelProxy<AppModel>();
+
+      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
+      const widget = (
+         <cx>
+            <div>
+               <Repeater
+                  records={m.items}
+                  recordAlias={m.$item}
+                  onCreateFilter={() => (record) => {
+                     // If T is correctly inferred as Item, record.name should be string
+                     const name: string = record.name;
+                     // @ts-expect-error - record.name should be string, not number
+                     const wrong: number = record.name;
+                     return record.active;
+                  }}
+               >
+                  <div text={m.$item.name} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      assert.ok(widget);
+   });
+});