cx 26.0.11 → 26.0.13

package/build/charts/ScatterGraph.d.ts

@@ -1,11 +1,11 @@
 /** @jsxImportSource react */
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
 import { Instance } from "../ui/Instance";
+import { BooleanProp, NumberProp, RecordsProp, StringProp } from "../ui/Prop";
 import { RenderingContext } from "../ui/RenderingContext";
-import { BooleanProp, NumberProp, StringProp, RecordsProp } from "../ui/Prop";
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
 import type { ChartRenderingContext } from "./Chart";
-export interface ScatterGraphConfig extends WidgetConfig {
+export interface ScatterGraphConfig extends WidgetConfig, WidgetStyleConfig {
     /** Data for the graph. Each entry should be an object with at least two properties
      * whose names should match the `xField` and `yField` values.
      */

package/build/charts/ScatterGraph.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @jsxImportSource react */
+import { CSS } from "../ui/CSS";
 import { Widget } from "../ui/Widget";
 import { Selection } from "../ui/selection/Selection";
-import { CSS } from "../ui/CSS";
-import { getShape } from "./shapes";
 import { isArray } from "../util/isArray";
+import { getShape } from "./shapes";
 export class ScatterGraph extends Widget {
     constructor(config) {
         super(config);

package/build/data/ArrayElementView.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/ArrayElementView.spec.js

@@ -0,0 +1,81 @@
+//@ts-nocheck
+import assert from "assert";
+import { ArrayElementView } from "./ArrayElementView";
+import { getAccessor } from "./getAccessor";
+import { Store } from "./Store";
+describe("ArrayElementView", function () {
+    it("exposes the element as under the $record alias", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+        let record = elementView.get("$record");
+        assert.equal(record, letters[1]);
+    });
+    it("changes of the $record are propagated", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+        elementView.set("$record.letter", "C");
+        assert.deepEqual(store.get("letters"), [letters[0], { letter: "C" }]);
+    });
+    it("removes the element if the $record is deleted", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+        elementView.delete("$record");
+        assert.deepEqual(store.get("letters"), [letters[0]]);
+    });
+    it("exposes the element as under the given alias", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({
+            store,
+            itemIndex: 1,
+            arrayAccessor: getAccessor({ bind: "letters" }),
+            recordAlias: "$letter",
+        });
+        let record = elementView.get("$letter");
+        assert.equal(record, letters[1]);
+    });
+    it("aliases allow nesting", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({
+            store,
+            itemIndex: 1,
+            arrayAccessor: getAccessor({ bind: "letters" }),
+            recordAlias: "$iter.letter",
+            indexAlias: "$iter.index.letter",
+        });
+        let record = elementView.get("$iter.letter");
+        assert.equal(record, letters[1]);
+        assert.equal(elementView.get("$iter.index.letter"), 1);
+        elementView.set("$iter.letter.letter", "C");
+        assert.equal(store.get("letters.1.letter"), "C");
+    });
+    it("when immutable preserves the parent data object", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters } });
+        let elementView = new ArrayElementView({
+            store,
+            itemIndex: 1,
+            arrayAccessor: getAccessor({ bind: "letters" }),
+            immutable: true,
+        });
+        let record = elementView.get("$record");
+        assert.equal(record, letters[1]);
+        assert(!store.getData().hasOwnProperty("$record"));
+    });
+    it("respects the parent's store sealed flag", function () {
+        let letters = [{ letter: "A" }, { letter: "B" }];
+        let store = new Store({ data: { letters }, sealed: true });
+        let elementView = new ArrayElementView({
+            store,
+            itemIndex: 1,
+            arrayAccessor: getAccessor({ bind: "letters" }),
+        });
+        let record = elementView.get("$record");
+        assert.equal(record, letters[1]);
+        assert(!store.getData().hasOwnProperty("$record"));
+    });
+});

package/build/data/Binding.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/Binding.spec.js

