cx 22.3.3 → 22.4.0

package/src/data/View.js

@@ -1,182 +1,182 @@
-import { Binding } from "./Binding";
-import { isArray } from "../util/isArray";
-import { isDefined } from "../util/isDefined";
-import { StoreRef } from "./StoreRef";
-import { isObject } from "../util/isObject";
-import { isFunction } from "../util/isFunction";
-
-export class View {
-   constructor(config) {
-      Object.assign(this, config);
-      this.cache = {
-         version: -1,
-      };
-      if (this.store) this.setStore(this.store);
-   }
-
-   getData() {
-      throw new Error("abstract method");
-   }
-
-   init(path, value) {
-      if (typeof path == "object" && path != null) {
-         let changed = false;
-         for (let key in path)
-            if (path.hasOwnProperty(key) && this.get(key) === undefined && this.setItem(key, path[key])) changed = true;
-         return changed;
-      }
-      let binding = Binding.get(path);
-      if (this.get(binding.path) === undefined) return this.setItem(binding.path, value);
-      return false;
-   }
-
-   set(path, value) {
-      if (isObject(path)) {
-         let changed = false;
-         for (let key in path) if (path.hasOwnProperty(key) && this.setItem(key, path[key])) changed = true;
-         return changed;
-      }
-      let binding = Binding.get(path);
-      return this.setItem(binding.path, value);
-   }
-
-   copy(from, to) {
-      let value = this.get(from);
-      this.set(to, value);
-   }
-
-   move(from, to) {
-      this.batch(() => {
-         this.copy(from, to);
-         this.delete(from);
-      });
-   }
-
-   //protected
-   setItem(path, value) {
-      if (this.store) return this.store.setItem(path, value);
-      throw new Error("abstract method");
-   }
-
-   delete(path) {
-      if (arguments.length > 1) path = Array.from(arguments);
-      if (isArray(path)) return path.map((arg) => this.delete(arg)).some(Boolean);
-
-      let binding = Binding.get(path);
-      return this.deleteItem(binding.path);
-   }
-
-   //protected
-   deleteItem(path) {
-      if (this.store) return this.store.deleteItem(path);
-
-      throw new Error("abstract method");
-   }
-
-   clear() {
-      if (this.store) return this.store.clear();
-
-      throw new Error("abstract method");
-   }
-
-   get(path) {
-      let storeData = this.getData();
-
-      if (arguments.length > 1) path = Array.from(arguments);
-
-      if (isArray(path)) return path.map((arg) => Binding.get(arg).value(storeData));
-
-      return Binding.get(path).value(storeData);
-   }
-
-   toggle(path) {
-      return this.set(path, !this.get(path));
-   }
-
-   update(path, updateFn, ...args) {
-      if (arguments.length == 1 && isFunction(path))
-         return this.load(path.apply(null, [this.getData(), updateFn, ...args]));
-      return this.set(path, updateFn.apply(null, [this.get(path), ...args]));
-   }
-
-   batch(callback) {
-      let dirty = this.silently(callback);
-      if (dirty) this.notify();
-      return dirty;
-   }
-
-   silently(callback) {
-      if (this.store) return this.store.silently(callback);
-
-      throw new Error("abstract method");
-   }
-
-   notify(path) {
-      if (this.notificationsSuspended) this.dirty = true;
-      else this.doNotify(path);
-   }
-
-   doNotify(path) {
-      if (this.store) return this.store.notify(path);
-
-      throw new Error("abstract method");
-   }
-
-   subscribe(callback) {
-      if (this.store) return this.store.subscribe(callback);
-
-      throw new Error("abstract method");
-   }
-
-   load(data) {
-      return this.batch((store) => {
-         for (let key in data) store.set(key, data[key]);
-      });
-   }
-
-   dispatch(action) {
-      if (this.store) return this.store.dispatch(action);
-
-      throw new Error("The underlying store doesn't support dispatch.");
-   }
-
-   getMeta() {
-      return this.meta;
-   }
-
-   setStore(store) {
-      this.store = store;
-      this.meta = store.getMeta();
-   }
-
-   ref(path, defaultValue) {
-      if (isDefined(defaultValue)) this.init(path, defaultValue);
-      return StoreRef.create({
-         store: this,
-         path,
-      });
-   }
-
-   getMethods() {
-      return {
-         getData: this.getData.bind(this),
-         set: this.set.bind(this),
-         get: this.get.bind(this),
-         update: this.update.bind(this),
-         delete: this.delete.bind(this),
-         toggle: this.toggle.bind(this),
-         init: this.init.bind(this),
-         ref: this.ref.bind(this),
-         mutate: this.ref.bind(this),
-      };
-   }
-}
-
-View.prototype.sealed = false; //indicate that data should be copied before virtual items are added
-
-//Immer integration point
-View.prototype.mutate = function () {
-   throw new Error(
-      "Mutate requires Immer. Please install 'immer' and 'cx-immer' packages and enable store mutation by calling enableImmerMutate()."
-   );
-};
+import { Binding } from "./Binding";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { StoreRef } from "./StoreRef";
+import { isObject } from "../util/isObject";
+import { isFunction } from "../util/isFunction";
+
+export class View {
+   constructor(config) {
+      Object.assign(this, config);
+      this.cache = {
+         version: -1,
+      };
+      if (this.store) this.setStore(this.store);
+   }
+
+   getData() {
+      throw new Error("abstract method");
+   }
+
+   init(path, value) {
+      if (typeof path == "object" && path != null) {
+         let changed = false;
+         for (let key in path)
+            if (path.hasOwnProperty(key) && this.get(key) === undefined && this.setItem(key, path[key])) changed = true;
+         return changed;
+      }
+      let binding = Binding.get(path);
+      if (this.get(binding.path) === undefined) return this.setItem(binding.path, value);
+      return false;
+   }
+
+   set(path, value) {
+      if (isObject(path)) {
+         let changed = false;
+         for (let key in path) if (path.hasOwnProperty(key) && this.setItem(key, path[key])) changed = true;
+         return changed;
+      }
+      let binding = Binding.get(path);
+      return this.setItem(binding.path, value);
+   }
+
+   copy(from, to) {
+      let value = this.get(from);
+      this.set(to, value);
+   }
+
+   move(from, to) {
+      this.batch(() => {
+         this.copy(from, to);
+         this.delete(from);
+      });
+   }
+
+   //protected
+   setItem(path, value) {
+      if (this.store) return this.store.setItem(path, value);
+      throw new Error("abstract method");
+   }
+
+   delete(path) {
+      if (arguments.length > 1) path = Array.from(arguments);
+      if (isArray(path)) return path.map((arg) => this.delete(arg)).some(Boolean);
+
+      let binding = Binding.get(path);
+      return this.deleteItem(binding.path);
+   }
+
+   //protected
+   deleteItem(path) {
+      if (this.store) return this.store.deleteItem(path);
+
+      throw new Error("abstract method");
+   }
+
+   clear() {
+      if (this.store) return this.store.clear();
+
+      throw new Error("abstract method");
+   }
+
+   get(path) {
+      let storeData = this.getData();
+
+      if (arguments.length > 1) path = Array.from(arguments);
+
+      if (isArray(path)) return path.map((arg) => Binding.get(arg).value(storeData));
+
+      return Binding.get(path).value(storeData);
+   }
+
+   toggle(path) {
+      return this.set(path, !this.get(path));
+   }
+
+   update(path, updateFn, ...args) {
+      if (arguments.length == 1 && isFunction(path))
+         return this.load(path.apply(null, [this.getData(), updateFn, ...args]));
+      return this.set(path, updateFn.apply(null, [this.get(path), ...args]));
+   }
+
+   batch(callback) {
+      let dirty = this.silently(callback);
+      if (dirty) this.notify();
+      return dirty;
+   }
+
+   silently(callback) {
+      if (this.store) return this.store.silently(callback);
+
+      throw new Error("abstract method");
+   }
+
+   notify(path) {
+      if (this.notificationsSuspended) this.dirty = true;
+      else this.doNotify(path);
+   }
+
+   doNotify(path) {
+      if (this.store) return this.store.notify(path);
+
+      throw new Error("abstract method");
+   }
+
+   subscribe(callback) {
+      if (this.store) return this.store.subscribe(callback);
+
+      throw new Error("abstract method");
+   }
+
+   load(data) {
+      return this.batch((store) => {
+         for (let key in data) store.set(key, data[key]);
+      });
+   }
+
+   dispatch(action) {
+      if (this.store) return this.store.dispatch(action);
+
+      throw new Error("The underlying store doesn't support dispatch.");
+   }
+
+   getMeta() {
+      return this.meta;
+   }
+
+   setStore(store) {
+      this.store = store;
+      this.meta = store.getMeta();
+   }
+
+   ref(path, defaultValue) {
+      if (isDefined(defaultValue)) this.init(path, defaultValue);
+      return StoreRef.create({
+         store: this,
+         path,
+      });
+   }
+
+   getMethods() {
+      return {
+         getData: this.getData.bind(this),
+         set: this.set.bind(this),
+         get: this.get.bind(this),
+         update: this.update.bind(this),
+         delete: this.delete.bind(this),
+         toggle: this.toggle.bind(this),
+         init: this.init.bind(this),
+         ref: this.ref.bind(this),
+         mutate: this.ref.bind(this),
+      };
+   }
+}
+
+View.prototype.sealed = false; //indicate that data should be copied before virtual items are added
+
+//Immer integration point
+View.prototype.mutate = function () {
+   throw new Error(
+      "Mutate requires Immer. Please install 'immer' and 'cx-immer' packages and enable store mutation by calling enableImmerMutate()."
+   );
+};

