vasille 2.3.9 → 3.0.2

package/lib-node/node/node.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DebugNode = exports.DebugPrivate = exports.SwitchedNode = exports.SwitchedNodePrivate = exports.Component = exports.Extension = exports.Tag = exports.INode = exports.INodePrivate = exports.TextNode = exports.TextNodePrivate = exports.Fragment = exports.FragmentPrivate = void 0;
+exports.DebugNode = exports.SwitchedNode = exports.Extension = exports.Tag = exports.INode = exports.TextNode = exports.Fragment = exports.Root = void 0;
 const core_1 = require("../core/core");
 const ivalue_1 = require("../core/ivalue");
 const reference_1 = require("../value/reference");
@@ -9,82 +9,20 @@ const attribute_1 = require("../binding/attribute");
 const class_1 = require("../binding/class");
 const style_1 = require("../binding/style");
 const errors_1 = require("../core/errors");
-/**
- * Represents a Vasille.js node
- * @class FragmentPrivate
- * @extends ReactivePrivate
- */
-class FragmentPrivate extends core_1.ReactivePrivate {
-    constructor() {
-        super();
-        this.$seal();
-    }
-    /**
-     * Pre-initializes the base of a fragment
-     * @param app {App} the app node
-     * @param parent {Fragment} the parent node
-     */
-    preinit(app, parent) {
-        this.app = app;
-        this.parent = parent;
-    }
-    /**
-     * Unlinks all bindings
-     */
-    $destroy() {
-        this.next = null;
-        this.prev = null;
-        super.$destroy();
-    }
-}
-exports.FragmentPrivate = FragmentPrivate;
+const config_1 = require("../core/config");
 /**
  * This class is symbolic
  * @extends Reactive
  */
