cx 25.4.0 → 25.5.0

package/src/ui/HoverSync.js

@@ -1,147 +1,147 @@
-/*
-   HoverSync transfers through the context methods for reporting and subscribing to hover data to
-   its descendants. How this should work is that each component can subscribe and unsubscribe
-   to a hover channel and receive info about hover changes.
-   Also, each component should report mouse enter/leave events.
-   Similar to controllers, hover sync should transcend into child contexts.
-*/
-
-import { dummyCallback } from "../util/dummyCallback";
-import { parseStyle } from "../util/parseStyle";
-import { SubscriberList } from "../util/SubscriberList";
-import { Container } from "./Container";
-import { PureContainer } from "./PureContainer";
-import { VDOM } from "./VDOM";
-
-export class HoverSync extends PureContainer {
-   initInstance(context, instance) {
-      let channels = {};
-      instance.hoverSync = {
-         report: (channel, hoverId, active) => {
-            let ch = channels[channel];
-            if (!ch) return;
-            let state = active && hoverId != null;
-            if (ch.state !== state && (ch.state === hoverId || active)) {
-               ch.state = state;
-               ch.subscribers.notify(state);
-            }
-         },
-         subscribe: (channel, callback) => {
-            let ch = channels[channel];
-            if (!ch)
-               ch = channels[channel] = {
-                  subscribers: new SubscriberList(),
-                  state: false,
-               };
-            return ch.subscribers.subscribe(callback);
-         },
-      };
-   }
-
-   explore(context, instance) {
-      context.push("hoverSync", instance.hoverSync);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("hoverSync");
-   }
-}
-
-class HoverSyncChild extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = { hover: false };
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-   }
-
-   onMouseMove() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
-   }
-
-   onMouseLeave() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
-   }
-
-   compontentWillUnmount() {
-      this.unsubscribe();
-   }
-
-   componentDidMount() {
-      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId) => {
-         let hover = hoverId === this.props.hoverId;
-         if (hover !== this.state.hover) this.setState({ hover });
-      });
-   }
-
-   render() {
-      return this.props.render({
-         hover: this.state.hover,
-         onMouseLeave: this.onMouseLeave,
-         onMouseMove: this.onMouseMove,
-         key: "child",
-      });
-   }
-}
-
-export function withHoverSync(key, hoverSync, hoverChannel, hoverId, render) {
-   if (!hoverSync || !hoverChannel || hoverId == null)
-      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
-   return (
-      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
-   );
-}
-
-export class HoverSyncElement extends Container {
-   declareData(...args) {
-      super.declareData(...args, {
-         hoverId: undefined,
-         hoverClass: { structured: true },
-         hoverStyle: { structured: true },
-      });
-   }
-
-   prepareData(context, instance) {
-      instance.hoverSync = context.hoverSync;
-      instance.inSvg = !!context.inSvg;
-      let { data } = instance;
-      data.hoverStyle = parseStyle(data.hoverStyle);
-      super.prepareData(context, instance);
-   }
-
-   render(context, instance, key) {
-      let { data, inSvg } = instance;
-      let { CSS } = this;
-      let children = this.renderChildren(context, instance);
-      let eventHandlers = instance.getJsxEventProps();
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave, key }) => {
-            let style = {
-               ...data.style,
-               ...(hover && data.hoverStyle),
-            };
-            return VDOM.createElement(
-               inSvg ? "g" : "div",
-               {
-                  key,
-                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
-                  style,
-                  ...eventHandlers,
-                  onMouseLeave,
-                  onMouseMove,
-               },
-               children,
-            );
-         },
-      );
-   }
-}
-
-HoverSyncElement.prototype.baseClass = "hoversyncelement";
-HoverSyncElement.prototype.styled = true;
-HoverSyncElement.prototype.hoverChannel = "default";
+/*
+   HoverSync transfers through the context methods for reporting and subscribing to hover data to
+   its descendants. How this should work is that each component can subscribe and unsubscribe
+   to a hover channel and receive info about hover changes.
+   Also, each component should report mouse enter/leave events.
+   Similar to controllers, hover sync should transcend into child contexts.
+*/
+
+import { dummyCallback } from "../util/dummyCallback";
+import { parseStyle } from "../util/parseStyle";
+import { SubscriberList } from "../util/SubscriberList";
+import { Container } from "./Container";
+import { PureContainer } from "./PureContainer";
+import { VDOM } from "./VDOM";
+
+export class HoverSync extends PureContainer {
+   initInstance(context, instance) {
+      let channels = {};
+      instance.hoverSync = {
+         report: (channel, hoverId, active) => {
+            let ch = channels[channel];
+            if (!ch) return;
+            let state = active && hoverId != null;
+            if (ch.state !== state && (ch.state === hoverId || active)) {
+               ch.state = state;
+               ch.subscribers.notify(state);
+            }
+         },
+         subscribe: (channel, callback) => {
+            let ch = channels[channel];
+            if (!ch)
+               ch = channels[channel] = {
+                  subscribers: new SubscriberList(),
+                  state: false,
+               };
+            return ch.subscribers.subscribe(callback);
+         },
+      };
+   }
+
+   explore(context, instance) {
+      context.push("hoverSync", instance.hoverSync);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("hoverSync");
+   }
+}
+
+class HoverSyncChild extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.state = { hover: false };
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseLeave = this.onMouseLeave.bind(this);
+   }
+
+   onMouseMove() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
+   }
+
+   onMouseLeave() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
+   }
+
+   compontentWillUnmount() {
+      this.unsubscribe();
+   }
+
+   componentDidMount() {
+      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId) => {
+         let hover = hoverId === this.props.hoverId;
+         if (hover !== this.state.hover) this.setState({ hover });
+      });
+   }
+
+   render() {
+      return this.props.render({
+         hover: this.state.hover,
+         onMouseLeave: this.onMouseLeave,
+         onMouseMove: this.onMouseMove,
+         key: "child",
+      });
+   }
+}
+
+export function withHoverSync(key, hoverSync, hoverChannel, hoverId, render) {
+   if (!hoverSync || !hoverChannel || hoverId == null)
+      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
+   return (
+      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
+   );
+}
+
+export class HoverSyncElement extends Container {
+   declareData(...args) {
+      super.declareData(...args, {
+         hoverId: undefined,
+         hoverClass: { structured: true },
+         hoverStyle: { structured: true },
+      });
+   }
+
+   prepareData(context, instance) {
+      instance.hoverSync = context.hoverSync;
+      instance.inSvg = !!context.inSvg;
+      let { data } = instance;
+      data.hoverStyle = parseStyle(data.hoverStyle);
+      super.prepareData(context, instance);
+   }
+
+   render(context, instance, key) {
+      let { data, inSvg } = instance;
+      let { CSS } = this;
+      let children = this.renderChildren(context, instance);
+      let eventHandlers = instance.getJsxEventProps();
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave, key }) => {
+            let style = {
+               ...data.style,
+               ...(hover && data.hoverStyle),
+            };
+            return VDOM.createElement(
+               inSvg ? "g" : "div",
+               {
+                  key,
+                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
+                  style,
+                  ...eventHandlers,
+                  onMouseLeave,
+                  onMouseMove,
+               },
+               children,
+            );
+         },
+      );
+   }
+}
+
+HoverSyncElement.prototype.baseClass = "hoversyncelement";
+HoverSyncElement.prototype.styled = true;
+HoverSyncElement.prototype.hoverChannel = "default";

