cx 26.1.4 → 26.1.5

package/dist/ui.js

@@ -20,6 +20,7 @@ import {
 	NestedDataView,
 	Grouper,
 	getComparer,
+	StringTemplate,
 } from "cx/data";
 export { computable, createAccessorModelProxy } from "cx/data";
 import {
@@ -27,8 +28,8 @@ import {
 	isArray,
 	isFunction,
 	parseStyle,
-	Console,
 	isString,
+	Console,
 	isDefined,
 	innerTextTrim,
 	GlobalCacheIdentifier,
@@ -69,7 +70,7 @@ import {
 	isNumber,
 	isDataRecord,
 } from "cx/util";
-import { VDOM as VDOM$2 } from "cx-react";
+import { VDOM as VDOM$1 } from "cx-react";
 import { NumberCulture, DateTimeCulture } from "intl-io";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -261,9 +262,6 @@ class CSS {
 CSS.classPrefix = "cx";
 CSSHelper.alias("cx", CSS);
 
-// @ts-expect-error
-const VDOM$1 = VDOM$2;
-
 const VDOM = VDOM$1;
 let widgetId = 100;
 class Widget extends Component {
@@ -292,13 +290,6 @@ class Widget extends Component {
 	init() {
 		if (this.styles) this.style = this.styles;
 		if (this.styled) this.style = parseStyle(this.style);
-		else if (this.style) {
-			Console.warn(
-				"Components that allow use of the style attribute should set styled = true on their prototype. This will be an error in future versions.",
-			);
-			this.style = parseStyle(this.style);
-			this.styled = true;
-		}
 		if (typeof this.if !== "undefined") this.visible = this.if;
 		this.declareData();
 		if (this.outerLayout) {
@@ -3576,11 +3567,8 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
 		options: options,
 		subscribe: true,
 	});
-	let root = null;
-	if (VDOM.DOM.createRoot) {
-		root = VDOM.DOM.createRoot(parentDOMElement);
-		root.render(content);
-	} else VDOM.DOM.render(content, parentDOMElement);
+	let root = VDOM.DOM.createRoot(parentDOMElement);
+	root.render(content);
 	let stopped = false;
 	return function () {
 		if (stopped) return;
@@ -3595,7 +3583,6 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
 }
 function destroy(parentDOMElement, options, root) {
 	if (root) root.unmount();
-	else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
 	if (options.removeParentDOMElement && parentDOMElement.parentNode)
 		parentDOMElement.parentNode.removeChild(parentDOMElement);
 }
@@ -4062,10 +4049,15 @@ function bind(path, defaultValue) {
 	};
 }
 
-function tpl(text) {
-	return {
-		tpl: text,
-	};
+function tpl(...args) {
+	if (args.length === 1)
+		return {
+			tpl: args[0],
+		};
+	let template = args[args.length - 1];
+	let formatter = StringTemplate.get(template);
+	let selectors = args.slice(0, -1);
+	return computable(...selectors, (...values) => formatter(values));
 }
 
 function expr(...args) {
@@ -4143,6 +4135,21 @@ function strictEqual(arg, value) {
 function strictNotEqual(arg, value) {
 	return expr(arg, (x) => x !== value);
 }
+/** Returns a selector that formats the value using the specified format string.
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
+ * @example
+ * format(m.price, "n;2") // formats as number with 2 decimal places
+ * format(m.date, "d") // formats as date
+ * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
+ */
+function format(arg, fmt, nullText) {
+	let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+	return computable(arg, (x) => Format$1.value(x, f));
+}
 
 export {
 	ArrayAdapter,
@@ -4211,6 +4218,7 @@ export {
 	expr,
 	falsy,
 	flattenProps,
+	format,
 	getContent,
 	getContentArray,
 	getCurrentCulture,

package/dist/util.js

@@ -1389,6 +1389,10 @@ class Component {
 		if (isArray(config)) return config.map((cfg) => this.create(cmpType, cfg, more));
 		let cfg = config;
 		if (more) cfg = Object.assign({}, config, more);
+		// Check if merged cfg has type/$type that should override cmpType
+		// Only redirect if cfgType is a class (not a string alias or factory) to prevent infinite recursion
+		let cfgType = cfg && (cfg.type || cfg.$type);
+		if (cfgType && cfgType.isComponentType && cfgType !== cmpType) return this.create(cfg);
 		let cmp = new cmpType(cfg);
 		if (cmpType.autoInit && cmp.init) cmp.init();
 		return cmp;