@web-atoms/core 2.6.24 → 2.6.25

package/dist-esm/core/AtomComponent.js

@@ -13,543 +13,520 @@ import { isControl, isFactorySymbol, xnodeSymbol } from "./XNode.js";
 const localBindSymbol = bindSymbol;
 const localXNodeSymbol = xnodeSymbol;
 let AtomComponent = class AtomComponent {
-    static { _a = isControl, _b = isFactorySymbol; }
-    static { this[_a] = true; }
-    static { this[_b] = true; }
-    get vsProps() {
-        return undefined;
+  static {
+    _a = isControl, _b = isFactorySymbol;
+  }
+  static {
+    this[_a] = true;
+  }
+  static {
+    this[_b] = true;
+  }
+  get vsProps() {
+    return undefined;
+  }
+  constructor(app, element = null) {
+    this.app = app;
+    this.mInvalidated = 0;
+    this.mPendingPromises = {};
+    this.disposables = new AtomDisposableList();
+    this.bindings = [];
+    this.eventHandlers = [];
+    this.element = element;
+    this.element.atomControl = this;
+    const a = this.beginEdit();
+    this.preCreate();
+    this.create();
+    app.callLater(() => a.dispose());
+  }
+  bind(element, name, path, twoWays, valueFunc, source) {
+    const binding = new PropertyBinding(this, element, name, path, twoWays, valueFunc, source);
+    this.bindings.push(binding);
+    return {
+      dispose: () => {
+        binding.dispose();
+        ArrayHelper.remove(this.bindings, x => x === binding);
+      }
+    };
+  }
+  unbind(element, name) {
+    const toDelete = this.bindings.filter(x => x.element === element && (!name || x.name === name));
+    for (const iterator of toDelete) {
+      iterator.dispose();
+      ArrayHelper.remove(this.bindings, x => x === iterator);
     }
-    constructor(app, element = null) {
-        this.app = app;
-        this.mInvalidated = 0;
-        this.mPendingPromises = {};
-        this.disposables = new AtomDisposableList();
-        this.bindings = [];
-        this.eventHandlers = [];
-        this.element = element;
-        this.element.atomControl = this;
-        const a = this.beginEdit();
-        this.preCreate();
-        this.create();
-        app.callLater(() => a.dispose());
+  }
+  bindEvent(element, name, method, key, capture) {
+    if (!element) {
+      return;
     }
-    bind(element, name, path, twoWays, valueFunc, source) {
-        const binding = new PropertyBinding(this, element, name, path, twoWays, valueFunc, source);
-        this.bindings.push(binding);
-        return {
-            dispose: () => {
-                binding.dispose();
-                ArrayHelper.remove(this.bindings, (x) => x === binding);
-            }
-        };
+    if (!method) {
+      return;
     }
-    unbind(element, name) {
-        const toDelete = this.bindings.filter((x) => x.element === element && (!name || (x.name === name)));
-        for (const iterator of toDelete) {
-            iterator.dispose();
-            ArrayHelper.remove(this.bindings, (x) => x === iterator);
-        }
+    const be = {
+      element,
+      name,
+      handler: method
+    };
+    if (key) {
+      be.key = key;
     }
-    bindEvent(element, name, method, key, capture) {
-        if (!element) {
-            return;
-        }
-        if (!method) {
-            return;
-        }
-        const be = {
-            element,
-            name,
-            handler: method
-        };
-        if (key) {
-            be.key = key;
-        }
-        const handler = (e) => {
-            try {
-                let r = method(e);
-                e.executed = true;
-                if (r) {
-                    const originalReturn = r;
-                    r = r.then ? r : Promise.resolve(r);
-                    e.promise = e.promise ? e.promise.then(() => r) : r;
-                    if (originalReturn.catch) {
-                        return originalReturn.catch((c) => {
-                            if (CancelToken.isCancelled(c ?? "Unknown error")) {
-                                return;
-                            }
-                            alert(c.stack ?? c);
-                        });
-                    }
-                    return r;
-                }
-            }
-            catch (error) {
-                if (CancelToken.isCancelled(error)) {
-                    return;
-                }
-                alert(error.stack ?? error);
-            }
-        };
-        element.addEventListener(name, handler, capture);
-        be.disposable = {
-            dispose: () => {
-                element.removeEventListener(name, handler, capture);
-                be.disposable.dispose = () => undefined;
-            }
-        };
-        this.eventHandlers.push(be);
-        return {
-            dispose: () => {
-                be.disposable.dispose();
-                ArrayHelper.remove(this.eventHandlers, (e) => e.disposable === be.disposable);
-            }
-        };
-    }
-    unbindEvent(element, name, method, key) {
-        const deleted = [];
-        for (const be of this.eventHandlers) {
-            if (element && be.element !== element) {
+    const handler = e => {
+      try {
+        let r = method(e);
+        e.executed = true;
+        if (r) {
+          const originalReturn = r;
+          r = r.then ? r : Promise.resolve(r);
+          e.promise = e.promise ? e.promise.then(() => r) : r;
+          if (originalReturn.catch) {
+            return originalReturn.catch(c => {
+              if (CancelToken.isCancelled(c ?? "Unknown error")) {
                 return;
-            }
-            if (key && be.key !== key) {
-                return;
-            }
-            if (name && be.name !== name) {
-                return;
-            }
-            if (method && be.handler !== method) {
-                return;
-            }
-            be.disposable.dispose();
-            be.handler = null;
-            be.element = null;
-            be.name = null;
-            be.key = null;
-            deleted.push(() => this.eventHandlers.remove(be));
-        }
-        for (const iterator of deleted) {
-            iterator();
-        }
+              }
+              alert(c.stack ?? c);
+            });
+          }
+          return r;
+        }
+      } catch (error) {
+        if (CancelToken.isCancelled(error)) {
+          return;
+        }
+        alert(error.stack ?? error);
+      }
+    };
+    element.addEventListener(name, handler, capture);
+    be.disposable = {
+      dispose: () => {
+        element.removeEventListener(name, handler, capture);
+        be.disposable.dispose = () => undefined;
+      }
+    };
+    this.eventHandlers.push(be);
+    return {
+      dispose: () => {
+        be.disposable.dispose();
+        ArrayHelper.remove(this.eventHandlers, e => e.disposable === be.disposable);
+      }
+    };
+  }
+  unbindEvent(element, name, method, key) {
+    const deleted = [];
+    for (const be of this.eventHandlers) {
+      if (element && be.element !== element) {
+        return;
+      }
+      if (key && be.key !== key) {
+        return;
+      }
+      if (name && be.name !== name) {
+        return;
+      }
+      if (method && be.handler !== method) {
+        return;
+      }
+      be.disposable.dispose();
+      be.handler = null;
+      be.element = null;
+      be.name = null;
+      be.key = null;
+      deleted.push(() => this.eventHandlers.remove(be));
     }
-    hasProperty(name) {
-        if (/^(data|viewModel|localViewModel|element)$/.test(name)) {
-            return true;
-        }
-        const map = PropertyMap.from(this);
-        if (map.map[name]) {
-            return true;
-        }
-        if (this[name] !== undefined) {
-            return true;
-        }
-        return false;
+    for (const iterator of deleted) {
+      iterator();
     }
-    setPrimitiveValue(element, name, value) {
-        const p = value;
-        if (p && p.then && p.catch) {
-            console.warn(`Do not bind promises, instead use Bind.oneWayAsync`);
-            this.mPendingPromises[name] = p;
-            p.then((r) => {
-                if (this.mPendingPromises[name] !== p) {
-                    return;
-                }
-                this.mPendingPromises[name] = null;
-                this.setPrimitiveValue(element, name, r);
-            }).catch((e) => {
-                if (this.mPendingPromises[name] !== p) {
-                    return;
-                }
-                this.mPendingPromises[name] = null;
-                console.error(e);
-            });
-            return;
-        }
-        if (/^(viewModel|localViewModel)$/.test(name)) {
-            this[name] = value;
-            return;
-        }
-        if ((!element || element === this.element) && this.hasProperty(name)) {
-            this.runAfterInit(() => {
-                this[name] = value;
-            });
-        }
-        else {
-            this.setElementValue(element, name, value);
-        }
+  }
+  hasProperty(name) {
+    if (/^(data|viewModel|localViewModel|element)$/.test(name)) {
+      return true;
     }
-    setLocalValue(element, name, value) {
-        const p = value;
-        if (p && p.then && p.catch) {
-            console.warn(`Do not bind promises, instead use Bind.oneWayAsync`);
-            this.mPendingPromises[name] = p;
-            p.then((r) => {
-                if (this.mPendingPromises[name] !== p) {
-                    return;
-                }
-                this.mPendingPromises[name] = null;
-                this.setLocalValue(element, name, r);
-            }).catch((e) => {
-                if (this.mPendingPromises[name] !== p) {
-                    return;
-                }
-                this.mPendingPromises[name] = null;
-                console.error(e);
-            });
-            return;
-        }
-        if ((!element || element === this.element) && Reflect.has(this, name)) {
-            this[name] = value;
-        }
-        else {
-            this.setElementValue(element, name, value);
-        }
+    const map = PropertyMap.from(this);
+    if (map.map[name]) {
+      return true;
     }
-    dispose(e) {
-        if (this.mInvalidated) {
-            clearTimeout(this.mInvalidated);
-            this.mInvalidated = 0;
-        }
-        visitDescendents(e || this.element, (ex, ac) => {
-            if (ac) {
-                ac.dispose();
-                return false;
-            }
-            return true;
-        });
-        if (!e) {
-            this.unbindEvent(null, null, null);
-            for (const binding of this.bindings) {
-                binding.dispose();
-            }
-            this.bindings.length = 0;
-            this.bindings = null;
-            const e1 = this.element;
-            if (typeof e1.dispose === "function") {
-                e1.dispose();
-            }
-            this.element = null;
-            const lvm = this.localViewModel;
-            if (lvm && lvm.dispose) {
-                lvm.dispose();
-                this.localViewModel = null;
-            }
-            const vm = this.viewModel;
-            if (vm && vm.dispose) {
-                vm.dispose();
-                this.viewModel = null;
-            }
-            this.disposables.dispose();
-            this.pendingInits = null;
-        }
+    if (this[name] !== undefined) {
+      return true;
     }
-    onPropertyChanged(name) {
+    return false;
+  }
+  setPrimitiveValue(element, name, value) {
+    const p = value;
+    if (p && p.then && p.catch) {
+      console.warn(`Do not bind promises, instead use Bind.oneWayAsync`);
+      this.mPendingPromises[name] = p;
+      p.then(r => {
+        if (this.mPendingPromises[name] !== p) {
+          return;
+        }
+        this.mPendingPromises[name] = null;
+        this.setPrimitiveValue(element, name, r);
+      }).catch(e => {
+        if (this.mPendingPromises[name] !== p) {
+          return;
+        }
+        this.mPendingPromises[name] = null;
+        console.error(e);
+      });
+      return;
     }
-    beginEdit() {
-        this.pendingInits = [];
-        const a = this.pendingInits;
-        return {
-            dispose: () => {
-                if (this.pendingInits == null) {
-                    return;
-                }
-                this.pendingInits = null;
-                if (a) {
-                    for (const iterator of a) {
-                        iterator();
-                    }
-                }
-                this.invalidate();
-            }
-        };
+    if (/^(viewModel|localViewModel)$/.test(name)) {
+      this[name] = value;
+      return;
     }
-    invalidate() {
-        if (this.mInvalidated) {
-            clearTimeout(this.mInvalidated);
-        }
-        this.mInvalidated = setTimeout(() => {
-            this.mInvalidated = 0;
-            this.app.callLater(() => {
-                this.onUpdateUI();
-            });
-        }, 5);
+    if ((!element || element === this.element) && this.hasProperty(name)) {
+      this.runAfterInit(() => {
+        this[name] = value;
+      });
+    } else {
+      this.setElementValue(element, name, value);
     }
-    onUpdateUI() {
+  }
+  setLocalValue(element, name, value) {
+    const p = value;
+    if (p && p.then && p.catch) {
+      console.warn(`Do not bind promises, instead use Bind.oneWayAsync`);
+      this.mPendingPromises[name] = p;
+      p.then(r => {
+        if (this.mPendingPromises[name] !== p) {
+          return;
+        }
+        this.mPendingPromises[name] = null;
+        this.setLocalValue(element, name, r);
+      }).catch(e => {
+        if (this.mPendingPromises[name] !== p) {
+          return;
+        }
+        this.mPendingPromises[name] = null;
+        console.error(e);
+      });
+      return;
     }
-    runAfterInit(f) {
-        if (this.pendingInits) {
-            this.pendingInits.push(f);
-        }
-        else {
-            f();
-        }
+    if ((!element || element === this.element) && Reflect.has(this, name)) {
+      this[name] = value;
+    } else {
+      this.setElementValue(element, name, value);
     }
-    registerDisposable(d) {
-        return this.disposables.add(d);
+  }
+  dispose(e) {
+    if (this.mInvalidated) {
+      clearTimeout(this.mInvalidated);
+      this.mInvalidated = 0;
     }
-    render(node, e = this.element, creator = this.creator || this) {
-        const app = this.app;
-        const attr = node.attributes;
-        if (attr) {
-            for (const key in attr) {
-                if (attr.hasOwnProperty(key)) {
-                    const item = attr[key];
-                    const isObject = typeof item === "object";
-                    if (isObject && item !== null) {
-                        const localSymbol = item[localBindSymbol];
-                        if (localSymbol) {
-                            localSymbol(key, this, e, creator);
-                            continue;
-                        }
-                        const localXNode = item[localXNodeSymbol];
-                        if (localXNode) {
-                            if (item.isTemplate) {
-                                this.setLocalValue(e, key, this.toTemplate(app, item, creator));
-                                continue;
-                            }
-                            this.setLocalValue(e, key, this.createNode(app, null, item, creator));
-                            continue;
-                        }
-                    }
-                    this.setLocalValue(e, key, item);
-                }
-            }
-        }
-        const children = node.children;
-        if (children === void 0) {
-            return;
-        }
-        for (const iterator of children) {
-            if (!iterator) {
-                continue;
-            }
-            if (!iterator[localXNodeSymbol]) {
-                e.appendChild(document.createTextNode(iterator.toString()));
-                continue;
-            }
-            if (iterator.isProperty) {
-                if (iterator.isTemplate) {
-                    this.setLocalValue(e, iterator.name, this.toTemplate(app, iterator.children[0], creator));
-                    continue;
-                }
-                this.createNode(app, e, iterator, creator);
-                continue;
-            }
-            const t = iterator.attributes && iterator.attributes.template;
-            if (t) {
-                console.warn(`This path is deprecated, check who is calling it.`);
-                this.setLocalValue(e, t, this.toTemplate(app, iterator, creator));
-                continue;
-            }
-            this.createNode(app, e, iterator, creator);
-        }
+    visitDescendents(e || this.element, (ex, ac) => {
+      if (ac) {
+        ac.dispose();
+        return false;
+      }
+      return true;
+    });
+    if (!e) {
+      this.unbindEvent(null, null, null);
+      for (const binding of this.bindings) {
+        binding.dispose();
+      }
+      this.bindings.length = 0;
+      this.bindings = null;
+      const e1 = this.element;
+      if (typeof e1.dispose === "function") {
+        e1.dispose();
+      }
+      this.element = null;
+      const lvm = this.localViewModel;
+      if (lvm && lvm.dispose) {
+        lvm.dispose();
+        this.localViewModel = null;
+      }
+      const vm = this.viewModel;
+      if (vm && vm.dispose) {
+        vm.dispose();
+        this.viewModel = null;
+      }
+      this.disposables.dispose();
+      this.pendingInits = null;
     }
-    extractControlProperties(x, name = "div") {
-        const a = x.attributes;
-        const extracted = {};
-        if (typeof x.name === "function" && this instanceof x.name) {
-            x.name = name;
-        }
+  }
+  onPropertyChanged(name) {}
+  beginEdit() {
+    this.pendingInits = [];
+    const a = this.pendingInits;
+    return {
+      dispose: () => {
+        if (this.pendingInits == null) {
+          return;
+        }
+        this.pendingInits = null;
         if (a) {
-            for (const key in a) {
-                if (Object.prototype.hasOwnProperty.call(a, key)) {
-                    if (Reflect.has(this, key)) {
-                        const element = a[key];
-                        extracted[key] = element;
-                        delete a[key];
-                    }
-                }
+          for (const iterator of a) {
+            iterator();
+          }
+        }
+        this.invalidate();
+      }
+    };
+  }
+  invalidate() {
+    if (this.mInvalidated) {
+      clearTimeout(this.mInvalidated);
+    }
+    this.mInvalidated = setTimeout(() => {
+      this.mInvalidated = 0;
+      this.app.callLater(() => {
+        this.onUpdateUI();
+      });
+    }, 5);
+  }
+  onUpdateUI() {}
+  runAfterInit(f) {
+    if (this.pendingInits) {
+      this.pendingInits.push(f);
+    } else {
+      f();
+    }
+  }
+  registerDisposable(d) {
+    return this.disposables.add(d);
+  }
+  render(node, e = this.element, creator = this.creator || this) {
+    const app = this.app;
+    const attr = node.attributes;
+    if (attr) {
+      for (const key in attr) {
+        if (attr.hasOwnProperty(key)) {
+          const item = attr[key];
+          const isObject = typeof item === "object";
+          if (isObject && item !== null) {
+            const localSymbol = item[localBindSymbol];
+            if (localSymbol) {
+              localSymbol(key, this, e, creator);
+              continue;
+            }
+            const localXNode = item[localXNodeSymbol];
+            if (localXNode) {
+              if (item.isTemplate) {
+                this.setLocalValue(e, key, this.toTemplate(app, item, creator));
+                continue;
+              }
+              this.setLocalValue(e, key, this.createNode(app, null, item, creator));
+              continue;
             }
+          }
+          this.setLocalValue(e, key, item);
         }
-        return extracted;
+      }
     }
-    create() {
+    const children = node.children;
+    if (children === void 0) {
+      return;
     }
-    preCreate() {
+    for (const iterator of children) {
+      if (!iterator) {
+        continue;
+      }
+      if (!iterator[localXNodeSymbol]) {
+        e.appendChild(document.createTextNode(iterator.toString()));
+        continue;
+      }
+      if (iterator.isProperty) {
+        if (iterator.isTemplate) {
+          this.setLocalValue(e, iterator.name, this.toTemplate(app, iterator.children[0], creator));
+          continue;
+        }
+        this.createNode(app, e, iterator, creator);
+        continue;
+      }
+      const t = iterator.attributes && iterator.attributes.template;
+      if (t) {
+        console.warn(`This path is deprecated, check who is calling it.`);
+        this.setLocalValue(e, t, this.toTemplate(app, iterator, creator));
+        continue;
+      }
+      this.createNode(app, e, iterator, creator);
     }
-    setElementValue(element, name, value) {
-        element[name] = value;
+  }
+  extractControlProperties(x, name = "div") {
+    const a = x.attributes;
+    const extracted = {};
+    if (typeof x.name === "function" && this instanceof x.name) {
+      x.name = name;
     }
-    resolve(c, selfName) {
-        const result = this.app.resolve(c, true);
-        if (selfName) {
-            if (typeof selfName === "function") {
-                this.runAfterInit(() => {
-                    const v = selfName();
-                    if (v) {
-                        for (const key in v) {
-                            if (v.hasOwnProperty(key)) {
-                                const element = v[key];
-                                result[key] = element;
-                            }
-                        }
-                    }
-                });
-            }
-            else {
-                result[selfName] = this;
-            }
-        }
-        return result;
+    if (a) {
+      for (const key in a) {
+        if (Object.prototype.hasOwnProperty.call(a, key)) {
+          if (Reflect.has(this, key)) {
+            const element = a[key];
+            extracted[key] = element;
+            delete a[key];
+          }
+        }
+      }
     }
-    pushInit() {
+    return extracted;
+  }
+  create() {}
+  preCreate() {}
+  setElementValue(element, name, value) {
+    element[name] = value;
+  }
+  resolve(c, selfName) {
+    const result = this.app.resolve(c, true);
+    if (selfName) {
+      if (typeof selfName === "function") {
         this.runAfterInit(() => {
-            this.init?.()?.catch((error) => CancelToken.isCancelled(error) ? void 0 : console.error(error));
+          const v = selfName();
+          if (v) {
+            for (const key in v) {
+              if (v.hasOwnProperty(key)) {
+                const element = v[key];
+                result[key] = element;
+              }
+            }
+          }
         });
+      } else {
+        result[selfName] = this;
+      }
     }
+    return result;
+  }
+  pushInit() {
+    this.runAfterInit(() => {
+      this.init?.()?.catch(error => CancelToken.isCancelled(error) ? void 0 : console.error(error));
+    });
+  }
 };
-__decorate([
-    InheritedProperty,
-    __metadata("design:type", Object)
-], AtomComponent.prototype, "data", void 0);
-__decorate([
-    InheritedProperty,
-    __metadata("design:type", Object)
-], AtomComponent.prototype, "viewModel", void 0);
-__decorate([
-    InheritedProperty,
-    __metadata("design:type", Object)
-], AtomComponent.prototype, "localViewModel", void 0);
-AtomComponent = __decorate([
-    __param(0, Inject),
-    __metadata("design:paramtypes", [App, Object])
-], AtomComponent);
+__decorate([InheritedProperty, __metadata("design:type", Object)], AtomComponent.prototype, "data", void 0);
+__decorate([InheritedProperty, __metadata("design:type", Object)], AtomComponent.prototype, "viewModel", void 0);
+__decorate([InheritedProperty, __metadata("design:type", Object)], AtomComponent.prototype, "localViewModel", void 0);
+AtomComponent = __decorate([__param(0, Inject), __metadata("design:paramtypes", [App, Object])], AtomComponent);
 export { AtomComponent };
 export class PropertyBinding {
-    constructor(target, element, name, path, twoWays, valueFunc, source) {
-        this.target = target;
-        this.element = element;
-        this.name = name;
-        this.twoWays = twoWays;
-        this.source = source;
-        this.isTwoWaySetup = false;
-        this.name = name;
-        this.twoWays = twoWays;
-        this.target = target;
-        this.element = element;
-        this.isRunning = false;
-        if (valueFunc) {
-            if (typeof valueFunc !== "function") {
-                this.fromSourceToTarget = valueFunc.fromSource;
-                this.fromTargetToSource = valueFunc.fromTarget;
-            }
-            else {
-                this.fromSourceToTarget = valueFunc;
-            }
-        }
-        this.watcher = new AtomWatcher(target, path, (...v) => {
-            if (this.isRunning) {
-                return;
-            }
-            if (this.disposed) {
-                return;
-            }
-            for (const iterator of v) {
-                if (iterator === undefined) {
-                    return;
-                }
-            }
-            const cv = this.fromSourceToTarget ? this.fromSourceToTarget.apply(this, v) : v[0];
-            if (cv === ignoreValue) {
-                return;
-            }
-            this.isRunning = true;
-            try {
-                if (this.target instanceof AtomComponent) {
-                    this.target.setLocalValue(this.element, this.name, cv);
-                }
-                else {
-                    this.target[name] = cv;
-                }
-            }
-            finally {
-                this.isRunning = false;
-            }
-        }, source);
-        this.path = this.watcher.path;
-        if (this.target instanceof AtomComponent) {
-            this.target.runAfterInit(() => {
-                if (!this.watcher) {
-                    return;
-                }
-                this.watcher.init(true);
-                if (twoWays) {
-                    this.setupTwoWayBinding();
-                }
-            });
-        }
-        else {
-            this.watcher.init(true);
-            if (twoWays) {
-                this.setupTwoWayBinding();
-            }
-        }
+  constructor(target, element, name, path, twoWays, valueFunc, source) {
+    this.target = target;
+    this.element = element;
+    this.name = name;
+    this.twoWays = twoWays;
+    this.source = source;
+    this.isTwoWaySetup = false;
+    this.name = name;
+    this.twoWays = twoWays;
+    this.target = target;
+    this.element = element;
+    this.isRunning = false;
+    if (valueFunc) {
+      if (typeof valueFunc !== "function") {
+        this.fromSourceToTarget = valueFunc.fromSource;
+        this.fromTargetToSource = valueFunc.fromTarget;
+      } else {
+        this.fromSourceToTarget = valueFunc;
+      }
     }
-    setupTwoWayBinding() {
+    this.watcher = new AtomWatcher(target, path, (...v) => {
+      if (this.isRunning) {
+        return;
+      }
+      if (this.disposed) {
+        return;
+      }
+      for (const iterator of v) {
+        if (iterator === undefined) {
+          return;
+        }
+      }
+      const cv = this.fromSourceToTarget ? this.fromSourceToTarget.apply(this, v) : v[0];
+      if (cv === ignoreValue) {
+        return;
+      }
+      this.isRunning = true;
+      try {
         if (this.target instanceof AtomComponent) {
-            if (this.element
-                && (this.element !== this.target.element || !this.target.hasProperty(this.name))) {
-                let events = [];
-                if (typeof this.twoWays !== "boolean") {
-                    events = this.twoWays;
-                }
-                this.twoWaysDisposable = watchProperty(this.element, this.name, events, (v) => {
-                    this.setInverseValue(v);
-                });
-                return;
-            }
+          this.target.setLocalValue(this.element, this.name, cv);
+        } else {
+          this.target[name] = cv;
         }
-        const watcher = new AtomWatcher(this.target, [[this.name]], (...values) => {
-            if (this.isTwoWaySetup) {
-                this.setInverseValue(values[0]);
-            }
+      } finally {
+        this.isRunning = false;
+      }
+    }, source);
+    this.path = this.watcher.path;
+    if (this.target instanceof AtomComponent) {
+      this.target.runAfterInit(() => {
+        if (!this.watcher) {
+          return;
+        }
+        this.watcher.init(true);
+        if (twoWays) {
+          this.setupTwoWayBinding();
+        }
+      });
+    } else {
+      this.watcher.init(true);
+      if (twoWays) {
+        this.setupTwoWayBinding();
+      }
+    }
+  }
+  setupTwoWayBinding() {
+    if (this.target instanceof AtomComponent) {
+      if (this.element && (this.element !== this.target.element || !this.target.hasProperty(this.name))) {
+        let events = [];
+        if (typeof this.twoWays !== "boolean") {
+          events = this.twoWays;
+        }
+        this.twoWaysDisposable = watchProperty(this.element, this.name, events, v => {
+          this.setInverseValue(v);
         });
-        watcher.init(true);
-        this.isTwoWaySetup = true;
-        this.twoWaysDisposable = watcher;
+        return;
+      }
     }
-    setInverseValue(value) {
-        if (!this.twoWays) {
-            throw new Error("This Binding is not two ways.");
-        }
-        if (this.disposed) {
-            return;
-        }
-        if (this.isRunning) {
-            return;
-        }
-        this.isRunning = true;
-        try {
-            const first = this.path[0];
-            const length = first.length;
-            let v = this.target;
-            let i = 0;
-            let name;
-            for (i = 0; i < length - 1; i++) {
-                name = first[i].name;
-                if (name === "this") {
-                    v = this.source || this.target;
-                }
-                else {
-                    v = v[name];
-                }
-                if (!v) {
-                    return;
-                }
-            }
-            name = first[i].name;
-            v[name] = this.fromTargetToSource ? this.fromTargetToSource.call(this, value) : value;
-        }
-        finally {
-            this.isRunning = false;
-        }
+    const watcher = new AtomWatcher(this.target, [[this.name]], (...values) => {
+      if (this.isTwoWaySetup) {
+        this.setInverseValue(values[0]);
+      }
+    });
+    watcher.init(true);
+    this.isTwoWaySetup = true;
+    this.twoWaysDisposable = watcher;
+  }
+  setInverseValue(value) {
+    if (!this.twoWays) {
+      throw new Error("This Binding is not two ways.");
+    }
+    if (this.disposed) {
+      return;
+    }
+    if (this.isRunning) {
+      return;
     }
-    dispose() {
-        this.twoWaysDisposable?.dispose();
-        this.twoWaysDisposable = undefined;
-        this.watcher.dispose();
-        this.disposed = true;
-        this.watcher = null;
+    this.isRunning = true;
+    try {
+      const first = this.path[0];
+      const length = first.length;
+      let v = this.target;
+      let i = 0;
+      let name;
+      for (i = 0; i < length - 1; i++) {
+        name = first[i].name;
+        if (name === "this") {
+          v = this.source || this.target;
+        } else {
+          v = v[name];
+        }
+        if (!v) {
+          return;
+        }
+      }
+      name = first[i].name;
+      v[name] = this.fromTargetToSource ? this.fromTargetToSource.call(this, value) : value;
+    } finally {
+      this.isRunning = false;
     }
-}
-//# sourceMappingURL=AtomComponent.js.map
+  }
+  dispose() {
+    this.twoWaysDisposable?.dispose();
+    this.twoWaysDisposable = undefined;
+    this.watcher.dispose();
+    this.disposed = true;
+    this.watcher = null;
+  }
+}