cx 25.4.0 → 25.5.0

package/dist/ui.js

@@ -430,9 +430,7 @@ var Widget = /*#__PURE__*/ (function (_Component) {
 	_proto.prepareData = function prepareData(context, instance) {
 		if (this.styled) this.prepareCSS(context, instance);
 	};
-	_proto.initInstance = function initInstance(context, instance) {
-		if (this.onInit) this.onInit(context, instance);
-	};
+	_proto.initInstance = function initInstance(context, instance) {};
 	_proto.initState = function initState(context, instance) {};
 	_proto.checkVisible = function checkVisible(context, instance, data) {
 		return data.visible;
@@ -453,6 +451,12 @@ var Widget = /*#__PURE__*/ (function (_Component) {
 	_proto.update = function update() {
 		this.version = (this.version || 0) + 1;
 	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store = instance.parentStore;
+
+		// check when this is actually needed, perhaps this is needed only for tables and repeated elements
+		// if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+	};
 	Widget.resetCounter = function resetCounter() {
 		widgetId = 100;
 	};
@@ -540,20 +544,12 @@ var Text = /*#__PURE__*/ (function (_Widget) {
 })(Widget);
 Widget.alias("text", Text);
 
-function exploreChildren(context, instance, children, previousResult, key, store, beforeCallback, afterCallback) {
+function exploreChildren(context, instance, children, previousResult, key, store) {
 	var newChildren = previousResult || [];
 	var oldChildren = previousResult || newChildren;
 	var identical = previousResult ? 0 : -1;
-
-	// if (children.length)
-	//    context.exploreStack.hop();
-
 	for (var c = 0; c < children.length; c++) {
 		var cell = instance.getChild(context, children[c], key, store);
-
-		// if (beforeCallback)
-		//    beforeCallback(cell);
-
 		if (cell.checkVisible(context)) {
 			if (identical >= 0) {
 				if (cell == oldChildren[identical]) identical++;
@@ -603,7 +599,7 @@ var Container = /*#__PURE__*/ (function (_Widget) {
 		_Widget.prototype.init.call(this, context);
 	};
 	_proto.exploreItems = function exploreItems(context, instance, items) {
-		instance.children = exploreChildren(context, instance, items, instance.cached.children);
+		instance.children = exploreChildren(context, instance, items, instance.cached.children, null, instance.store);
 		if (instance.cache("children", instance.children)) instance.markShouldUpdate(context);
 	};
 	_proto.explore = function explore(context, instance) {
@@ -959,7 +955,10 @@ var ArrayAdapter = /*#__PURE__*/ (function (_DataAdapter) {
 		this.indexName = this.indexName.toString();
 	};
 	_proto.initInstance = function initInstance(context, instance) {
-		if (!instance.recordStoreCache) instance.recordStoreCache = new WeakMap();
+		if (!instance.recordStoreCache) {
+			instance.recordStoreCache = new WeakMap();
+			instance.cacheByKey = {};
+		}
 		if (!instance.recordsAccessor && this.recordsAccessor) {
 			instance.recordsAccessor = this.recordsAccessor.bindInstance
 				? this.recordsAccessor.bindInstance(instance)
@@ -984,7 +983,8 @@ var ArrayAdapter = /*#__PURE__*/ (function (_DataAdapter) {
 		return result;
 	};
 	_proto.mapRecord = function mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
-		var recordStore = instance.recordStoreCache.get(data);
+		var key = this.cacheByKeyField && this.keyField ? data[this.keyField] : null;
+		var recordStore = key != null ? instance.cacheByKey[key] : instance.recordStoreCache.get(data);
 		if (recordsAccessor) {
 			if (!recordStore)
 				recordStore = new ArrayElementView({
@@ -1011,9 +1011,13 @@ var ArrayAdapter = /*#__PURE__*/ (function (_DataAdapter) {
 				});
 			else {
 				recordStore.setStore(parentStore);
+				recordStore.setData(data);
 			}
 		}
-		if (typeof data == "object") instance.recordStoreCache.set(data, recordStore);
+
+		// cache by the key or by data reference
+		if (key != null) instance.cacheByKey[key] = recordStore;
+		else instance.recordStoreCache.set(data, recordStore);
 		return {
 			store: recordStore,
 			index: index,
@@ -1079,6 +1083,8 @@ var ArrayAdapter = /*#__PURE__*/ (function (_DataAdapter) {
 })(DataAdapter);
 ArrayAdapter.prototype.immutable = false;
 ArrayAdapter.prototype.sealed = false;
+ArrayAdapter.prototype.keyField = null;
+ArrayAdapter.prototype.cacheByKeyField = true;
 ArrayAdapter.autoInit = true;
 
 var UseParentLayout = /*#__PURE__*/ (function (_PureContainer) {
@@ -1229,7 +1235,7 @@ var Rescope = /*#__PURE__*/ (function (_PureContainer) {
 	};
 	_proto.initInstance = function initInstance(context, instance) {
 		instance.store = new ZoomIntoPropertyView({
-			store: instance.store,
+			store: instance.parentStore,
 			binding: this.binding,
 			rootName: this.rootName,
 			nestedData: isObject(this.data)
@@ -1240,9 +1246,10 @@ var Rescope = /*#__PURE__*/ (function (_PureContainer) {
 					})
 				: null,
 		});
-		instance.setStore = function (store) {
-			instance.store.setStore(store);
-		};
+		_PureContainer.prototype.initInstance.call(this, context, instance);
+	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store.setStore(instance.parentStore);
 	};
 	return Rescope;
 })(PureContainer);
@@ -1635,31 +1642,39 @@ function enableCultureSensitiveFormatting() {
 
 var instanceId = 1000;
 var Instance = /*#__PURE__*/ (function () {
-	function Instance(widget, key, parent, store) {
+	function Instance(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 != null ? parentStore : parent == null ? void 0 : parent.store;
+		if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
 	}
 	var _proto = Instance.prototype;
-	_proto.setStore = function setStore(store) {
-		this.store = store;
+	_proto.setParentStore = function setParentStore(parentStore) {
+		this.parentStore = parentStore;
+		this.widget.applyParentStore(this);
 	};
 	_proto.init = function 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)
 			this.controller = Controller.create(this.widget.controller, {
@@ -2040,15 +2055,15 @@ var Instance = /*#__PURE__*/ (function () {
 		if (this.instanceCache) this.instanceCache.destroy();
 	};
 	_proto.getChild = function getChild(context, widget, key, store) {
-		return this.getInstanceCache().getChild(widget, store || this.store, key);
+		return this.getInstanceCache().getChild(widget, store != null ? store : this.store, key);
 	};
 	_proto.getDetachedChild = function getDetachedChild(widget, key, store) {
-		var child = new Instance(widget, key, this, store || this.store);
+		var child = new Instance(widget, key, this, store != null ? store : this.store);
 		child.detached = true;
 		return child;
 	};
 	_proto.prepareRenderCleanupChild = function prepareRenderCleanupChild(widget, store, keyPrefix, options) {
-		return widget.prepareRenderCleanup(store || this.store, options, keyPrefix, this);
+		return widget.prepareRenderCleanup(store != null ? store : this.store, options, keyPrefix, this);
 	};
 	_proto.getJsxEventProps = function getJsxEventProps() {
 		var _this5 = this;
@@ -2116,7 +2131,7 @@ var InstanceCache = /*#__PURE__*/ (function () {
 		this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
 	}
 	var _proto2 = InstanceCache.prototype;
-	_proto2.getChild = function getChild(widget, store, key) {
+	_proto2.getChild = function getChild(widget, parentStore, key) {
 		var k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
 		var instance = this.children[k];
 		if (
@@ -2124,12 +2139,10 @@ var InstanceCache = /*#__PURE__*/ (function () {
 			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;
 	};
@@ -2257,10 +2270,10 @@ var Cx = /*#__PURE__*/ (function (_VDOM$Component) {
 				_this.parentInstance = props.parentInstance;
 				_this.store = props.store || _this.parentInstance.store;
 			} else {
-				_this.parentInstance = new Instance(_this.widget, 0);
+				_this.parentInstance = new Instance(_this.widget, 0, null, props.store);
 				_this.store = props.store;
 			}
-			if (!_this.store) throw new Error("Cx component requires store.");
+			if (!_this.store) throw new Error("Cx component requires a store.");
 		}
 		_this.state = {
 			deferToken: 0,
@@ -2299,7 +2312,7 @@ var Cx = /*#__PURE__*/ (function (_VDOM$Component) {
 	_proto.getInstance = function getInstance() {
 		if (this.props.instance) return this.props.instance;
 		if (this.instance && this.instance.widget === this.widget) {
-			if (this.instance.store != this.store) this.instance.setStore(this.store);
+			if (this.instance.parentStore != this.store) this.instance.setParentStore(this.store);
 			return this.instance;
 		}
 		if (this.widget && this.parentInstance)
@@ -2661,6 +2674,9 @@ var IsolatedScope = /*#__PURE__*/ (function (_PureContainer) {
 	_proto.explore = function explore(context, instance) {
 		if (instance.shouldUpdate) {
 			_PureContainer.prototype.explore.call(this, context, instance);
+		} else if (instance.children) {
+			// mark children to prevent sweeping them away
+			for (var i = 0; i < instance.children.length; i++) instance.instanceCache.addChild(instance.children[i]);
 		}
 	};
 	return IsolatedScope;
@@ -2717,6 +2733,10 @@ var DetachedScope = /*#__PURE__*/ (function (_IsolatedScope) {
 			selector: getSelector(this.exclusiveData || this.data),
 		});
 	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store = instance.parentStore;
+		instance.subStore.setStore(instance.parentStore);
+	};
 	_proto.render = function render(context, instance, key) {
 		return /*#__PURE__*/ jsx(
 			Cx,
@@ -2835,16 +2855,15 @@ var Restate = /*#__PURE__*/ (function (_PureContainer) {
 				return instance.nestedDataSet(path, value, _this.data);
 			},
 		});
-		instance.setStore = function (store) {
-			instance.store = store;
-			instance.subStore.setStore(store);
-		};
 		if (cacheKey) {
 			instance.subscribeOnDestroy(function () {
 				persistenceCache[cacheKey] = instance.subStore.getData();
 			});
 		}
 	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		if (instance.subStore) instance.subStore.setStore(instance.parentStore);
+	};
 	_proto.explore = function explore(context, instance) {
 		var _this$culture;
 		if (!instance.subStore) this.initSubStore(context, instance);
@@ -2939,6 +2958,11 @@ var RestateStore = /*#__PURE__*/ (function (_Store) {
 		if (!this.detached) this.store.notify();
 		_Store.prototype.doNotify.call(this);
 	};
+
+	// override the default implementation to avoid meta overwrites
+	_proto2.setStore = function setStore(store) {
+		this.store = store;
+	};
 	return RestateStore;
 })(Store);
 
@@ -2952,25 +2976,25 @@ var DataProxy = /*#__PURE__*/ (function (_PureContainer) {
 		if (!this.data) this.data = {};
 		if (this.alias) this.data[this.alias] = this.value;
 
-		//not sure why nesting is needed, commenting for now
-		// this.container = PureContainer.create({
-		//    type: PureContainer,
-		//    items: this.children || this.items,
-		//    layout: this.layout,
-		//    controller: this.controller,
-		//    outerLayout: this.outerLayout,
-		//    ws: this.ws,
-		// });
-		// this.children = [this.container];
-		// delete this.items;
-		// delete this.controller;
-		// delete this.outerLayout;
-		// this.layout = UseParentLayout;
+		// nesting is required to avoid resetting the store on every render and recalculating the data
+		this.container = PureContainer.create({
+			type: PureContainer,
+			items: this.children || this.items,
+			layout: this.layout,
+			controller: this.controller,
+			outerLayout: this.outerLayout,
+			ws: this.ws,
+		});
+		this.children = [this.container];
+		delete this.items;
+		delete this.controller;
+		delete this.outerLayout;
+		this.layout = UseParentLayout;
 		_PureContainer.prototype.init.call(this);
 	};
 	_proto.initInstance = function initInstance(context, instance) {
 		instance.store = new NestedDataView({
-			store: instance.store,
+			store: instance.parentStore,
 			nestedData: new StructuredInstanceDataAccessor({
 				instance: instance,
 				data: this.data,
@@ -2979,9 +3003,10 @@ var DataProxy = /*#__PURE__*/ (function (_PureContainer) {
 			immutable: this.immutable,
 			sealed: this.sealed,
 		});
-		instance.setStore = function (store) {
-			instance.store.setStore(store);
-		};
+		_PureContainer.prototype.initInstance.call(this, context, instance);
+	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store.setStore(instance.parentStore);
 	};
 	return DataProxy;
 })(PureContainer);
@@ -3215,6 +3240,7 @@ var FunctionalComponent = /*#__PURE__*/ (function (_PureContainer) {
 	_inheritsLoose(FunctionalComponent, _PureContainer);
 	var _proto = FunctionalComponent.prototype;
 	_proto.initInstance = function initInstance(context, instance) {
+		instance.store = instance.parentStore;
 		this.clear();
 		currentInstance = instance;
 		this.add(this.childrenFactory(this.props));
@@ -4483,6 +4509,7 @@ TreeAdapter.prototype.loadedField = "$loaded";
 TreeAdapter.prototype.foldersFirst = true;
 TreeAdapter.prototype.isTreeAdapter = true;
 TreeAdapter.prototype.hideRootNodes = false;
+TreeAdapter.prototype.cacheByKeyField = false;
 
 function bind(path, defaultValue) {
 	return {

package/dist/widgets.js

@@ -1771,15 +1771,16 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 	};
 	_proto.initInstance = function initInstance(context, instance) {
 		instance.store = new ExposedValueView({
-			store: instance.store,
+			store: instance.parentStore,
 			containerBinding: this.storageBinding,
 			key: null,
 			recordName: this.recordName,
 			immutable: this.immutable,
 		});
-		instance.setStore = function (store) {
-			instance.store.setStore(store);
-		};
+		_PureContainer.prototype.initInstance.call(this, context, instance);
+	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store.setStore(instance.parentStore);
 	};
 	_proto.declareData = function declareData() {
 		var _PureContainer$protot;
@@ -1798,6 +1799,8 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 		var store = instance.store,
 			data = instance.data;
 		if (store.getKey() !== data.key) {
+			//when navigating to a page using the same widget tree as the previous page
+			//everything needs to be reinstantiated, e.g. user/1 => user/2
 			instance.store = new ExposedValueView({
 				store: store,
 				containerBinding: this.storageBinding,
@@ -1805,9 +1808,6 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 				recordName: this.recordName,
 				immutable: this.immutable,
 			});
-
-			//when navigating to a page using the same widget tree as the previous page
-			//everything needs to be reinstantiated, e.g. user/1 => user/2
 			instance.clearChildrenCache();
 		}
 		_PureContainer.prototype.prepareData.call(this, context, instance);
@@ -4245,8 +4245,8 @@ function getTooltipInstance(e, parentInstance, tooltip, options) {
 		tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(tooltipWidget, name, store);
 		tooltipInstance.config = tooltip;
 		tooltipInstance.tooltipName = name;
+		tooltipInstance.init(new RenderingContext());
 		if (tooltip.alwaysVisible || tooltip.trackMouse || tooltip.trackMouseX || tooltip.trackMouseY) {
-			tooltipInstance.init(new RenderingContext());
 			tooltipInstance.data = tooltipInstance.dataSelector(store);
 		}
 	}
@@ -4986,13 +4986,13 @@ var Route = /*#__PURE__*/ (function (_PureContainer) {
 			this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
 	};
 	_proto.initInstance = function initInstance(context, instance) {
-		_PureContainer.prototype.initInstance.call(this, context, instance);
 		instance.store = new ReadOnlyDataView({
-			store: instance.store,
+			store: instance.parentStore,
 		});
-		instance.setStore = function (store) {
-			instance.store.setStore(store);
-		};
+		_PureContainer.prototype.initInstance.call(this, context, instance);
+	};
+	_proto.applyParentStore = function applyParentStore(instance) {
+		instance.store.setStore(instance.parentStore);
 	};
 	_proto.declareData = function declareData() {
 		var _PureContainer$protot;

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.4.0",
+   "version": "25.5.0",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Legend.d.ts

@@ -20,22 +20,22 @@ interface LegendProps extends Cx.HtmlElementProps {
    shape?: Cx.StringProp;
 
    /** CSS style that will be applied to the legend entry. */
-   entryStyle: Cx.StyleProp;
+   entryStyle?: Cx.StyleProp;
 
    /** CSS class that will be applied to the legend entry. */
-   entryClass: Cx.ClassProp;
+   entryClass?: Cx.ClassProp;
 
    /** CSS style that will be applied to the legend entry value segment. */
-   valueStyle: Cx.StyleProp;
+   valueStyle?: Cx.StyleProp;
 
    /** CSS class that will be applied to the legend entry value segment. */
-   valueClass: Cx.ClassProp;
+   valueClass?: Cx.ClassProp;
 
    /** Set to true to show values. Mostly used for PieChart legends. */
-   showValues: Cx.BooleanProp;
+   showValues?: Cx.BooleanProp;
 
    /** Format used for values, i.e. n;2 or currency. The default value is s.*/
-   valueFormat: string;
+   valueFormat?: string;
 }
 
 export class Legend extends Cx.Widget<LegendProps> {