cx 25.11.1 → 26.0.1

package/src/data/ops/updateTree.spec.js

@@ -1,36 +0,0 @@
-import { Store } from '../Store';
-import { updateTree } from './updateTree';
-import assert from 'assert';
-
-describe('updateTree', function () {
-   it('updates all nodes that satisfy criteria', function () {
-      let store = new Store({
-         data: {
-            array: [{
-               id: 'n1',
-               value: 1,
-               children: [{
-                  id: 'n11',
-                  value: 2
-               }, {
-                  id: 'n12',
-                  value: 3
-               }]
-            }]
-         }
-      });
-
-      assert(store.update('array', updateTree, x => ({ ...x, value: x.value + 1 }), x => x.value > 1, 'children'));
-      assert.deepEqual(store.get('array'), [{
-         id: 'n1',
-         value: 1,
-         children: [{
-            id: 'n11',
-            value: 3
-         }, {
-            id: 'n12',
-            value: 4
-         }]
-      }]);
-   });
-});

package/src/hooks/createLocalStorageRef.d.ts

@@ -1,3 +0,0 @@
-import { Ref } from "../data";
-
-export function createLocalStorageRef(key: string): Ref<any>;

package/src/hooks/createLocalStorageRef.js

@@ -1,20 +0,0 @@
-import { useStore } from "./store";
-import { Ref } from "../data/Ref";
-
-export function createLocalStorageRef(key) {
-   let store = useStore();
-
-   return new Ref({
-      get() {
-         let json = localStorage.getItem(key);
-         if (!json) return localStorage.hasOwnProperty(key) ? null : undefined;
-         return JSON.parse(json);
-      },
-      set(value) {
-         if (value === undefined) localStorage.removeItem(key);
-         else localStorage.setItem(key, JSON.stringify(value));
-         store.meta.version++;
-         store.notify();
-      },
-   });
-}

package/src/hooks/index.js

@@ -1,8 +0,0 @@
-export * from "./store";
-export * from "./useEffect";
-export * from "./useInterval";
-export * from "./useTrigger";
-export * from "./useState";
-export * from "./createLocalStorageRef";
-export * from "./resolveCallback";
-export * from "./invokeCallback";

package/src/hooks/invokeCallback.d.ts

@@ -1,5 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-
-export function invokeCallback(instance: Instance, callback: string | ((...args: any) => any), ...args: any[]): any;

package/src/hooks/invokeCallback.js

@@ -1,7 +0,0 @@
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-
-export function invokeCallback(instance, callback, ...args) {
-   if (isString(callback)) return instance.invokeControllerMethod(callback, ...args);
-   if (isFunction(callback)) return callback(...args);
-}

package/src/hooks/invokeCallback.spec.js

