cx 22.3.0 → 22.3.3

package/src/hooks/store.d.ts

@@ -1,8 +1,8 @@
-import { Selector } from "../core";
-import { ViewMethods, View } from "../data";
-
-export function useStore(): View;
-
-export function useStoreMethods(): ViewMethods;
-
+import { Selector } from "../core";
+import { ViewMethods, View } from "../data";
+
+export function useStore(): View;
+
+export function useStoreMethods(): ViewMethods;
+
 export function ref(info: any): Selector<any>;

package/src/hooks/store.js

@@ -1,32 +1,32 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { getSelector } from "../data/getSelector";
-import { isObject } from "../util/isObject";
-import { expression } from "../data/Expression";
-import { stringTemplate } from "../data/StringTemplate";
-import { Ref } from "../data/Ref";
-
-export function useStore() {
-   return getCurrentInstance().store;
-}
-
-export function useStoreMethods() {
-   return getCurrentInstance().store.getMethods();
-}
-
-export function ref(info) {
-   if (isObject(info)) {
-      if (info.bind) return useStore().ref(info.bind, info.defaultValue);
-      if (info.get) return info;
-      if (info.expr) {
-         let store = useStore();
-         let selector = expression(info.expr).memoize();
-         return new Ref({ get: () => selector(store.getData()), set: info.set });
-      }
-      if (info.tpl) {
-         let store = useStore();
-         let selector = stringTemplate(info.tpl).memoize();
-         return new Ref({ get: () => selector(store.getData()), set: info.set });
-      }
-   }
-   return getSelector(info);
-}
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { getSelector } from "../data/getSelector";
+import { isObject } from "../util/isObject";
+import { expression } from "../data/Expression";
+import { stringTemplate } from "../data/StringTemplate";
+import { Ref } from "../data/Ref";
+
+export function useStore() {
+   return getCurrentInstance().store;
+}
+
+export function useStoreMethods() {
+   return getCurrentInstance().store.getMethods();
+}
+
+export function ref(info) {
+   if (isObject(info)) {
+      if (info.bind) return useStore().ref(info.bind, info.defaultValue);
+      if (info.get) return info;
+      if (info.expr) {
+         let store = useStore();
+         let selector = expression(info.expr).memoize();
+         return new Ref({ get: () => selector(store.getData()), set: info.set });
+      }
+      if (info.tpl) {
+         let store = useStore();
+         let selector = stringTemplate(info.tpl).memoize();
+         return new Ref({ get: () => selector(store.getData()), set: info.set });
+      }
+   }
+   return getSelector(info);
+}

package/src/hooks/store.spec.js

@@ -1,73 +1,73 @@
-import { ref } from "./store";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-import { computable } from "../data";
-
-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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      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 }) => {
-         return (
-            <cx>
-               <div text={computable(ref(value), (value) => `x${value}`)} />
-            </cx>
-         );
-      });
-
-      let store = new Store({ data: { value: 100 } });
-
-      function test(value, expectation) {
-         const component = renderer.create(
-            <Cx store={store} subscribe immediate>
-               <FComp value={value} />
-            </Cx>
-         );
-         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) => value + 100),
-         "x200"
-      );
-      test(null, "xnull");
-      test(undefined, "xundefined");
-      test(0, "x0");
-      test(false, "xfalse");
-   });
-});
+import { ref } from "./store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { Store } from "../data/Store";
+import renderer from "react-test-renderer";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { VDOM } from "../ui/VDOM";
+import { Cx } from "../ui/Cx";
+import assert from "assert";
+import { computable } from "../data";
+
+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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      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 }) => {
+         return (
+            <cx>
+               <div text={computable(ref(value), (value) => `x${value}`)} />
+            </cx>
+         );
+      });
+
+      let store = new Store({ data: { value: 100 } });
+
+      function test(value, expectation) {
+         const component = renderer.create(
+            <Cx store={store} subscribe immediate>
+               <FComp value={value} />
+            </Cx>
+         );
+         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) => value + 100),
+         "x200"
+      );
+      test(null, "xnull");
+      test(undefined, "xundefined");
+      test(0, "x0");
+      test(false, "xfalse");
+   });
+});

package/src/hooks/useEffect.d.ts

@@ -1,3 +1,3 @@
-export function useEffect(callback: () => () => void): void;
-
+export function useEffect(callback: () => () => void): void;
+
 export function useCleanup(cleanupCallback: () => void): () => void;

package/src/hooks/useEffect.js

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

