cx 25.11.1 → 26.0.2

package/src/data/ZoomIntoPropertyView.ts

@@ -0,0 +1,45 @@
+import { Binding } from "./Binding";
+import { NestedDataView, NestedDataViewConfig } from "./NestedDataView";
+
+export interface ZoomIntoPropertyViewConfig extends NestedDataViewConfig {
+   binding: Binding;
+   rootName?: string;
+}
+
+export class ZoomIntoPropertyView extends NestedDataView {
+   declare binding: Binding;
+   declare rootName: string;
+
+   constructor(config: ZoomIntoPropertyViewConfig) {
+      super(config);
+   }
+
+   protected getBaseData(parentStoreData: any): any {
+      let x = this.binding.value(parentStoreData);
+      if (x != null && typeof x != "object") throw new Error("Zoomed value must be an object.");
+      return {
+         ...x,
+      };
+   }
+
+   protected embedAugmentData(result: any, parentStoreData: any): void {
+      result[this.rootName] = parentStoreData;
+      super.embedAugmentData(result, parentStoreData);
+   }
+
+   setItem(path: string, value: any): boolean {
+      if (path.indexOf(this.rootName + ".") == 0)
+         return this.store.setItem(path.substring(this.rootName.length + 1), value);
+      if (this.isExtraKey(Binding.get(path).parts[0])) return super.setItem(path, value);
+      return super.setItem(this.binding.path + "." + path, value);
+   }
+
+   deleteItem(path: string): boolean {
+      if (path.indexOf(this.rootName + ".") == 0)
+         return this.store.deleteItem(path.substring(this.rootName.length + 1));
+      if (this.isExtraKey(Binding.get(path).parts[0])) return super.deleteItem(path);
+      return super.deleteItem(this.binding.path + "." + path);
+   }
+}
+
+ZoomIntoPropertyView.prototype.rootName = "$root";

package/src/data/comparer.ts

@@ -0,0 +1,78 @@
+import { getSelector } from "./getSelector";
+import { isDefined } from "../util/isDefined";
+import { defaultCompare } from "./defaultCompare";
+
+interface Sorter {
+   value?: any;
+   field?: string;
+   direction?: string;
+   comparer?: (a: any, b: any) => number;
+   compare?: (a: any, b: any) => number;
+}
+
+export function getComparer(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   comparer?: (a: any, b: any) => number,
+): (a: any, b: any) => number {
+   let resolvedSorters = (sorters || []).map((s) => {
+      let selector = isDefined(s.value)
+         ? getSelector(s.value)
+         : s.field
+           ? (x: Record<string, any>) => x[s.field!]
+           : () => null;
+      return {
+         getter: dataAccessor ? (x: any) => selector(dataAccessor(x)) : selector,
+         factor: s.direction && s.direction[0].toLowerCase() == "d" ? -1 : 1,
+         compare: s.comparer || s.compare || comparer || defaultCompare,
+      };
+   });
+
+   return function (a, b) {
+      let d, av, bv;
+      for (let i = 0; i < resolvedSorters.length; i++) {
+         d = resolvedSorters[i];
+         av = d.getter(a);
+         bv = d.getter(b);
+
+         // show nulls always on the bottom
+         if (av == null) {
+            if (bv == null) continue;
+            else return 1;
+         }
+         if (bv == null) return -1;
+
+         let r = d.compare(av, bv);
+         if (r == 0) continue;
+         return d.factor * r;
+      }
+      return 0;
+   };
+}
+
+export function indexSorter(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   compare?: (a: any, b: any) => number,
+): (data: any[]) => number[] {
+   let cmp = getComparer(sorters, dataAccessor, compare);
+   return function (data) {
+      let result = Array.from({ length: data.length }, (v, k) => k);
+      result.sort((ia, ib) => cmp(data[ia], data[ib]));
+      return result;
+   };
+}
+
+export function sorter(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   compare?: (a: any, b: any) => number,
+): (data: any[]) => any[] {
+   let cmp = getComparer(sorters, dataAccessor, compare);
+
+   return function (data) {
+      let result = [...data];
+      result.sort(cmp);
+      return result;
+   };
+}

package/src/data/computable.spec.ts

@@ -0,0 +1,62 @@
+import { computable } from "./computable";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("computable", function () {
+   it("creates a selector", function () {
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable("person.name", (name: string) => name.length);
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("fires every time if not memoized", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      });
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 2);
+   });
+
+   it("fires once if memoized and data has not changed", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize();
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 1);
+   });
+
+   //weird but that's how triggers work and
+   it("memoize with warmup data will not call compute", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize(state);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(fired, 0);
+   });
+
+   it("works with accessors", function () {
+      var m = createAccessorModelProxy<{ person: { name: string } }>();
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable(m.person.name, (name) => name.length);
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("works with array length accessor", function () {
+      var m = createAccessorModelProxy<{ items: string[] }>();
+      let state = { items: ["a", "b", "c"] };
+      let itemCount = computable(m.items.length, (length) => length);
+      assert.equal(itemCount(state), 3);
+   });
+});