@@ -0,0 +1,61 @@
+import { Binding } from "./Binding";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+describe("Binding", function () {
+    describe("#get()", function () {
+        it("should get value if value is defined", function () {
+            var state = { person: { name: "Joe" } };
+            var b = Binding.get("person.name");
+            assert.equal(b.value(state), "Joe");
+        });
+        it("allows non-standard property identifiers", function () {
+            var state = { person: { "@schema": "Person" } };
+            var b = Binding.get("person.@schema");
+            assert.equal(b.path, "person.@schema");
+            assert.equal(b.value(state), "Person");
+        });
+        it("properly resolves accessor models", function () {
+            var state = { person: { schema: "Person" } };
+            var b = Binding.get(createAccessorModelProxy("person.schema"));
+            assert.equal(b.value(state), "Person");
+        });
+    });
+    describe("#set()", function () {
+        it("produces new objects along the binding path", function () {
+            var state = { person: { name: "Joe" } };
+            var b = Binding.get("person.name");
+            var ns = b.set(state, "Jack");
+            assert.equal(ns.person.name, "Jack");
+            assert.notEqual(state, ns);
+            assert.notEqual(state.person, ns.person);
+            assert.notEqual(state.person.name, ns.person.name);
+        });
+        it("returns same state object if value does not change", function () {
+            var state = { person: { name: "Joe" } };
+            var b = Binding.get("person.name");
+            var ns = b.set(state, "Joe");
+            assert.equal(state, ns);
+        });
+        it("allows non-standard property identifiers", function () {
+            var state = { person: { "@schema": "Person" } };
+            var b = Binding.get("person.@schema");
+            var ns = b.set(state, "Test");
+            assert.equal(ns.person["@schema"], "Test");
+        });
+    });
+    describe(".delete()", function () {
+        it("correctly removes pointed properties", function () {
+            var state = { person: { name: "Joe" } };
+            var b = Binding.get("person.name");
+            var ns = b.delete(state);
+            assert("person" in ns);
+            assert(!("name" in ns.person));
+        });
+        it("does not change state if property is non-existent", function () {
+            var state = { person: { name: "Joe" } };
+            var b = Binding.get("person.name2");
+            var ns = b.delete(state);
+            assert(ns == state);
+        });
+    });
+});

package/build/data/Expression.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/Expression.spec.js