-class Fragment extends core_1.Reactive {
-    /**
-     * Constructs a Vasille Node
-     * @param input
-     * @param $ {FragmentPrivate}
-     */
-    constructor(input, $) {
-        super(input, $ || new FragmentPrivate);
+class Root extends core_1.Reactive {
+    constructor() {
+        super(...arguments);
         /**
          * The children list
          * @type Array
          */
-        this.children = new Set;
-        this.lastChild = null;
-    }
-    /**
-     * Gets the app of node
-     */
-    get app() {
-        return this.$.app;
-    }
-    /**
-     * Prepare to init fragment
-     * @param app {AppNode} app of node
-     * @param parent {Fragment} parent of node
-     * @param data {*} additional data
-     */
-    preinit(app, parent, data) {
-        const $ = this.$;
-        $.preinit(app, parent);
-    }
-    init() {
-        const ret = super.init();
-        this.ready();
-        return ret;
-    }
-    compose(input) {
-        input.slot && input.slot(this);
-        return {};
-    }
-    /** To be overloaded: ready event handler */
-    ready() {
-        // empty
+        this.children = new Set();
+        this.lastChild = undefined;
     }
     /**
      * Pushes a node to children immediately
@@ -92,15 +30,12 @@ class Fragment extends core_1.Reactive {
      * @protected
      */
     pushNode(node) {
-        if (this.lastChild) {
-            this.lastChild.$.next = node;
-        }
-        node.$.prev = this.lastChild;
+        node.parent = this;
         this.lastChild = node;
         this.children.add(node);
     }
     /**
-     * Find first node in element if so exists
+     * Find the first node in the element if so exists
      * @return {?Element}
      * @protected
      */
@@ -111,53 +46,21 @@ class Fragment extends core_1.Reactive {
         });
         return first;
     }
-    /**
-     * Append a node to end of element
-     * @param node {Node} node to insert
-     */
-    appendNode(node) {
-        const $ = this.$;
-        if ($.next) {
-            $.next.insertAdjacent(node);
-        }
-        else {
-            $.parent.appendNode(node);
-        }
-    }
-    /**
-     * Insert a node as a sibling of this
-     * @param node {Node} node to insert
-     */
-    insertAdjacent(node) {
-        const child = this.findFirstChild();
-        const $ = this.$;
-        if (child) {
-            child.parentElement.insertBefore(node, child);
-        }
-        else if ($.next) {
-            $.next.insertAdjacent(node);
-        }
-        else {
-            $.parent.appendNode(node);
-        }
-    }
     /**
      * Defines a text fragment
      * @param text {String | IValue} A text fragment string
      * @param cb {function (TextNode)} Callback if previous is slot name
      */
-    text(text, cb) {
-        const $ = this.$;
-        const node = new TextNode();
-        node.preinit($.app, this, text);
+    text(text) {
+        const node = new TextNode({ text });
         this.pushNode(node);
-        cb && cb(node);
+        node.compose();
     }
     debug(text) {
-        if (this.$.app.debugUi) {
-            const node = new DebugNode();
-            node.preinit(this.$.app, this, text);
+        if (config_1.config.debugUi) {
+            const node = new DebugNode({ text });
             this.pushNode(node);
+            node.compose();
         }
     }
     /**
@@ -166,18 +69,11 @@ class Fragment extends core_1.Reactive {
      * @param input
      * @param cb {function(Tag, *)} callback
      */
-    tag(tagName, input, cb
-    // @ts-expect-error
-    ) {
-        const $ = this.$;
-        const node = new Tag(input);
+    tag(tagName, input, cb) {
+        const tag = new Tag(input, tagName);
         input.slot = cb || input.slot;
-        node.preinit($.app, this, tagName);
-        node.init();
-        this.pushNode(node);
-        node.ready();
-        // @ts-expect-error
-        return node.node;
+        this.pushNode(tag);
+        tag.compose();
     }
     /**
      * Defines a custom element
@@ -185,12 +81,9 @@ class Fragment extends core_1.Reactive {
      * @param callback {function($ : *)}
      */
     create(node, callback) {
-        const $ = this.$;
-        node.$.parent = this;
-        node.preinit($.app, this);
-        node.input.slot = callback || node.input.slot;
         this.pushNode(node);
-        return node.init();
+        node.compose();
+        callback === null || callback === void 0 ? void 0 : callback(node);
     }
     /**
      * Defines an if node
@@ -200,18 +93,15 @@ class Fragment extends core_1.Reactive {
      */
     if(cond, cb) {
         const node = new SwitchedNode();
-        node.preinit(this.$.app, this);
-        node.init();
         this.pushNode(node);
         node.addCase(this.case(cond, cb));
-        node.ready();
     }
     else(cb) {
         if (this.lastChild instanceof SwitchedNode) {
             this.lastChild.addCase(this.default(cb));
         }
         else {
-            throw (0, errors_1.userError)('wrong `else` function use', 'logic-error');
+            throw (0, errors_1.userError)("wrong `else` function use", "logic-error");
         }
     }
     elif(cond, cb) {
@@ -219,7 +109,7 @@ class Fragment extends core_1.Reactive {
             this.lastChild.addCase(this.case(cond, cb));
         }
         else {
-            throw (0, errors_1.userError)('wrong `elif` function use', 'logic-error');
+            throw (0, errors_1.userError)("wrong `elif` function use", "logic-error");
         }
     }
     /**
@@ -238,143 +128,142 @@ class Fragment extends core_1.Reactive {
     default(cb) {
         return { cond: trueIValue, cb };
     }
+    destroy() {
+        this.children.forEach(child => child.destroy());
+        this.children.clear();
+        this.lastChild = undefined;
+        super.destroy();
+    }
+}
+exports.Root = Root;
+class Fragment extends Root {
+    constructor(input, name) {
+        super(input);
+        this.name = name;
+    }
+    /**
+     * Pushes a node to children immediately
+     * @param node {Fragment} A node to push
+     * @protected
+     */
+    pushNode(node) {
+        if (this.lastChild) {
+            this.lastChild.next = node;
+        }
+        node.prev = this.lastChild;
+        super.pushNode(node);
+    }
+    /**
+     * Append a node to end of element
+     * @param node {Node} node to insert
+     */
+    appendNode(node) {
+        if (this.next) {
+            this.next.insertAdjacent(node);
+        }
+        else {
+            this.parent.appendNode(node);
+        }
+    }
+    /**
+     * Insert a node as a sibling of this
+     * @param node {Node} node to insert
+     */
+    insertAdjacent(node) {
+        const child = this.findFirstChild();
+        if (child) {
+            const parent = child.parentElement;
+            if (parent) {
+                child.parentElement.insertBefore(node, child);
+            }
+        }
+        else if (this.next) {
+            this.next.insertAdjacent(node);
+        }
+        else {
+            this.parent.appendNode(node);
+        }
+    }
+    compose() {
+        // do nothing
+        // to override it
+    }
     insertBefore(node) {
-        const $ = this.$;
-        node.$.prev = $.prev;
-        node.$.next = this;
-        if ($.prev) {
-            $.prev.$.next = node;
+        node.prev = this.prev;
+        node.next = this;
+        if (this.prev) {
+            this.prev.next = node;
         }
-        $.prev = node;
+        this.prev = node;
     }
     insertAfter(node) {
-        const $ = this.$;
-        node.$.prev = this;
-        node.$.next = $.next;
-        $.next = node;
+        node.prev = this;
+        node.next = this.next;
+        this.next = node;
     }
     remove() {
-        const $ = this.$;
-        if ($.next) {
-            $.next.$.prev = $.prev;
+        if (this.next) {
+            this.next.prev = this.prev;
         }
-        if ($.prev) {
-            $.prev.$.next = $.next;
+        if (this.prev) {
+            this.prev.next = this.next;
         }
     }
-    $destroy() {
-        this.children.forEach(child => child.$destroy());
-        this.children.clear();
-        this.lastChild = null;
-        if (this.$.parent.lastChild === this) {
-            this.$.parent.lastChild = this.$.prev;
+    destroy() {
+        if (this.parent.lastChild === this) {
+            this.parent.lastChild = this.prev;
         }
-        super.$destroy();
+        super.destroy();
     }
 }
 exports.Fragment = Fragment;
 const trueIValue = new reference_1.Reference(true);
-/**
- * The private part of a text node
- * @class TextNodePrivate
- * @extends FragmentPrivate
- */
-class TextNodePrivate extends FragmentPrivate {
-    constructor() {
-        super();
-        this.$seal();
-    }
-    /**
-     * Pre-initializes a text node
-     * @param app {AppNode} the app node
-     * @param parent
-     * @param text {IValue}
-     */
-    preinitText(app, parent, text) {
-        super.preinit(app, parent);
-        this.node = document.createTextNode(text instanceof ivalue_1.IValue ? text.$ : text);
-        if (text instanceof ivalue_1.IValue) {
-            this.bindings.add(new expression_1.Expression((v) => {
-                this.node.replaceData(0, -1, v);
-            }, true, text));
-        }
-    }
-    /**
-     * Clear node data
-     */
-    $destroy() {
-        super.$destroy();
-    }
-}
-exports.TextNodePrivate = TextNodePrivate;
 /**
  * Represents a text node
  * @class TextNode
  * @extends Fragment
  */
 class TextNode extends Fragment {
-    constructor($ = new TextNodePrivate()) {
-        super({}, $);
-        this.$seal();
+    constructor(input) {
+        super(input, ":text");
     }
-    preinit(app, parent, text) {
-        const $ = this.$;
-        if (!text) {
-            throw (0, errors_1.internalError)('wrong TextNode::$preninit call');
+    compose() {
+        var _a, _b;
+        const text = this.input.text;
+        this.node = document.createTextNode((_b = (_a = (text instanceof ivalue_1.IValue ? text.$ : text)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
+        if (text instanceof ivalue_1.IValue) {
+            this.register(new expression_1.Expression((v) => {
+                var _a;
+                this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
+            }, text));
         }
-        $.preinitText(app, parent, text);
-        $.parent.appendNode($.node);
+        this.parent.appendNode(this.node);
     }
     findFirstChild() {
-        return this.$.node;
+        return this.node;
     }
-    $destroy() {
-        this.$.node.remove();
-        this.$.$destroy();
-        super.$destroy();
+    destroy() {
+        this.node.remove();
+        super.destroy();
     }
 }
 exports.TextNode = TextNode;
 /**
- * The private part of a base node
- * @class INodePrivate
- * @extends FragmentPrivate
+ * Vasille node which can manipulate an element node
+ * @class INode
+ * @extends Fragment
  */
-class INodePrivate extends FragmentPrivate {
+class INode extends Fragment {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Defines if node is unmounted
          * @type {boolean}
          */
         this.unmounted = false;
-        this.$seal();
-    }
-    $destroy() {
-        super.$destroy();
-    }
-}
-exports.INodePrivate = INodePrivate;
-/**
- * Vasille node which can manipulate an element node
- * @class INode
- * @extends Fragment
- */
-class INode extends Fragment {
-    /**
-     * Constructs a base node
-     * @param input
-     * @param $ {?INodePrivate}
-     */
-    constructor(input, $) {
-        super(input, $ || new INodePrivate);
-        this.$seal();
     }
-    /**
-     * Get the bound node
-     */
-    get node() {
-        return this.$.node;
+    get element() {
+        return this.node;
     }
     /**
      * Bind attribute value
@@ -382,9 +271,7 @@ class INode extends Fragment {
      * @param value {IValue} value
      */
     attr(name, value) {
-        const $ = this.$;
-        const attr = new attribute_1.AttributeBinding(this, name, value);
-        $.bindings.add(attr);
+        this.register(new attribute_1.AttributeBinding(this, name, value));
     }
     /**
      * Set attribute value
@@ -392,13 +279,13 @@ class INode extends Fragment {
      * @param value {string} value
      */
     setAttr(name, value) {
-        if (typeof value === 'boolean') {
+        if (typeof value === "boolean") {
             if (value) {
-                this.$.node.setAttribute(name, "");
+                this.node.setAttribute(name, "");
             }
         }
-        else {
-            this.$.node.setAttribute(name, `${value}`);
+        else if (value !== null && value !== undefined) {
+            this.node.setAttribute(name, `${value}`);
         }
         return this;
     }
@@ -407,25 +294,21 @@ class INode extends Fragment {
      * @param cl {string} Class name
      */
     addClass(cl) {
-        this.$.node.classList.add(cl);
-        return this;
+        this.node.classList.add(cl);
     }
     /**
      * Adds some CSS classes
-     * @param cls {...string} classes names
+     * @param cl {string} classes names
      */
-    removeClasse(cl) {
-        this.$.node.classList.remove(cl);
-        return this;
+    removeClass(cl) {
+        this.node.classList.remove(cl);
     }
     /**
      * Bind a CSS class
      * @param className {IValue}
      */
     bindClass(className) {
-        const $ = this.$;
-        $.bindings.add(new class_1.DynamicalClassBinding(this, className));
-        return this;
+        this.register(new class_1.DynamicalClassBinding(this, className));
     }
     /**
      * Bind a floating class name
@@ -433,8 +316,7 @@ class INode extends Fragment {
      * @param className {string} class name
      */
     floatingClass(cond, className) {
-        this.$.bindings.add(new class_1.StaticClassBinding(this, className, cond));
-        return this;
+        this.register(new class_1.StaticClassBinding(this, className, cond));
     }
     /**
      * Defines a style attribute
@@ -442,14 +324,12 @@ class INode extends Fragment {
      * @param value {IValue} value
      */
     style(name, value) {
-        const $ = this.$;
-        if ($.node instanceof HTMLElement) {
-            $.bindings.add(new style_1.StyleBinding(this, name, value));
+        if (this.node instanceof HTMLElement) {
+            this.register(new style_1.StyleBinding(this, name, value));
         }
         else {
-            throw (0, errors_1.userError)('style can be applied to HTML elements only', 'non-html-element');
+            throw (0, errors_1.userError)("style can be applied to HTML elements only", "non-html-element");
         }
-        return this;
     }
     /**
      * Sets a style property value
@@ -457,8 +337,8 @@ class INode extends Fragment {
      * @param value {string} Property value
      */
     setStyle(prop, value) {
-        if (this.$.node instanceof HTMLElement) {
-            this.$.node.style.setProperty(prop, value);
+        if (this.node instanceof HTMLElement) {
+            this.node.style.setProperty(prop, (0, style_1.stringifyStyleValue)(value));
         }
         else {
             throw (0, errors_1.userError)("Style can be set for HTML elements only", "non-html-element");
@@ -472,31 +352,39 @@ class INode extends Fragment {
      * @param options {Object | boolean} addEventListener options
      */
     listen(name, handler, options) {
-        this.$.node.addEventListener(name, handler, options);
-        return this;
+        this.node.addEventListener(name, handler, options);
     }
     insertAdjacent(node) {
-        this.$.node.parentNode.insertBefore(node, this.$.node);
+        const parent = this.node.parentNode;
+        if (parent) {
+            parent.insertBefore(node, this.node);
+        }
     }
     /**
      * A v-show & ngShow alternative
      * @param cond {IValue} show condition
      */
     bindShow(cond) {
-        const $ = this.$;
-        const node = $.node;
+        const node = this.node;
         if (node instanceof HTMLElement) {
             let lastDisplay = node.style.display;
             const htmlNode = node;
-            return this.bindAlive(cond, () => {
-                lastDisplay = htmlNode.style.display;
-                htmlNode.style.display = 'none';
-            }, () => {
-                htmlNode.style.display = lastDisplay;
-            });
+            this.register(new expression_1.Expression(cond => {
+                if (cond) {
+                    if (htmlNode.style.display === "none") {
+                        htmlNode.style.display = lastDisplay;
+                    }
+                }
+                else {
+                    if (htmlNode.style.display !== "none") {
+                        lastDisplay = htmlNode.style.display;
+                        htmlNode.style.display = "none";
+                    }
+                }
+            }, cond));
         }
         else {
-            throw (0, errors_1.userError)('the element must be a html element', 'bind-show');
+            throw (0, errors_1.userError)("the element must be a html element", "bind-show");
         }
     }
     /**
@@ -504,8 +392,7 @@ class INode extends Fragment {
      * @param value {IValue}
      */
     bindDomApi(name, value) {
-        const $ = this.$;
-        const node = $.node;
+        const node = this.node;
         if (node instanceof HTMLElement) {
             node[name] = value.$;
             this.watch((v) => {
@@ -516,91 +403,71 @@ class INode extends Fragment {
             throw (0, errors_1.userError)("HTML can be bound for HTML nodes only", "dom-error");
         }
     }
-    applyOptions(options) {
-        options["v:attr"] && Object.keys(options["v:attr"]).forEach(name => {
-            const value = options["v:attr"][name];
+    applyAttrs(attrs) {
+        for (const name in attrs) {
+            const value = attrs[name];
             if (value instanceof ivalue_1.IValue) {
                 this.attr(name, value);
             }
             else {
                 this.setAttr(name, value);
             }
-        });
-        if (options.class) {
-            const handleClass = (name, value) => {
-                if (value instanceof ivalue_1.IValue) {
-                    this.floatingClass(value, name);
-                }
-                else if (value && name !== '$') {
-                    this.addClass(name);
-                }
-                else {
-                    this.removeClasse(name);
-                }
-            };
-            if (Array.isArray(options.class)) {
-                options.class.forEach(item => {
-                    if (item instanceof ivalue_1.IValue) {
-                        this.bindClass(item);
-                    }
-                    else if (typeof item == "string") {
-                        this.addClass(item);
-                    }
-                    else {
-                        Reflect.ownKeys(item).forEach((name) => {
-                            handleClass(name, item[name]);
-                        });
-                    }
-                });
-            }
-            else {
-                options.class.$.forEach(item => {
-                    this.bindClass(item);
-                });
-                Reflect.ownKeys(options.class).forEach((name) => {
-                    handleClass(name, options.class[name]);
-                });
-            }
         }
-        options.style && Object.keys(options.style).forEach(name => {
-            const value = options.style[name];
+    }
+    applyStyle(style) {
+        for (const name in style) {
+            const value = style[name];
             if (value instanceof ivalue_1.IValue) {
                 this.style(name, value);
             }
-            else if (typeof value === "string") {
+            else {
                 this.setStyle(name, value);
             }
-            else {
-                if (value[0] instanceof ivalue_1.IValue) {
-                    this.style(name, this.expr((v) => v + value[1], value[0]));
-                }
-                else {
-                    this.setStyle(name, value[0] + value[1]);
-                }
+        }
+    }
+    applyBind(bind) {
+        const inode = this.node;
+        for (const k in bind) {
+            const value = bind[k];
+            if (!(value instanceof ivalue_1.IValue)) {
+                inode[k] = value;
+                return;
             }
-        });
-        options["v:events"] && Object.keys(options["v:events"]).forEach(name => {
-            this.listen(name, options["v:events"][name]);
-        });
-        if (options["v:bind"]) {
-            const inode = this.node;
-            Reflect.ownKeys(options["v:bind"]).forEach((k) => {
-                const value = options["v:bind"][k];
-                if (k === 'value' && (inode instanceof HTMLInputElement || inode instanceof HTMLTextAreaElement)) {
-                    inode.oninput = () => value.$ = inode.value;
+            this.bindDomApi(k, value);
+        }
+    }
+    applyOptions(options) {
+        options.attr && this.applyAttrs(options.attr);
+        options.class &&
+            options.class.forEach(item => {
+                if (item instanceof ivalue_1.IValue) {
+                    this.bindClass(item);
                 }
-                else if (k === 'checked' && inode instanceof HTMLInputElement) {
-                    inode.oninput = () => value.$ = inode.checked;
+                else if (typeof item == "string") {
+                    this.addClass(item);
                 }
-                else if (k === 'volume' && inode instanceof HTMLMediaElement) {
-                    inode.onvolumechange = () => value.$ = inode.volume;
+                else {
+                    for (const name in item) {
+                        const value = item[name];
+                        if (value instanceof ivalue_1.IValue) {
+                            this.floatingClass(value, name);
+                        }
+                        else if (value && name !== "$") {
+                            this.addClass(name);
+                        }
+                        else {
+                            this.removeClass(name);
+                        }
+                    }
                 }
-                this.bindDomApi(k, value);
             });
+        options.style && this.applyStyle(options.style);
+        if (options.events) {
+            for (const name of Object.keys(options.events)) {
+                this.listen(name, options.events[name]);
+            }
         }
-        options["v:set"] && Object.keys(options["v:set"]).forEach(key => {
-            this.node[key] = options["v:set"][key];
-        });
+        options.bind && this.applyBind(options.bind);
     }
 }
 exports.INode = INode;
@@ -610,34 +477,31 @@ exports.INode = INode;
  * @extends INode
  */
 class Tag extends INode {
-    constructor(input) {
-        super(input);
-        this.$seal();
+    constructor(input, tagName) {
+        super(input, tagName);
     }
-    preinit(app, parent, tagName) {
-        if (!tagName || typeof tagName !== "string") {
-            throw (0, errors_1.internalError)('wrong Tag::$preinit call');
+    compose() {
+        var _a, _b, _c, _d;
+        if (!this.name) {
+            throw (0, errors_1.internalError)("wrong Tag constructor call");
         }
-        const node = document.createElement(tagName);
-        const $ = this.$;
-        $.preinit(app, parent);
-        $.node = node;
-        $.parent.appendNode(node);
-    }
-    compose(input) {
-        input.slot && input.slot(this);
-        return {};
+        const node = document.createElement(this.name);
+        this.node = node;
+        this.applyOptions(this.input);
+        this.parent.appendNode(node);
+        (_b = (_a = this.input).callback) === null || _b === void 0 ? void 0 : _b.call(_a, this.node);
+        (_d = (_c = this.input).slot) === null || _d === void 0 ? void 0 : _d.call(_c, this);
     }
     findFirstChild() {
-        return this.$.unmounted ? null : this.$.node;
+        return this.unmounted ? undefined : this.node;
     }
     insertAdjacent(node) {
-        if (this.$.unmounted) {
-            if (this.$.next) {
-                this.$.next.insertAdjacent(node);
+        if (this.unmounted) {
+            if (this.next) {
+                this.next.insertAdjacent(node);
             }
             else {
-                this.$.parent.appendNode(node);
+                this.parent.appendNode(node);
             }
         }
         else {
@@ -645,30 +509,37 @@ class Tag extends INode {
         }
     }
     appendNode(node) {
-        this.$.node.appendChild(node);
+        this.node.appendChild(node);
+    }
+    extent(options) {
+        this.applyOptions(options);
     }
     /**
      * Mount/Unmount a node
      * @param cond {IValue} show condition
      */
     bindMount(cond) {
-        const $ = this.$;
-        this.bindAlive(cond, () => {
-            $.node.remove();
-            $.unmounted = true;
-        }, () => {
-            if ($.unmounted) {
-                this.insertAdjacent($.node);
-                $.unmounted = false;
+        this.register(new expression_1.Expression(cond => {
+            if (cond) {
+                if (this.unmounted) {
+                    this.insertAdjacent(this.node);
+                    this.unmounted = false;
+                }
             }
-        });
+            else {
+                if (!this.unmounted) {
+                    this.node.remove();
+                    this.unmounted = true;
+                }
+            }
+        }, cond));
     }
     /**
      * Runs GC
      */
-    $destroy() {
+    destroy() {
         this.node.remove();
-        super.$destroy();
+        super.destroy();
     }
 }
 exports.Tag = Tag;
@@ -677,215 +548,109 @@ exports.Tag = Tag;
  * @class Extension
  * @extends INode
  */
-class Extension extends INode {
-    preinit(app, parent) {
-        const $ = this.$;
-        let it = parent;
-        while (it && !(it instanceof INode)) {
-            it = it.parent;
-        }
-        if (it && it instanceof INode) {
-            $.node = it.node;
+class Extension extends Fragment {
+    tag(tagName, input) {
+        var _a;
+        let parent = this.parent;
+        const target = tagName.toLowerCase();
+        while (parent instanceof Fragment && !(parent instanceof Tag)) {
+            parent = parent.parent;
         }
-        $.preinit(app, parent);
-        if (!it) {
-            throw (0, errors_1.userError)("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
+        if (parent instanceof Tag && parent.element.tagName.toLowerCase() === target) {
+            parent.extent(input);
+            (_a = input.slot) === null || _a === void 0 ? void 0 : _a.call(input, parent);
         }
     }
-    extend(options) {
-        this.applyOptions(options);
-    }
-    $destroy() {
-        super.$destroy();
-    }
 }
 exports.Extension = Extension;
 /**
- * Node which cas has just a child
- * @class Component
- * @extends Extension
- */
-class Component extends Extension {
-    init() {
-        const ret = super.composeNow();
-        this.ready();
-        super.applyOptionsNow();
-        return ret;
-    }
-    ready() {
-        super.ready();
-        if (this.children.size !== 1) {
-            throw (0, errors_1.userError)("Component must have a child only", "dom-error");
-        }
-        const child = this.lastChild;
-        if (child instanceof Tag || child instanceof Component) {
-            const $ = this.$;
-            $.node = child.node;
-        }
-        else {
-            throw (0, errors_1.userError)("Component child must be Tag or Component", "dom-error");
-        }
-    }
-    preinit(app, parent) {
-        this.$.preinit(app, parent);
-    }
-}
-exports.Component = Component;
-/**
- * Private part of switch node
- * @class SwitchedNodePrivate
- * @extends INodePrivate
- */
-class SwitchedNodePrivate extends FragmentPrivate {
-    constructor() {
-        super();
-        /**
-         * Array of possible cases
-         * @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
-         */
-        this.cases = [];
-        this.$seal();
-    }
-    /**
-     * Runs GC
-     */
-    $destroy() {
-        this.cases.forEach(c => {
-            delete c.cond;
-            delete c.cb;
-        });
-        this.cases.splice(0);
-        super.$destroy();
-    }
-}
-exports.SwitchedNodePrivate = SwitchedNodePrivate;
-/**
- * Defines a node witch can switch its children conditionally
+ * Defines a node which can switch its children conditionally
  */
 class SwitchedNode extends Fragment {
     /**
      * Constructs a switch node and define a sync function
      */
     constructor() {
-        super({}, new SwitchedNodePrivate);
-        this.$.sync = () => {
-            const $ = this.$;
+        super({}, ":switch");
+        /**
+         * Array of possible cases
+         * @type {Array<{cond : IValue<unknown>, cb : function(Fragment)}>}
+         */
+        this.cases = [];
+        this.sync = () => {
             let i = 0;
-            for (; i < $.cases.length; i++) {
-                if ($.cases[i].cond.$) {
+            for (; i < this.cases.length; i++) {
+                if (this.cases[i].cond.$) {
                     break;
                 }
             }
-            if (i === $.index) {
+            if (i === this.index) {
                 return;
             }
             if (this.lastChild) {
-                this.lastChild.$destroy();
+                this.lastChild.destroy();
                 this.children.clear();
-                this.lastChild = null;
+                this.lastChild = undefined;
             }
-            if (i !== $.cases.length) {
-                $.index = i;
-                this.createChild($.cases[i].cb);
+            if (i !== this.cases.length) {
+                this.index = i;
+                this.createChild(this.cases[i].cb);
             }
             else {
-                $.index = -1;
+                this.index = -1;
             }
         };
-        this.$seal();
     }
     addCase(case_) {
-        this.$.cases.push(case_);
-        case_.cond.$on(this.$.sync);
-        this.$.sync();
+        this.cases.push(case_);
+        case_.cond.on(this.sync);
+        this.sync();
     }
     /**
      * Creates a child node
      * @param cb {function(Fragment)} Call-back
      */
     createChild(cb) {
-        const node = new Fragment({});
-        node.preinit(this.$.app, this);
-        node.init();
+        const node = new Fragment({}, ":case");
+        node.parent = this;
         this.lastChild = node;
         this.children.add(node);
         cb(node);
     }
-    ready() {
-        const $ = this.$;
-        $.cases.forEach(c => {
-            c.cond.$on($.sync);
-        });
-        $.sync();
-    }
-    $destroy() {
-        const $ = this.$;
-        $.cases.forEach(c => {
-            c.cond.$off($.sync);
+    destroy() {
+        this.cases.forEach(c => {
+            c.cond.off(this.sync);
         });
-        super.$destroy();
+        this.cases.splice(0);
+        super.destroy();
     }
 }
 exports.SwitchedNode = SwitchedNode;
-/**
- * The private part of a text node
- */
-class DebugPrivate extends FragmentPrivate {
-    constructor() {
-        super();
-        this.$seal();
-    }
-    /**
-     * Pre-initializes a text node
-     * @param app {App} the app node
-     * @param parent {Fragment} parent node
-     * @param text {String | IValue}
-     */
-    preinitComment(app, parent, text) {
-        super.preinit(app, parent);
-        this.node = document.createComment(text.$);
-        this.bindings.add(new expression_1.Expression((v) => {
-            this.node.replaceData(0, -1, v);
-        }, true, text));
-        this.parent.appendNode(this.node);
-    }
-    /**
-     * Clear node data
-     */
-    $destroy() {
-        this.node.remove();
-        super.$destroy();
-    }
-}
-exports.DebugPrivate = DebugPrivate;
 /**
  * Represents a debug node
  * @class DebugNode
  * @extends Fragment
  */
 class DebugNode extends Fragment {
-    constructor() {
-        super({});
-        /**
-         * private data
-         * @type {DebugNode}
-         */
-        this.$ = new DebugPrivate();
-        this.$seal();
-    }
-    preinit(app, parent, text) {
-        const $ = this.$;
-        if (!text) {
-            throw (0, errors_1.internalError)('wrong DebugNode::$preninit call');
-        }
-        $.preinitComment(app, parent, text);
+    constructor(input) {
+        super(input, ":debug");
+    }
+    compose() {
+        var _a, _b;
+        const text = this.input.text;
+        this.node = document.createComment((_b = (_a = text.$) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
+        this.register(new expression_1.Expression((v) => {
+            var _a;
+            this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
+        }, text));
+        this.parent.appendNode(this.node);
     }
     /**
      * Runs garbage collector
      */
-    $destroy() {
-        this.$.$destroy();
-        super.$destroy();
+    destroy() {
+        this.node.remove();
+        super.destroy();
     }
 }
 exports.DebugNode = DebugNode;