package/src/data/computable.ts

@@ -0,0 +1,72 @@
+import { Binding } from "./Binding";
+import { isString } from "../util/isString";
+import { isFunction } from "../util/isFunction";
+import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
+import { CanMemoize, MemoSelector, Selector } from "./Selector";
+import { Ref } from "./Ref";
+
+export type ComputableSelector<T = any> = string | Selector<T> | AccessorChain<T> | CanMemoize<T>;
+
+// Helper type to infer the value type from a selector, string, or accessor chain
+export type InferSelectorValue<T> =
+   T extends Selector<infer R> ? R : T extends AccessorChain<infer R> ? R : T extends string ? any : never;
+
+// Generic overload - handles all cases with proper type inference
+export function computable<Selectors extends readonly any[], R>(
+   ...args: [
+      ...selectors: ComputableSelector[],
+      compute: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => R,
+   ]
+): MemoSelector<R>;
+
+export function computable(...selectorsAndCompute: any[]): MemoSelector {
+   if (selectorsAndCompute.length == 0)
+      throw new Error("computable requires at least a compute function to be passed in arguments.");
+
+   let compute = selectorsAndCompute[selectorsAndCompute.length - 1];
+   if (typeof compute != "function") throw new Error("Last argument to the computable function should be a function.");
+
+   let inputs: Selector[] = [],
+      a;
+
+   for (let i = 0; i + 1 < selectorsAndCompute.length; i++) {
+      a = selectorsAndCompute[i];
+      if (isString(a) || isAccessorChain(a)) inputs.push(Binding.get(a.toString()).value);
+      else if (a.memoize) inputs.push(a.memoize());
+      else if (isFunction(a)) inputs.push(a);
+      else throw new Error(`Invalid selector type '${typeof a}' received.`);
+   }
+
+   function memoize(warmupData: any) {
+      let lastValue: any,
+         lastArgs = warmupData && inputs.map((s) => s(warmupData));
+
+      return function (data: any) {
+         let dirty = false;
+
+         if (!lastArgs) {
+            lastArgs = Array.from({ length: inputs.length });
+            dirty = true;
+         }
+
+         for (let i = 0; i < inputs.length; i++) {
+            let v = inputs[i](data);
+            if (v === lastArgs[i]) continue;
+            lastArgs[i] = v;
+            dirty = true;
+         }
+
+         if (dirty) lastValue = compute.apply(null, lastArgs);
+
+         return lastValue;
+      };
+   }
+
+   let selector: Selector = (data) =>
+      compute.apply(
+         null,
+         inputs.map((s) => s(data)),
+      );
+   selector.memoize = memoize;
+   return selector as MemoSelector;
+}

package/src/data/createAccessorModelProxy.ts

@@ -0,0 +1,60 @@
+interface AccessorChainMethods {
+   toString(): string;
+   valueOf(): unknown;
+   nameOf(): string;
+}
+
+type AccessorChainMap<M extends object> = {
+   [prop in Exclude<keyof M, keyof AccessorChainMethods>]: AccessorChain<M[prop]>;
+};
+
+export type AccessorChain<M> = {
+   toString(): string;
+   valueOf(): string;
+   nameOf(): string;
+   __accessorChainType?: M; // Type-only marker for inference
+} & (M extends object ? AccessorChainMap<M> : {});
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}

package/src/data/createStructuredSelector.spec.ts

