cx 26.0.5 → 26.0.8

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,72 +1,75 @@
-import type { JSX as ReactJSX } from "react";
-import { Instance } from "./ui/Instance";
-import type { Prop } from "./ui/Prop";
-import { Widget } from "./ui/Widget";
-import { isArray } from "./util/isArray";
-import { isString } from "./util/isString";
-import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
-
-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;
-   }
-
-   return {
-      $type: typeName,
-      ...props,
-      jsxAttributes: props && Object.keys(props),
-   };
-}
-
-export const jsxs = jsx;
-
-type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
-// Check if a key is an event handler (starts with "on" and is a function)
-type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
-
-// CxJS event handler type - can be string (controller method) or callback with Instance
-type CxEventHandler<T> = T extends (event: infer E) => any
-   ? string | ((event: E, instance: Instance) => void)
-   : string | T;
-
-type CxIntrinsicElement<T> = {
-   [K in keyof T]: K extends "children"
-      ? any
-      : IsEventHandler<K, T[K]> extends true
-        ? CxEventHandler<T[K]>
-        : Prop<T[K]>;
-} & HtmlElementConfig;
-
-type CxIntrinsicElements = {
-   [K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;
-};
-
-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;
-   }
-}
+import type { JSX as ReactJSX } from "react";
+import { Instance } from "./ui/Instance";
+import type { ClassProp, Prop } from "./ui/Prop";
+import { Widget } from "./ui/Widget";
+import { isArray } from "./util/isArray";
+import { isString } from "./util/isString";
+import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
+import { ChildNode } from "./ui/Container";
+
+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;
+   }
+
+   return {
+      $type: typeName,
+      ...props,
+      jsxAttributes: props && Object.keys(props),
+   };
+}
+
+export const jsxs = jsx;
+
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+// Check if a key is an event handler (starts with "on" and is a function)
+type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
+
+// CxJS event handler type - can be string (controller method) or callback with Instance
+type CxEventHandler<T> = T extends (event: infer E) => any
+   ? string | ((event: E, instance: Instance) => void)
+   : string | T;
+
+type CxIntrinsicElement<T> = {
+   [K in keyof T]: K extends "children"
+      ? ChildNode | ChildNode[]
+      : K extends "className" | "class"
+        ? ClassProp
+        : IsEventHandler<K, T[K]> extends true
+          ? CxEventHandler<T[K]>
+          : Prop<T[K]>;
+} & HtmlElementConfig;
+
+type CxIntrinsicElements = {
+   [K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;
+};
+
+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;
+   }
+}

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;

package/src/ui/CSSHelper.ts

@@ -1,17 +1,17 @@
-var cssHelperCache: { [key: string]: any } = {};
-
-export class CSSHelper {
-   static get(code: string): any {
-      var helper = cssHelperCache[code];
-      if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
-      return helper;
-   }
-
-   static register(code: string, helper: any): void {
-      cssHelperCache[code] = helper;
-   }
-
-   static alias(code: string, helper: any): void {
-      cssHelperCache[code] = helper;
-   }
-}
+var cssHelperCache: { [key: string]: any } = {};
+
+export class CSSHelper {
+   static get(code: string): any {
+      var helper = cssHelperCache[code];
+      if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
+      return helper;
+   }
+
+   static register(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+
+   static alias(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+}