cx 23.12.3 → 24.0.0

package/src/data/Expression.spec.js

@@ -1,164 +1,174 @@
-import { Expression } from "./Expression";
-import assert from "assert";
-
-describe("Expression", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         var e = Expression.compile("{person.name}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Jim");
-      });
-
-      it("ignores bindings in strings", function () {
-         var e = Expression.compile('"{person.name}"');
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "{person.name}");
-      });
-
-      it("properly encodes quotes #1", function () {
-         var e = Expression.compile('"\'"');
-         var state = {};
-         assert.equal(e(state), "'");
-      });
-
-      it("properly encodes quotes #2", function () {
-         var e = Expression.compile('"\\""');
-         var state = {};
-         assert.equal(e(state), '"');
-      });
-   });
-
-   describe("allow subexpressions", function () {
-      it("in square brackets", function () {
-         var e = Expression.compile("{[{person.name}]}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Jim");
-      });
-
-      it("in square brackets", function () {
-         var e = Expression.compile("{[{person.alias} || {person.name}]}");
-         var state = {
-            person: {
-               name: "Jim",
-               alias: "J",
-            },
-         };
-         assert.equal(e(state), "J");
-      });
-
-      it("prefixed with % sign", function () {
-         var e = Expression.compile("%{1+1}");
-         assert.equal(e(), "2");
-      });
-
-      it("can be formatted", function () {
-         var e = Expression.compile("{[1+1]:f;2}");
-         assert.equal(e(), "2.00");
-      });
-
-      it("n level deep", function () {
-         var e = Expression.compile("{[{[{[1+1]}]}]:f;2}");
-         assert.equal(e(), "2.00");
-      });
-
-      it("with complex math inside", function () {
-         var e = Expression.compile("%{{data}.reduce((a,b)=>a+b, 0):f;2}");
-         var state = {
-            data: [1, 2, 3],
-         };
-         assert.equal(e(state), "6.00");
-      });
-
-      it("with a conditional operator inside", function () {
-         var e = Expression.compile('{[true ? "T" : "F"]}');
-         assert.equal(e(), "T");
-      });
-   });
-
-   describe("are working", function () {
-      it("function expressions with get", function () {
-         var e = Expression.get((get) => get("a") + get("b"));
-         assert.equal(e({ a: 1, b: 2 }), 3);
-      });
-
-      it("are properly memoized", function () {
-         let inv = 0;
-         var 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 () {
-         var e = Expression.get((get) => get("name:prefix;Hello "));
-         assert(e({ name: "CxJS" }), "Hello CxJS");
-      });
-
-      // it('are properly memoized with proxies', function () {
-      //    let inv = 0;
-      //    var 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;
-      //    var 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);
-      // });
-   });
-});
+import { Expression } from "./Expression";
+import assert from "assert";
+
+describe("Expression", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = Expression.compile("{person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Jim");
+      });
+
+      it("ignores bindings in strings", function () {
+         var e = Expression.compile('"{person.name}"');
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "{person.name}");
+      });
+
+      it("properly encodes quotes #1", function () {
+         var e = Expression.compile('"\'"');
+         var state = {};
+         assert.equal(e(state), "'");
+      });
+
+      it("properly encodes quotes #2", function () {
+         var e = Expression.compile('"\\""');
+         var state = {};
+         assert.equal(e(state), '"');
+      });
+   });
+
+   describe("allow subexpressions", function () {
+      it("in square brackets", function () {
+         var e = Expression.compile("{[{person.name}]}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Jim");
+      });
+
+      it("in square brackets", function () {
+         var e = Expression.compile("{[{person.alias} || {person.name}]}");
+         var state = {
+            person: {
+               name: "Jim",
+               alias: "J",
+            },
+         };
+         assert.equal(e(state), "J");
+      });
+
+      it("prefixed with % sign", function () {
+         var e = Expression.compile("%{1+1}");
+         assert.equal(e(), "2");
+      });
+
+      it("can be formatted", function () {
+         var e = Expression.compile("{[1+1]:f;2}");
+         assert.equal(e(), "2.00");
+      });
+
+      it("n level deep", function () {
+         var e = Expression.compile("{[{[{[1+1]}]}]:f;2}");
+         assert.equal(e(), "2.00");
+      });
+
+      it("with complex math inside", function () {
+         var e = Expression.compile("%{{data}.reduce((a,b)=>a+b, 0):f;2}");
+         var state = {
+            data: [1, 2, 3],
+         };
+         assert.equal(e(state), "6.00");
+      });
+
+      it("with a conditional operator inside", function () {
+         var e = Expression.compile('{[true ? "T" : "F"]}');
+         assert.equal(e(), "T");
+      });
+
+      it("with string interpolation inside", function () {
+         var e = Expression.compile("{[`${{test}}`]}");
+         assert.equal(e({ test: "T" }), "T");
+      });
+   });
+
+   describe("are working", function () {
+      it("function expressions with get", function () {
+         var e = Expression.get((get) => get("a") + get("b"));
+         assert.equal(e({ a: 1, b: 2 }), 3);
+      });
+
+      it("are properly memoized", function () {
+         let inv = 0;
+         var 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 () {
+         var e = Expression.get((get) => get("name:prefix;Hello "));
+         assert(e({ name: "CxJS" }), "Hello CxJS");
+      });
+
+      it("allows using the fmt function inside", function () {
+         var e = Expression.compile('{[fmt({text}, "prefix;Hello ")]}');
+         assert.equal(e({ text: "CxJS" }), "Hello CxJS");
+      });
+
+      // it('are properly memoized with proxies', function () {
+      //    let inv = 0;
+      //    var 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;
+      //    var 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/src/data/StringTemplate.spec.js

@@ -1,105 +1,105 @@
-import { StringTemplate } from "./StringTemplate";
-import assert from "assert";
-
-describe("StringTemplate", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         var e = StringTemplate.compile("Hello {person.name}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello Jim");
-      });
-
-      it("properly encodes ' and \"", function () {
-         var e = StringTemplate.compile('It\'s "working"!');
-         assert.equal(e({}), 'It\'s "working"!');
-      });
-
-      it("supports multi-line strings", function () {
-         var e = StringTemplate.compile("a\nb");
-         assert.equal(e(), "a\nb");
-
-         var e = StringTemplate.compile("a\r\nb");
-         assert.equal(e(), "a\r\nb");
-      });
-   });
-
-   describe("double brackets are used to escape brackets", function () {
-      it("double brackets are preserved", function () {
-         var e = StringTemplate.compile("Hello {{person.name}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {person.name}");
-      });
-
-      it("triple brackets are converted to single brackets and a binding", function () {
-         var e = StringTemplate.compile("Hello {{{person.name}}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {Jim}");
-      });
-   });
-
-   describe("supports formatting", function () {
-      it("with colon", function () {
-         var e = StringTemplate.compile("{str:suffix;kg}");
-         assert.equal(e({ str: "5" }), "5kg");
-      });
-
-      it("with multiple formats", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
-         assert.equal(e({ str: "5" }), "(5kg)");
-      });
-
-      it("with null values", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-
-      it("of null values", function () {
-         var e = StringTemplate.compile("{str|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-   });
-
-   describe("supports expressions", function () {
-      it("using []", function () {
-         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("using %", function () {
-         var e = StringTemplate.compile("1 + 2 = %{1+2}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with subexpressions", function () {
-         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with a conditional operator", function () {
-         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with sub-expression formatting", function () {
-         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
-         var state = {
-            person: {
-               age: 32,
-            },
-         };
-         assert.equal(e(state), "32 years old");
-      });
-   });
-});
+import { StringTemplate } from "./StringTemplate";
+import assert from "assert";
+
+describe("StringTemplate", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = StringTemplate.compile("Hello {person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello Jim");
+      });
+
+      it("properly encodes ' and \"", function () {
+         var e = StringTemplate.compile('It\'s "working"!');
+         assert.equal(e({}), 'It\'s "working"!');
+      });
+
+      it("supports multi-line strings", function () {
+         var e = StringTemplate.compile("a\nb");
+         assert.equal(e(), "a\nb");
+
+         var e = StringTemplate.compile("a\r\nb");
+         assert.equal(e(), "a\r\nb");
+      });
+   });
+
+   describe("double brackets are used to escape brackets", function () {
+      it("double brackets are preserved", function () {
+         var e = StringTemplate.compile("Hello {{person.name}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {person.name}");
+      });
+
+      it("triple brackets are converted to single brackets and a binding", function () {
+         var e = StringTemplate.compile("Hello {{{person.name}}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {Jim}");
+      });
+   });
+
+   describe("supports formatting", function () {
+      it("with colon", function () {
+         var e = StringTemplate.compile("{str:suffix;kg}");
+         assert.equal(e({ str: "5" }), "5kg");
+      });
+
+      it("with multiple formats", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
+         assert.equal(e({ str: "5" }), "(5kg)");
+      });
+
+      it("with null values", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+
+      it("of null values", function () {
+         var e = StringTemplate.compile("{str|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+   });
+
+   describe("supports expressions", function () {
+      it("using []", function () {
+         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("using %", function () {
+         var e = StringTemplate.compile("1 + 2 = %{1+2}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with subexpressions", function () {
+         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with a conditional operator", function () {
+         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with sub-expression formatting", function () {
+         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
+         var state = {
+            person: {
+               age: 32,
+            },
+         };
+         assert.equal(e(state), "32 years old");
+      });
+   });
+});

package/src/svg/Text.d.ts

@@ -1,40 +1,40 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
-
-interface TextProps extends BoundedObjectProps {
-   /** Text to be displayed. */
-   value?: Cx.StringProp;
-
-   bind?: string;
-   tpl?: string;
-   expr?: string;
-
-   /** Offset along the x-axis. */
-   dx?: Cx.Prop<string | number>;
-
-   /**
-    * Offset along the y-axis. This property is commonly used for vertical text alignment.
-    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
-    */
-   dy?: Cx.Prop<string | number>;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   textAnchor?: Cx.StringProp;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   ta?: Cx.StringProp;
-
-   /** Sets text-body color. */
-   fill?: Cx.StringProp;
-
-   /** Sets text-outline color. */
-   stroke?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `text`. */
-   baseClass?: string;
-
-   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
-   autoTextAnchor?: boolean;
-}
-
-export class Text extends Cx.Widget<TextProps> {}
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
+
+interface TextProps extends BoundedObjectProps {
+   /** Text to be displayed. */
+   value?: Cx.StringProp;
+
+   bind?: string;
+   tpl?: string;
+   expr?: string;
+
+   /** Offset along the x-axis. */
+   dx?: Cx.Prop<string | number>;
+
+   /**
+    * Offset along the y-axis. This property is commonly used for vertical text alignment.
+    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
+    */
+   dy?: Cx.Prop<string | number>;
+
+   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
+   textAnchor?: Cx.StringProp;
+
+   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
+   ta?: Cx.StringProp;
+
+   /** Sets text-body color. */
+   fill?: Cx.StringProp;
+
+   /** Sets text-outline color. */
+   stroke?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `text`. */
+   baseClass?: string;
+
+   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
+   autoTextAnchor?: boolean;
+}
+
+export class Text extends Cx.Widget<TextProps> {}