cx 25.11.1 → 26.0.1

package/src/hooks/resolveCallback.spec.tsx

@@ -0,0 +1,48 @@
+import assert from "assert";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { resolveCallback } from "./resolveCallback";
+
+describe("resolveCallback", () => {
+   it("works with functions", () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: (value: string) => void }) => {
+         let callback = resolveCallback(onTest);
+         assert(typeof callback === 'function');
+         callback("works");
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = createTestRenderer(store, <cx><FComp onTest={(v: string) => { value = v }} /></cx>);
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+
+   it("works with controller methods", () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: string | ((value: string) => void) }) => {
+         let callback = resolveCallback(onTest);
+         assert(typeof callback === 'function');
+         return (
+            <cx>
+               <div onInit={() => { callback("works"); }} />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = createTestRenderer(store, <cx><FComp onTest="onTest" controller={{
+         onTest(v: string) { value = v }
+      }} /></cx>);
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+});

package/src/hooks/resolveCallback.ts

@@ -0,0 +1,16 @@
+import { isFunction } from "../util/isFunction";
+import { isString } from "../util/isString";
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { Instance } from "../ui/Instance";
+
+export function resolveCallback(
+   callback: string | ((...args: any[]) => any),
+   instance?: Instance,
+): ((...args: any[]) => any) | undefined {
+   if (isFunction(callback)) return callback;
+   if (isString(callback)) {
+      if (!instance) instance = getCurrentInstance();
+      return (...args: any[]) => instance!.invokeControllerMethod(callback, ...args);
+   }
+   return undefined;
+}

package/src/hooks/store.spec.tsx

@@ -0,0 +1,67 @@
+import assert from "assert";
+import { Prop } from "../ui/Prop";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { computable } from "../data";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { ref } from "./store";
+
+describe("ref", () => {
+   it("allows store references in functional components", () => {
+      const FComp = createFunctionalComponent(({}) => {
+         let testValue = ref({ bind: "x", defaultValue: 10 });
+         return (
+            <cx>
+               <div text={testValue} />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, FComp);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["10"],
+         props: {},
+      });
+   });
+
+   it("can be used to adapt any prop passed to a functional component", () => {
+      const FComp = createFunctionalComponent(({ value }: { value: Prop<any> }) => {
+         return (
+            <cx>
+               <div text={computable(ref(value), (value) => `x${value}`)} />
+            </cx>
+         );
+      });
+
+      let store = new Store({ data: { value: 100 } });
+
+      function test(value: Prop<any>, expectation: any) {
+         const component = createTestRenderer(store, <FComp value={value} />);
+         let tree = component.toJSON();
+         assert.deepEqual(tree, {
+            type: "div",
+            children: [expectation],
+            props: {},
+         });
+      }
+
+      test({ bind: "value" }, "x100");
+      test({ expr: "{value}" }, "x100");
+      test({ tpl: "{value:n;2}" }, "x100.00");
+      test(200, "x200");
+      test(() => 500, "x500");
+      test(
+         computable("value", (value: string) => value + 100),
+         "x200",
+      );
+      test(null, "xnull");
+      test(undefined, "xundefined");
+      test(0, "x0");
+      test(false, "xfalse");
+   });
+});

package/src/hooks/store.ts

@@ -0,0 +1,46 @@
+import { Selector } from "../data/Selector";
+import { BindingObject, isBindingObject } from "../data/Binding";
+import { expression } from "../data/Expression";
+import { getSelector } from "../data/getSelector";
+import { Ref } from "../data/Ref";
+import { stringTemplate } from "../data/StringTemplate";
+import { View } from "../data/View";
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { GetSet, Prop } from "../ui/Prop";
+import { hasFunctionAtKey, hasStringAtKey } from "../util/hasKey";
+import { isObject } from "../util/isObject";
+
+export function useStore(): View {
+   return getCurrentInstance().store;
+}
+
+export function useStoreMethods(): ReturnType<View["getMethods"]> {
+   return getCurrentInstance().store.getMethods();
+}
+
+export type RefInput<T> = Prop<T> | Ref<T>;
+
+export function ref<T = any>(input: BindingObject): GetSet<T>;
+export function ref<T = any>(input: Ref<T>): GetSet<T>;
+export function ref<T = any>(input: Prop<T>): Selector<T>;
+export function ref<T = any>(info: unknown): GetSet<T> | Selector<T> {
+   if (isObject(info)) {
+      if (isBindingObject(info)) return useStore().ref(info.bind, info.defaultValue);
+      if (hasFunctionAtKey(info, "get")) return info as unknown as Ref<T>;
+      if (hasFunctionAtKey(info, "memoize")) return info as unknown as Selector<T>;
+      if (hasStringAtKey(info, "expr")) {
+         let store = useStore();
+         let selector = expression(info.expr).memoize();
+         return new Ref<T>({ get: () => selector(store.getData()), set: (info as any).set }) as unknown as Selector<T>;
+      }
+      if (hasStringAtKey(info, "tpl")) {
+         let store = useStore();
+         let selector = stringTemplate(info.tpl).memoize();
+         return new Ref<T>({
+            get: () => selector(store.getData()) as T,
+            set: (info as any).set,
+         }) as unknown as Selector<T>;
+      }
+   }
+   return getSelector(info);
+}

package/src/hooks/useEffect.ts

@@ -0,0 +1,14 @@
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+
+export function useEffect(callback: () => (() => void) | void): void {
+   let destroyCallback = callback();
+   if (destroyCallback) getCurrentInstance().subscribeOnDestroy(destroyCallback);
+}
+
+export function useCleanup(cleanupCallback: () => void): () => void {
+   let unsubscribe = getCurrentInstance().subscribeOnDestroy(cleanupCallback);
+   return () => {
+      unsubscribe();
+      cleanupCallback();
+   };
+}

package/src/hooks/useInterval.ts

@@ -0,0 +1,8 @@
+import { useCleanup } from "./useEffect";
+
+export function useInterval(callback: () => void, timeout: number): () => void {
+   let timer = setInterval(callback, timeout);
+   return useCleanup(() => {
+      clearInterval(timer);
+   });
+}

package/src/hooks/useState.ts

@@ -0,0 +1,20 @@
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { Ref } from "../data/Ref";
+
+let key: number = 0;
+
+export function useState<T = any>(defaultValue?: T): Ref<T> {
+   let instance = getCurrentInstance();
+   let storeKey = "_state" + ++key;
+   instance.setState({
+      [storeKey]: defaultValue,
+   });
+
+   return new Ref<T>({
+      get: (): T => instance.state[storeKey],
+      set: (value: T): boolean => {
+         instance.setState({ [storeKey]: value });
+         return true;
+      },
+   });
+}

package/src/hooks/useTrigger.spec.tsx

@@ -0,0 +1,99 @@
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { useTrigger } from "./useTrigger";
+
+describe("useTrigger", () => {
+   it("works", () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(["test"], (test) => {
+            last = test;
+         });
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = 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);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("fires immediately if the last argument is true", () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            ["test"],
+            (test) => {
+               last = test;
+            },
+            true,
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = createTestRenderer(store, FComp);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("accepts refs as arguments", () => {
+      let last = null;
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            [test],
+            (test) => {
+               last = test;
+            },
+            true,
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      const component = createTestRenderer(store, FComp);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+});

package/src/hooks/useTrigger.ts

@@ -0,0 +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);
+}

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

@@ -0,0 +1,72 @@
+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;
+   }
+}