@@ -1,53 +0,0 @@
-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";
-import { resolveCallback } from "./resolveCallback";
-import { invokeCallback } from "./invokeCallback";
-
-describe("invokeCallback", () => {
-   it("works with functions", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         invokeCallback(null, onTest, "works");
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{ type: FComp, onTest: v => { value = v } }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-
-   it("works with controller methods", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         return (
-            <cx>
-               <div onExplore={(context, instance) => { invokeCallback(instance, onTest, "works") }} />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{
-         type: FComp,
-         onTest: "onTest",
-         controller: {
-            onTest(v) { value = v }
-         }
-      }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-});

package/src/hooks/resolveCallback.d.ts

@@ -1,3 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-
-export function resolveCallback(callback: string | ((...args) => any), instance?: Instance): (...args) => any;

package/src/hooks/resolveCallback.js

@@ -1,12 +0,0 @@
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-
-export function resolveCallback(callback, instance) {
-   if (isFunction(callback))
-      return callback;
-   if (isString(callback)) {
-      if (!instance) instance = getCurrentInstance();
-      return (...args) => instance.invokeControllerMethod(callback, ...args);
-   }
-}

package/src/hooks/resolveCallback.spec.js

@@ -1,54 +0,0 @@
-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";
-import { resolveCallback } from "./resolveCallback";
-
-describe("resolveCallback", () => {
-   it("works with functions", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         let callback = resolveCallback(onTest);
-         callback("works");
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{ type: FComp, onTest: v => { value = v } }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-
-   it("works with controller methods", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         let callback = resolveCallback(onTest);
-         return (
-            <cx>
-               <div onInit={() => { callback("works"); }} />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{
-         type: FComp,
-         onTest: "onTest",
-         controller: {
-            onTest(v) { value = v }
-         }
-      }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-});

package/src/hooks/store.d.ts

@@ -1,8 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export function useEffect(callback: () => () => void): void;
-
-export function useCleanup(cleanupCallback: () => void): () => void;

package/src/hooks/useEffect.js

@@ -1,15 +0,0 @@
-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.d.ts

@@ -1 +0,0 @@
-export function useInterval(callback: () => void, timeout: number): () => void;

package/src/hooks/useInterval.js

@@ -1,8 +0,0 @@
-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 +0,0 @@
-import { Ref } from "../data";
-
-export function useState(defaultValue?: any): Ref<any>

package/src/hooks/useState.js

@@ -1,16 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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/svg/BoundedObject.d.ts

@@ -1,23 +0,0 @@
-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> {}

package/src/svg/BoundedObject.js

@@ -1,59 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {PureContainer} from '../ui/PureContainer';
-import {Rect} from './util/Rect';
-
-export class BoundedObject extends PureContainer {
-
-   declareData() {
-      return super.declareData({
-         anchors: undefined,
-         offset: undefined,
-         margin: undefined,
-         padding: undefined
-      }, ...arguments)
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-      var {data} = instance;
-      data.anchors = Rect.convert(data.anchors);
-      data.offset = Rect.convert(data.offset);
-      data.margin = Rect.convertMargin(data.margin);
-      data.padding = Rect.convertMargin(data.padding);
-   }
-   
-   calculateBounds(context, instance) {
-      var {data} = instance;
-      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-   }
-
-   prepareBounds(context, instance) {
-      var {data} = instance;
-      if (instance.shouldUpdate || !instance.cached.parentRect || !instance.cached.parentRect.isEqual(context.parentRect) || !data.bounds) {
-         if (!context.parentRect)
-            throw new Error('Parent bounds were not provided through the context.');
-         instance.parentRect = context.parentRect;
-         instance.cache('parentRect' , context.parentRect);
-         instance.markShouldUpdate(context);
-         data.bounds = this.calculateBounds(context, instance);
-         data.childrenBounds = Rect.add(data.bounds, data.padding);
-      }
-   }
-
-   prepare(context, instance) {
-      this.prepareBounds(context, instance);
-      context.push('parentRect', instance.data.childrenBounds);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop('parentRect');
-   }
-}
-
-BoundedObject.prototype.anchors = 0;
-BoundedObject.prototype.margin = 0;
-BoundedObject.prototype.offset = 0;
-BoundedObject.prototype.padding = 0;
-BoundedObject.prototype.isPureContainer = false;
-BoundedObject.prototype.styled = true;
-

package/src/svg/ClipRect.d.ts

@@ -1,5 +0,0 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
-
-// no new props defined in ClipRect, so inheriting BoundedObject directly
-export class ClipRect extends BoundedObject {}

package/src/svg/ClipRect.js

@@ -1,23 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {BoundedObject} from './BoundedObject';
-import {Rect} from './util/Rect';
-
-export class ClipRect extends BoundedObject {
-
-   prepareBounds(context, instance) {
-      super.prepareBounds(context, instance);
-      var {data} = instance;
-      data.clipId = context.addClipRect(data.bounds);
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      return <g key={key} clipPath={`url(#${data.clipId})`}>
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-}
-
-ClipRect.prototype.anchors = '0 1 1 0';
-
-

package/src/svg/Ellipse.d.ts

@@ -1,24 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface EllipseProps extends TextualBoundedObjectProps {
-   
-   /** 
-    * Index of the color in the default color palette. Setting this property will set 
-    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill 
-    * if they are not necessary. 
-    */
-   colorIndex?: Cx.NumberProp,
-
-   /** A color used to paint the box. */
-   fill?: Cx.StringProp,
-   
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
-   baseClass?: string
-
-}
-
-export class Ellipse extends Cx.Widget<EllipseProps> {}