package/src/hooks/useInterval.js

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

package/src/hooks/useState.d.ts

@@ -1,3 +1,3 @@
-import { Ref } from "../data";
-
+import { Ref } from "../data";
+
 export function useState(defaultValue?: any): Ref<any>

package/src/hooks/useState.js

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

package/src/hooks/useTrigger.d.ts

@@ -1,5 +1,5 @@
-import { Path } from "../data";
-
-export function addExploreCallback(callback: any): () => void;
-
+import { Path } from "../data";
+
+export function addExploreCallback(callback: any): () => void;
+
 export function useTrigger(args: Array<Path>, callback: (...args) => void, autoRun?: boolean): () => void;

package/src/hooks/useTrigger.js

@@ -1,20 +1,20 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { isArray } from "../util/isArray";
-import { computable } from "../data/computable";
-import { useStore } from "./store";
-
-export function addExploreCallback(callback) {
-   let instance = getCurrentInstance();
-   if (!instance.computables) instance.computables = [];
-   instance.computables.push(callback);
-   return () => {
-      instance.computables = instance.computables.filter((cb) => cb !== callback);
-   };
-}
-
-export function useTrigger(args, callback, autoRun) {
-   if (!isArray(args)) throw new Error("First argument to addTrigger 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 } from "../data/computable";
+import { useStore } from "./store";
+
+export function addExploreCallback(callback) {
+   let instance = getCurrentInstance();
+   if (!instance.computables) instance.computables = [];
+   instance.computables.push(callback);
+   return () => {
+      instance.computables = instance.computables.filter((cb) => cb !== callback);
+   };
+}
+
+export function useTrigger(args, callback, autoRun) {
+   if (!isArray(args)) throw new Error("First argument to addTrigger should be an array.");
+   let store = useStore();
+   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
+   return addExploreCallback(selector);
+}

package/src/hooks/useTrigger.spec.js

@@ -1,102 +1,102 @@
-import { useTrigger } from "./useTrigger";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-
-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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, 1);
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-});
+import { useTrigger } from "./useTrigger";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { Store } from "../data/Store";
+import renderer from "react-test-renderer";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { VDOM } from "../ui/VDOM";
+import { Cx } from "../ui/Cx";
+import assert from "assert";
+
+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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      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 = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+});

package/src/index.js

@@ -1,7 +1,7 @@
-export * as util from './util/';
-export * as data from './data/';
-export * as ui from './ui/';
-export * as widgets from './widgets';
-export * as svg from './svg/';
-export * as charts from './charts/';
-export * as hooks from './hooks/';
+export * as util from './util/';
+export * as data from './data/';
+export * as ui from './ui/';
+export * as widgets from './widgets';
+export * as svg from './svg/';
+export * as charts from './charts/';
+export * as hooks from './hooks/';

package/src/index.scss

@@ -1,7 +1,7 @@
-
-@import 'global';
-@import 'util/index';
-@import 'ui/index';
-@import 'widgets/index';
-@import 'svg/index';
+
+@import 'global';
+@import 'util/index';
+@import 'ui/index';
+@import 'widgets/index';
+@import 'svg/index';
 @import 'charts/index';

package/src/svg/BoundedObject.d.ts

@@ -1,23 +1,23 @@
-import * as Cx from '../core';
-//import {PureContainer} from '../ui/PureContainer';
-import {IRect} from './util/Rect';
-
-export interface BoundedObjectProps extends Cx.StyledContainerProps {
-   
-   /**
-    * 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?: Cx.Prop<string | number | IRect>,
-   
-   /** Move boundaries specified by the offset. See Svg for more information. */
-   offset?: Cx.Prop<string | number | IRect>,
-
-   /** Apply margin to the given boundaries. See Svg for more information. */
-   margin?: Cx.Prop<string | number | IRect>,
-
-   /** Padding to be applied to the boundaries rectangle before passing to the children. */
-   padding?: Cx.Prop<string | number | IRect>,
-}
-
+import * as Cx from '../core';
+//import {PureContainer} from '../ui/PureContainer';
+import {IRect} from './util/Rect';
+
+export interface BoundedObjectProps extends Cx.StyledContainerProps {
+   
+   /**
+    * 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?: Cx.Prop<string | number | IRect>,
+   
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Cx.Prop<string | number | IRect>,
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Cx.Prop<string | number | IRect>,
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Cx.Prop<string | number | IRect>,
+}
+
 export class BoundedObject extends Cx.Widget<BoundedObjectProps> {}