@node-projects/web-component-designer-visualization-addons 0.1.152 → 0.3.1

package/dist/helpers/BindingsHelper.js

@@ -16,25 +16,51 @@ export function isLit(element) {
     return element.constructor?.elementProperties != null;
 }
 export function parseBindingString(id) {
-    let parts = [];
-    let signals = [];
-    let tx = '';
+    const parts = [];
+    const signals = [];
+    let start = 0;
     for (let n = 0; n < id.length; n++) {
         if (id[n] == '{') {
-            parts.push(tx);
-            tx = '';
+            parts.push(id.substring(start, n));
+            start = n + 1;
         }
         else if (id[n] == '}') {
-            signals.push(tx);
-            tx = '';
-        }
-        else {
-            tx += id[n];
+            signals.push(id.substring(start, n));
+            start = n + 1;
         }
     }
-    parts.push(tx);
+    parts.push(id.substring(start));
     return { parts, signals };
 }
+function bindSpecialValue(handler, name, context, valueChanged) {
+    let active = true;
+    let revision = 0;
+    const loadValue = () => {
+        const currentRevision = ++revision;
+        const value = handler.valueProvider(name, context);
+        if (value instanceof Promise)
+            value.then(v => active && currentRevision === revision && valueChanged(v));
+        else if (active)
+            valueChanged(value);
+    };
+    loadValue();
+    if (!handler.valueChangedCallbacks)
+        handler.valueChangedCallbacks = new Map();
+    let callbacks = handler.valueChangedCallbacks.get(name);
+    if (!callbacks) {
+        callbacks = [];
+        handler.valueChangedCallbacks.set(name, callbacks);
+    }
+    callbacks.push(loadValue);
+    return () => {
+        active = false;
+        const index = callbacks.indexOf(loadValue);
+        if (index >= 0)
+            callbacks.splice(index, 1);
+        if (callbacks.length === 0 && handler.valueChangedCallbacks.get(name) === callbacks)
+            handler.valueChangedCallbacks.delete(name);
+    };
+}
 export function getNestedProperty(obj, path) {
     const parts = path.split('.');
     let current = obj;
@@ -45,100 +71,97 @@ export function getNestedProperty(obj, path) {
     }
     return current;
 }