package/src/ui/Instance.d.ts

@@ -15,7 +15,7 @@ export class Instance<ViewModel = any, Controller = any> {
 
    constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
 
-   setStore(store: View): void;
+   setParentStore(parentStore: View): void;
 
    init(context: RenderingContext): void;
 

package/src/ui/Instance.js

@@ -16,33 +16,44 @@ import { isAccessorChain } from "../data/createAccessorModelProxy";
 let instanceId = 1000;
 
 export class Instance {
-   constructor(widget, key, parent, store) {
+   constructor(widget, key, parent, parentStore) {
       this.widget = widget;
       this.key = key;
       this.id = String(++instanceId);
       this.cached = {};
       this.parent = parent;
-      this.store = store;
+      this.parentStore = parentStore ?? parent?.store;
+
+      if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
    }
 
-   setStore(store) {
-      this.store = store;
+   setParentStore(parentStore) {
+      this.parentStore = parentStore;
+      this.widget.applyParentStore(this);
    }
 
    init(context) {
-      //widget is initialized when first instance is initialized
+      // widget is initialized when the first instance is initialized
       if (!this.widget.initialized) {
          this.widget.init(context);
+
+         // init default values
+         this.widget.selector.init(this.parentStore);
+
          this.widget.initialized = true;
       }
 
       if (!this.dataSelector) {
-         this.widget.selector.init(this.store);
          this.dataSelector = this.widget.selector.createStoreSelector();
       }
 
-      //init instance might change the store, so it must go before the controller
+      // init instance might change the store, so this must go before the controller initialization
       this.widget.initInstance(context, this);
+
+      // initInstance can set the store, otherwise use parent store
+      if (!this.store) this.store = this.parentStore;
+      if (this.widget.onInit) this.widget.onInit(context, this);
+
       this.widget.initState(context, this);
 
       if (this.widget.controller)
@@ -474,17 +485,17 @@ export class Instance {
    }
 
    getChild(context, widget, key, store) {
-      return this.getInstanceCache().getChild(widget, store || this.store, key);
+      return this.getInstanceCache().getChild(widget, store ?? this.store, key);
    }
 
    getDetachedChild(widget, key, store) {
-      let child = new Instance(widget, key, this, store || this.store);
+      let child = new Instance(widget, key, this, store ?? this.store);
       child.detached = true;
       return child;
    }
 
    prepareRenderCleanupChild(widget, store, keyPrefix, options) {
-      return widget.prepareRenderCleanup(store || this.store, options, keyPrefix, this);
+      return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
    }
 
    getJsxEventProps() {
@@ -550,7 +561,7 @@ export class InstanceCache {
       this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
    }
 
-   getChild(widget, store, key) {
+   getChild(widget, parentStore, key) {
       let k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
       let instance = this.children[k];
 
@@ -559,12 +570,10 @@ export class InstanceCache {
          instance.widget !== widget ||
          (!instance.visible && (instance.widget.controller || instance.widget.onInit))
       ) {
-         instance = new Instance(widget, k, this.parent);
+         instance = new Instance(widget, k, this.parent, parentStore);
          this.children[k] = instance;
-      }
-      if (instance.store !== store) {
-         instance.setStore(store);
-         if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+      } else if (instance.parentStore !== parentStore) {
+         instance.setParentStore(parentStore);
       }
 
       return instance;

package/src/ui/IsolatedScope.js

@@ -1,30 +1,30 @@
-import { PureContainer } from "./PureContainer";
-import { isArray } from '../util/isArray';
-
-export class IsolatedScope extends PureContainer {
-
-   declareData() {
-      return super.declareData(...arguments, {
-         data: { structured: true }
-      })
-   }
-
-   init() {
-      if (typeof this.bind === 'string')
-         this.data = { bind: this.bind };
-      else if (isArray(this.bind)) {
-         this.data = {};
-         this.bind.forEach((x, i) => {
-            this.data[String(i)] = { bind: x }
-         });
-      }
-      super.init();
-   }
-
-
-   explore(context, instance) {
-      if (instance.shouldUpdate) {
-         super.explore(context, instance);
-      }
-   }
-}
+import { PureContainer } from "./PureContainer";
+import { isArray } from "../util/isArray";
+
+export class IsolatedScope extends PureContainer {
+   declareData() {
+      return super.declareData(...arguments, {
+         data: { structured: true },
+      });
+   }
+
+   init() {
+      if (typeof this.bind === "string") this.data = { bind: this.bind };
+      else if (isArray(this.bind)) {
+         this.data = {};
+         this.bind.forEach((x, i) => {
+            this.data[String(i)] = { bind: x };
+         });
+      }
+      super.init();
+   }
+
+   explore(context, instance) {
+      if (instance.shouldUpdate) {
+         super.explore(context, instance);
+      } else if (instance.children) {
+         // mark children to prevent sweeping them away
+         for (let i = 0; i < instance.children.length; i++) instance.instanceCache.addChild(instance.children[i]);
+      }
+   }
+}

package/src/ui/Repeater.d.ts

@@ -1,61 +1,61 @@
-import {
-   RecordsProp,
-   RecordAlias,
-   StringProp,
-   SortersProp,
-   StructuredProp,
-   CollatorOptions,
-   Widget,
-   PureContainerProps,
-   Prop,
-   SortDirection,
-} from "../core";
-import { DataAdapterRecord } from "./adapter";
-import { Instance } from "./Instance";
-
-interface RepeaterProps<T = unknown> extends PureContainerProps {
-   records: Prop<T[]>;
-   recordName?: RecordAlias;
-   recordAlias?: RecordAlias;
-   indexName?: RecordAlias;
-   indexAlias?: RecordAlias;
-   cached?: boolean;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that record stores should not be mutated. */
-   sealed?: boolean;
-
-   sorters?: SortersProp;
-
-   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: StringProp;
-
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
-   sortDirection?: Prop<SortDirection>;
-
-   /** Parameters that affect filtering */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
-
-   /**
-    * Callback function to track and retrieve displayed records.
-    * Accepts new records as a first argument.
-    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
-    */
-   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
-
-   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: CollatorOptions;
-
-   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to movement of records inside the collection.  */
-   keyField?: StringProp;
-
-   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
-   dataAdapter?: any;
-}
-
-export class Repeater<T = unknown> extends Widget<RepeaterProps<T>> {}
+import {
+   RecordsProp,
+   RecordAlias,
+   StringProp,
+   SortersProp,
+   StructuredProp,
+   CollatorOptions,
+   Widget,
+   PureContainerProps,
+   Prop,
+   SortDirection,
+} from "../core";
+import { DataAdapterRecord } from "./adapter";
+import { Instance } from "./Instance";
+
+interface RepeaterProps<T = unknown> extends PureContainerProps {
+   records: Prop<T[]>;
+   recordName?: RecordAlias;
+   recordAlias?: RecordAlias;
+   indexName?: RecordAlias;
+   indexAlias?: RecordAlias;
+   cached?: boolean;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that record stores should not be mutated. */
+   sealed?: boolean;
+
+   sorters?: SortersProp;
+
+   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
+   sortField?: StringProp;
+
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: Prop<SortDirection>;
+
+   /** Parameters that affect filtering */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
+
+   /**
+    * Callback function to track and retrieve displayed records.
+    * Accepts new records as a first argument.
+    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+    */
+   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
+
+   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+   sortOptions?: CollatorOptions;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to movement of records inside the collection.  */
+   keyField?: StringProp;
+
+   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
+   dataAdapter?: any;
+}
+
+export class Repeater<T = unknown> extends Widget<RepeaterProps<T>> {}

package/src/ui/Rescope.js

@@ -1,31 +1,35 @@
-import { Widget } from "./Widget";
-import { PureContainer } from "./PureContainer";
-import { Binding } from "../data/Binding";
-import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-import { isObject } from "../util/isObject";
-
-export class Rescope extends PureContainer {
-   init() {
-      this.binding = Binding.get(this.bind);
-      if (this.rootAlias) this.rootName = this.rootAlias;
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ZoomIntoPropertyView({
-         store: instance.store,
-         binding: this.binding,
-         rootName: this.rootName,
-         nestedData: isObject(this.data) ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }) : null,
-      });
-      instance.setStore = (store) => {
-         instance.store.setStore(store);
-      };
-   }
-}
-
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-
-Widget.alias("rescope", Rescope);
+import { Widget } from "./Widget";
+import { PureContainer } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+
+export class Rescope extends PureContainer {
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context, instance) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : null,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);