@@ -0,0 +1,196 @@
+import { Expression } from "./Expression";
+import assert from "assert";
+import { StringTemplate } from "./StringTemplate";
+describe("Expression", function () {
+    describe("#compile()", function () {
+        it("returns a selector", function () {
+            let e = Expression.compile("{person.name}");
+            let state = {
+                person: {
+                    name: "Jim",
+                },
+            };
+            assert.equal(e(state), "Jim");
+        });
+        it("ignores bindings in strings", function () {
+            let e = Expression.compile('"{person.name}"');
+            let state = {
+                person: {
+                    name: "Jim",
+                },
+            };
+            assert.equal(e(state), "{person.name}");
+        });
+        it("allows mixed curly braces in strings", () => {
+            let e = Expression.compile('"Hello {" + "person.name}"');
+            assert.equal(e({}), "Hello {person.name}");
+        });
+        it("properly encodes quotes #1", function () {
+            let e = Expression.compile('"\'"');
+            let state = {};
+            assert.equal(e(state), "'");
+        });
+        it("properly encodes quotes #2", function () {
+            let e = Expression.compile('"\\""');
+            let state = {};
+            assert.equal(e(state), '"');
+        });
+        it("properly encodes quotes #3", function () {
+            let e = Expression.compile('"\\\\\\""');
+            let state = {};
+            assert.equal(e(state), '\\"');
+        });
+        it("properly encodes quotes #4", function () {
+            let e = Expression.compile('"\\\\"');
+            let state = {};
+            assert.equal(e(state), "\\");
+        });
+    });
+    describe("allow subexpressions", function () {
+        it("in square brackets", function () {
+            let e = Expression.compile("{[{person.name}]}");
+            let state = {
+                person: {
+                    name: "Jim",
+                },
+            };
+            assert.equal(e(state), "Jim");
+        });
+        it("in square brackets", function () {
+            let e = Expression.compile("{[{person.alias} || {person.name}]}");
+            let state = {
+                person: {
+                    name: "Jim",
+                    alias: "J",
+                },
+            };
+            assert.equal(e(state), "J");
+        });
+        it("prefixed with % sign", function () {
+            let e = Expression.compile("%{1+1}");
+            assert.equal(e({}), "2");
+        });
+        it("can be formatted", function () {
+            let e = Expression.compile("{[1+1]:f;2}");
+            assert.equal(e({}), "2.00");
+        });
+        it("n level deep", function () {
+            let e = Expression.compile("{[{[{[1+1]}]}]:f;2}");
+            assert.equal(e({}), "2.00");
+        });
+        it("with complex math inside", function () {
+            let e = Expression.compile("%{{data}.reduce((a,b)=>a+b, 0):f;2}");
+            let state = {
+                data: [1, 2, 3],
+            };
+            assert.equal(e(state), "6.00");
+        });
+        it("with a conditional operator inside", function () {
+            let e = Expression.compile('{[true ? "T" : "F"]}');
+            assert.equal(e({}), "T");
+        });
+        it("with string interpolation inside", function () {
+            let e = Expression.compile("{[`${{test}}`]}");
+            assert.equal(e({ test: "T" }), "T");
+        });
+    });
+    describe("are working", function () {
+        it("function expressions with get", function () {
+            let e = Expression.get((get) => get("a") + get("b"));
+            assert.equal(e({ a: 1, b: 2 }), 3);
+        });
+        it("are properly memoized", function () {
+            let inv = 0;
+            let e = Expression.get((get) => {
+                inv++;
+                return get("a") + get("b");
+            }).memoize();
+            assert.equal(e({ a: 1, b: 1 }), 2);
+            assert.equal(inv, 1);
+            assert.equal(e({ a: 1, b: 1 }), 2);
+            assert.equal(inv, 1);
+            assert.equal(e({ a: 1, b: 2 }), 3);
+            assert.equal(inv, 2);
+            assert.equal(e({ a: 1, b: 2 }), 3);
+            assert.equal(inv, 2);
+            assert.equal(e({ a: 2, b: 2 }), 4);
+            assert.equal(inv, 3);
+        });
+        it("formatting can be used inside bindings", function () {
+            let e = Expression.get((get) => get("name:prefix;Hello "));
+            assert(e({ name: "CxJS" }), "Hello CxJS");
+        });
+        it("allows using the fmt function inside", function () {
+            let e = Expression.compile('{[fmt({text}, "prefix;Hello ")]}');
+            assert.equal(e({ text: "CxJS" }), "Hello CxJS");
+        });
+        it("allows using dashes inside names", function () {
+            let e = Expression.compile("{framework-name}");
+            assert.equal(e({ "framework-name": "CxJS" }), "CxJS");
+        });
+        it("allows using spaces and other characters inside names", function () {
+            let e = Expression.compile("{1nv@lid js ident1fier}");
+            assert.equal(e({ "1nv@lid js ident1fier": "CxJS" }), "CxJS");
+        });
+        it("allows strings in subexpressions", () => {
+            let e = Expression.compile("{['1']}");
+            assert.equal(e({}), "1");
+            let e2 = Expression.compile('%{"1"}');
+            assert.equal(e({}), "1");
+        });
+        it("allows string templates in nested expressions", () => {
+            Expression.registerHelper("tpl", StringTemplate.format);
+            let e = Expression.compile("tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})");
+            assert.equal(e({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+            let e2 = Expression.compile("{[tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})]}");
+            assert.equal(e2({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+            // we're going to need a better parser for this
+            // let e3 = Expression.compile("%{tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})}");
+            // assert.equal(e3({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+        });
+        it("string templates can be in the data", () => {
+            Expression.registerHelper("tpl", StringTemplate.format);
+            let e = Expression.compile("tpl({template}, {value}, {percentage})");
+            assert.equal(e({ value: 1, percentage: 0.02, template: "{0:n;2} {1:p;2:wrap;(;)}" }), "1.00 (2.00%)");
+        });
+        // it('are properly memoized with proxies', function () {
+        //    let inv = 0;
+        //    let e = Expression.get(d => { inv++; return d.a + d.b}).memoize();
+        //
+        //    assert.equal(e({ a: 1, b: 1 }), 2);
+        //    assert.equal(inv, 1);
+        //
+        //    assert.equal(e({ a: 1, b: 1 }), 2);
+        //    assert.equal(inv, 1);
+        //
+        //    assert.equal(e({ a: 1, b: 2 }), 3);
+        //    assert.equal(inv, 2);
+        //
+        //    assert.equal(e({ a: 1, b: 2 }), 3);
+        //    assert.equal(inv, 2);
+        //
+        //    assert.equal(e({ a: 2, b: 2 }), 4);
+        //    assert.equal(inv, 3);
+        // });
+        //
+        // it('are properly memoized with proxies and deep data', function () {
+        //    let inv = 0;
+        //    let e = Expression.get(d => { inv++; return d.v.a + d.v.b}).memoize();
+        //
+        //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
+        //    assert.equal(inv, 1);
+        //
+        //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
+        //    assert.equal(inv, 1);
+        //
+        //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
+        //    assert.equal(inv, 2);
+        //
+        //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
+        //    assert.equal(inv, 2);
+        //
+        //    assert.equal(e({ v: { a: 2, b: 2 }}), 4);
+        //    assert.equal(inv, 3);
+        // });
+    });
+});

package/build/data/Grouper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/Grouper.spec.js

@@ -0,0 +1,48 @@
+import { Grouper } from "./Grouper";
+import assert from "assert";
+describe("Grouper", function () {
+    describe("single grouping", function () {
+        it("should work", function () {
+            let data = [
+                { name: "John", age: 12 },
+                { name: "Jane", age: 12 },
+            ];
+            let grouper = new Grouper({ name: { bind: "name" } });
+            grouper.processAll(data);
+            let results = grouper.getResults();
+            // console.log(results);
+            assert.equal(results.length, 2);
+        });
+        it("keys can have nested properties", function () {
+            let data = [
+                { name: "John", age: 12 },
+                { name: "Jane", age: 12 },
+            ];
+            let grouper = new Grouper({ "person.name": { bind: "name" } });
+            grouper.processAll(data);
+            let results = grouper.getResults();
+            assert.equal(results.length, 2);
+            assert.equal(results[0].key.person?.name, "John");
+            assert.equal(results[1].key.person?.name, "Jane");
+        });
+    });
+    describe("multi grouping", function () {
+        it("should work", function () {
+            let data = [
+                { name: "John", age: 12 },
+                { name: "John", age: 12 },
+                { name: "John", age: 13 },
+                { name: "John", age: 14 },
+                { name: "Jane", age: 12 },
+                { name: "Jane", age: 13 },
+                { name: "Jane", age: 14 },
+            ];
+            let grouper = new Grouper({ name: { bind: "name" }, age: { bind: "age" } });
+            grouper.processAll(data);
+            let results = grouper.getResults();
+            // console.log(results);
+            assert.equal(results.length, 6);
+            assert.equal(results[0].records.length, 2);
+        });
+    });
+});

package/build/data/Ref.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/Ref.spec.js

@@ -0,0 +1,72 @@
+//@ts-nocheck
+import assert from "assert";
+import { Store } from "./Store";
+import { Ref } from "./Ref";
+import { append } from "./ops/append";
+import { StoreRef } from "./StoreRef";
+const getStore = () => {
+    return new Store({
+        data: {
+            a: 3,
+            item: {
+                firstName: "Jack",
+            },
+            array: [],
+        },
+    });
+};
+describe("Ref", () => {
+    it("can init data", () => {
+        let store = getStore();
+        let b = store.ref("b", 1);
+        assert.equal(store.get("b"), 1);
+    });
+    it("can set data", () => {
+        let store = getStore();
+        let b = store.ref("b", 1);
+        b.set(2);
+        assert.equal(store.get("b"), 2);
+    });
+    it("can delete data", () => {
+        let store = getStore();
+        let b = store.ref("item");
+        b.delete();
+        assert.equal(store.get("item"), undefined);
+    });
+    it("can cast itself to a ref of another type", () => {
+        class ArrayRef extends StoreRef {
+            append(...args) {
+                this.update(append, ...args);
+            }
+        }
+        let store = getStore();
+        let array = store.ref("array").as(ArrayRef);
+        array.append(1, 2, 3);
+        assert.deepEqual(array.get(), [1, 2, 3]);
+    });
+    it("can extend itself in a functional way", () => {
+        let store = getStore();
+        let array = store.ref("array").as(({ update, set, path }) => ({
+            append(...args) {
+                update(path, append, ...args);
+            },
+            clear() {
+                set(path, []);
+            },
+        }));
+        array.append(1, 2, 3);
+        assert.deepEqual(array.get(), [1, 2, 3]);
+        array.clear();
+        assert.deepEqual(array.get(), []);
+    });
+    it("can get subrefs", () => {
+        let store = getStore();
+        let person = new Ref({
+            get: () => store.get("person"),
+            set: (value) => store.set("person", value),
+        });
+        let name = person.ref("name");
+        name.set("John");
+        assert.equal(name.get(), "John");
+    });
+});

package/build/data/Selector.d.ts

@@ -5,4 +5,4 @@ export interface Selector<T = any> {
 export interface CanMemoize<T = any> {
     memoize(warmupData?: unknown): Selector<T>;
 }
-export type MemoSelector<T = any> = Selector<T> & CanMemoize<Selector<T>>;
+export type MemoSelector<T = any> = Selector<T> & CanMemoize<T>;

package/build/data/Store.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/Store.spec.js

@@ -0,0 +1,19 @@
+import assert from 'assert';
+import { Store } from './Store';
+describe('Store', () => {
+    const getStore = () => {
+        return new Store({
+            data: {
+                a: 3,
+                item: {
+                    firstName: 'Jack'
+                }
+            }
+        });
+    };
+    it('changes version on each update', () => {
+        let store = getStore();
+        store.set('a', 4);
+        assert.equal(store.getMeta().version, 1);
+    });
+});

package/build/data/StoreRef.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/data/StoreRef.spec.js

@@ -0,0 +1,22 @@
+//@ts-nocheck
+import assert from "assert";
+import { Store } from "./Store";
+const getStore = () => {
+    return new Store({
+        data: {
+            person: {
+                name: "Jack",
+            },
+        },
+    });
+};
+describe("StoreRef", () => {
+    it("can access child refs", () => {
+        let store = getStore();
+        let person = store.ref("person");
+        let name = person.ref("name");
+        assert.equal(name.get("person"), "Jack");
+        name.set("John");
+        assert.equal(name.get("person"), "John");
+    });
+});

package/build/data/StringTemplate.spec.d.ts

@@ -0,0 +1 @@
+export {};