package/src/data/comparer.js

@@ -1,15 +1,15 @@
-import { getSelector } from './getSelector'
+import { getSelector } from "./getSelector";
 import { isDefined } from "../util/isDefined";
 import { defaultCompare } from "./defaultCompare";
 
 export function getComparer(sorters, dataAccessor, comparer) {
-   let data = (sorters || []).map(s => {
-      let selector = isDefined(s.value) ? getSelector(s.value) : s.field ? x => x[s.field] : () => null;
+   let data = (sorters || []).map((s) => {
+      let selector = isDefined(s.value) ? getSelector(s.value) : s.field ? (x) => x[s.field] : () => null;
       return {
-         getter: dataAccessor ? x => selector(dataAccessor(x)) : selector,
-         factor: s.direction && s.direction[0].toLowerCase() == 'd' ? -1 : 1,
-         compare: s.comparer || s.compare || comparer || defaultCompare
-      }
+         getter: dataAccessor ? (x) => 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) {
@@ -18,12 +18,17 @@ export function getComparer(sorters, dataAccessor, comparer) {
          d = data[i];
          av = d.getter(a);
          bv = d.getter(b);
+
+         // show nulls always on the bottom         
+         if (av == null) return bv == null ? 0 : 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, dataAccessor, compare) {
@@ -32,7 +37,7 @@ export function indexSorter(sorters, dataAccessor, compare) {
       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, dataAccessor, compare) {
@@ -42,5 +47,5 @@ export function sorter(sorters, dataAccessor, compare) {
       let result = [...data];
       result.sort(cmp);
       return result;
-   }
+   };
 }

package/src/data/computable.d.ts

@@ -1,46 +1,46 @@
-import { AccessorChain, Record } from "../core";
-import { AccessorModel } from "./createAccessorModelProxy";
-
-interface Computable<V = any> {
-   (data: Record): V;
-   memoize(warmupData?: Record): (data: Record) => any;
-}
-
-export function computable(callback: () => any): Computable;
-export function computable(p1: string, computeFn: (v1: any) => any): Computable;
-export function computable(p1: string, p2: string, computeFn: (v1: any, v2: any) => any): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   computeFn: (v1: any, v2: any, v3: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any) => any
-): Computable;
-
-export function computable<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Computable<R>;
-export function computable<V1, V2, R>(
-   arg1: AccessorChain<V1> | AccessorModel<V1>,
-   arg2: AccessorChain<V2> | AccessorModel<V2>,
-   compute: (v1: V1, v2: V2) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, R>(
-   arg1: AccessorChain<V1> | AccessorModel<V1>,
-   arg2: AccessorChain<V2> | AccessorModel<V2>,
-   arg3: AccessorChain<V3> | AccessorModel<V3>,
-   compute: (v1: V1, v2: V2, v3: V3) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
-): Computable<R>;
+import { AccessorChain, Record } from "../core";
+import { AccessorModel } from "./createAccessorModelProxy";
+
+interface Computable<V = any> {
+   (data: Record): V;
+   memoize(warmupData?: Record): (data: Record) => any;
+}
+
+export function computable(callback: () => any): Computable;
+export function computable(p1: string, computeFn: (v1: any) => any): Computable;
+export function computable(p1: string, p2: string, computeFn: (v1: any, v2: any) => any): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   computeFn: (v1: any, v2: any, v3: any) => any
+): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   p4: string,
+   computeFn: (v1: any, v2: any, v3: any, v4: any) => any
+): Computable;
+
+export function computable<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Computable<R>;
+export function computable<V1, V2, R>(
+   arg1: AccessorChain<V1> | AccessorModel<V1>,
+   arg2: AccessorChain<V2> | AccessorModel<V2>,
+   compute: (v1: V1, v2: V2) => R
+): Computable<R>;
+
+export function computable<V1, V2, V3, R>(
+   arg1: AccessorChain<V1> | AccessorModel<V1>,
+   arg2: AccessorChain<V2> | AccessorModel<V2>,
+   arg3: AccessorChain<V3> | AccessorModel<V3>,
+   compute: (v1: V1, v2: V2, v3: V3) => R
+): Computable<R>;
+
+export function computable<V1, V2, V3, V4, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
+): Computable<R>;

package/src/data/createAccessorModelProxy.d.ts

@@ -1,6 +1,6 @@
-import { AccessorChain } from "../core";
-
-export function isAccessorChain(value: any): boolean;
-export function isAccessorChain<V>(value: AccessorChain<V>): true;
-
-export function createAccessorModelProxy<M>(): AccessorChain<M>;
+import { AccessorChain } from "../core";
+
+export function isAccessorChain(value: any): boolean;
+export function isAccessorChain<V>(value: AccessorChain<V>): true;
+
+export function createAccessorModelProxy<M>(): AccessorChain<M>;

package/src/data/getAccessor.js

@@ -1,61 +1,61 @@
-import { Binding, isBinding } from "./Binding";
-import { isSelector } from "./isSelector";
-import { getSelector } from "./getSelector";
-import { isObject } from "../util/isObject";
-import { isAccessorChain } from "./createAccessorModelProxy";
-
-/*
-   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 function getAccessor(accessor, options) {
-   if (accessor == null) return null;
-
-   if (isObject(accessor)) {
-      if (accessor.isAccessor || accessor.isRef) return 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,
-   };
-}
+import { Binding, isBinding } from "./Binding";
+import { isSelector } from "./isSelector";
+import { getSelector } from "./getSelector";
+import { isObject } from "../util/isObject";
+import { isAccessorChain } from "./createAccessorModelProxy";
+
+/*
+   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 function getAccessor(accessor, options) {
+   if (accessor == null) return null;
+
+   if (isObject(accessor)) {
+      if (accessor.isAccessor || accessor.isRef) return 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,
+   };
+}