@@ -0,0 +1,45 @@
+import { createStructuredSelector } from "./createStructuredSelector";
+import assert from "assert";
+import { getSelector } from "./getSelector";
+import { computable } from "./computable";
+
+describe("createStructuredSelector", function () {
+   it("works", function () {
+      let structure = {
+         name: getSelector({ bind: "name" }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure);
+      assert.deepEqual(selector(state), { name: "Joe" });
+   });
+
+   it("does not memoize by default", function () {
+      let computes = 0;
+      let structure = {
+         name: computable("name", (name) => {
+            computes++;
+            return name;
+         }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure);
+      assert.deepEqual(selector(state), { name: "Joe" });
+      selector(state);
+      assert.deepEqual(computes, 2);
+   });
+
+   it("supports memoize", function () {
+      let computes = 0;
+      let structure = {
+         name: computable("name", (name) => {
+            computes++;
+            return name;
+         }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure).memoize();
+      assert.deepEqual(selector(state), { name: "Joe" });
+      selector(state);
+      assert.deepEqual(computes, 1);
+   });
+});

package/src/data/createStructuredSelector.ts

@@ -0,0 +1,62 @@
+import { MemoSelector, Selector } from "./Selector";
+
+export interface StructuredSelectorConfig {
+   [prop: string]: Selector;
+}
+
+// Helper type to infer result type from selector config
+type InferStructuredSelectorResult<T extends StructuredSelectorConfig, C = {}> = {
+   [K in keyof T]: T[K] extends Selector<infer R> ? R : any;
+} & C;
+
+export function createStructuredSelector<S extends StructuredSelectorConfig, C extends Record<string, any> = {}>(
+   selector: S,
+   constants?: C,
+): MemoSelector<InferStructuredSelectorResult<S, C>> {
+   let keys = Object.keys(selector);
+   constants = constants ?? ({} as C);
+   if (keys.length == 0) {
+      let result: Selector = () => constants;
+      result.memoize = () => result;
+      return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+   }
+
+   function memoize() {
+      let lastResult: Record<string, any> = Object.assign({}, constants);
+
+      let memoizedSelectors: Record<string, Selector> = {};
+
+      keys.forEach((key) => {
+         memoizedSelectors[key] = selector[key].memoize ? selector[key].memoize() : selector[key];
+         lastResult[key] = undefined;
+      });
+
+      return function (data: any) {
+         let result = lastResult,
+            k,
+            v,
+            i;
+         for (i = 0; i < keys.length; i++) {
+            k = keys[i];
+            v = memoizedSelectors[k](data);
+            if (result === lastResult) {
+               if (v === lastResult[k]) continue;
+               result = Object.assign({}, lastResult);
+            }
+            result[k] = v;
+         }
+         return (lastResult = result);
+      };
+   }
+
+   let result: Selector = function evaluate(data: any) {
+      let result: Record<string, any> = Object.assign({}, constants);
+      for (let i = 0; i < keys.length; i++) {
+         result[keys[i]] = selector[keys[i]](data);
+      }
+      return result;
+   };
+
+   result.memoize = memoize;
+   return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+}

package/src/data/defaultCompare.ts

@@ -0,0 +1,15 @@
+export function defaultCompare(av: any, bv: any): number {
+   if (av == null) {
+      if (bv == null)
+         return 0;
+      return -1;
+   }
+
+   if (bv == null || av > bv)
+      return 1;
+
+   if (av < bv)
+      return -1;
+
+   return 0;
+}

package/src/data/diff/diffArrays.ts

@@ -0,0 +1,49 @@
+import { isUndefined } from "../../util/isUndefined";
+
+type KeyFn<T> = (item: T) => any;
+
+interface DiffResult<T> {
+   added: T[];
+   changed: { before: T; after: T }[];
+   unchanged: T[];
+   removed: T[];
+}
+
+export function diffArrays<T>(oldArray: T[], newArray: T[], keyFn: KeyFn<T> = (e) => e): DiffResult<T> {
+   const map = new Map<any, T>();
+
+   oldArray.forEach((item) => {
+      const key = keyFn(item);
+      map.set(key, item);
+   });
+
+   const added: T[] = [];
+   const changed: { before: T; after: T }[] = [];
+   const unchanged: T[] = [];
+
+   newArray.forEach((item) => {
+      const key = keyFn(item);
+      const oldItem = map.get(key);
+
+      if (isUndefined(oldItem)) {
+         added.push(item);
+      } else {
+         map.delete(key);
+
+         if (item === oldItem) {
+            unchanged.push(item);
+         } else {
+            changed.push({ before: oldItem, after: item });
+         }
+      }
+   });
+
+   const removed = Array.from(map.values());
+
+   return {
+      added,
+      changed,
+      unchanged,
+      removed,
+   };
+}

package/src/data/diff/diffs.spec.ts

@@ -0,0 +1,49 @@
+import assert from 'assert';
+import {diffArrays} from './diffArrays';
+
+
+describe('diffArrays', function() {
+   it('should detect new elements', function () {
+      var a: {k: number, v?: number}[] = [];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(a, b);
+      assert.deepEqual(d, {
+         added: [{k: 1}, {k: 2}],
+         removed: [],
+         unchanged: [],
+         changed: []
+      });
+   });
+
+   it('should detect removed elements', function () {
+      var a: {k: number}[] = [];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(b, a);
+      assert.deepEqual(d, {
+         removed: [{k: 1}, {k: 2}],
+         added: [],
+         unchanged: [],
+         changed: []
+      });
+   });
+
+   it('should detect changed elements', function () {
+      var a = [{k: 1, v: 2}];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(a, b, x=>x.k);
+      assert.deepEqual(d, {
+         added: [{k: 2}],
+         removed: [],
+         unchanged: [],
+         changed: [{
+            after: {
+               k: 1
+            },
+            before: {
+               k: 1, v: 2
+            }
+         }]
+      });
+   });
+});
+

package/src/data/diff/index.ts

@@ -0,0 +1 @@
+export * from "./diffArrays";

package/src/data/enableFatArrowExpansion.ts

@@ -0,0 +1,6 @@
+import { expandFatArrows } from '../util/expandFatArrows';
+import { plugFatArrowExpansion } from './Expression';
+
+export function enableFatArrowExpansion(): void {
+   plugFatArrowExpansion(expandFatArrows);
+}

package/src/data/getAccessor.spec.ts

@@ -0,0 +1,11 @@
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+import { getAccessor } from "./getAccessor";
+
+describe("getAccessor", function () {
+   it("works with accessor chains", function () {
+      let m = createAccessorModelProxy<{ a: { b: any } }>();
+      let accessor = getAccessor(m.a.b);
+      assert(typeof accessor.set == "function");
+   });
+});

package/src/data/getAccessor.ts

@@ -0,0 +1,74 @@
+import { Binding, isBinding } from "./Binding";
+import { isSelector } from "./isSelector";
+import { getSelector } from "./getSelector";
+import { isObject } from "../util/isObject";
+import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
+import { Prop } from "../ui/Prop";
+import { View } from "./View";
+
+/*
+   Accessor provides a common ground between refs and bindings.
+   Refs offer simplicity, bindings have better performance with more arguments.
+   Accessor works as a common interface which works with both patterns.
+ */
+
+export interface Accessor<T = any> {
+   get: (data: any) => T;
+   set?: (value: T, store: View) => boolean;
+   bindInstance?(instance: any): Accessor;
+   isAccessor?: boolean;
+   isRef?: boolean;
+}
+
+export function getAccessor<T = any>(accessor: Prop<T>): Accessor;
+export function getAccessor(accessor: Accessor): Accessor;
+
+export function getAccessor(accessor: any): Accessor | undefined {
+   if (accessor == null) return undefined;
+
+   if (isObject(accessor)) {
+      if ("isAccessor" in accessor || "isRef" in accessor) return accessor as Accessor;
+      if (isBinding(accessor)) {
+         let binding = Binding.get(accessor);
+         return {
+            get: binding.value,
+            set: (v, store) => store.set(binding.path, v),
+            isAccessor: true,
+         };
+      }
+   }
+
+   if (isAccessorChain(accessor)) {
+      let binding = Binding.get(accessor);
+      return {
+         get: binding.value,
+         set: (v, store) => store.set(binding.path, v),
+         isAccessor: true,
+      };
+   }
+
+   if (isSelector(accessor)) {
+      let selector = getSelector(accessor);
+      if (accessor && accessor.set)
+         return {
+            get: selector,
+            isAccessor: true,
+            bindInstance(instance) {
+               return {
+                  get: selector,
+                  set: (value) => accessor.set(value, instance),
+                  isAccessor: true,
+               };
+            },
+         };
+
+      return {
+         get: selector,
+         isAccessor: true,
+      };
+   }
+
+   return {
+      get: () => accessor,
+   };
+}

package/src/data/getSelector.spec.ts

@@ -0,0 +1,43 @@
+import { getSelector } from "./getSelector";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("getSelector", function () {
+   it("array of selectors converts each element into a selector", function () {
+      let arraySelector = [{ bind: "name" }, { expr: "{name}" }];
+      let state = { name: "Joe" };
+      let selector = getSelector(arraySelector);
+      assert.deepEqual(selector(state), ["Joe", "Joe"]);
+   });
+
+   it("get can be used for selectors that have set defined too ", function () {
+      let selector = getSelector({ get: (data: any) => data.name, set: () => {} });
+      assert.deepEqual(selector({ name: "Jack" }), "Jack");
+   });
+
+   it("0 is a valid selector", function () {
+      let selector = getSelector(0);
+      assert.deepEqual(selector({}), 0);
+   });
+
+   it("false is a valid selector", function () {
+      let selector = getSelector(false);
+      assert.deepEqual(selector({}), false);
+   });
+
+   it("undefined is a valid selector", function () {
+      let selector = getSelector(undefined);
+      assert(selector({}) === undefined);
+   });
+
+   it("null is a valid selector", function () {
+      let selector = getSelector(null);
+      assert(selector({}) === null);
+   });
+
+   it("works with accessor chains", function () {
+      let m = createAccessorModelProxy<{ a: { b: any } }>();
+      let selector = getSelector(m.a.b);
+      assert(selector({ a: { b: 1 } }) === 1);
+   });
+});