package/src/locale/de-de.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "de-de";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Dieses Feld wird benötigt.",
+   validatingText: "Wird validiert...",
+   validationExceptionText:
+      "Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Wird geladen...",
+   queryErrorText: "Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.",
+   noResultsText: "Keine Ergebnisse gefunden.",
+   minQueryLengthMessageText: "Geben Sie mindestens {0} Zeichen ein.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Wählen Sie {0:d} oder vorher.",
+   maxExclusiveErrorText: "Wählen Sie ein Datum vor dem {0:d}.",
+   minValueErrorText: "Wählen Sie {0:d} oder später.",
+   minExclusiveErrorText: "Wählen Sie ein Datum nach dem {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Heute",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Ungültiges Datum eingegeben.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Geben Sie {0} oder weniger ein.",
+   maxExclusiveErrorText: "Geben Sie eine Zahl kleiner als {0} ein.",
+   minValueErrorText: "Geben Sie {0} oder mehr ein.",
+   minExclusiveErrorText: "Geben Sie eine Zahl größer als {0} ein.",
+   inputErrorText: "Ungültige Zahl eingegeben.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "Ungültige Eingabe.",
+   minLengthValidationErrorText: "Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.",
+   maxLengthValidationErrorText: "Benutzen Sie {0} oder weniger Zeichen.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Wird hochgeladen...",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Ja",
+   noText: "Nein",
+});

package/src/locale/en-us.ts

@@ -0,0 +1,75 @@
+import { Localization } from "../ui/Localization";
+
+const c = "en-us";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "This field is required.",
+   validatingText: "Validation is in progress...",
+   validationExceptionText: "Something went wrong during input validation. Check log for more details.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Loading...",
+   queryErrorText: "Error occurred while querying for lookup data.",
+   noResultsText: "No results found.",
+   minQueryLengthMessageText: "Type in at least {0} character(s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Select {0:d} or before.",
+   maxExclusiveErrorText: "Select a date before {0:d}.",
+   minValueErrorText: "Select {0:d} or later.",
+   minExclusiveErrorText: "Select a date after {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Today",
+   startWithMonday: false,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Invalid date entered.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Enter {0} or less.",
+   maxExclusiveErrorText: "Enter a number less than {0}.",
+   minValueErrorText: "Enter {0} or more.",
+   minExclusiveErrorText: "Enter a number greater than {0}.",
+   inputErrorText: "Invalid number entered.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "The entered value is not valid.",
+   minLengthValidationErrorText: "Enter {[{0}-{1}]} more character(s).",
+   maxLengthValidationErrorText: "Use {0} characters or fewer.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Upload is in progress.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Yes",
+   noText: "No",
+});

package/src/locale/es-es.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "es-es";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Este campo es requerido.",
+   validatingText: "La validación está en progreso...",
+   validationExceptionText:
+      "Algo salió mal durante la validación de entrada. Revise el registro para más detalles.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Cargando...",
+   queryErrorText: "Se produjo un error al consultar los datos de búsqueda.",
+   noResultsText: "No se han encontrado resultados.",
+   minQueryLengthMessageText: "Escriba al menos {0} caracteres.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Seleccione {0: d} o antes.",
+   maxExclusiveErrorText: "Seleccione una fecha antes {0:d}.",
+   minValueErrorText: "Seleccione {0: d} o posterior",
+   minExclusiveErrorText: "Seleccione una fecha después de {0: d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Hoy",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Fecha introducida no es válida.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Ingrese {0} o menos.",
+   maxExclusiveErrorText: "Ingrese un número menor que {0}.",
+   minValueErrorText: "Ingrese {0} o más.",
+   minExclusiveErrorText: "Ingrese un número mayor que {0}.",
+   inputErrorText: "Número inválido ingresado.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "El valor ingresado no es válido.",
+   minLengthValidationErrorText: "Ingrese {[{0} - {1}]} más caracteres.",
+   maxLengthValidationErrorText: "Use {0} caracteres o menos.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "La carga está en progreso.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Sí",
+   noText: "No",
+});