cx 22.3.1 → 22.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.3.1",
+   "version": "22.3.2",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/core.d.ts

@@ -13,12 +13,10 @@ declare namespace Cx {
 
    type Tpl = {
       tpl: string;
-      defaultValue?: any;
    };
 
    type Expr = {
       expr: string;
-      defaultValue?: any;
    };
 
    type Binding = Bind | Tpl | Expr;
@@ -29,7 +27,13 @@ declare namespace Cx {
       [prop: string]: Selector<any>;
    }
 
-   type Prop<T> = Binding | T | Selector<T>;
+   type AccessorChain<M> = {
+      toString(): string;
+   } & {
+      [prop in keyof M]: AccessorChain<M[prop]>;
+   };
+
+   type Prop<T> = T | Binding | Selector<T> | AccessorChain<T>;
 
    interface Record {
       [prop: string]: any;
@@ -51,6 +55,8 @@ declare namespace Cx {
    type RecordsProp = Prop<Record[]>;
    type SortersProp = Prop<Sorter[]>;
 
+   type RecordAlias<V = any> = string | AccessorChain<V[]>;
+
    interface WidgetProps {
       /** Inner layout used to display children inside the widget. */
       layout?: any;
@@ -122,7 +128,7 @@ declare namespace Cx {
       style?: StyleProp;
 
       /** Style object applied to the element */
-      styles?: Cx.StyleProp;
+      styles?: StyleProp;
    }
 
    interface HtmlElementProps extends StyledContainerProps {
@@ -130,7 +136,7 @@ declare namespace Cx {
       id?: string | number | Binding | Selector<string | number>;
 
       /** Inner text contents. */
-      text?: string | number | Binding | Selector<string | number>;
+      text?: Cx.StringProp | Cx.NumberProp;
 
       /** Tooltip configuration. */
       tooltip?: StringProp | StructuredProp;
@@ -176,6 +182,35 @@ declare global {
       interface IntrinsicElements {
          cx: any;
       }
+
+      interface IntrinsicAttributes {
+         /** Inner layout used to display children inside the widget. */
+         layout?: any;
+
+         /** Outer (wrapper) layout used to display the widget in. */
+         outerLayout?: any;
+
+         /** Name of the ContentPlaceholder that should be used to display the widget. */
+         putInto?: string;
+
+         /** Name of the ContentPlaceholder that should be used to display the widget. */
+         contentFor?: string;
+
+         /** Controller. */
+         controller?: any;
+
+         /** Visibility of the widget. Defaults to `true`. */
+         visible?: Cx.BooleanProp;
+
+         /** Visibility of the widget. Defaults to `true`. */
+         if?: Cx.BooleanProp;
+
+         /** Appearance modifier. For example, mod="big" will add the CSS class `.cxm-big` to the block element. */
+         mod?: Cx.StringProp | Cx.Prop<string[]> | Cx.StructuredProp;
+
+         /** Cache render output. Default is `true`. */
+         memoize?: Cx.BooleanProp;
+      }
    }
 }
 
@@ -183,7 +218,7 @@ declare module "react" {
    interface ClassAttributes<T> extends Cx.PureContainerProps {
       class?: Cx.ClassProp;
       styles?: Cx.StyleProp;
-      text?: Cx.StringProp;
+      text?: Cx.StringProp | Cx.NumberProp;
       innerText?: Cx.StringProp;
       html?: Cx.StringProp;
       innerHtml?: Cx.StringProp;

package/src/data/Binding.d.ts

@@ -1,15 +1,16 @@
-import { Record } from "../core";
+import { Record, AccessorChain } from "../core";
 
-export class Binding {
+export class Binding<V = any> {
    constructor(path: string);
 
-   set(state: Record, value: any): Record;
+   set(state: Record, value: V): Record;
 
    delete(state: Record): Record;
 
    value(state: Record): any;
 
    static get(path: string): Binding;
+   static get<V>(chain: AccessorChain<V>): Binding<V>;
 }
 
 export function isBinding(value: any): boolean;

package/src/data/Binding.js

@@ -1,24 +1,25 @@
 let bindingCache = {};
 import { isString } from "../util/isString";
 import { isObject } from "../util/isObject";
+import { isAccessorChain } from "./createAccessorModelProxy";
 
 export class Binding {
    constructor(path) {
       this.path = path;
       this.parts = path.split(".");
-      let fstr = "return (x";
-      let cpath = "x";
+      let body = "return (x";
+      let selector = "x";
 
       for (let i = 0; i < this.parts.length; i++) {
-         if (this.parts[i][0] >= "0" && this.parts[i][0] <= "9") cpath += "[" + this.parts[i] + "]";
-         else cpath += "." + this.parts[i];
+         if (this.parts[i][0] >= "0" && this.parts[i][0] <= "9") selector += "[" + this.parts[i] + "]";
+         else selector += "." + this.parts[i];
 
-         if (i + 1 < this.parts.length) fstr += " && " + cpath;
-         else fstr += " ? " + cpath + " : undefined";
+         if (i + 1 < this.parts.length) body += " && " + selector;
+         else body += " ? " + selector + " : undefined";
       }
 
-      fstr += ")";
-      this.value = new Function("x", fstr);
+      body += ")";
+      this.value = new Function("x", body);
    }
 
    set(state, value) {
@@ -72,11 +73,14 @@ export class Binding {
 
       if (path instanceof Binding) return path;
 
+      if (isAccessorChain(path)) return this.get(path.toString());
+
       throw new Error("Invalid binding definition provided.");
    }
 }
 
 export function isBinding(value) {
    if (isObject(value) && isString(value.bind)) return true;
+   if (value && value.isAccessorChain) return true;
    return value instanceof Binding;
 }

package/src/data/Store.d.ts

@@ -1,12 +1,12 @@
-import {View, ViewConfig} from './View';
+import { View, ViewConfig } from "./View";
 
-interface StoreConfig extends ViewConfig {
+interface StoreConfig<D = any> extends ViewConfig {
    async?: boolean;
-   data?: any;
+   data?: D;
 }
 
-export class Store extends View {
-   constructor(config?: StoreConfig);
+export class Store<D = any> extends View<D> {
+   constructor(config?: StoreConfig<D>);
 
    unsubscribeAll(): void;
 

package/src/data/Store.js

@@ -24,7 +24,7 @@ export class Store extends SubscribableView {
       }
       return false;
    }
-   
+
    deleteItem(path) {
       let next = Binding.get(path).delete(this.data);
       if (next != this.data) {
@@ -35,7 +35,7 @@ export class Store extends SubscribableView {
       }
       return false;
    }
-   
+
    clear() {
       this.data = {};
       this.meta.version++;

package/src/data/StoreRef.js

@@ -1,8 +1,10 @@
+import { isAccessorChain } from "./createAccessorModelProxy";
 import { Ref } from "./Ref";
 
 export class StoreRef extends Ref {
    constructor(config) {
       super(config);
+      if (isAccessorChain(this.path)) this.path = this.path.toString();
    }
 
    get() {

package/src/data/StructuredSelector.js

@@ -1,94 +1,83 @@
-import {Binding} from './Binding';
-import {Expression} from './Expression';
-import {StringTemplate} from './StringTemplate';
-import {createStructuredSelector} from '../data/createStructuredSelector';
-import {getSelector} from '../data/getSelector';
-import {isFunction} from '../util/isFunction';
-import {isUndefined} from '../util/isUndefined';
-import {isDefined} from '../util/isDefined';
-import {isArray} from '../util/isArray';
+import { Binding } from "./Binding";
+import { Expression } from "./Expression";
+import { StringTemplate } from "./StringTemplate";
+import { createStructuredSelector } from "../data/createStructuredSelector";
+import { getSelector } from "../data/getSelector";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isDefined } from "../util/isDefined";
+import { isArray } from "../util/isArray";
+import { isAccessorChain } from "./createAccessorModelProxy";
 
 function defaultValue(pv) {
-   if (typeof pv == 'object' && pv && pv.structured)
-      return pv.defaultValue;
+   if (typeof pv == "object" && pv && pv.structured) return pv.defaultValue;
 
    return pv;
 }
 
 function getSelectorConfig(props, values, nameMap) {
-
    let functions = {},
       structures = {},
       defaultValues = {},
-      constants, p, v, pv,
+      constants,
+      p,
+      v,
+      pv,
       constant = true;
 
    for (p in props) {
       v = values[p];
       pv = props[p];
 
-      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr))
-         v = pv;
+      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr)) v = pv;
 
       if (v === null) {
-         if (!constants)
-            constants = {};
+         if (!constants) constants = {};
          constants[p] = null;
-      }
-      else if (typeof v == 'object') {
+      } else if (typeof v == "object") {
          if (v.bind) {
-            if (isUndefined(v.defaultValue) && v != pv)
-               v.defaultValue = defaultValue(pv);
-            if (isDefined(v.defaultValue))
-               defaultValues[v.bind] = v.defaultValue;
+            if (isUndefined(v.defaultValue) && v != pv) v.defaultValue = defaultValue(pv);
+            if (isDefined(v.defaultValue)) defaultValues[v.bind] = v.defaultValue;
             nameMap[p] = v.bind;
             functions[p] = Binding.get(v.bind).value;
             constant = false;
-         }
-         else if (v.expr) {
+         } else if (v.expr) {
             functions[p] = Expression.get(v.expr);
             constant = false;
-         }
-         else if (v.get) {
+         } else if (v.get) {
             functions[p] = v.get;
             constant = false;
-         }
-         else if (v.tpl) {
+         } else if (v.tpl) {
             functions[p] = StringTemplate.get(v.tpl);
             constant = false;
-         }
-         else if (pv && typeof pv == 'object' && pv.structured) {
-            if (isArray(v))
-               functions[p] = getSelector(v);
+         } else if (pv && typeof pv == "object" && pv.structured) {
+            if (isArray(v)) functions[p] = getSelector(v);
             else {
                let s = getSelectorConfig(v, v, {});
                structures[p] = s;
                Object.assign(defaultValues, s.defaultValues);
             }
             constant = false;
-         } 
-         else {
-            if (!constants)
-               constants = {};
+         } else {
+            if (!constants) constants = {};
             constants[p] = v;
          }
-      }
-      else if (isFunction(v)) {
-         functions[p] = v;
+      } else if (isFunction(v)) {
+         if (isAccessorChain(v)) {
+            let path = v.toString();
+            nameMap[p] = path;
+            functions[p] = Binding.get(path).value;
+         } else functions[p] = v;
          constant = false;
-      }
-      else {
+      } else {
          if (isUndefined(v)) {
-            if (isUndefined(pv))
-               continue;
+            if (isUndefined(pv)) continue;
             v = defaultValue(pv);
          }
 
-         if (isUndefined(v))
-            continue;
+         if (isUndefined(v)) continue;
 
-         if (!constants)
-            constants = {};
+         if (!constants) constants = {};
 
          constants[p] = v;
       }
@@ -99,7 +88,7 @@ function getSelectorConfig(props, values, nameMap) {
       structures,
       defaultValues,
       constants,
-      constant
+      constant,
    };
 }
 
@@ -110,15 +99,13 @@ function createSelector({ functions, structures, constants, defaultValues }) {
       selector[n] = functions[n];
    }
 
-   for (let n in structures)
-      selector[n] = createSelector(structures[n]);
+   for (let n in structures) selector[n] = createSelector(structures[n]);
 
    return createStructuredSelector(selector, constants);
 }
 
 export class StructuredSelector {
-
-   constructor({props, values}) {
+   constructor({ props, values }) {
       this.nameMap = {};
       this.config = getSelectorConfig(props, values, this.nameMap);
    }
@@ -129,17 +116,16 @@ export class StructuredSelector {
 
    create() {
       let selector = createSelector(this.config);
-      if (selector.memoize)
-         return selector.memoize();
+      if (selector.memoize) return selector.memoize();
       return selector;
    }
 
    createStoreSelector() {
       if (this.config.constant) {
-         let result = {...this.config.constants};
+         let result = { ...this.config.constants };
          return () => result;
       }
       let selector = this.create();
-      return store => selector(store.getData());
+      return (store) => selector(store.getData());
    }
 }

package/src/data/StructuredSelector.spec.js

@@ -1,93 +1,94 @@
-import {StructuredSelector} from './StructuredSelector';
-import assert from 'assert';
+import { StructuredSelector } from "./StructuredSelector";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
 
-describe('StructuredSelector', function() {
-   describe('#create()', function () {
-      it('constants', function () {
+describe("StructuredSelector", function () {
+   describe("#create()", function () {
+      it("constants", function () {
          var x = {};
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
                a: 1,
-               b: 2
-            }
+               b: 2,
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 1, b: 2});
+         assert.deepEqual(s(x), { a: 1, b: 2 });
       });
 
-      it('bindings', function () {
+      it("bindings", function () {
          var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
-               a: { bind: 'b' },
-               b: { bind: 'a' }
-            }
+               a: { bind: "b" },
+               b: { bind: "a" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 2, b: 1});
+         assert.deepEqual(s(x), { a: 2, b: 1 });
       });
 
-      it('templates', function () {
-         var x = {a: 1, b: 2};
+      it("templates", function () {
+         var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
-               a: {tpl: 'b{a}'},
-               b: {tpl: 'a{b}'}
-            }
+               a: { tpl: "b{a}" },
+               b: { tpl: "a{b}" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 'b1', b: 'a2'});
+         assert.deepEqual(s(x), { a: "b1", b: "a2" });
       });
 
-      it('structured', function () {
-         var x = {a: 1, b: 2};
+      it("structured", function () {
+         var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: {
-                  structured: true
+                  structured: true,
                },
-               b: undefined
+               b: undefined,
             },
             values: {
                a: {
-                  x: { expr: '{a} == 1'},
-                  y: { expr: '{b} == 1'}
+                  x: { expr: "{a} == 1" },
+                  y: { expr: "{b} == 1" },
                },
-               b: {tpl: 'a{b}'}
-            }
+               b: { tpl: "a{b}" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: { x: true, y: false }, b: 'a2'});
+         assert.deepEqual(s(x), { a: { x: true, y: false }, b: "a2" });
       });
    });
 
-   it('structures do not change if data doesn\'t change', function () {
-      var x = {a: 1, b: 2};
+   it("structures do not change if data doesn't change", function () {
+      var x = { a: 1, b: 2 };
       var s = new StructuredSelector({
          props: {
             a: {
-               structured: true
-            }
+               structured: true,
+            },
          },
          values: {
             a: {
-               x: { expr: '{a} == 1'},
-               y: { expr: '{b} == 1'}
+               x: { expr: "{a} == 1" },
+               y: { expr: "{b} == 1" },
             },
-            b: {tpl: 'a{b}'}
-         }
+            b: { tpl: "a{b}" },
+         },
       }).create(x);
 
       let r1 = s(x);
@@ -95,4 +96,18 @@ describe('StructuredSelector', function() {
 
       assert.equal(r1, r2);
    });
+
+   it("structures do not change if data doesn't change", function () {
+      var x = { a: { b: 2 } };
+      var m = createAccessorModelProxy();
+      var s = new StructuredSelector({
+         props: {
+            b: undefined,
+         },
+         values: {
+            b: m.a.b,
+         },
+      }).create(x);
+      assert.deepEqual(s(x), { b: 2 });
+   });
 });

package/src/data/View.d.ts

@@ -1,4 +1,4 @@
-import { Record } from "../core";
+import { Record, AccessorChain } from "../core";
 import { Binding } from "./Binding";
 import { Ref } from "./Ref";
 
@@ -9,16 +9,19 @@ export interface ViewConfig {
    sealed?: boolean;
 }
 
-export interface ViewMethods {
-   getData(): Record;
+export interface ViewMethods<D = Record> {
+   getData(): D;
 
    init(path: Path, value: any): boolean;
 
-   set(path: Path | Record, value?: any): boolean;
+   set(path: Path, value: any): boolean;
+   set(path: Record, value: Record): boolean;
+   set<V>(path: AccessorChain<V>, value: V): boolean;
 
    get(path: Path): any;
    get(paths: Path[]): any[];
    get(...paths: Path[]): any[];
+   get<V>(path: AccessorChain<V>): V;
 
    /**
     * Removes data from the Store.
@@ -28,31 +31,43 @@ export interface ViewMethods {
    delete(path: Path): boolean;
    delete(paths: Path[]): boolean;
    delete(...paths: Path[]): boolean;
+   delete<V>(path: AccessorChain<V>): boolean;
 
    toggle(path: Path): boolean;
 
+   update(updateFn: (currentValue: D, ...args) => D, ...args): boolean;
    update(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
+   update<V>(path: AccessorChain<V>, updateFn: (currentValue: V, ...args) => V, ...args): boolean;
+
+   /**
+    *  Mutates the content of the store using Immer
+    */
+   mutate(updateFn: (currentValue: D, ...args) => D, ...args): boolean;
+   mutate(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
+   mutate<V>(path: AccessorChain<V>, updateFn: (currentValue: V, ...args) => V, ...args): boolean;
 
    ref<T = any>(path: string, defaultValue?: T): Ref<T>;
 }
 
-export class View implements ViewMethods {
+export class View<D = any> implements ViewMethods<D> {
    constructor(config?: ViewConfig);
 
-   getData(): Record;
+   getData(): D;
 
    init(path: Path, value: any): boolean;
 
-   set(path: Path | Record, value?: any): boolean;
+   set(path: Path, value: any): boolean;
+   set(path: Record, value: Record): boolean;
+   set<V>(path: AccessorChain<V>, value: V): boolean;
 
    /**
     * Copies the value stored under the `from` path and saves it under the `to` path.
     * @param from - Origin path.
     * @param to - Destination path.
     */
-   copy(from: Path, to: Path);
+   copy(from: Path, to: Path): boolean;
 
-   move(from: Path, to: Path);
+   move(from: Path, to: Path): boolean;
 
    /**
     * Removes data from the Store.
@@ -62,16 +77,25 @@ export class View implements ViewMethods {
    delete(path: Path): boolean;
    delete(paths: Path[]): boolean;
    delete(...paths: Path[]): boolean;
+   delete<V>(path: AccessorChain<V>): boolean;
 
-   clear();
+   clear(): void;
 
-   get(path: Path);
-   get(paths: Path[]);
-   get(...paths: Path[]);
+   get(path: Path): any;
+   get(paths: Path[]): any;
+   get(...paths: Path[]): any;
+   get<V>(path: AccessorChain<V>): V;
 
    toggle(path: Path): boolean;
+   toggle(path: AccessorChain<boolean>): boolean;
 
+   update(updateFn: (currentValue: D, ...args) => any, ...args): boolean;
    update(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
+   update<V>(path: AccessorChain<V>, updateFn: (currentValue: V, ...args) => V, ...args): boolean;
+
+   mutate(updateFn: (currentValue: D, ...args) => void, ...args): boolean;
+   mutate(path: Path, updateFn: (currentValue: any, ...args) => void, ...args): boolean;
+   mutate<V>(path: AccessorChain<V>, updateFn: (currentValue: V, ...args) => void, ...args): boolean;
 
    /**
     * `batch` method can be used to perform multiple Store operations silently
@@ -84,13 +108,13 @@ export class View implements ViewMethods {
 
    silently(callback: () => void): boolean;
 
-   notify(path?: string);
+   notify(path?: string): void;
 
-   subscribe(callback: (changes?) => void);
+   subscribe(callback: (changes?) => void): () => void;
 
    load(data: Record): boolean;
 
-   dispatch(action);
+   dispatch(action): void;
 
    getMethods(): ViewMethods;