+function observeProperty(bindingsHelper, owner, propertyName, valueChanged, supportsNestedPath = false) {
+    const isNested = supportsNestedPath && propertyName.includes('.');
+    const readValue = isNested
+        ? () => getNestedProperty(owner, propertyName)
+        : () => owner[propertyName];
+    valueChanged(readValue());
+    if (isNested)
+        return () => { };
+    const callback = () => valueChanged(readValue());
+    const eventName = bindingsHelper.getChangedEventName(owner, propertyName);
+    owner.addEventListener(eventName, callback);
+    return () => owner.removeEventListener(eventName, callback);
+}
+function observeAttribute(owner, attributeName, valueChanged) {
+    valueChanged(owner.getAttribute(attributeName));
+    const observer = new MutationObserver(() => valueChanged(owner.getAttribute(attributeName)));
+    observer.observe(owner, { attributes: true, attributeFilter: [attributeName] });
+    return () => observer.disconnect();
+}
 class IndirectSignal {
+    bindingsHelper;
     parts;
     signals;
     values;
     unsubscribeTargetValue;
     cleanupCalls = [];
     combinedName;
-    disposed;
+    disposed = false;
     valueChangedCb;
     visualizationHandler;
     element;
     relativeSignalPath;
     constructor(bindingsHelper, visualizationHandler, id, valueChangedCb, element, relativeSignalPath, root, specialValueHandler) {
+        this.bindingsHelper = bindingsHelper;
         this.visualizationHandler = visualizationHandler;
         this.valueChangedCb = valueChangedCb;
         this.element = element;
         this.relativeSignalPath = relativeSignalPath;
         this.parseIndirectBinding(id);
         this.values = new Array(this.signals.length);
-        for (let i = 0; i < this.signals.length; i++) {
-            let nm = this.signals[i];
-            if (nm[0] === '?' && nm[1] === '?') {
-                const propNm = nm.substring(2);
-                if (!propNm.includes('.')) {
-                    this.handleValueChanged(root[propNm], i);
-                    const evtCallback = () => this.handleValueChanged(root[propNm], i);
-                    const evtName = bindingsHelper.getChangedEventName(root, propNm);
-                    root.addEventListener(evtName, (evtCallback));
-                    this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback));
+        const bindSignalFromProperty = (owner, propertyName, index) => {
+            let currentSignalName;
+            let subscriptionCleanup = () => { };
+            const switchSignal = (propertyValue) => {
+                let signalName = propertyValue;
+                if (typeof signalName === 'string' && signalName[0] === '.')
+                    signalName = visualizationHandler.getNormalizedSignalName(signalName, relativeSignalPath, element);
+                if (signalName === currentSignalName)
+                    return;
+                subscriptionCleanup();
+                currentSignalName = signalName;
+                if (typeof signalName === 'string') {
+                    const callback = (changedId, value) => this.handleValueChanged(value.val, index);
+                    subscriptionCleanup = bindingsHelper.subscribeToState(signalName, callback);
                 }
                 else {
-                    const val = getNestedProperty(root, propNm);
-                    this.handleValueChanged(val, i);
+                    subscriptionCleanup = () => { };
                 }
-                continue;
-            }
-            else if (nm[0] === '#' && nm[1] === '#') {
-                const propNm = nm.substring(2);
-                if (!propNm.includes('.')) {
-                    this.handleValueChanged(element[propNm], i);
-                    const evtCallback = () => this.handleValueChanged(element[propNm], i);
-                    const evtName = bindingsHelper.getChangedEventName(element, propNm);
-                    element.addEventListener(evtName, (evtCallback));
-                    this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback));
-                }
-                else {
-                    const val = getNestedProperty(element, propNm);
-                    this.handleValueChanged(val, i);
-                }
-                continue;
-            }
-            else if (nm[0] === '§') {
-                const mS = nm.substring(1);
-                const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root });
-                if (value instanceof Promise)
-                    value.then(v => this.handleValueChanged(v, i));
-                else
-                    this.handleValueChanged(value, i);
-                if (!specialValueHandler.valueChangedCallbacks)
-                    specialValueHandler.valueChangedCallbacks = new Map();
-                let changeList = specialValueHandler.valueChangedCallbacks.get(mS);
-                if (changeList == null) {
-                    changeList = [];
-                    specialValueHandler.valueChangedCallbacks.set(mS, changeList);
+            };
+            this.cleanupCalls.push(observeProperty(bindingsHelper, owner, propertyName, switchSignal, true));
+            this.cleanupCalls.push(() => subscriptionCleanup());
+        };
+        try {
+            for (let i = 0; i < this.signals.length; i++) {
+                const signal = this.signals[i];
+                if (signal.startsWith('?@') || signal.startsWith('#@')) {
+                    const owner = signal[0] === '?' ? root : element;
+                    this.cleanupCalls.push(observeAttribute(owner, signal.substring(2), value => this.handleValueChanged(value, i)));
                 }
-                changeList.push(() => {
-                    const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root });
-                    if (value instanceof Promise)
-                        value.then(v => this.handleValueChanged(v, i));
-                    else
-                        this.handleValueChanged(value, i);
-                });
-            }
-            else if (nm[0] === '?') {
-                //TODO: react to changes of signal name in prop
-                if (!nm.includes('.')) {
-                    nm = root[nm.substring(1)];
+                else if (signal.startsWith('??') || signal.startsWith('##') || signal.startsWith('?$') || signal.startsWith('#$')) {
+                    const owner = signal[0] === '?' ? root : element;
+                    this.cleanupCalls.push(observeProperty(bindingsHelper, owner, signal.substring(2), value => this.handleValueChanged(value, i), true));
                 }
-                else {
-                    nm = getNestedProperty(root, nm.substring(1));
+                else if (signal[0] === '§') {
+                    const name = signal.substring(1);
+                    if (!specialValueHandler)
+                        throw new Error(`No special value handler registered for "${signal}"`);
+                    this.cleanupCalls.push(bindSpecialValue(specialValueHandler, name, { element, relativeSignalPath, root }, value => this.handleValueChanged(value, i)));
                 }
-            }
-            else if (nm[0] === '#') {
-                //TODO: react to changes of signal name in prop
-                if (!nm.includes('.')) {
-                    nm = root[nm.substring(1)];
+                else if (signal[0] === '?' || signal[0] === '#') {
+                    bindSignalFromProperty(signal[0] === '?' ? root : element, signal.substring(1), i);
                 }
                 else {
-                    nm = getNestedProperty(root, nm.substring(1));
+                    const callback = (changedId, value) => this.handleValueChanged(value.val, i);
+                    this.cleanupCalls.push(bindingsHelper.subscribeToState(signal, callback));
                 }
             }
-            let cb = (id, value) => this.handleValueChanged(value.val, i);
-            const subscr = this.visualizationHandler.subscribeState(nm, cb);
-            this.cleanupCalls.push(() => this.visualizationHandler.unsubscribeState(this.signals[i], cb, subscr));
+        }
+        catch (error) {
+            this.dispose();
+            throw error;
         }
     }
     parseIndirectBinding(id) {
@@ -151,6 +174,8 @@ class IndirectSignal {
         }
     }
     handleValueChanged(value, index) {
+        if (this.disposed)
+            return;
         this.values[index] = value;
         let nm = this.parts[0];
         for (let i = 0; i < this.parts.length - 1; i++) {
@@ -163,27 +188,27 @@ class IndirectSignal {
             nm = this.visualizationHandler.getNormalizedSignalName(nm, this.relativeSignalPath, this.element);
         if (this.combinedName != nm) {
             if (this.unsubscribeTargetValue) {
-                this.visualizationHandler.unsubscribeState(this.combinedName, this.unsubscribeTargetValue[0], this.unsubscribeTargetValue[1]);
+                this.unsubscribeTargetValue();
             }
             if (!this.disposed) {
                 this.combinedName = nm;
-                let cb = (id, value) => this.valueChangedCb(value);
-                this.unsubscribeTargetValue = [cb, this.visualizationHandler.subscribeState(nm, cb)];
+                const cb = (id, value) => this.valueChangedCb(value);
+                this.unsubscribeTargetValue = this.bindingsHelper.subscribeToState(nm, cb);
             }
         }
     }
     dispose() {
         this.disposed = true;
         if (this.unsubscribeTargetValue) {
-            this.visualizationHandler.unsubscribeState(this.combinedName, this.unsubscribeTargetValue[0], this.unsubscribeTargetValue[1]);
+            this.unsubscribeTargetValue();
             this.unsubscribeTargetValue = null;
         }
-        for (let i = 0; i < this.signals.length; i++) {
-            this.cleanupCalls[i]();
-        }
+        for (const cleanup of this.cleanupCalls)
+            cleanup();
+        this.cleanupCalls.length = 0;
     }
     setState(value) {
-        if (!this.disposed) {
+        if (!this.disposed && this.combinedName) {
             this.visualizationHandler.setState(this.combinedName, value);
         }
     }
@@ -191,20 +216,41 @@ class IndirectSignal {
 export class BindingsHelper {
     _visualizationHandler;
     namedConverterCallback;
+    _stateSubscriptions = new Map();
+    _scheduledUpdates = new Set();
+    _updateFlushScheduled = false;
+    _compiledConverters = new WeakMap();
     constructor(visualizationHandler) {
         this._visualizationHandler = visualizationHandler;
     }
+    scheduleUpdate(update) {
+        this._scheduledUpdates.add(update);
+        if (this._updateFlushScheduled)
+            return;
+        this._updateFlushScheduled = true;
+        queueMicrotask(() => {
+            this._updateFlushScheduled = false;
+            const updates = [...this._scheduledUpdates];
+            this._scheduledUpdates.clear();
+            for (const scheduledUpdate of updates)
+                scheduledUpdate();
+        });
+    }
     getChangedEventName(element, propertyName) {
         const posColon = propertyName.indexOf('::');
         if (posColon >= 0)
             return propertyName.substring(posColon + 2);
-        if (element instanceof HTMLInputElement)
-            return 'change';
-        if (element instanceof HTMLSelectElement)
+        if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement)
             return 'change';
-        if (isLit(element))
-            return PropertiesHelper.camelToDashCase(propertyName);
-        return PropertiesHelper.camelToDashCase(propertyName) + '-changed';
+        const eventName = PropertiesHelper.camelToDashCase(propertyName);
+        return isLit(element) ? eventName : eventName + '-changed';
+    }
+    getParsedTargetName(propertyName, bindingTarget) {
+        if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class)
+            return BindingsHelper.dotToCamelCase(propertyName);
+        if (bindingTarget === BindingTarget.attribute)
+            return propertyName;
+        return PropertiesHelper.dashToCamelCase(propertyName);
     }
     //Not allowed chars in Var Names: |{}(),;:[]
     parseBinding(element, name, value, bindingTarget, prefix) {
@@ -232,20 +278,11 @@ export class BindingsHelper {
                 }
                 binding.twoWay = true;
                 if (!binding.events) {
-                    if (element instanceof HTMLInputElement)
-                        binding.events = [this.getChangedEventName(element, propname)];
-                    else if (element instanceof HTMLSelectElement)
-                        binding.events = [this.getChangedEventName(element, propname)];
-                    else {
-                        if (isLit(element)) {
-                            binding.events = [this.getChangedEventName(element, propname)];
-                        }
-                        else {
-                            binding.events = [this.getChangedEventName(element, propname)];
-                            //Binding could be a lit elemnt but not yet loaded
-                            binding.maybeLitElement = true;
-                            binding.litEventNames = [this.getChangedEventName(element, propname)];
-                        }
+                    binding.events = [this.getChangedEventName(element, propname)];
+                    if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLSelectElement) && !isLit(element)) {
+                        //Binding could be a lit element but not yet loaded
+                        binding.maybeLitElement = true;
+                        binding.litEventNames = binding.events;
                     }
                 }
             }
@@ -258,28 +295,13 @@ export class BindingsHelper {
                 binding.expression = parts.pop();
                 binding.signal = parts.join(';');
             }
-            if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class)
-                return [BindingsHelper.dotToCamelCase(propname), binding];
-            if (bindingTarget === BindingTarget.attribute)
-                return [propname, binding];
-            return [PropertiesHelper.dashToCamelCase(propname), binding];
+            return [this.getParsedTargetName(propname, bindingTarget), binding];
         }
         let binding = JSON.parse(value);
         binding.target = bindingTarget;
-        if (binding.twoWay && (binding.events == null || binding.events.length == 0)) {
-            if (element instanceof HTMLInputElement)
-                binding.events = ['change'];
-            else if (element instanceof HTMLSelectElement)
-                binding.events = ['change'];
-            else {
-                binding.events = [this.getChangedEventName(element, propname)];
-            }
-        }
-        if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class)
-            return [BindingsHelper.dotToCamelCase(propname), binding];
-        if (bindingTarget === BindingTarget.attribute)
-            return [propname, binding];
-        return [PropertiesHelper.dashToCamelCase(propname), binding];
+        if (binding.twoWay && (binding.events == null || binding.events.length == 0))
+            binding.events = [this.getChangedEventName(element, propname)];
+        return [this.getParsedTargetName(propname, bindingTarget), binding];
     }
     serializeBinding(element, targetName, binding) {
         let bindingCopy = { ...binding };
@@ -289,9 +311,7 @@ export class BindingsHelper {
             delete bindingCopy.expressionTwoWay;
         }
         else if ((binding.events != null && binding.events.length == 1)) {
-            if (element instanceof HTMLInputElement && binding.events?.[0] == "change")
-                delete bindingCopy.events;
-            else if (element instanceof HTMLSelectElement && binding.events?.[0] == "change")
+            if ((element instanceof HTMLInputElement || element instanceof HTMLSelectElement) && binding.events?.[0] == "change")
                 delete bindingCopy.events;
             else if (isLit(element) && binding.events?.[0] == targetName)
                 delete bindingCopy.events;
@@ -299,108 +319,28 @@ export class BindingsHelper {
                 delete bindingCopy.events;
         }
         const eventsString = bindingCopy.twoWay && bindingCopy.events?.length > 0 ? '::' + bindingCopy.events.join(',') : '';
-        let needsJson = false;
-        if (eventsString && binding.expression?.includes('::') || binding.expressionTwoWay?.includes('::'))
-            needsJson = true;
-        if (binding.signal.trim()[0] == '{')
-            needsJson = true;
-        if (!needsJson && binding.target == BindingTarget.property &&
-            !binding.expression && !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            if (targetName == 'textContent')
-                return [bindingPrefixContent + 'text', (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-            if (targetName == 'innerHTML')
-                return [bindingPrefixContent + 'html', (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-            return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-        }
-        //Multi Var Expressions
-        if (!needsJson && binding.target == BindingTarget.property &&
-            binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") &&
-            !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            if (targetName == 'textContent')
-                return [bindingPrefixContent + 'text', (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
-            if (targetName == 'innerHTML')
-                return [bindingPrefixContent + 'html', (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
-            return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
-        }
-        if (!needsJson && binding.target == BindingTarget.attribute &&
-            !binding.expression && !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-        }
-        //Multi Var Expressions
-        if (!needsJson && binding.target == BindingTarget.attribute &&
-            binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") &&
-            !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
-        }
-        if (!needsJson && binding.target == BindingTarget.class &&
-            !binding.expression && !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixClass + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-        }
-        //Multi Var Expressions
-        if (!needsJson && binding.target == BindingTarget.class &&
-            binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") &&
-            !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixClass + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
+        const needsJson = ((eventsString !== '') && !!binding.expression?.includes('::')) ||
+            !!binding.expressionTwoWay?.includes('::') || binding.signal.trim()[0] == '{';
+        const supportsShortForm = binding.target == BindingTarget.property ||
+            binding.target == BindingTarget.attribute || binding.target == BindingTarget.class ||
+            binding.target == BindingTarget.css || binding.target == BindingTarget.cssvar;
+        const hasOnlyShortFormOptions = !needsJson && supportsShortForm && !binding.expressionTwoWay &&
+            binding.converter == null && !binding.historic && !binding.writeBackSignal;
+        if (hasOnlyShortFormOptions && !binding.expression) {
+            const name = this.getShortBindingAttributeName(targetName, binding.target, false);
+            const supportsTwoWay = binding.target == BindingTarget.property || binding.target == BindingTarget.attribute;
+            const value = (supportsTwoWay && binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') +
+                binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString;
+            return [name, value];
         }
-        if (!needsJson && binding.target == BindingTarget.css &&
-            !binding.expression && !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-        }
-        //Multi Var Expressions
-        if (!needsJson && binding.target == BindingTarget.css &&
-            binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") &&
-            !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
-        }
-        if (!needsJson && binding.target == BindingTarget.cssvar &&
-            !binding.expression && !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2)), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString];
-        }
-        //Multi Var Expressions
-        if (!needsJson && binding.target == BindingTarget.cssvar &&
-            binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") &&
-            !binding.expressionTwoWay &&
-            binding.converter == null &&
-            //!binding.type &&
-            !binding.historic &&
-            !binding.writeBackSignal) {
-            return [bindingPrefixCssVar + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString];
+        if (hasOnlyShortFormOptions && binding.expression &&
+            !binding.expression.includes("\n") && !binding.expression.includes(";")) {
+            const name = this.getShortBindingAttributeName(targetName, binding.target, true);
+            const supportsTwoWay = binding.target == BindingTarget.attribute ||
+                (binding.target == BindingTarget.property && targetName != 'textContent' && targetName != 'innerHTML');
+            const value = (supportsTwoWay && binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') +
+                binding.signal + ';' + binding.expression + eventsString;
+            return [name, value];
         }
         if (binding.inverted === null || binding.inverted === false) {
             delete bindingCopy.inverted;
@@ -411,6 +351,9 @@ export class BindingsHelper {
         if (binding.expressionTwoWay === null || binding.expressionTwoWay === '') {
             delete bindingCopy.expressionTwoWay;
         }
+        if (!binding.writeBackSignal) {
+            delete bindingCopy.writeBackSignal;
+        }
         if (binding.twoWay === null || binding.twoWay === false) {
             delete bindingCopy.twoWay;
         }
@@ -421,21 +364,39 @@ export class BindingsHelper {
         if (!binding.historic) {
             delete bindingCopy.historic;
         }
-        if (binding.target == BindingTarget.content)
-            return [bindingPrefixContent + 'html', JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.attribute)
-            return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.class)
-            return [bindingPrefixClass + BindingsHelper.camelToDotCase(targetName), JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.css)
-            return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.cssvar)
-            return [bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2)), JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.property && targetName == 'innerHTML')
-            return [bindingPrefixContent + 'html', JSON.stringify(bindingCopy)];
-        if (binding.target == BindingTarget.property && targetName == 'textContent')
-            return [bindingPrefixContent + 'text', JSON.stringify(bindingCopy)];
-        return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)];
+        return [this.getJsonBindingAttributeName(targetName, binding.target), JSON.stringify(bindingCopy)];
+    }
+    getShortBindingAttributeName(targetName, target, hasExpression) {
+        if (target == BindingTarget.property && targetName == 'textContent')
+            return bindingPrefixContent + 'text';
+        if (target == BindingTarget.property && targetName == 'innerHTML')
+            return bindingPrefixContent + 'html';
+        if (target == BindingTarget.attribute)
+            return bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName);
+        if (target == BindingTarget.class)
+            return bindingPrefixClass + PropertiesHelper.camelToDashCase(targetName);
+        if (target == BindingTarget.css)
+            return bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName);
+        if (target == BindingTarget.cssvar)
+            return hasExpression
+                ? bindingPrefixCssVar + PropertiesHelper.camelToDashCase(targetName)
+                : bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2));
+        return bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName);
+    }
+    getJsonBindingAttributeName(targetName, target) {
+        if (target == BindingTarget.content || (target == BindingTarget.property && targetName == 'innerHTML'))
+            return bindingPrefixContent + 'html';
+        if (target == BindingTarget.property && targetName == 'textContent')
+            return bindingPrefixContent + 'text';
+        if (target == BindingTarget.attribute)
+            return bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName);
+        if (target == BindingTarget.class)
+            return bindingPrefixClass + BindingsHelper.camelToDotCase(targetName);
+        if (target == BindingTarget.css)
+            return bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName);
+        if (target == BindingTarget.cssvar)
+            return bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2));
+        return bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName);
     }
     getBindingAttributeName(element, propertyName, propertyTarget) {
         if (propertyTarget == BindingTarget.attribute) {
@@ -497,12 +458,20 @@ export class BindingsHelper {
             for (let b of bindings) {
                 try {
                     let applied = this.applyBinding(e, b, relativeSignalPath, root, specialValueHandler);
-                    retVal.push(applied);
+                    let bindingDisposed = false;
+                    const disposeBinding = () => {
+                        if (!bindingDisposed) {
+                            bindingDisposed = true;
+                            applied();
+                        }
+                    };
+                    retVal.push(disposeBinding);
                     if (b[1].maybeLitElement && e.localName.includes('-') && !customElements.get(e.localName)) {
                         const el = e;
                         const bnd = b;
                         customElements.whenDefined(e.localName).then(() => {
-                            if (isLit(el)) {
+                            if (!bindingDisposed && isLit(el)) {
+                                bindingDisposed = true;
                                 applied();
                                 bnd[1].events = bnd[1].litEventNames;
                                 retVal.push(this.applyBinding(el, bnd, relativeSignalPath, root, specialValueHandler));
@@ -534,9 +503,11 @@ export class BindingsHelper {
     }
     static #cssBindingsVarId = 0;
     async parseCssBindings(sheet, element, relativeSignalPath, root) {
+        if (!sheet.includes(bindingPrefixInsideCss))
+            return [cssFromString(sheet), []];
         const parser = (await import("@node-projects/css-parser"));
         const ast = parser.parse(sheet);
-        let unsub;
+        const unsub = [];
         for (let r of ast.stylesheet.rules) {
             if (r.type === parser.CssTypes.rule) {
                 for (const d of r.declarations) {
@@ -544,12 +515,7 @@ export class BindingsHelper {
                         if (d.value.includes(bindingPrefixInsideCss)) {
                             const newValue = this.parseCssBinding(d.value, element, relativeSignalPath, root);
                             d.value = newValue[0];
-                            if (unsub) {
-                                unsub.push(...newValue[1]);
-                            }
-                            else {
-                                unsub = newValue[1];
-                            }
+                            unsub.push(...newValue[1]);
                         }
                     }
                 }
@@ -570,8 +536,10 @@ export class BindingsHelper {
         for (let n = 0; n < value.length; n++) {
             const c = value[n];
             if (inBind) {
-                if (escape)
+                if (escape) {
                     binding += c;
+                    escape = false;
+                }
                 else if (quote && c === '\\')
                     escape = true;
                 else if (c === quote)
@@ -618,258 +586,327 @@ export class BindingsHelper {
         }
         return [res + tmp, unsub];
     }
+    /** @internal Shared fan-out avoids duplicate backend subscriptions and initial reads. */
+    subscribeToState(id, callback) {
+        let entry = this._stateSubscriptions.get(id);
+        if (entry) {
+            entry.callbacks.add(callback);
+            if (entry.hasValue) {
+                const value = entry.value;
+                queueMicrotask(() => entry.callbacks.has(callback) && callback(id, value));
+            }
+        }
+        else {
+            entry = {
+                callbacks: new Set([callback]),
+                callback: null,
+                subscriptionResult: null,
+                revision: 0,
+                hasValue: false
+            };
+            entry.callback = (changedId, value) => {
+                entry.revision++;
+                entry.hasValue = true;
+                entry.value = value;
+                for (const cb of entry.callbacks)
+                    cb(changedId, value);
+            };
+            this._stateSubscriptions.set(id, entry);
+            try {
+                entry.subscriptionResult = this._visualizationHandler.subscribeState(id, entry.callback);
+                const initialRevision = entry.revision;
+                this._visualizationHandler.getState(id).then(value => {
+                    if (this._stateSubscriptions.get(id) === entry && entry.revision === initialRevision)
+                        entry.callback(id, value);
+                });
+            }
+            catch (error) {
+                this._stateSubscriptions.delete(id);
+                if (entry.subscriptionResult != null)
+                    this._visualizationHandler.unsubscribeState(id, entry.callback, entry.subscriptionResult);
+                throw error;
+            }
+        }
+        let active = true;
+        return () => {
+            if (!active)
+                return;
+            active = false;
+            entry.callbacks.delete(callback);
+            if (entry.callbacks.size === 0 && this._stateSubscriptions.get(id) === entry) {
+                this._stateSubscriptions.delete(id);
+                this._visualizationHandler.unsubscribeState(id, entry.callback, entry.subscriptionResult);
+            }
+        };
+    }
     /**
-     * ? = bind to signals in properties
-     * ?? = binding to a property
-     * $ = bind to a signal configuration
-     * § = bind to a special value
-     * @param element
-     * @param binding
-     * @param relativeSignalPath
-     * @param root
-     * @returns
-     */
+     * ? = signal name from a root property; ?? = a root property value
+     * # = signal name from a target property; ## = a target property value
+     * ?$ = signal object from a root property; #$ = signal object from a target property
+     * ?@ = a root attribute value; #@ = a target attribute value
+     * $ = a signal configuration; § = a special value
+    */
     applyBinding(element, binding, relativeSignalPath, root, specialValueHandler) {
-        let unsubscribeList = [];
-        let cleanupCalls;
+        const cleanupCalls = [];
+        let active = true;
         const cleanUp = () => {
-            for (const u of unsubscribeList) {
-                this._visualizationHandler.unsubscribeState(u[0], u[1], u[2]);
-            }
-            if (cleanupCalls) {
-                for (let e of cleanupCalls) {
-                    e();
-                }
-            }
+            if (!active)
+                return;
+            active = false;
+            this._scheduledUpdates.delete(evaluateAndApply);
+            for (let i = cleanupCalls.length - 1; i >= 0; i--)
+                cleanupCalls[i]();
+            cleanupCalls.length = 0;
         };
+        const addCleanup = (cleanup) => cleanupCalls.push(cleanup);
         const signals = binding[1].signal.split(';');
         const signalVars = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
-            let sng = signals[i];
+            let signal = signals[i];
             signalVars[i] = '__' + i;
-            if (sng.includes(':')) {
-                const spl = sng.split(':');
-                signalVars[i] = spl[0];
-                sng = spl[1];
-                signals[i] = sng;
+            const aliasSeparator = signal.indexOf(':');
+            if (aliasSeparator >= 0) {
+                signalVars[i] = signal.substring(0, aliasSeparator);
+                signal = signal.substring(aliasSeparator + 1);
+                signals[i] = signal;
             }
-            if (sng[0] === '?') { //access object path in property in custom control, todo: bind direct to property value in local property
-                if (root) { //root is null when opened in designer, then do not apply property bindings
-                    let s = sng.substring(1);
-                    if (s[0] == '?') {
-                        signals[i] = s;
-                    }
-                    else {
-                        signals[i] = root[s];
-                        if (s[0] === '$') {
-                            s = s.substring(1);
-                            signals[i] = '$' + root[s];
-                        }
-                        let evtCallback = () => {
-                            cleanUp();
-                            this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
-                        };
-                        const evtNm = this.getChangedEventName(root, s);
-                        root.addEventListener(evtNm, evtCallback);
-                        if (!cleanupCalls)
-                            cleanupCalls = [];
-                        cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback));
-                    }
-                }
+        }
+        const values = new Array(signals.length);
+        const expressionArguments = [...signalVars, '__res', '__ctx'];
+        if (binding[1].expression && !binding[1].compiledExpression) {
+            binding[1].compiledExpression = binding[1].expression.includes('return ')
+                ? new Function(expressionArguments, binding[1].expression)
+                : new Function(expressionArguments, 'return ' + binding[1].expression);
+        }
+        const compiledConverter = this.getCompiledConverter(binding[1], expressionArguments);
+        const context = { element, root, boundNames: binding[1].signal, boundTargetName: binding[0], boundTargetType: binding[1].target };
+        const writeTarget = this.createTargetWriter(element, binding);
+        let writeBackSignal = binding[1].writeBackSignal;
+        if (writeBackSignal?.[0] === '.')
+            writeBackSignal = relativeSignalPath + writeBackSignal;
+        let currentValue;
+        let previousResult;
+        let lastOutput;
+        let hasOutput = false;
+        let hasApplied = false;
+        let scheduled = false;
+        const evaluateAndApply = () => {
+            scheduled = false;
+            if (!active)
+                return;
+            let value = currentValue;
+            if (binding[1].compiledExpression) {
+                value = binding[1].compiledExpression(...values, previousResult, context);
+                previousResult = value;
             }
-            else if (sng[0] === '#') { //access object path in target element        
-                let s = sng.substring(1);
-                if (s[0] == '#') {
-                    signals[i] = s;
-                }
-                else {
-                    signals[i] = root[s];
-                    if (s[0] === '$') {
-                        s = s.substring(1);
-                        signals[i] = '$' + root[s];
-                    }
-                    let evtCallback = () => {
-                        cleanUp();
-                        this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
-                    };
-                    const evtNm = this.getChangedEventName(element, s);
-                    root.addEventListener(evtNm, evtCallback);
-                    if (!cleanupCalls)
-                        cleanupCalls = [];
-                    cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback));
-                }
+            if (binding[1].converter) {
+                if (typeof binding[1].converter === 'string')
+                    value = this.namedConverterCallback(binding[1].converter, value, element, binding);
+                else
+                    value = this.applyCompiledConverter(value, compiledConverter, values, previousResult, context, binding[1].converterDefault);
             }
-            if (sng[0] === '.') {
-                signals[i] = this._visualizationHandler.getNormalizedSignalName(sng, relativeSignalPath, element);
+            if (binding[1].inverted)
+                value = !value;
+            hasApplied = true;
+            const canCompareByValue = value === null || typeof value !== 'object';
+            if (hasOutput && canCompareByValue && Object.is(lastOutput, value))
+                return;
+            hasOutput = true;
+            lastOutput = value;
+            if (writeBackSignal)
+                this._visualizationHandler.setState(writeBackSignal, value, true);
+            writeTarget(value);
+        };
+        const updateValue = (value, index, noParse) => {
+            if (!active)
+                return;
+            if (!noParse && index === 0)
+                value = BindingsHelper.parseValueWithType(value, binding);
+            values[index] = value;
+            currentValue = value;
+            // Preserve immediate initialization for the common one-signal case, then
+            // collapse bursts and multi-signal initialization into one microtask.
+            if (!hasApplied && signals.length === 1) {
+                evaluateAndApply();
             }
-        }
-        let valuesObject = new Array(signals.length);
-        for (let i = 0; i < signals.length; i++) {
-            const s = signals[i];
-            if (s[0] === '?') {
-                if (root) {
-                    const nm = s.substring(1);
-                    let evtCallback = () => {
-                        let disableValueChanged = false;
-                        if (!disableValueChanged) {
-                            disableValueChanged = true;
-                            this.handleValueChanged(element, root, binding, root[nm], valuesObject, i, signalVars, false, relativeSignalPath);
-                            disableValueChanged = false;
-                        }
-                    };
-                    root.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback);
-                    if (!cleanupCalls)
-                        cleanupCalls = [];
-                    cleanupCalls.push(() => root.removeEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback));
-                    try {
-                        this.handleValueChanged(element, root, binding, root[nm], valuesObject, i, signalVars, false, relativeSignalPath);
-                    }
-                    catch (err) {
-                        console.error(err);
-                    }
-                    if (binding[1].twoWay && i == 0) {
-                        this.addTwoWayBinding(binding, element, v => root[nm] = v);
-                    }
-                }
+            else if (!scheduled) {
+                scheduled = true;
+                this.scheduleUpdate(evaluateAndApply);
             }
-            else if (s[0] === '#') { //Binding to element properties
-                const nm = s.substring(1);
-                let evtCallback = () => {
-                    let disableValueChanged = false;
-                    if (!disableValueChanged) {
-                        disableValueChanged = true;
-                        this.handleValueChanged(element, root, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath);
-                        disableValueChanged = false;
-                    }
-                };
-                element.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback);
-                if (!cleanupCalls)
-                    cleanupCalls = [];
-                cleanupCalls.push(() => element.removeEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback));
-                try {
-                    this.handleValueChanged(element, root, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath);
-                }
-                catch (err) {
-                    console.error(err);
-                }
-                if (binding[1].twoWay && i == 0) {
-                    this.addTwoWayBinding(binding, element, v => element[nm] = v);
-                }
+        };
+        const setters = new Array(signals.length);
+        const setSetter = (index, setter) => {
+            setters[index] = setter;
+            return () => {
+                if (setters[index] === setter)
+                    setters[index] = null;
+            };
+        };
+        const bindPropertyValue = (owner, propertyName, index) => {
+            const setterCleanup = setSetter(index, value => owner[propertyName] = value);
+            const propertyCleanup = observeProperty(this, owner, propertyName, value => updateValue(value, index, false));
+            return () => {
+                propertyCleanup();
+                setterCleanup();
+            };
+        };
+        const bindAttributeValue = (owner, attributeName, index) => {
+            const setterCleanup = setSetter(index, value => value == null
+                ? owner.removeAttribute(attributeName)
+                : owner.setAttribute(attributeName, value));
+            const attributeCleanup = observeAttribute(owner, attributeName, value => updateValue(value, index, false));
+            return () => {
+                attributeCleanup();
+                setterCleanup();
+            };
+        };
+        const bindResolvedSource = (source, index) => {
+            if (source.startsWith('?@') || source.startsWith('#@')) {
+                const owner = source[0] === '?' ? root : element;
+                return owner ? bindAttributeValue(owner, source.substring(2), index) : () => { };
             }
-            else if (s[0] === '$') {
-                let mS = s.substring(1);
-                if (mS[0] === '.') {
-                    mS = this._visualizationHandler.getNormalizedSignalName(mS, relativeSignalPath, element);
-                }
-                this._visualizationHandler.getObject(mS).then(x => {
-                    this.handleValueChanged(element, root, binding, x, valuesObject, i, signalVars, true, relativeSignalPath);
+            if (source.startsWith('?$') || source.startsWith('#$')) {
+                const owner = source[0] === '?' ? root : element;
+                return owner ? bindPropertyValue(owner, source.substring(2), index) : () => { };
+            }
+            if (source[0] === '?' || source[0] === '#') {
+                const owner = source[0] === '?' ? root : element;
+                return owner ? bindPropertyValue(owner, source.substring(1), index) : () => { };
+            }
+            if (source[0] === '$') {
+                let objectName = source.substring(1);
+                if (objectName[0] === '.')
+                    objectName = this._visualizationHandler.getNormalizedSignalName(objectName, relativeSignalPath, element);
+                let running = true;
+                this._visualizationHandler.getObject(objectName).then(value => {
+                    if (running)
+                        updateValue(value, index, true);
                 });
+                return () => running = false;
             }
-            else if (s[0] === '§') {
-                const mS = s.substring(1);
-                const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
-                if (value instanceof Promise)
-                    value.then(v => this.handleValueChanged(element, root, binding, v, valuesObject, i, signalVars, true, relativeSignalPath));
-                else
-                    this.handleValueChanged(element, root, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
-                if (!specialValueHandler.valueChangedCallbacks)
-                    specialValueHandler.valueChangedCallbacks = new Map();
-                let changeList = specialValueHandler.valueChangedCallbacks.get(mS);
-                if (changeList == null) {
-                    changeList = [];
-                    specialValueHandler.valueChangedCallbacks.set(mS, changeList);
+            if (source[0] === '§') {
+                if (!specialValueHandler)
+                    throw new Error(`No special value handler registered for "${source}"`);
+                return bindSpecialValue(specialValueHandler, source.substring(1), { element, binding, relativeSignalPath, root }, value => updateValue(value, index, true));
+            }
+            if (source.includes('{')) {
+                const indirectSignal = new IndirectSignal(this, this._visualizationHandler, source, value => updateValue(value.val, index, false), element, relativeSignalPath, root, specialValueHandler);
+                const setterCleanup = setSetter(index, value => indirectSignal.setState(value));
+                return () => {
+                    indirectSignal.dispose();
+                    setterCleanup();
+                };
+            }
+            let signalName = source;
+            if (signalName[0] === '.')
+                signalName = this._visualizationHandler.getNormalizedSignalName(signalName, relativeSignalPath, element);
+            if (binding[1].historic) {
+                const historic = binding[1].historic;
+                if (historic.reloadInterval) {
+                    let running = true;
+                    let timerId = null;
+                    const loadHistoric = async () => {
+                        const result = await this._visualizationHandler.getHistoricData(signalName, historic);
+                        if (!active || !running)
+                            return;
+                        updateValue(result?.values, index, true);
+                        timerId = setTimeout(loadHistoric, historic.reloadInterval);
+                    };
+                    loadHistoric();
+                    return () => {
+                        running = false;
+                        if (timerId !== null)
+                            clearTimeout(timerId);
+                        timerId = null;
+                    };
                 }
-                changeList.push(() => {
-                    const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
-                    if (value instanceof Promise)
-                        value.then(v => this.handleValueChanged(element, root, binding, v, valuesObject, i, signalVars, true, relativeSignalPath));
-                    else
-                        this.handleValueChanged(element, root, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
+                let running = true;
+                this._visualizationHandler.getHistoricData(signalName, historic).then(result => {
+                    if (running)
+                        updateValue(result?.values, index, true);
                 });
+                return () => running = false;
             }
-            else {
-                if (s.includes('{')) {
-                    let indirectSignal = new IndirectSignal(this, this._visualizationHandler, s, (value) => this.handleValueChanged(element, root, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root, specialValueHandler);
-                    if (!cleanupCalls)
-                        cleanupCalls = [];
-                    cleanupCalls.push(() => indirectSignal.dispose());
-                    if (binding[1].twoWay && i == 0) {
-                        this.addTwoWayBinding(binding, element, v => indirectSignal.setState(v));
-                    }
-                }
-                else {
-                    if (binding[1].historic) {
-                        if (binding[1].historic.reloadInterval) {
-                            let myTimer = { timerId: -1 };
-                            const loadHistoric = async () => {
-                                const res = await this._visualizationHandler.getHistoricData(s, binding[1].historic);
-                                this.handleValueChanged(element, root, binding, res?.values, valuesObject, i, signalVars, true, relativeSignalPath);
-                                if (myTimer.timerId !== null)
-                                    myTimer.timerId = setTimeout(loadHistoric, binding[1].historic.reloadInterval);
-                            };
-                            loadHistoric();
-                            if (!cleanupCalls)
-                                cleanupCalls = [];
-                            cleanupCalls.push(() => {
-                                if (myTimer.timerId > 0)
-                                    clearTimeout(myTimer.timerId);
-                                myTimer.timerId = null;
-                            });
-                        }
-                        else
-                            this._visualizationHandler.getHistoricData(s, binding[1].historic).then(x => this.handleValueChanged(element, root, binding, x?.values, valuesObject, i, signalVars, true, relativeSignalPath));
-                    }
-                    else {
-                        const cb = (id, value) => this.handleValueChanged(element, root, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath);
-                        unsubscribeList.push([s, cb, this._visualizationHandler.subscribeState(s, cb)]);
-                        this._visualizationHandler.getState(s).then(x => this.handleValueChanged(element, root, binding, x?.val, valuesObject, i, signalVars, false, relativeSignalPath));
-                        if (binding[1].twoWay && i == 0) {
-                            this.addTwoWayBinding(binding, element, v => this._visualizationHandler.setState(s, v));
-                        }
-                    }
-                }
+            const callback = (id, value) => updateValue(value?.val, index, false);
+            const subscriptionCleanup = this.subscribeToState(signalName, callback);
+            const setterCleanup = setSetter(index, value => this._visualizationHandler.setState(signalName, value));
+            return () => {
+                subscriptionCleanup();
+                setterCleanup();
+            };
+        };
+        const bindSource = (source, index) => {
+            if (source.startsWith('?@') || source.startsWith('#@') || source.startsWith('?$') || source.startsWith('#$'))
+                return bindResolvedSource(source, index);
+            const prefix = source[0];
+            if ((prefix !== '?' && prefix !== '#') || source[1] === prefix)
+                return bindResolvedSource(source[1] === prefix ? source.substring(1) : source, index);
+            const owner = prefix === '?' ? root : element;
+            if (!owner)
+                return () => { };
+            const propertyName = source.substring(1);
+            let sourceCleanup = () => { };
+            let currentSource;
+            const switchSource = (resolvedSource) => {
+                const nextSource = typeof resolvedSource === 'string' ? resolvedSource : null;
+                if (nextSource === currentSource)
+                    return;
+                sourceCleanup();
+                currentSource = nextSource;
+                sourceCleanup = nextSource ? bindResolvedSource(nextSource, index) : () => { };
+            };
+            const propertyCleanup = observeProperty(this, owner, propertyName, switchSource);
+            return () => {
+                propertyCleanup();
+                sourceCleanup();
+            };
+        };
+        try {
+            if (binding[1].twoWay)
+                addCleanup(this.addTwoWayBinding(binding, element, value => setters[0]?.(value)));
+            for (let i = 0; i < signals.length; i++) {
+                if (typeof signals[i] === 'string')
+                    addCleanup(bindSource(signals[i], i));
             }
         }
+        catch (error) {
+            cleanUp();
+            throw error;
+        }
         return cleanUp;
     }
     addTwoWayBinding(binding, element, setter) {
-        if (binding[1].expressionTwoWay) {
-            if (!binding[1].compiledExpressionTwoWay) {
-                if (binding[1].expressionTwoWay.includes('return '))
-                    binding[1].compiledExpressionTwoWay = new Function(['value'], binding[1].expressionTwoWay);
-                else
-                    binding[1].compiledExpressionTwoWay = new Function(['value'], 'return ' + binding[1].expressionTwoWay);
-            }
+        if (binding[1].expressionTwoWay && !binding[1].compiledExpressionTwoWay) {
+            binding[1].compiledExpressionTwoWay = binding[1].expressionTwoWay.includes('return ')
+                ? new Function(['value'], binding[1].expressionTwoWay)
+                : new Function(['value'], 'return ' + binding[1].expressionTwoWay);
         }
-        for (let e of binding[1].events) {
-            const evt = element[e];
-            if (evt instanceof TypedEvent) {
-                evt.on(() => {
-                    let v;
-                    if (binding[1].target == BindingTarget.attribute)
-                        v = element.getAttribute(binding[0]);
-                    else
-                        v = element[binding[0]];
-                    v = BindingsHelper.parseValueWithType(v, binding);
-                    if (binding[1].compiledExpressionTwoWay)
-                        v = binding[1].compiledExpressionTwoWay(v);
-                    setter(v);
-                });
+        const cleanupCalls = [];
+        const callback = () => {
+            let value = binding[1].target == BindingTarget.attribute
+                ? element.getAttribute(binding[0])
+                : element[binding[0]];
+            value = BindingsHelper.parseValueWithType(value, binding);
+            if (binding[1].compiledExpressionTwoWay)
+                value = binding[1].compiledExpressionTwoWay(value);
+            setter(value);
+        };
+        for (const eventName of binding[1].events ?? []) {
+            const event = element[eventName];
+            if (event instanceof TypedEvent) {
+                const disposable = event.on(callback);
+                cleanupCalls.push(() => disposable.dispose());
             }
             else {
-                element.addEventListener(e, (evt) => {
-                    let v;
-                    if (binding[1].target == BindingTarget.attribute)
-                        v = element.getAttribute(binding[0]);
-                    else
-                        v = element[binding[0]];
-                    v = BindingsHelper.parseValueWithType(v, binding);
-                    if (binding[1].compiledExpressionTwoWay)
-                        v = binding[1].compiledExpressionTwoWay(v);
-                    setter(v);
-                });
+                element.addEventListener(eventName, callback);
+                cleanupCalls.push(() => element.removeEventListener(eventName, callback));
             }
         }
+        return () => {
+            for (const cleanup of cleanupCalls)
+                cleanup();
+            cleanupCalls.length = 0;
+        };
     }
     static parseValueWithType(value, binding) {
         if (binding[1].type) {
@@ -888,144 +925,107 @@ export class BindingsHelper {
         }
         return value;
     }
-    handleValueChanged(element, root, binding, value, valuesObject, index, signalVarNames, noParse, relativeSignalPath) {
-        let v = value;
-        //should this be done??
-        if (!noParse && index == 0)
-            v = BindingsHelper.parseValueWithType(v, binding);
-        valuesObject[index] = v;
-        if (binding[1].expression) {
-            if (!binding[1].compiledExpression) {
-                signalVarNames.push('__res');
-                signalVarNames.push('__ctx');
-                if (binding[1].expression.includes('return '))
-                    binding[1].compiledExpression = new Function(signalVarNames, binding[1].expression);
-                else
-                    binding[1].compiledExpression = new Function(signalVarNames, 'return ' + binding[1].expression);
+    compileConverter(converter, expressionArguments) {
+        const exactValues = new Map();
+        const conditions = [];
+        const compileValue = (value) => {
+            if (typeof value !== 'string')
+                return { value };
+            const fn = new Function(expressionArguments, 'return `' + value + '`');
+            return { value, evaluate: (values, previousResult, context) => fn(...values, previousResult, context) };
+        };
+        for (const key in converter) {
+            const value = compileValue(converter[key]);
+            exactValues.set(key, value);
+            if (key.startsWith('>=')) {
+                const threshold = parseFloat(key.substring(2));
+                conditions.push({ matches: input => input >= threshold, value });
             }
-            valuesObject[signalVarNames.length - 1] = { element, root, boundNames: binding[1].signal, boundTargetName: binding[0], boundTargetType: binding[1].target };
-            v = binding[1].compiledExpression(...valuesObject);
-            valuesObject[signalVarNames.length - 1] = v;
-        }
-        if (binding[1].converter) {
-            if (typeof binding[1].converter === 'string') {
-                v = this.namedConverterCallback(binding[1].converter, v, element, binding);
+            else if (key.startsWith('<=')) {
+                const threshold = parseFloat(key.substring(2));
+                conditions.push({ matches: input => input <= threshold, value });
+            }
+            else if (key[0] === '>') {
+                const threshold = parseFloat(key.substring(1));
+                conditions.push({ matches: input => input > threshold, value });
+            }
+            else if (key[0] === '<') {
+                const threshold = parseFloat(key.substring(1));
+                conditions.push({ matches: input => input < threshold, value });
             }
             else {
-                const stringValue = (v != null ? v.toString() : v);
-                if (stringValue in binding[1].converter) {
-                    const cvVal = binding[1].converter[stringValue];
-                    if (typeof cvVal === 'string')
-                        v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
-                    else
-                        v = cvVal;
-                }
-                else {
-                    let endedWithBreak = false;
-                    //@ts-ignore
-                    const nr = parseFloat(v);
-                    for (let c in binding[1].converter) {
-                        if (c.length > 2 && c[0] === '>' && c[1] === '=') {
-                            const wr = parseFloat(c.substring(2));
-                            if (nr >= wr) {
-                                const cvVal = binding[1].converter[c];
-                                if (typeof cvVal === 'string')
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                                else
-                                    v = cvVal;
-                                endedWithBreak = true;
-                                break;
-                            }
-                        }
-                        else if (c.length > 2 && c[0] === '<' && c[1] === '=') {
-                            const wr = parseFloat(c.substring(2));
-                            if (nr <= wr) {
-                                const cvVal = binding[1].converter[c];
-                                if (typeof cvVal === 'string')
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                                else
-                                    v = cvVal;
-                                endedWithBreak = true;
-                                break;
-                            }
-                        }
-                        else if (c.length > 1 && c[0] === '>') {
-                            const wr = parseFloat(c.substring(1));
-                            if (nr > wr) {
-                                const cvVal = binding[1].converter[c];
-                                if (typeof cvVal === 'string')
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                                else
-                                    v = cvVal;
-                                endedWithBreak = true;
-                                break;
-                            }
-                        }
-                        else if (c.length > 1 && c[0] === '<') {
-                            const wr = parseFloat(c.substring(1));
-                            if (nr < wr) {
-                                const cvVal = binding[1].converter[c];
-                                if (typeof cvVal === 'string')
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                                else
-                                    v = cvVal;
-                                endedWithBreak = true;
-                                break;
-                            }
-                        }
-                        else {
-                            const sp = c.split('-');
-                            if (sp.length > 1) {
-                                if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) {
-                                    const cvVal = binding[1].converter[c];
-                                    if (typeof cvVal === 'string')
-                                        v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                                    else
-                                        v = cvVal;
-                                    endedWithBreak = true;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    if (!endedWithBreak && binding[1].converterDefault !== undefined)
-                        v = binding[1].converterDefault;
+                const range = key.split('-');
+                if (range.length > 1) {
+                    const minimum = range[0] === '' ? null : parseFloat(range[0]);
+                    const maximum = range[1] === '' ? null : parseFloat(range[1]);
+                    conditions.push({
+                        matches: input => (minimum === null || input >= minimum) && (maximum === null || maximum >= input),
+                        value
+                    });
                 }
             }
         }
-        if (binding[1].inverted)
-            v = !v;
-        if (binding[1].writeBackSignal) {
-            let wb = binding[1].writeBackSignal;
-            if (wb[0] === '.') {
-                wb = relativeSignalPath + wb;
+        return { exactValues, conditions };
+    }
+    getCompiledConverter(binding, expressionArguments) {
+        if (!binding.converter || typeof binding.converter !== 'object')
+            return null;
+        const argumentsKey = expressionArguments.join('\0');
+        const cached = this._compiledConverters.get(binding);
+        if (cached?.converter === binding.converter && cached.argumentsKey === argumentsKey)
+            return cached.compiled;
+        const compiled = this.compileConverter(binding.converter, expressionArguments);
+        this._compiledConverters.set(binding, { converter: binding.converter, argumentsKey, compiled });
+        return compiled;
+    }
+    applyCompiledConverter(value, converter, values, previousResult, context, defaultValue) {
+        const key = String(value);
+        let convertedValue = converter.exactValues.get(key);
+        let matched = converter.exactValues.has(key);
+        if (!matched) {
+            const numberValue = parseFloat(value);
+            for (const condition of converter.conditions) {
+                if (condition.matches(numberValue)) {
+                    convertedValue = condition.value;
+                    matched = true;
+                    break;
+                }
             }
-            this._visualizationHandler.setState(wb, v, true);
         }
-        if (binding[1].target == BindingTarget.property)
-            element[binding[0]] = v;
-        else if (binding[1].target == BindingTarget.attribute)
-            if (typeof v === 'boolean') {
-                if (v)
-                    element.setAttribute(binding[0], '');
-                else
-                    element.removeAttribute(binding[0]);
-            }
-            else {
-                element.setAttribute(binding[0], v);
-            }
-        else if (binding[1].target == BindingTarget.css)
-            element.style[binding[0]] = v;
-        else if (binding[1].target == BindingTarget.cssvar)
-            element.style.setProperty(binding[0], v);
-        else if (binding[1].target == BindingTarget.class) {
-            if (v)
-                element.classList.add(binding[0]);
-            else
-                element.classList.remove(binding[0]);
+        if (!matched)
+            return defaultValue !== undefined ? defaultValue : value;
+        return convertedValue.evaluate
+            ? convertedValue.evaluate(values, previousResult, context)
+            : convertedValue.value;
+    }
+    createTargetWriter(element, binding) {
+        const name = binding[0];
+        switch (binding[1].target) {
+            case BindingTarget.property:
+                return value => element[name] = value;
+            case BindingTarget.attribute:
+                return value => {
+                    if (typeof value === 'boolean') {
+                        if (value)
+                            element.setAttribute(name, '');
+                        else
+                            element.removeAttribute(name);
+                    }
+                    else {
+                        element.setAttribute(name, value);
+                    }
+                };
+            case BindingTarget.css:
+                return value => element.style[name] = value;
+            case BindingTarget.cssvar:
+                return value => element.style.setProperty(name, value);
+            case BindingTarget.class:
+                return value => element.classList.toggle(name, !!value);
+            case BindingTarget.visible:
+                return value => element.style.visibility = value ? '' : 'collapse';
+            default:
+                return () => { };
         }
-        else if (binding[1].target == BindingTarget.visible)
-            element.style.visibility = v ? '' : 'collapse';
     }
     static camelToDotCase(text) {
         return text.replace(/([A-Z])/g, (g) => `.${g[0].toLowerCase()}`);