malinajs 0.6.49 → 0.7.0-alpha

package/compile.js

@@ -24,10 +24,10 @@ function toCamelCase(name) {
     });
 }
 function Q(s) {
-    return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+    return s.replace(/`/g, '\\`').replace(/\\/g, '\\\\');
 }
 function Q2(s) {
-    return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\n/g, '\\n');
+    return s.replace(/`/g, '\\`').replace(/\\/g, '\\\\').replace(/\n/g, '\\n');
 }
 function unwrapExp(e) {
     assert(e, 'Empty expression');
@@ -78,11 +78,20 @@ function detectExpressionType(name) {
         return true;
     }
 
+    function checkFunctionCall(body) {
+        if(body.length != 1) return;
+        if(body[0].type != 'ExpressionStatement') return;
+        let obj = body[0].expression;
+        if(obj.type != 'CallExpression') return;
+        if(obj.callee?.type == 'Identifier') return obj.callee.name;
+    }
+
     if(checkIdentificator(ast.body)) return 'identifier';
     if(checkMemberIdentificator(ast.body)) return 'identifier';
     if(checkFunction(ast.body)) return 'function';
 
-    return;
+    let fn = checkFunctionCall(ast.body);
+    if(fn) return {type: 'function-call', name: fn};
 }
 
 function checkRootName(name) {
@@ -110,147 +119,6 @@ function trimEmptyNodes(srcNodes) {
 }
 
 
-function compactDOM() {
-    let data = this.DOM;
-    const details = {
-        node: [n => n.body],
-        each: [n => n.body],
-        slot: [n => n.body],
-        fragment: [n => n.body],
-        if: [n => n.body, n => n.bodyMain],
-        await: [n => n.parts.main, n => n.parts.then, n => n.parts.catch]
-    };
-
-    function go(body, parentNode) {
-        let i;
-
-        const getPrev = () => {
-            return i > 0 && body.length ? body[i - 1] : null;
-        };
-
-        const getNext = () => {
-            return i < body.length ? body[i + 1] : null;
-        };
-
-        for(i=0; i<body.length; i++) {
-            let node = body[i];
-            if(node.type == 'text') {
-                let next = getNext();
-                if(next && next.type == 'text') {
-                    node.value += next.value;
-                    body.splice(i + 1, 1);
-                }
-
-                if(node.value) {
-                    if(!node.value.trim()) {
-                        node.value = ' ';
-                    } else {
-                        let rx = node.value.match(/^(\s*)(.*?)(\s*)$/);
-                        if(rx) {
-                            let r = '';
-                            if(rx[1]) r += ' ';
-                            r += rx[2];
-                            if(rx[3]) r += ' ';
-                            node.value = r;
-                        }
-                    }
-                }
-            } else {
-                if(node.type == 'node' && (node.name == 'pre' || node.name == 'textarea')) continue;
-                let keys = details[node.type];
-                keys && keys.forEach(k => {
-                    let body = k(node);
-                    if(body && body.length) go(body, node);
-                });
-            }
-        }
-
-        const isTable = n => ['thead', 'tbody', 'tfoot', 'tr', 'td', 'th', 'colgroup', 'col'].includes(n.name);
-
-        i = 0;
-        while(i < body.length) {
-            let node = body[i];
-            if(node.type == 'text' && !node.value.trim()) {
-                if(parentNode && (parentNode.name == 'table' || isTable(parentNode)) && (i == 0 || i == body.length -1)) {
-                    body.splice(i, 1);
-                    continue;
-                }
-
-                let prev = getPrev();
-                let next = getNext();
-                if(prev && next) {
-                    if(prev.type == 'node' && next.type == 'node') {
-                        if(isTable(prev) && isTable(next) ||
-                            prev.name == 'li' && next.name == 'li' ||
-                            prev.name == 'div' && next.name == 'div') {
-                                body.splice(i, 1);
-                                continue;
-                            }
-                    }
-                } else if(parentNode) {
-                    let p = prev && prev.type == 'node' && prev.name;
-                    let n = next && next.type == 'node' && next.name;
-
-                    if((p == 'td' || n == 'td') && ((parentNode.type == 'node' && parentNode.name == 'tr') || (parentNode.type == 'each'))) {
-                        body.splice(i, 1);
-                        continue;
-                    }
-                    if((p == 'tbody' || n == 'tbody') && (parentNode.type == 'node' && parentNode.name == 'table')) {
-                        body.splice(i, 1);
-                        continue;
-                    }
-                    if((p == 'li' || n == 'li') && (parentNode.type == 'node' && parentNode.name == 'ul')) {
-                        body.splice(i, 1);
-                        continue;
-                    }
-                    if(parentNode.type == 'node' && parentNode.name == 'div') {
-                        body.splice(i, 1);
-                        continue;
-                    }
-                    if(parentNode.type == 'node' && (prev && prev.type == 'each' || next && next.type == 'each')) {
-                        body.splice(i, 1);
-                        continue;
-                    }
-                }
-            }
-            i++;
-        }
-
-    }
-
-    function trimNodes(srcNodes) {
-        let nodes = srcNodes.slice();
-        let ex = [];
-        while(nodes.length) {
-            let n = nodes[0];
-            if(n.type == 'fragment' || n.type == 'comment') {
-                ex.push(n);
-                nodes.shift();
-                continue;
-            }
-            if(n.type == 'text' && !n.value.trim()) nodes.shift();
-            else break;
-        }
-        nodes = [...ex, ...nodes];
-        ex = [];
-        while(nodes.length) {
-            let n = last(nodes);
-            if(n.type == 'fragment' || n.type == 'comment') {
-                ex.push(n);
-                nodes.pop();
-                continue;
-            }
-            if(n.type == 'text' && !n.value.trim()) nodes.pop();
-            else break;
-        }
-        return [...nodes, ...ex];
-    }
-
-    data.body = trimNodes(data.body);
-
-    go(data.body);
-}
-
 const genId = () => {
     let id = Math.floor(Date.now() * Math.random()).toString(36);
     if(id.length > 6) id = id.substring(id.length - 6);
@@ -346,95 +214,136 @@ const parseJS = (exp, fn) => {
     return result;
 };
 
-
 function I(value = 0) {
     this.$indent = value;
 }
 
-function xWriter(ctx) {
+
+function xWriter(ctx, node) {
     this._ctx = ctx;
     this.inuse = ctx.inuse;
-    this.result = [];
-    this.indent = 0;
 
-    this.getIndent = function() {
-        return new I(this.indent);
-    };
-    this.writeIndent = function() {this.write(this.getIndent());};
-    this.goIndent = function(fn) {
-        this.indent++;
-        fn();
-        this.indent--;
-    };
+    this.indent = 0;
     this.write = function(...args) {
         for(let i of args) {
-            if(i === true) this.result.push(this.getIndent());
-            else this.result.push(i);
+            if(i === true) node.$result.push(new I(this.indent));
+            else node.$result.push(i);
         }
     };
-    this.writeLine = function(s) {
-        this.write(true, s + '\n');
+    this.writeLine = function(s) {this.write(true, s);};
+    this.writeIndent = function() {this.write(true);};
+    this.goIndent = fn => {
+        this.indent++;
+        fn();
+        this.indent--;
     };
-    this._compile = function() {
-        let result = this.result.slice();
-        let dyn, prevDyn = 0, index = 99;
-
-        for(;index>0;index--) {
-            dyn = 0;
-            let parts = result.slice();
-            result = [];
-            parts.forEach(n => {
-                if(n.node) {
-                    dyn++;
-                    let r = this.subBuild(n.node, n.indent);
-                    if(r?.length) result.push(...r);
-                } else result.push(n);
-            });
-            if(dyn == 0) break;
-            if(dyn == prevDyn) throw 'Compile error: circular dependencies';
-            prevDyn = dyn;
-        }
-        if(index <= 0) throw 'Compile error: circular dependencies';
 
-        return result;
+    this.add = this.build = function(n) {
+        if(n === null) return;
+        assert(n instanceof xNode);
+        assert(!n.$inserted, 'already inserted');
+        node.$result.push({node: n, indent: this.indent});
+        n.$inserted = true;
     };
-    this.toString = function() {
-        let result = this._compile();
-        return result.map(i => {
-            if(i instanceof I) {
-                let r = '', l = i.$indent;
-                while(l--) r += '  ';
-                return r;
+
+    this.isEmpty = function(n) {
+        if(n == null) return true;
+        assert(n.$done, 'Node is not built');
+        return !n.$result.some(r => {
+            if(typeof(r) == 'string') return true;
+            else if(r.node instanceof xNode) return !this.isEmpty(r.node);
+            else if(r instanceof I) return true;
+            else {
+                console.error('Type', r);
+                throw 'error type';
             }
-            return i;
-        }).join('');
+        });
     };
-    this.build = function(node) {
-        if(node == null) return;
-        if(node.$deps?.length) {
-            if(node.$deps.some(n => !n.$done)) {
-                this.result.push({node, indent: this.indent});
-                return;
+}
+
+function xBuild(ctx, node) {
+    let pending = 0;
+    const resolve = n => {
+        n.$compile?.forEach(c => {
+            c != null && resolve(c);
+        });
+        if(!n.$done) {
+            let ready = true;
+            if(n.$deps?.length) {
+                if(n.$deps.some(i => i != null && !i.$done)) {
+                    pending++;
+                    ready = false;
+                }
+            }
+            if(ready) {
+                let w = new xWriter(ctx, n);
+                n.$handler(w, n);
+                n.$done = true;
             }
         }
-        node.handler(this, node);
-        node.$done = true;
-    };
-    this.subBuild = function(node, indent=0) {
-        let w = new xWriter(this._ctx);
-        w.indent = indent;
-        w.build(node);
-        let r = w._compile();
-        return r.length ? r : null;
+
+        if(n.$done) {
+            n.$result.forEach(r => {
+                if(r?.node instanceof xNode) resolve(r.node);
+            });
+        } else pending++;
     };
-    this.addBlock = function(b) {
-        b && b.forEach(i => {
-            if(i instanceof I) i.$indent += this.indent;
-            this.result.push(i);
+    let depth;
+    for(depth=10;depth > 0;depth--) {
+        pending = 0;
+        resolve(node);
+        if(!pending) break;
+    }
+    if(!depth) throw new Error('xNode: Circular dependency');
+
+    let result = [];
+
+    const asm = (n, baseIndent) => {
+        if(!n.$done) {
+            console.log('not resolved', n);
+            throw 'node is not resolved';
+        }
+        n.$result.forEach(r => {
+            if(typeof(r) == 'string') result.push(r);
+            else if(r.node instanceof xNode) {
+                asm(r.node, r.indent + baseIndent);
+            }
+            else if(r instanceof I) {
+                r.$indent += baseIndent;
+                result.push(r);
+            } else {
+                console.error('Type', r);
+                throw 'error type';
+            }
         });
     };
+    asm(node, 0);
+
+    for(let i = 0; i < result.length; i++) {
+        let r = result[i];
+        let next = result[i+1];
+
+        if(r instanceof I) {
+            if(next instanceof I) {
+                result[i] = '';
+            } else {
+                let s = '\n';
+                let j = r.$indent;
+                while(j--) {
+                    s += '  ';
+                }
+                result[i] = s;
+            }
+        }
+    }
+
+    return result.join('');
 }
 
+
+const noop = () => {};
+
+
 function xNode(_type, _data, _handler) {
     /*
         xNode(type, data, handler)
@@ -447,7 +356,10 @@ function xNode(_type, _data, _handler) {
     let type, data, handler;
     if(typeof _type == 'string') {
         type = _type;
-        if(typeof _data == 'function') {
+        if(_data === false && !_handler) {
+            handler = noop;
+            data = null;
+        } else if(typeof _data == 'function') {
             assert(!_handler);
             handler = _data;
         } else {
@@ -473,8 +385,20 @@ function xNode(_type, _data, _handler) {
         assert(handler);
     }
 
-    this.type = type;
-    this.handler = handler;
+    this.$type = type;
+    this.$handler = handler;
+    this.$done = false;
+    this.$inserted = false;
+    this.$result = [];
+    this.$depends = function(n) {
+        assert(!this.$done, 'Attempt to add dependecy, but node is already resolved');
+        if(!this.$deps) this.$deps = [];
+        this.$deps.push(n);
+    };
+    this.$value = function(value) {
+        assert(!this.$done, 'Attempt to set active, depends node is already resolved');
+        this.value = value === undefined ? true : value;
+    };
     return this;
 }
 
@@ -514,7 +438,7 @@ xNode.init = {
             xNode.init.block.init(node);
         },
         handler: (ctx, node) => {
-            if(!node.inline) ctx.writeIndent();
+            if(!node.inline) ctx.write(true);
 
             if(node.arrow) {
                 if(node.name) ctx.write(`let ${node.name} = `);
@@ -524,7 +448,7 @@ xNode.init = {
             }
             ctx.write(`(${node.args.join(', ')}) `);
             if(node.arrow) ctx.write('=> ');
-            ctx.write(`{\n`);
+            ctx.write(`{`, true);
             ctx.indent++;
             xNode.init.block.handler(ctx, node);
             ctx.indent--;
@@ -540,10 +464,11 @@ xNode.init = {
             node.voidTag = false;
 
             node.bindName = xNode.init.node.bindName;
+            node.getLast = () => last(node.children);
             node.push = function(n) {
                 if(typeof n == 'string') {
                     let p = last(this.children);
-                    if(p && p.type == 'node:text') {
+                    if(p && p.$type == 'node:text') {
                         p.value += n;
                         return p;
                     }
@@ -574,7 +499,12 @@ xNode.init = {
                     });
                 }
 
-                let className = Array.from(node.class).join(' ');
+                let className = {};
+                node.class.forEach(sel => {
+                    if(sel.$selector) sel = ctx._ctx.css.resolve(sel);
+                    className[sel] = true;
+                });
+                className = Object.keys(className).join(' ');
                 if(className) ctx.write(` class="${className}"`);
 
                 if(node.children.length) {
@@ -611,11 +541,13 @@ xNode.init = {
     },
     template: (ctx, node) => {
         let template = ctx._ctx.xBuild(node.body);
-        let convert;
-        if(node.svg) convert = '$runtime.svgToFragment';
-        else if(!template.match(/[<>]/)) {
+        let convert, cloneNode = node.cloneNode;
+        if(node.svg) {
+            convert = '$runtime.svgToFragment';
+            cloneNode = false;
+        } else if(!template.match(/[<>]/) && !node.requireFragment) {
             convert = '$runtime.createTextNode';
-            if(!node.raw) template = htmlEntitiesToText(template);
+            cloneNode = false;
         } else {
             convert = '$$htmlToFragment';
             template = template.replace(/<!---->/g, '<>');
@@ -623,33 +555,177 @@ xNode.init = {
         if(node.raw) {
             ctx.write(ctx._ctx.Q(template));
         } else if(node.inline) {
-            ctx.write(`${convert}(\`${ctx._ctx.Q(template)}\`)`);
+            ctx.write(`${convert}(\`${ctx._ctx.Q(template)}\``);
+            if(cloneNode || node.requireFragment) {
+                let opt = (cloneNode ? 1 : 0) + (node.requireFragment ? 2 : 0);
+                ctx.write(`, ${opt})`);
+            } else ctx.write(')');
         } else {
             assert(node.name);
-            ctx.writeLine(`const ${node.name} = ${convert}(\`${ctx._ctx.Q(template)}\`);`);
+            ctx.write(true, `const ${node.name} = ${convert}(\`${ctx._ctx.Q(template)}\``);
+            if(cloneNode || node.requireFragment) {
+                let opt = (cloneNode ? 1 : 0) + (node.requireFragment ? 2 : 0);
+                ctx.write(`, ${opt});`);
+            } else ctx.write(');');
         }
     }
 };
 
+function compactDOM() {
+    let data = this.DOM;
+    const details = {
+        node: [n => n.body],
+        each: [n => n.body],
+        slot: [n => n.body],
+        fragment: [n => n.body],
+        if: [n => n.body, n => n.bodyMain],
+        await: [n => n.parts.main, n => n.parts.then, n => n.parts.catch]
+    };
 
-const htmlEntitiesToText = (text) => {
-    let entities = [
-        [/&amp;/g, '&'],
-        [/&apos;/g, '\''],
-        [/&#x27;/g, '\''],
-        [/&#x2F;/g, '/'],
-        [/&#39;/g, '\''],
-        [/&#47;/g, '/'],
-        [/&lt;/g, '<'],
-        [/&gt;/g, '>'],
-        [/&nbsp;/g, ' '],
-        [/&quot;/g, '"']
-    ];
-    entities.forEach(([k, v]) => {
-        text = text.replace(k, v);
-    });
-    return text;
-};
+    function go(body, parentNode) {
+        let i;
+
+        const getPrev = () => {
+            return i > 0 && body.length ? body[i - 1] : null;
+        };
+
+        const getNext = () => {
+            return i < body.length ? body[i + 1] : null;
+        };
+
+        for(i=0; i<body.length; i++) {
+            let node = body[i];
+            if(node.type == 'text') {
+                let next = getNext();
+                if(next && next.type == 'text') {
+                    node.value += next.value;
+                    body.splice(i + 1, 1);
+                }
+
+                if(node.value) {
+                    if(!node.value.trim()) {
+                        node.value = ' ';
+                    } else {
+                        let rx = node.value.match(/^(\s*)(.*?)(\s*)$/);
+                        if(rx) {
+                            let r = '';
+                            if(rx[1]) r += ' ';
+                            r += rx[2];
+                            if(rx[3]) r += ' ';
+                            node.value = r;
+                        }
+                    }
+                }
+            } else {
+                if(node.type == 'node' && (node.name == 'pre' || node.name == 'textarea')) continue;
+                let keys = details[node.type];
+                keys && keys.forEach(k => {
+                    let body = k(node);
+                    if(body && body.length) go(body, node);
+                });
+            }
+        }
+
+        const isTable = n => ['thead', 'tbody', 'tfoot', 'tr', 'td', 'th'].includes(n.name);
+
+        i = 0;
+        while(i < body.length) {
+            let node = body[i];
+            if(node.type == 'text' && !node.value.trim()) {
+                if(parentNode && (parentNode.name == 'table' || isTable(parentNode)) && (i == 0 || i == body.length -1)) {
+                    body.splice(i, 1);
+                    continue;
+                }
+
+                let prev = getPrev();
+                let next = getNext();
+
+                if(next?.type == 'node' && ['br', 'div'].includes(next.name)) {
+                    body.splice(i, 1);
+                    continue;
+                }
+
+                if(prev?.type == 'node' && ['br', 'div'].includes(prev.name)) {
+                    body.splice(i, 1);
+                    continue;
+                }
+
+                if(prev && next) {
+                    if(prev.type == 'node' && next.type == 'node') {
+                        if(isTable(prev) && isTable(next) ||
+                            prev.name == 'li' && next.name == 'li' ||
+                            prev.name == 'div' && next.name == 'div') {
+                                body.splice(i, 1);
+                                continue;
+                            }
+                    }
+                } else if(parentNode) {
+                    let p = prev && prev.type == 'node' && prev.name;
+                    let n = next && next.type == 'node' && next.name;
+
+                    if((p == 'td' || n == 'td') && ((parentNode.type == 'node' && parentNode.name == 'tr') || (parentNode.type == 'each'))) {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                    if((p == 'tbody' || n == 'tbody') && (parentNode.type == 'node' && parentNode.name == 'table')) {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                    if((p == 'li' || n == 'li') && (parentNode.type == 'node' && parentNode.name == 'ul')) {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                    if(parentNode.type == 'node' && parentNode.name == 'div') {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                    if(parentNode.type == 'node' && (prev && prev.type == 'each' || next && next.type == 'each')) {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                    if(parentNode.type == 'node' && parentNode.name == 'button' && (!p || !n)) {
+                        body.splice(i, 1);
+                        continue;
+                    }
+                }
+            }
+            i++;
+        }
+
+    }
+
+    function trimNodes(srcNodes) {
+        let nodes = srcNodes.slice();
+        let ex = [];
+        while(nodes.length) {
+            let n = nodes[0];
+            if(n.type == 'fragment' || n.type == 'comment') {
+                ex.push(n);
+                nodes.shift();
+                continue;
+            }
+            if(n.type == 'text' && !n.value.trim()) nodes.shift();
+            else break;
+        }
+        nodes = [...ex, ...nodes];
+        ex = [];
+        while(nodes.length) {
+            let n = last(nodes);
+            if(n.type == 'fragment' || n.type == 'comment') {
+                ex.push(n);
+                nodes.pop();
+                continue;
+            }
+            if(n.type == 'text' && !n.value.trim()) nodes.pop();
+            else break;
+        }
+        return [...nodes, ...ex];
+    }
+
+    data.body = trimNodes(data.body);
+
+    go(data.body);
+}
 
 function parse() {
     let source = this.source;
@@ -738,7 +814,7 @@ function parse() {
                 }
             }
             if(begin) {
-                if(a.match(/[\da-zA-Z^\-]/)) {
+                if(a.match(/[\da-zA-Z^]/)) {
                     name += a;
                     continue;
                 } else {
@@ -1100,13 +1176,11 @@ function parse$1() {
         watchers: [],
         imports: [],
         importedNames: [],
-        autosubscribeNames: [],
         props: [],
         rootVariables: {},
         rootFunctions: {},
         readOnly: false,
-        autoimport: {},
-        comments: []
+        autoimport: {}
     };
     if(source) {
         this.script.readOnly = this.scriptNodes.some(n => n.attributes.some(a => a.name == 'read-only'));
@@ -1120,11 +1194,7 @@ function parse$1() {
                 return rx[1] + '$$_noCheck;';
             }).join('\n');
         }
-        const onComment = (isBlockComment, value, start, end) => {
-            if(isBlockComment) return;
-            this.script.comments.push({start, end, value});
-        };
-        this.script.ast = acorn.parse(source, {sourceType: 'module', ecmaVersion: 12, onComment});
+        this.script.ast = acorn.parse(source, {sourceType: 'module', ecmaVersion: 12});
 
         if(source.includes('$props')) this.require('$props');
         if(source.includes('$attributes')) this.require('$attributes');
@@ -1285,7 +1355,7 @@ function transform() {
 
     const makeWatch = (n) => {
         function assertExpression(n) {
-            if(['Identifier', 'TemplateLiteral', 'Literal'].includes(n.type)) return;
+            if(n.type == 'Identifier') return;
             if(n.type.endsWith('Expression')) return;
             throw 'Wrong expression';
         }
@@ -1331,31 +1401,14 @@ function transform() {
     let lastPropIndex = null;
     let constantProps = true;
 
-    if(result.comments.length) {
-        result.comments.forEach(c => {
-            for(let i = 1; i < ast.body.length; i++) {
-                let p = ast.body[i-1];
-                let n = ast.body[i];
-                if(p.end < c.start && c.start < n.start) {
-                    p._comment = c.value;
-                    return;
-                }
-            }
-        });
-    }
-
     ast.body.forEach(n => {
         if(n.type == 'ImportDeclaration') {
             imports.push(n);
             n.specifiers.forEach(s => {
                 if(s.local.type != 'Identifier') return;
-                let name = s.local.name;
-                result.importedNames.push(name);
-                if(name[0].toLowerCase() == name[0]) {
-                    if(!n._comment || !n._comment.includes('!no-autosubscribe')) result.autosubscribeNames.push(s.local.name);
-                }
+                result.importedNames.push(s.local.name);
                 if(s.type != 'ImportDefaultSpecifier') return;
-                result.imports.push(name);
+                result.imports.push(s.local.name);
             });
             return;
         } else if(n.type == 'ExportNamedDeclaration') {
@@ -1389,11 +1442,12 @@ function transform() {
         resultBody.push(n);
     });
 
+    this.glob.component.$handler = (ctx, n) => {
+        if(this.inuse.$component || n.value) ctx.writeLine('const $component = $runtime.current_component;');
+    };
+    this.module.head.push(this.glob.component);
+
     let header = [];
-    header.push(rawNode(() => {
-        if(this.inuse.$component) return 'const $component = $runtime.current_component;';
-    }));
-
     header.push(rawNode(() => {
         if(this.inuse.$events) return 'const $events = $option.events || {};';
     }));
@@ -1403,7 +1457,7 @@ function transform() {
             if(this.inuse.$props) return 'let $props = $option.props || {};';
         }));
 
-        if(!constantProps && !this.script.readOnly) this.require('apply', '$cd');
+        if(!constantProps && !this.script.readOnly) this.require('apply');
 
         resultBody.splice(lastPropIndex, 0, rawNode(() => {
             let code = [];
@@ -1462,11 +1516,14 @@ function transform() {
         if(this.inuse.$onDestroy) return `const $onDestroy = fn => $component._d.push(fn);`;
     }));
 
-    if(this.config.autoSubscribe && result.autosubscribeNames.length) {
-        if(!this.script.readOnly) this.require('$cd', 'apply');
-        header.push(rawNode(() => {
-            if(this.inuse.apply) return `$runtime.autoSubscribe(${result.autosubscribeNames.join(', ')});`;
-        }));
+    if(this.config.autoSubscribe) {
+        let names = result.importedNames.filter(name => name[0].toLowerCase() == name[0]);
+        if(names.length) {
+            if(!this.script.readOnly) this.require('$cd', 'apply');
+            header.push(rawNode(() => {
+                if(this.inuse.apply) return `$runtime.autoSubscribe(${names.join(', ')});`;
+            }));
+        }
     }
 
     if(!rootFunctions.$emit) {
@@ -1554,21 +1611,38 @@ xNode.init.ast = (ctx, node) => {
     let code = astring.generate({
         type: 'CustomBlock',
         body: node.body
-    }, {generator, startingIndentLevel: ctx.indent});
-    ctx.write(code);
+    }, {generator, startingIndentLevel: 0});
+    code.split(/\n/).forEach(s => {
+        if(s) ctx.write(true, s);
+    });
 };
 
 function buildRuntime() {
-    let runtime = xNode('block', {scope: true});
-    runtime.push(xNode((ctx) => {
-        if(this.inuse.$cd) ctx.writeLine('let $cd = $component.$cd;');
-    }));
+    let runtime = xNode('block', {scope: true, $compile: []});
+
+    let rootCD = this.glob.rootCD;
+    rootCD.$handler = (ctx, n) => {
+        n.$value(!!n.$deps[0].value);
+        if(n.value) {
+            ctx.writeLine('let $cd = $component.$cd;');
+            this.glob.component.$value(true);
+        }
+    };
+    runtime.push(rootCD);
+    this.glob.component.$depends(rootCD);
 
-    let bb = this.buildBlock(this.DOM, {inline: true});
-    runtime.push(xNode('template', {
-        name: '$parentElement',
-        body: bb.tpl,
-        svg: bb.svg
+    let bb = this.buildBlock(this.DOM, {
+        inline: true,
+        template: {
+            name: '$parentElement',
+            cloneNode: true
+        }
+    });
+    bb.requireCD && rootCD.$depends(bb.requireCD);
+    runtime.push(bb.template);
+    runtime.push(xNode('root-event', (ctx) => {
+        if(!this.inuse.rootEvent) return;
+        ctx.write(true, `const $$addRootEvent = $runtime.makeRootEvent($parentElement);`);
     }));
     runtime.push(bb.source);
 
@@ -1591,8 +1665,10 @@ function buildRuntime() {
         }
     }));
 
-    runtime.push(xNode('bind-component-element', (ctx) => {
-        if(ctx.inuse.$insertElementByOption) ctx.writeLine('$runtime.$insertElementByOption($element, $option, $parentElement);');
+    runtime.push(xNode('bind-component-element', {
+        $deps: [this.glob.componentFn]
+    }, (ctx) => {
+        if(this.glob.componentFn.value == 'thin') ctx.writeLine(`return {$dom: $parentElement};`);
         else ctx.writeLine('return $parentElement;');
     }));
 
@@ -1626,17 +1702,34 @@ function buildRuntime() {
 
 function buildBlock(data, option={}) {
     let rootTemplate = xNode('node', {inline: true, _ctx: this});
+    let rootSVG = false, requireFragment = option.template?.requireFragment;
     let binds = xNode('block');
     let result = {};
+    let requireCD = result.requireCD = xNode('require-cd', false);
     let inuse = Object.assign({}, this.inuse);
 
+    if(!option.parentElement) option.parentElement = '$parentElement';
+
+    if(option.each?.blockPrefix) binds.push(option.each.blockPrefix);
+
+    if(option.allowSingleBlock && data.body.length == 1) {
+        let n = data.body[0];
+        if(n.type == 'node' && n.name.match(/^[A-Z]/)) {
+            let component = this.makeComponent(n, requireCD);
+            return {
+                requireCD,
+                singleBlock: component.bind
+            }
+        }
+    }
+
     const go = (data, isRoot, tpl) => {
         let body = data.body.filter(n => {
             if(n.type == 'script' || n.type == 'style' || n.type == 'slot') return false;
             if(n.type == 'comment' && !this.config.preserveComments) return false;
             if(n.type == 'fragment') {
                 try {
-                    let f = this.makeFragment(n);
+                    let f = this.makeFragment(n, requireCD);
                     f && binds.push(f);
                 } catch (e) {
                     wrapException(e, n);
@@ -1649,7 +1742,7 @@ function buildBlock(data, option={}) {
         if(tpl.name == 'table') {
             let result = [], tbody = null;
             body.forEach(n => {
-                if(n.type == 'node' && ['thead', 'tbody', 'tfoot', 'colgroup'].includes(n.name)) {
+                if(n.type == 'node' && ['thead', 'tbody', 'tfoot'].includes(n.name)) {
                     result.push(n);
                     tbody = null;
                     return;
@@ -1681,11 +1774,29 @@ function buildBlock(data, option={}) {
                 if(svgElements[node.name]) svg = true;
                 else return other = true;
             });
-            if(svg && !other) result.svg = true;
+            if(svg && !other) rootSVG = true;
         }
 
+        let lastStatic;
+
+        const placeLabel = name => {
+            let el;
+            if(lastStatic) {
+                el = lastStatic;
+                el.label = true;
+                lastStatic = null;
+            } else {
+                el = xNode('node:comment', {label: true, value: name});
+                tpl.push(el);
+            }
+            return el;
+        };
+
         const bindNode = (n) => {
             if(n.type === 'text') {
+                let prev = tpl.getLast();
+                if(prev?.$type == 'node:text' && prev._boundName) tpl.push(xNode('node:comment', {label: true}));
+
                 if(n.value.indexOf('{') >= 0) {
                     const pe = this.parseText(n.value);
                     this.detectDependency(pe);
@@ -1695,13 +1806,18 @@ function buildBlock(data, option={}) {
                         textNode = tpl.push(pe.staticText);
                     } else {
                         textNode = tpl.push(' ');
-                        binds.push(xNode('bindText', {
+                        let bindText = xNode('bindText', {
+                            $deps: [this.glob.apply],
                             el: textNode.bindName(),
                             exp: pe.result
                         }, (ctx, n) => {
-                            if(this.inuse.$cd) ctx.writeLine(`$runtime.bindText($cd, ${n.el}, () => ${n.exp});`);
-                            else ctx.writeLine(`${n.el}.textContent = ${n.exp};`);
-                        }));
+                            if(this.glob.apply.value) {
+                                requireCD.$value(true);
+                                ctx.writeLine(`$runtime.bindText($cd, ${n.el}, () => ${n.exp});`);
+                            } else ctx.writeLine(`${n.el}.textContent = ${n.exp};`);
+                        });
+                        binds.push(bindText);
+                        requireCD.$depends(bindText);
                     }
 
                     pe.parts.forEach(p => {
@@ -1713,32 +1829,46 @@ function buildBlock(data, option={}) {
                         ]}));
                     });
 
+                    lastStatic = textNode;
                 } else {
-                    tpl.push(n.value);
+                    lastStatic = tpl.push(n.value);
                 }
             } else if(n.type === 'template') {
+                lastStatic = null;
                 tpl.push(n.openTag);
                 tpl.push(n.content);
                 tpl.push('</template>');
             } else if(n.type === 'node') {
                 if(n.name == 'malina' && !option.malinaElement) {
                     let b;
-                    if(n.elArg == 'portal') b = this.attachPortal(n);
-                    else b = this.attachHead(n);
+                    if(n.elArg == 'portal') b = this.attachPortal(n, requireCD);
+                    else b = this.attachHead(n, requireCD);
                     b && binds.push(b);
                     return;
                 }
                 if(n.name == 'component' || n.name.match(/^[A-Z]/)) {
                     if(n.name == 'component' || !n.elArg) {
                         // component
-                        let el = xNode('node:comment', {label: true, value: n.name});
-                        tpl.push(el);
-                        let b = this.makeComponent(n, el);
-                        binds.push(b.bind);
+                        if(isRoot) requireFragment = true;
+                        let el = placeLabel(n.name);
+
+                        if(n.name == 'component') {
+                            // dyn-component
+                            binds.push(this.makeComponentDyn(n, requireCD, el));
+                        } else {
+                            let component = this.makeComponent(n, requireCD);
+                            binds.push(xNode('attach-component', {
+                                component: component.bind,
+                                el: el.bindName()
+                            }, (ctx, n) => {
+                                ctx.write(true, `$runtime.attachBlock($cd, ${n.el}, `);
+                                ctx.add(n.component);
+                                ctx.write(')');
+                            }));
+                        }
                     } else {
-                        let el = xNode('node:comment', {label: true, value: `exported ${n.elArg}`});
-                        tpl.push(el);
-                        let b = this.attchExportedFragment(n, el, n.name);
+                        let el = placeLabel(`exported ${n.elArg}`);
+                        let b = this.attchExportedFragment(n, el, n.name, requireCD);
                         b && binds.push(b);
                     }
                     return;
@@ -1747,33 +1877,52 @@ function buildBlock(data, option={}) {
                     let slotName = n.elArg;
                     if(!slotName) {
                         if(option.context == 'fragment') {
-                            let el = xNode('node:comment', {label: true, value: 'fragment-slot'});
-                            tpl.push(el);
-                            binds.push(this.attachFragmentSlot(el));
+                            let el = placeLabel('fragment-slot');
+                            binds.push(this.attachFragmentSlot(el, requireCD));
                             return;
                         } else slotName = 'default';
                     }
-                    let el = xNode('node:comment', {label: true, value: slotName});
-                    tpl.push(el);
-                    binds.push(this.attachSlot(slotName, el, n));
+
+                    let el = placeLabel(slotName);
+                    let slot = this.attachSlot(slotName, n, requireCD);
+
+                    binds.push(xNode('attach-slot', {
+                        $deps: [requireCD],
+                        $compile: [slot],
+                        el: el.bindName(),
+                        slot,
+                        requireCD
+                    }, (ctx, n) => {
+                        if(n.requireCD.value) ctx.write(true, `$runtime.attachBlock($cd, ${n.el}, `);
+                        else ctx.write(true, `$runtime.attachBlock($component, ${n.el}, `);
+                        ctx.add(n.slot);
+                        ctx.write(');', true);
+                    }));
                     return;
                 }
                 if(n.name == 'fragment') {
+                    requireCD.$value(true);
                     assert(n.elArg, 'Fragment name is required');
-                    let el = xNode('node:comment', {label: true, value: `fragment ${n.elArg}`});
-                    tpl.push(el);
-                    let b = this.attachFragment(n, el);
-                    b && binds.push(b);
+                    let el = placeLabel(`fragment ${n.elArg}`);
+                    binds.push(xNode('attach-fragment', {
+                        el: el.bindName(),
+                        fragment: this.attachFragment(n)
+                    }, (ctx, n) => {
+                        ctx.write(true, `$runtime.attachBlock($cd, ${n.el}, `);
+                        ctx.add(n.fragment);
+                        ctx.write(`)`);
+                    }));
                     return;
                 }
 
                 let el = xNode('node', {name: n.name});
                 if(option.oneElement) el._boundName = option.oneElement;
                 tpl.push(el);
+                lastStatic = el;
 
                 if(n.attributes.some(a => a.name.startsWith('{...'))) {
                     n.spreading = [];
-                    this.require('$cd');
+                    requireCD.$value(true);
                     binds.push(xNode('spread-to-element', {
                         el: el.bindName(),
                         props: n.spreading
@@ -1783,7 +1932,7 @@ function buildBlock(data, option={}) {
                 }
                 let bindTail = [];
                 n.attributes.forEach(p => {
-                    let b = this.bindProp(p, n, el);
+                    let b = this.bindProp(p, n, el, requireCD);
                     if(b) {
                         if(b.bind) binds.push(b.bind);
                         if(b.bindTail) bindTail.push(b.bindTail);
@@ -1815,7 +1964,9 @@ function buildBlock(data, option={}) {
                     go(n, false, el);
                 }
             } else if(n.type === 'each') {
+                requireCD.$value(true);
                 if(data.type == 'node' && data.body.length == 1) {
+                    lastStatic = null;
                     let eachBlock = this.makeEachBlock(n, {
                         elName: tpl.bindName(),
                         onlyChild: true
@@ -1823,17 +1974,15 @@ function buildBlock(data, option={}) {
                     binds.push(eachBlock.source);
                     return;
                 } else {
-                    let element = xNode('node:comment', {label: true, value: `${n.value}`});
-                    tpl.push(element);
+                    if(isRoot) requireFragment = true;
+                    let element = placeLabel(n.value);
                     let eachBlock = this.makeEachBlock(n, {elName: element.bindName()});
                     binds.push(eachBlock.source);
                     return;
                 }
             } else if(n.type === 'if') {
-                let element = xNode('node:comment', {label: true, value: n.value});
-                tpl.push(element);
-                let ifBlock = this.makeifBlock(n, element);
-                binds.push(ifBlock.source);
+                if(isRoot) requireFragment = true;
+                binds.push(this.makeifBlock(n, placeLabel(n.value), requireCD));
                 return;
             } else if(n.type === 'systag') {
                 let r = n.value.match(/^@(\w+)\s+(.*)$/s);
@@ -1841,18 +1990,20 @@ function buildBlock(data, option={}) {
                 let exp = r[2];
 
                 if(name == 'html') {
-                    let el = xNode('node:comment', {label: true, value: 'html'});
-                    tpl.push(el);
-                    binds.push(this.makeHtmlBlock(exp, el));
+                    if(isRoot) requireFragment = true;
+                    let el = placeLabel('html');
+                    binds.push(this.makeHtmlBlock(exp, el, requireCD));
                     return;
                 } else throw 'Wrong tag';
             } else if(n.type === 'await') {
-                let el = xNode('node:comment', {label: true, value: n.value});
-                tpl.push(el);
-                binds.push(this.makeAwaitBlock(n, el));
+                if(isRoot) requireFragment = true;
+                requireCD.$value(true);
+                let el = placeLabel(n.value);
+                let r = this.makeAwaitBlock(n, el);
+                r && binds.push(r);
                 return;
             } else if(n.type === 'comment') {
-                tpl.push(n.content);
+                lastStatic = tpl.push(n.content);
             }
         };
         body.forEach(node => {
@@ -1865,57 +2016,111 @@ function buildBlock(data, option={}) {
     };
     go(data, true, rootTemplate);
     if(option.protectLastTag) {
-        let l = last(rootTemplate.children);
-        if(l && l.type == 'node:comment' && l.label) {
+        let l = rootTemplate.getLast();
+        if(l?.label) {
             rootTemplate.push(xNode('node:comment', {value: ''}));
         }
     }
 
-    result.tpl = rootTemplate;
-
+    let innerBlock = null;
     if(binds.body.length) {
-        const innerBlock = xNode('block');
+        binds.push(requireCD);
+        innerBlock = xNode('block');
         if(!option.oneElement) {
-            innerBlock.push(xNode('bindNodes', ctx => {
+            innerBlock.push(xNode('bindNodes', {
+                tpl: rootTemplate,
+                root: option.parentElement,
+                single: rootTemplate.children.length == 1 && !requireFragment
+            }, (ctx, n) => {
     
                 const gen = (parent, parentName) => {
                     for(let i=0; i < parent.children.length; i++) {
                         let node = parent.children[i];
                         let diff = i == 0 ? '[$runtime.firstChild]' : `[$runtime.childNodes][${i}]`;
     
-                        if(node._boundName) ctx.writeLine(`let ${node._boundName} = ${parentName() + diff};`);
+                        if(node._boundName) ctx.write(true, `let ${node._boundName} = ${parentName() + diff};`);
                         if(node.children) gen(node, () => {
                             if(node._boundName) return node._boundName;
                             return parentName() + diff;
                         });
                     }
                 };
-                gen(rootTemplate, () => '$parentElement');
+                if(n.single) {
+                    let node = n.tpl.children[0];
+                    if(node._boundName) ctx.write(true, `let ${node._boundName} = ${n.root};`);
+                    if(node.children) gen(node, () => n.root);
+                } else {
+                    gen(n.tpl, () => n.root);
+                }
             }));
         }
         innerBlock.push(binds);
 
         if(option.inline) {
             result.source = innerBlock;
-        } else if(option.inlineFunction) {
-            result.source = xNode('function', {
-                inline: true,
-                arrow: true,
-                args: ['$cd', '$parentElement'].concat(option.args || []),
-                body: [innerBlock]
-            });
-        } else {
-            result.name = '$$build' + (this.uniqIndex++);
-            result.source = xNode('function', {
-                name: result.name,
-                args: ['$cd', '$parentElement'].concat(option.args || []),
-                body: [innerBlock]
-            });
         }
     } else {
+        result.requireCD.$done = true;
         result.name = '$runtime.noop';
         result.source = null;
     }
+
+    if(!option.inline) {
+        let template = xNode('template', {
+            body: rootTemplate,
+            svg: rootSVG,
+            requireFragment
+        });
+        if(option.template) Object.assign(template, option.template);
+        else template.inline = true;
+
+        result.block = xNode('block', {
+            $compile: [innerBlock, requireCD],
+            $deps: [requireCD],
+            requireCD,
+            innerBlock,
+            tpl: template,
+            each: option.each,
+            parentElement: option.parentElement
+        }, (ctx, n) => {
+            if(n.each && !ctx.isEmpty(n.innerBlock)) {
+                if(n.requireCD.value) ctx.write(`$runtime.makeEachBlock(`);
+                else ctx.write(`$runtime.makeStaticEachBlock(`);
+            } else {
+                if(n.requireCD.value) ctx.write(`$runtime.makeBlock(`);
+                else ctx.write(`$runtime.makeStaticBlock(`);
+            }
+            ctx.add(n.tpl);
+            if(!ctx.isEmpty(n.innerBlock)) {
+                if(n.each) {
+                    if(n.requireCD.value) ctx.write(`, ($cd, ${n.parentElement}, ${n.each.itemName}, ${n.each.indexName}) => {`, true);
+                    else ctx.write(`, (${n.parentElement}, ${n.each.itemName}, ${n.each.indexName}) => {`, true);
+                } else {
+                    let extra = option.extraArguments ? ', ' + option.extraArguments.join(', ') : '';
+                    if(n.requireCD.value) ctx.write(`, ($cd, ${n.parentElement}${extra}) => {`, true);
+                    else ctx.write(`, (${n.parentElement}${extra}) => {`, true);
+                }
+                ctx.indent++;
+                ctx.add(n.innerBlock);
+                if(n.each?.rebind) {
+                    ctx.write(true, `return `);
+                    ctx.add(n.each.rebind);
+                    ctx.write(`;`, true);
+                }                ctx.indent--;
+                ctx.write(true, `}`);
+            }
+            ctx.write(`)`);
+        });
+    } else {
+        result.template = xNode('template', {
+            body: rootTemplate,
+            svg: rootSVG,
+            requireFragment
+        });
+        if(option.template) Object.assign(result.template, option.template);
+        else result.template.inline = true;
+    }
+
     result.inuse = {};
     for(let k in this.inuse) {
         result.inuse[k] = this.inuse[k] - (inuse[k] || 0);
@@ -3868,7 +4073,7 @@ function processCSS() {
                             }
                         } else cleanSelectorItems.push(s);
                     }
-                    while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(last(cleanSelectorItems).type)) cleanSelectorItems.pop();
+                    while(cleanSelectorItems.length && last(cleanSelectorItems).type == 'WhiteSpace') cleanSelectorItems.pop();
                     if(!cleanSelectorItems.length || globalBlock) {  // fully global?
                         assert(origin.length);
                         fullSelector.children = origin;
@@ -3893,7 +4098,8 @@ function processCSS() {
                             cleanSelector,
                             isSimple,
                             source: [],
-                            fullyGlobal: origin.every(i => i.global)
+                            fullyGlobal: origin.every(i => i.global),
+                            hashedSelectors: []
                         };
                     }
 
@@ -3901,17 +4107,18 @@ function processCSS() {
                         assert(sobj.isSimple);
                         if(!sobj.external) sobj.external = emptyBlock ? true : genId$1();
                     } else if(!sobj.local) {
-                        if(sobj.isSimple) sobj.local = genId$1();
-                        else sobj.local = self.id;
+                        sobj.local = true;
                     }
 
-                    let hash = external ? sobj.external : sobj.local;
                     if(emptyBlock) fullSelector.emptyBlock = true;
                     sobj.source.push(fullSelector);
 
                     let hashed = origin.slice();
+                    hashed._external = external;
+                    sobj.hashedSelectors.push(hashed);
+
                     const insert = (i) => {
-                        hashed.splice(i, 0, {type: "ClassSelector", loc: null, name: hash, __hash: true});
+                        hashed.splice(i, 0, {type: "ClassSelector", loc: null, name: null, __hash: true});
                     };
 
                     for(let i=hashed.length-1;i>=0;i--) {
@@ -3939,6 +4146,7 @@ function processCSS() {
     self.markAsExternal = (name) => {
         let sobj = selectors['.' + name];
         if(!sobj) selectors['.' + name] = sobj = {isSimple: true, cleanSelector: '.' + name};
+        assert(!sobj.resolved);
         if(!sobj.external) sobj.external = true;
         active = true;
     };
@@ -3952,7 +4160,36 @@ function processCSS() {
         });
     };
 
+    let _hashesResolved = false;
+    const resolveHashes = () => {
+        if(_hashesResolved) return;
+        _hashesResolved = true;
+        Object.values(selectors).forEach(sel => {
+            if(!sel.hashedSelectors) return;
+            if(sel.resolved) return;
+            sel.resolved = true;
+            if(sel.external) {
+                if(sel.local === true) {
+                    if(self.passingClass) sel.local = genId$1();
+                    else sel.local = self.id;
+                }            } else {
+                assert(sel.local === true);
+                if(self.passingClass) sel.local = genId$1();
+                else sel.local = self.id;
+            }
+            sel.hashedSelectors.forEach(hashed => {
+                let hash = hashed._external ? sel.external : sel.local;
+                assert(hash);
+                hashed.forEach(n => {
+                    if(!n.__hash) return;
+                    n.name = hash;
+                });
+            });
+        });
+    };
+
     self.getClassMap = () => {
+        resolveHashes();
         let classMap = {};
         let metaClass = {};
         Object.values(selectors).forEach(sel => {
@@ -3977,6 +4214,7 @@ function processCSS() {
         });
 
         Object.values(selectors).forEach(sel => {
+            sel.$selector = true;
             if(sel.fullyGlobal || !sel.local) return;
             let selected;
             try {
@@ -3987,17 +4225,30 @@ function processCSS() {
                 throw e;
             }
             selected.forEach(s => {
-                s.node.__node.classes.add(sel.local);
-                s.lvl.forEach(l => l.__node.classes.add(sel.local));
+                s.node.__node.classes.add(sel);
+                s.lvl.forEach(l => l.__node.classes.add(sel));
             });
         });
     };
 
+    self.resolve = sel => {
+        resolveHashes();
+        assert(sel.resolved);
+        if(sel.external) {
+            assert(sel.external !== true);
+            return sel.external;
+        }
+        assert(sel.local && sel.local !== true);
+        return sel.local;
+    };
+
     self.getContent = function() {
         removeBlocks.forEach(node => {
             let i = node.parent.children.indexOf(node);
             if(i>=0) node.parent.children.splice(i, 1);
         });
+        resolveHashes();
+
         return astList.map(ast => csstree.generate(ast)).join('');
     };
 }
@@ -4023,10 +4274,8 @@ function makeDom(data) {
             //if(e.name[0].match(/[A-Z]/)) return;
             let n = new Node(e.name, {__node: e});
             e.attributes.forEach(a => {
-                if(a.name == 'class') {
-                    if(a.value != null) n.className += ' ' + a.value;
-                    n.attributes[a.name] = a.value;
-                } else if(a.name == 'id') n.attributes.id = n.id = a.value;
+                if(a.name == 'class') n.className += ' ' + a.value;
+                else if(a.name == 'id') n.id = a.value;
                 else if(a.name.startsWith('class:')) {
                     n.className += ' ' + a.name.substring(6);
                 } else n.attributes[a.name] = a.value;
@@ -4068,10 +4317,6 @@ Node.prototype.getAttribute = function(n) {
     return this.attributes[n];
 };
 
-Node.prototype.hasAttribute = function(n) {
-    return n in this.attributes;
-};
-
 Node.prototype.appendChild = function(n) {
     n.parentElement = this;
     this.childNodes.push(n);
@@ -4110,22 +4355,21 @@ Node.prototype.getElementsByClassName = function(names) {
     return result;
 };
 
-function makeComponent(node, element) {
+function makeComponent(node, requireCD) {
+    this.require('apply');
+
     let propList = node.attributes;
-    let forwardAllEvents = false;
 
-    this.require('$context', '$cd');
+    this.require('$context');
+    requireCD.$value(true);  // FIX
 
-    let options = [];
-    let dynamicComponent;
     let reference = null;
     let propsFn = [], propsSetter = [], $class=[], staticProps = true;
+    let slotBlocks = [];
+    let anchorBlocks = [];
 
     let componentName = node.name;
-    if(componentName == 'component') {
-        assert(node.elArg);
-        dynamicComponent = node.elArg[0] == '{' ? unwrapExp(node.elArg) : node.elArg;
-    } else if(this.config.autoimport) {
+    if(componentName != 'component' && this.config.autoimport) {
         let imported = this.script.autoimport[componentName] || this.script.importedNames.includes(componentName)
             || this.script.rootVariables[componentName] || this.script.rootFunctions[componentName];
 
@@ -4135,30 +4379,12 @@ function makeComponent(node, element) {
         }
     }
 
-    let passOption = {};
-    let head = xNode('block');
-
-    head.push(xNode('events', ctx => {
-        if(forwardAllEvents) {
-            this.require('$events');
-            ctx.writeLine('let events = {...$events};');
-        } else if(passOption.events) {
-            ctx.writeLine('let events = {};');
-        }
-    }));
-
-    head.push(xNode('slots', ctx => {
-        if(passOption.slots) ctx.writeLine('let slots = {};');
-    }));
-
-    head.push(xNode('anchor', ctx => {
-        if(passOption.anchor) ctx.writeLine('let anchor = {};');
-    }));
-
-    let _boundEvents = {};
-    const boundEvent = (name) => {
-        if(!_boundEvents[name]) _boundEvents[name] = forwardAllEvents ? 1 : 0;
-        _boundEvents[name]++;
+    // events
+    let forwardAllEvents = false;
+    let events = {};
+    const passEvent = (name, bind) => {
+        if(!events[name]) events[name] = [];
+        events[name].push(bind);
     };
 
     if(node.body && node.body.length) {
@@ -4186,12 +4412,11 @@ function makeComponent(node, element) {
         Object.values(slots).forEach(slot => {
             if(!slot.body.length) return;
             assert(isSimpleName(slot.name));
-            passOption.slots = true;
 
             let props;
-            let rx = slot.value && slot.value.match(/^#slot\S*\s+(.*)$/s);
+            let rx = slot.value && slot.value.match(/^#slot\S*\s+(.*)$/);
             if(rx) {
-                props = rx[1].trim().split(/\s*,\s*/);
+                props = rx[1].trim().split(/[\s,]+/);
                 assert(props.length);
                 props.forEach(n => {
                     assert(isSimpleName(n), 'Wrong prop for slot');
@@ -4202,7 +4427,7 @@ function makeComponent(node, element) {
             if(contentNodes.length == 1 && contentNodes[0].type == 'node' && contentNodes[0].name == 'slot') {
                 let parentSlot = contentNodes[0];
                 if(!parentSlot.body || !parentSlot.body.length) {
-                    head.push(xNode('empty-slot', {
+                    slotBlocks.push(xNode('empty-slot', {
                         childName: slot.name,
                         parentName: parentSlot.elArg || 'default'
                     }, (ctx, n) => {
@@ -4213,93 +4438,68 @@ function makeComponent(node, element) {
             }
 
             if(props) this.require('apply');
-            this.require('$cd');
+            requireCD.$value(true);  // FIXME
 
             let block = this.buildBlock(slot, {inline: true});
 
-            const template = xNode('template', {
-                body: block.tpl,
-                svg: block.svg,
-                inline: true
-            });
-
-            head.push(xNode('slot', {
+            slotBlocks.push(xNode('slot', {
+                $deps: [this.glob.apply],
                 name: slot.name,
-                template,
+                template: block.template,
                 bind: block.source,
                 componentName,
                 props
             }, (ctx, n) => {
                 if(n.bind) {
-                    ctx.write(true, `slots.${n.name} = $runtime.makeSlot($cd, ($cd, $context, $instance_${n.componentName}`);
-                    if(n.props) ctx.write(`, props`);
-                    ctx.write(`) => {\n`);
-                    ctx.goIndent(() => {
-                        if(n.bind) {
-                            let push = n.props && ctx.inuse.apply;
-                            ctx.write(true, `let $parentElement = `);
-                            ctx.build(n.template);
-                            ctx.write(`;\n`);
-                            if(n.props) {
-                                ctx.writeLine(`let {${n.props.join(', ')}} = props;`);
-                                if(push) ctx.writeLine(`let push = () => ({${n.props.join(', ')}} = props, $$apply());`);
-                            }
-                            ctx.build(n.bind);
-                            if(push) ctx.writeLine(`return {push, el: $parentElement};`);
-                            else ctx.writeLine(`return $parentElement;`);
-                        } else {
-                            ctx.write(true, `return `);
-                            ctx.build(n.template);
-                            ctx.write(`;\n`);
-                        }
-                    });
-                    ctx.writeLine(`});`);
+                    ctx.write(true, `${n.name}: $runtime.makeSlot($cd, `);
+                    ctx.add(n.template);
+                    ctx.write(`, ($cd, $parentElement, $context, $instance_${n.componentName}`);
+                    if(n.props) ctx.write(`, $localProps`);
+                    ctx.write(`) => {`, true);
+                    ctx.indent++;
+                    if(n.props) ctx.write(true, `let {${n.props.join(', ')}} = $localProps;`);
+                    ctx.add(n.bind);
+
+                    if(n.props && this.glob.apply.value) ctx.write(true, `return ($localProps) => ({${n.props.join(', ')}} = $localProps, $$apply());`);
+                    ctx.indent--;
+                    ctx.writeLine(`})`);
                 } else {
-                    ctx.write(true, `slots.${n.name} = $runtime.makeSlotStatic(() => `);
-                    ctx.build(n.template);
-                    ctx.write(`);\n`);
+                    ctx.write(true, `${n.name}: $runtime.makeStaticBlock(`);
+                    ctx.add(n.template);
+                    ctx.write(')');
                 }
             }));
         });
 
         anchors.forEach(n => {
-            passOption.anchor = true;
-            let block = this.buildBlock({body: [n]}, {inline: true, oneElement: 'el', bindAttributes: true});
+            let bb = this.buildBlock({body: [n]}, {inline: true, oneElement: 'el', bindAttributes: true});
+            let block = bb.source;
             let name = n.name.slice(1) || 'default';
             assert(isSimpleName(name));
-            head.push(xNode('anchor', {
+
+            anchorBlocks.push(xNode('anchor', {
+                $compile: [block],
+                $deps: [bb.requireCD],
                 name,
-                source: block.source,
-                $cd: block.inuse.$cd
+                block
             }, (ctx, n) => {
-                ctx.writeLine(`anchor.${n.name} = (el) => {`);
-                ctx.goIndent(() => {
-                    if(n.$cd) {
-                        ctx.writeLine(`let $childCD = $cd.new();`);
-                        ctx.writeLine(`{`);
-                        ctx.goIndent(() => {
-                            ctx.writeLine(`let $cd = $childCD;`);
-                            ctx.build(n.source);
-                        });
-                        ctx.writeLine(`}`);
-                        ctx.writeLine(`return () => {$childCD.destroy();}`);
-                    } else {
-                        ctx.build(n.source);
-                    }
-                });
-                ctx.writeLine(`}`);
+                let useCD = n.$deps[0].value;
+                if(useCD) ctx.write(`${n.name}: {$: ($cd, el) => {`);
+                else ctx.write(`${n.name}: (el) => {`);
+                ctx.indent++;
+                ctx.build(n.block);
+                ctx.indent--;
+                if(useCD) ctx.write(true, `}}`);
+                else ctx.write(true, `}`);
             }));
         });
     }
 
-    propList = propList.filter(prop => {
-        let name = prop.name;
-        let value = prop.value;
+    propList = propList.filter(({name}) => {
         if(name == '@@') {
             forwardAllEvents = true;
             return false;
         } else if(name == 'this') {
-            dynamicComponent = unwrapExp(value);
             return false;
         }
         return true;
@@ -4349,35 +4549,21 @@ function makeComponent(node, element) {
             if(name.startsWith('@@')) {
                 let event = name.substring(2);
                 assert(!value);
-                passOption.events = true;
-                boundEvent(event);
                 this.require('$events');
-                head.push(xNode('forwardEvent', {
+                passEvent(event, xNode('forwardEvent', {
                     event
-                }, (ctx, data) => {
-                    if(_boundEvents[data.event] > 1) ctx.writeLine(`$runtime.$$addEventForComponent(events, '${data.event}', $events.${data.event});`);
-                    else ctx.writeLine(`events.${data.event} = $events.${data.event};`);
+                }, (ctx, n) => {
+                    ctx.write(`$events.${n.event}`);
                 }));
                 return;
             }
 
             let {event, fn} = this.makeEventProp(prop);
 
-            passOption.events = true;
-            boundEvent(event);
-            head.push(xNode('passEvent', {
-                event,
+            passEvent(event, xNode('passEvent', {
                 fn
             }, (ctx, n) => {
-                if(_boundEvents[n.event] > 1) {
-                    ctx.write(true, `$runtime.$$addEventForComponent(events, '${n.event}', `);
-                    ctx.build(n.fn);
-                    ctx.write(`);\n`);
-                } else {
-                    ctx.write(true, `events.${n.event} = `);
-                    ctx.build(n.fn);
-                    ctx.write(`;\n`);
-                }
+                ctx.add(n.fn);
             }));
             return;
         } else if(this.config.passClass && (name == 'class' || name.startsWith('class:'))) {
@@ -4390,6 +4576,7 @@ function makeComponent(node, element) {
                 assert(metaClass);
             }
             assert(value);
+            this.css.passingClass = true;
 
             const parsed = this.parseText(prop.value);
             this.detectDependency(parsed);
@@ -4407,41 +4594,87 @@ function makeComponent(node, element) {
     });
 
 
-    if(forwardAllEvents || passOption.events) options.push('events');
-    if(passOption.slots) options.push('slots');
-    if(passOption.anchor) options.push('anchor');
+    if(Object.keys(events).length == 0) events = null;
 
     let result = xNode('component', {
-        el: element.bindName(),
         componentName,
-        head,
-        options,
-        $cd: '$cd',
         staticProps,
         props: propsFn,
         propsSetter,
         reference,
-        $class
+        $class,
+        forwardAllEvents,
+        events,
+        slots: slotBlocks.length ? slotBlocks : null,
+        anchors: anchorBlocks.length ? anchorBlocks : null
     }, (ctx, n) => {
-        const $cd = n.$cd || '$cd';
-
-        let head = ctx.subBuild(n.head);
-        if(head) {
-            ctx.addBlock(head);
-            n.requireScope = true;
-        }
+        if(n.reference) throw 'not implemented';  // FIXME
+        let comma = false;
+        ctx.write(`$runtime.callComponent($context, ${n.componentName}, {`);
 
         if(n.props.length && n.staticProps) {
-            n.options.push(`props: {${n.props.join(', ')}}`);
+            ctx.write(`props: {${n.props.join(', ')}}`);
+            comma = true;
             n.props = [];
         }
-
-        ctx.write(true);
-        if(n.reference) ctx.write(`${n.reference} = `);
-        ctx.write(`$runtime.callComponent(${$cd}, $context, ${n.componentName}, ${n.el}, {${n.options.join(', ')}}`);
+        ctx.indent++;
+        if(n.forwardAllEvents && !n.events) {
+            if(comma) ctx.write(', ');
+            comma = true;
+            ctx.write('events: $events');
+        } else if(n.events && !n.forwardAllEvents) {
+            if(comma) ctx.write(',', true);
+            comma = true;
+            ctx.write('events: {');
+            ctx.indent++;
+            ctx.write(true);
+            Object.entries(n.events).forEach(([event, list], index) => {
+                if(index) ctx.write(',', true);
+                ctx.write(event + ': ');
+                if(list.length == 1) ctx.add(list[0]);
+                else {
+                    ctx.write('$runtime.mergeEvents(');
+                    list.forEach((b, i) => {
+                        if(i) ctx.write(', ');
+                        ctx.add(b);
+                    });
+                    ctx.write(')');
+                }
+            });
+            ctx.indent--;
+            ctx.write(true, '}');
+        } else if(n.events && n.forwardAllEvents) {
+            throw 'not implemented';  // FIXME
+        }
+        if(n.slots) {
+            if(comma) ctx.write(', ');
+            comma = true;
+            ctx.write('slots: {');
+            ctx.indent++;
+            n.slots.forEach((slot, i) => {
+                if(i) ctx.write(',');
+                ctx.write(true);
+                ctx.add(slot);
+            });
+            ctx.indent--;
+            ctx.write(true, '}');
+        }
+        if(n.anchors) {
+            if(comma) ctx.write(', ');
+            comma = true;
+            ctx.write('anchor: {');
+            ctx.indent++;
+            n.anchors.forEach((anchor, i) => {
+                if(i) ctx.write(',');
+                ctx.write(true);
+                ctx.add(anchor);
+            });
+            ctx.indent--;
+            ctx.write(true, '}');
+        }
+        ctx.write('}');
 
         let other = '';
-        ctx.indent++;
         if(n.props.length) ctx.write(`,\n`, true, `() => ({${n.props.join(', ')}})`);
         else other = ', null';
 
@@ -4467,77 +4700,61 @@ function makeComponent(node, element) {
         } else other += ', null';
 
         ctx.indent--;
-        ctx.write(`);\n`);
+        ctx.write(true, `)`);
     });
 
-    if(!dynamicComponent) {
-        return {bind: xNode('component-scope', {
-            component: result
-        }, (ctx, n) => {
-            let r = ctx.subBuild(n.component);
-            
-            if(n.component.requireScope) {
-                ctx.writeLine('{');
-                ctx.goIndent(() => {
-                    ctx.addBlock(r);
-                });
-                ctx.writeLine('}');
-            } else ctx.addBlock(r);
-        })};
-    } else {
-        this.detectDependency(dynamicComponent);
+    return {bind: result};
+}
+function makeComponentDyn(node, requireCD, element) {
+    let dynamicComponent;
 
-        result.componentName = '$ComponentConstructor';
-        result.$cd = 'childCD';
-        return {bind: xNode('dyn-component', {
-            el: element.bindName(),
-            exp: dynamicComponent,
-            component: result
-        }, (ctx, n) => {
-            ctx.writeLine('{');
-            ctx.goIndent(() => {
-                if(ctx.inuse.apply) {
-                    ctx.writeLine(`let childCD, finalLabel = $runtime.getFinalLabel(${n.el});`);
-                    ctx.writeLine(`$watch($cd, () => (${n.exp}), ($ComponentConstructor) => {`);
-                    ctx.goIndent(() => {
-                        ctx.writeLine(`if(childCD) {`);
-                        ctx.goIndent(() => {
-                            ctx.writeLine(`childCD.destroy();`);
-                            ctx.writeLine(`$runtime.removeElementsBetween(${n.el}, finalLabel);`);
-                        });
-                        ctx.writeLine(`}`);
-                        ctx.writeLine(`childCD = null;`);
-                        ctx.writeLine(`if($ComponentConstructor) {`);
-                        ctx.goIndent(() => {
-                            ctx.writeLine(`childCD = $cd.new();`);
-                            ctx.build(n.component);
-                        });
-                        ctx.writeLine(`}`);
-                    });
-                    ctx.writeLine(`});`);
-                } else {
-                    ctx.writeLine(`let $ComponentConstructor = ${n.exp};`);
-                    ctx.writeLine(`if($ComponentConstructor) {`);
-                    ctx.goIndent(() => {
-                        ctx.writeLine(`let childCD = $cd;`);
-                        ctx.build(n.component);
-                    });
-                    ctx.writeLine(`}`);
-                }
-            });
-            ctx.writeLine('}');
-        })};
+    if(node.elArg) {
+        dynamicComponent = node.elArg[0] == '{' ? unwrapExp(node.elArg) : node.elArg;
+    } else {
+        node.props.some(({name, value}) => {
+            if(name == 'this') {
+                dynamicComponent = unwrapExp(value);
+                return true;
+            }
+        });
     }
+
+    assert(dynamicComponent);
+    this.detectDependency(dynamicComponent);
+    requireCD.$value(true);
+
+    let component = this.makeComponent(node, requireCD).bind;
+
+    component.componentName = '$ComponentConstructor';
+    return xNode('dyn-component', {
+        el: element.bindName(),
+        exp: dynamicComponent,
+        component
+    }, (ctx, n) => {
+        ctx.write(true, `$runtime.attachDynComponent($cd, ${n.el}, () => ${n.exp}, ($ComponentConstructor) => `);
+        ctx.add(n.component);
+        ctx.write(')');
+    });
 }
 
-function bindProp(prop, node, element) {
+function bindProp(prop, node, element, requireCD) {
     let name, arg;
+
+    if(prop.content.startsWith('{*')) {
+        const pe = this.parseText(prop.content);
+        assert(pe.parts[0].type == 'js');
+        let exp = pe.parts[0].value;
+        if(!exp.endsWith(';')) exp += ';';
+        return {bind: xNode('block', {body: [
+            replaceElementKeyword(exp, () => element.bindName())
+        ]})};
+    }
+
     if(prop.name[0] == '@' || prop.name.startsWith('on:')) name = 'event';
-    if(!name && prop.name[0] == ':') {
+    else if(prop.name[0] == ':') {
         name = 'bind';
         arg = prop.name.substring(1);
-    }
-    if(!name && prop.name[0] == '*') {
+    } else if(prop.name[0] == '*') {
         let rx = prop.name.match(/^\*\{.*\}$/);
         if(rx) {
             assert(prop.value == null, 'wrong binding: ' + prop.content);
@@ -4547,17 +4764,7 @@ function bindProp(prop, node, element) {
             name = 'use';
             arg = prop.name.substring(1);
         }
-    }
-    if(prop.content.startsWith('{*')) {
-        const pe = this.parseText(prop.content);
-        assert(pe.parts[0].type == 'js');
-        let exp = pe.parts[0].value;
-        if(!exp.endsWith(';')) exp += ';';
-        return {bind: xNode('block', {body: [
-            replaceElementKeyword(exp, () => element.bindName())
-        ]})};
-    }
-    if(!name && prop.value == null) {
+    } else if(prop.value == null) {
         let rx = prop.name.match(/^\{(.*)\}$/);
         if(rx) {
             name = rx[1];
@@ -4565,7 +4772,6 @@ function bindProp(prop, node, element) {
                 // spread operator
                 name = name.substring(3);
                 assert(detectExpressionType(name) == 'identifier');
-                this.detectDependency(name);
                 return node.spreading.push(`...${name}`);
             } else {
                 prop.value = prop.name;
@@ -4596,7 +4802,8 @@ function bindProp(prop, node, element) {
     } else if(name == 'event') {
         if(prop.name.startsWith('@@')) {
             assert(!prop.value);
-            this.require('$cd', '$events');
+            requireCD.$value(true);
+            this.require('$events');
             if(prop.name == '@@') {
                 return {bind: xNode('forwardAllEvents', {
                     el: element.bindName()
@@ -4616,18 +4823,20 @@ function bindProp(prop, node, element) {
             })};
         }
 
-        let {event, fn} = this.makeEventProp(prop, () => element.bindName());
-
-        this.require('$cd');
+        let {event, fn, rootModifier} = this.makeEventProp(prop, () => element.bindName());
+        if(rootModifier) this.require('rootEvent');
+        else requireCD.$value(true);
 
         return {bind: xNode('bindEvent', {
             event,
             fn,
-            el: element.bindName()
+            el: element.bindName(),
+            rootModifier
         }, (ctx, n) => {
-            ctx.write(true, `$runtime.addEvent($cd, ${n.el}, '${n.event}', `);
+            if(n.rootModifier) ctx.write(true, `$$addRootEvent(${n.el}, '${n.event}', `);
+            else ctx.write(true, `$runtime.addEvent($cd, ${n.el}, '${n.event}', `);
             ctx.build(n.fn);
-            ctx.write(`);\n`);
+            ctx.write(`);`);
         })};
     } else if(name == 'bind') {
         if(this.script.readOnly) {
@@ -4635,7 +4844,8 @@ function bindProp(prop, node, element) {
             return;
         }
 
-        this.require('apply', '$cd');
+        requireCD.$value(true);
+        this.require('apply');
         let exp;
         arg = arg.split(/[\:\|]/);
         let attr = arg.shift();
@@ -4714,7 +4924,7 @@ function bindProp(prop, node, element) {
         })};
     } else if(name == 'use') {
         if(arg) {
-            this.require('$cd');
+            requireCD.$value(true);
             assert(isSimpleName(arg), 'Wrong name: ' + arg);
             this.checkRootName(arg);
             let args = prop.value ? `, () => [${getExpression()}]` : '';
@@ -4778,8 +4988,7 @@ function bindProp(prop, node, element) {
         });
 
         if(compound) {
-            let defaultHash = '';
-            if(node.classes.has(this.css.id)) defaultHash = this.css.id;
+            let classes = Array.from(node.classes);
             node.classes.clear();
             if(this.config.passClass) this.require('resolveClass');
             let exp = props.map(prop => {
@@ -4796,24 +5005,40 @@ function bindProp(prop, node, element) {
             const bind = xNode('compound-class', {
                 el: element.bindName(),
                 exp,
-                defaultHash
+                classes,
+                requireCD
             }, (ctx, n) => {
+                let base = '';
+                if(n.classes.length) {
+                    if(this.css.passingClass) {
+                        base = [];
+                        n.classes.forEach(c => {
+                            if(c.local) base.push(this.css.resolve(c));
+                        });
+                        base = base.join(' ');
+                        if(base) base = `, '${base}'`;
+                    } else {
+                        if(n.classes.some(c => c.local)) base = `,'${this.css.id}'`;
+                    }
+                }
+
                 if(ctx.inuse.resolveClass) {
-                    let base = n.defaultHash ? `,'${n.defaultHash}'` : '';
                     if(ctx.inuse.apply) {
-                        ctx.writeLine(`$watchReadOnly($cd, () => $$resolveClass((${n.exp})${base}), value => $runtime.setClassToElement(${n.el}, value));`);
+                        n.requireCD.$value(true);
+                        ctx.write(true, `$runtime.bindClassExp($cd, ${n.el}, () => $$resolveClass((${n.exp})${base}))`);
                     } else {
-                        ctx.writeLine(`$runtime.setClassToElement(${n.el}, $$resolveClass((${n.exp})${base}));`);
+                        ctx.write(true, `$runtime.setClassToElement(${n.el}, $$resolveClass((${n.exp})${base}));`);
                     }
                 } else {
-                    let base = n.defaultHash ? ` + ' ${n.defaultHash}'` : '';
                     if(ctx.inuse.apply) {
-                        ctx.writeLine(`$watchReadOnly($cd, () => ${n.exp}${base}, value => $runtime.setClassToElement(${n.el}, value));`);
+                        n.requireCD.$value(true);
+                        ctx.write(true, `$runtime.bindClassExp($cd, ${n.el}, () => (${n.exp})${base})`);
                     } else {
-                        ctx.writeLine(`$runtime.setClassToElement(${n.el}, ${n.exp}${base});`);
+                        ctx.write(true, `$runtime.setClassToElement(${n.el}, ${n.exp}${base});`);
                     }
                 }
             });
+            requireCD.$depends(bind);
             return {bind};
         } else {
             let bind = xNode('block');
@@ -4827,18 +5052,22 @@ function bindProp(prop, node, element) {
                     assert(className);
                     let exp = prop.value ? unwrapExp(prop.value) : className;
                     this.detectDependency(exp);
-                    bind.push(xNode('bindClass', {
+
+                    let n = xNode('bindClass', {
+                        $deps: [this.glob.apply],
                         el: element.bindName(),
                         className,
                         exp,
-                        $element: exp.includes('$element')
+                        $element: exp.includes('$element'),
+                        requireCD
                     }, (ctx, n) => {
                         if(n.$element) {
                             ctx.writeLine(`{`);
                             ctx.indent++;
                             ctx.writeLine(`let $element = ${n.el};`);
                         }
-                        if(ctx.inuse.apply) {
+                        if(this.glob.apply.value) {
+                            n.requireCD.$value(true);
                             ctx.writeLine(`$runtime.bindClass($cd, ${n.el}, () => !!(${n.exp}), '${n.className}');`);
                         } else {
                             ctx.writeLine(`(${n.exp}) && $runtime.addClass(${n.el}, '${n.className}');`);
@@ -4847,18 +5076,22 @@ function bindProp(prop, node, element) {
                             ctx.indent--;
                             ctx.writeLine(`}`);
                         }
-                    }));
+                    });
+                    requireCD.$depends(n);
+                    bind.push(n);
                 }
             });
             return {bind: bind.body.length ? bind : null};
         }
     } else if(name[0] == '^') {
-        this.require('$cd');
+        requireCD.$value(true);
         return {bindTail: xNode('bindAnchor', {
             name: name.slice(1) || 'default',
             el: element.bindName()
         }, (ctx, n) => {
-            ctx.writeLine(`$runtime.attachAnchor($option, $cd, '${n.name}', ${n.el});`);
+            ctx.write(true, `$runtime.attachAnchor($option, $cd, ${n.el}`);
+            if(n.name == 'default') ctx.write(`);`);
+            else ctx.write(`, '${n.name}');`);
         })};
     } else {
         if(prop.value && prop.value.indexOf('{') >= 0) {
@@ -4877,36 +5110,41 @@ function bindProp(prop, node, element) {
                 selected: true,
                 innerHTML: true,
                 innerText: true,
+                placeholder: true,
                 src: true,
                 readonly: 'readOnly'
             };
 
+            let n = xNode('bindAttribute', {
+                name,
+                exp,
+                hasElement,
+                el: element.bindName(),
+                requireCD
+            }, (ctx, data) => {
+                if(data.hasElement) ctx.writeLine(`let $element=${data.el};`);
+                if(propList[name]) {
+                    let propName = propList[name] === true ? name : propList[name];
+                    if(ctx.inuse.apply) {
+                        requireCD.$value(true);
+                        ctx.writeLine(`$watchReadOnly($cd, () => (${data.exp}), (value) => {${data.el}.${propName} = value;});`);
+                    } else {
+                        ctx.writeLine(`${data.el}.${propName} = ${data.exp};`);
+                    }
+                } else {
+                    if(ctx.inuse.apply) {
+                        requireCD.$value(true);
+                        ctx.writeLine(`$runtime.bindAttribute($cd, ${data.el}, '${data.name}', () => (${data.exp}));`);
+                    } else {
+                        ctx.writeLine(`$runtime.bindAttributeBase(${data.el}, '${data.name}', ${data.exp});`);
+                    }
+                }
+            });
+            requireCD.$depends(n);
+
             return {bind: xNode('block', {
                 scope: hasElement,
-                body: [
-                    xNode('bindAttribute', {
-                        name,
-                        exp,
-                        hasElement,
-                        el: element.bindName()
-                    }, (ctx, data) => {
-                        if(data.hasElement) ctx.writeLine(`let $element=${data.el};`);
-                        if(propList[name]) {
-                            let propName = propList[name] === true ? name : propList[name];
-                            if(ctx.inuse.apply) {
-                                ctx.writeLine(`$watchReadOnly($cd, () => (${data.exp}), (value) => {${data.el}.${propName} = value;});`);
-                            } else {
-                                ctx.writeLine(`${data.el}.${propName} = ${data.exp};`);
-                            }
-                        } else {
-                            if(ctx.inuse.apply) {
-                                ctx.writeLine(`$runtime.bindAttribute($cd, ${data.el}, '${data.name}', () => (${data.exp}));`);
-                            } else {
-                                ctx.writeLine(`$runtime.bindAttributeBase(${data.el}, '${data.name}', ${data.exp});`);
-                            }
-                        }
-                    })
-                ]
+                body: [n]
             })};
         }
 
@@ -4919,104 +5157,86 @@ function bindProp(prop, node, element) {
     }
 }
 
-function makeifBlock(data, element) {
-    let r = data.value.match(/^#if (.*)$/s);
+function makeifBlock(data, element, requireCD) {
+    let r = data.value.match(/^#if (.*)$/);
     let exp = r[1];
     assert(exp, 'Wrong binding: ' + data.value);
     this.detectDependency(exp);
     this.require('$cd');
 
-    let mainBlock, elseBlock, mainTpl, elseTpl;
+    let mainBlock, elseBlock;
 
-    if(data.bodyMain) {
-        mainBlock = this.buildBlock({body: data.bodyMain}, {protectLastTag: true, inline: true});
-        elseBlock = this.buildBlock(data, {protectLastTag: true, inline: true});
+    const getBlock = b => {
+        if(b.singleBlock) {
+            return xNode('make-block', {
+                block: b.singleBlock
+            }, (ctx, n) => {
+                ctx.write('() => ');
+                ctx.add(n.block);
+            })
+        }
+        return b.block;
+    };
 
-        elseTpl = xNode('template', {
-            inline: true,
-            body: elseBlock.tpl,
-            svg: elseBlock.svg
-        });
+    if(data.bodyMain) {
+        mainBlock = getBlock(this.buildBlock({body: data.bodyMain}, {protectLastTag: true, allowSingleBlock: true}));
+        elseBlock = getBlock(this.buildBlock(data, {protectLastTag: true, allowSingleBlock: true}));
     } else {
-        mainBlock = this.buildBlock(data, {protectLastTag: true, inline: true});
+        mainBlock = getBlock(this.buildBlock(data, {protectLastTag: true, allowSingleBlock: true}));
     }
+    
+    const result = xNode('if:bind', {
+        $deps: [this.glob.apply],
+        requireCD,
+        el: element.bindName(),
+        exp,
+        mainBlock: mainBlock,
+        elseBlock: elseBlock
+    }, (ctx, n) => {
+        if(this.glob.apply.value) {
+            n.requireCD.$value(true);
+            ctx.write(true, `$runtime.ifBlock($cd, ${n.el}, () => !!(${n.exp}),`);
+        } else {
+            this.glob.component.$value(true);
+            ctx.write(true, `$runtime.ifBlockReadOnly($component, ${n.el}, () => !!(${n.exp}),`);
+        }
 
-    mainTpl = xNode('template', {
-        inline: true,
-        body: mainBlock.tpl,
-        svg: mainBlock.svg
-    });
-
-    const source = xNode('if:bind', {
-        el: element.bindName(),
-        exp,
-        mainTpl,
-        mainBlock: mainBlock.source,
-        elseTpl,
-        elseBlock: elseBlock && elseBlock.source
-    },
-    (ctx, data) => {
-        ctx.writeLine(`$runtime.$$ifBlock($cd, ${data.el}, () => !!(${data.exp}),`);
         ctx.indent++;
-        ctx.writeIndent();
-        ctx.build(data.mainTpl);
-        ctx.write(',\n');
-        ctx.writeIndent();
-        if(data.mainBlock) {
-            ctx.build(xNode('function', {
-                inline: true,
-                arrow: true,
-                args: ['$cd', '$parentElement'],
-                body: [data.mainBlock]
-            }));
-        } else ctx.write('$runtime.noop');
-        if(data.elseTpl) {
-            ctx.write(',\n');
-            ctx.writeIndent();
-            ctx.build(data.elseTpl);
-            ctx.write(',\n');
-            ctx.writeIndent();
-            if(data.elseBlock) {
-                ctx.build(xNode('function', {
-                    inline: true,
-                    arrow: true,
-                    args: ['$cd', '$parentElement'],
-                    body: [data.elseBlock]
-                }));
-            } else ctx.write('$runtime.noop');
+        ctx.write(true);
+        ctx.add(n.mainBlock);
+        if(n.elseBlock) {
+            ctx.write(',');
+            ctx.add(n.elseBlock);
         }
         ctx.indent--;
-        ctx.write(');\n');
+        ctx.write(true, ');', true);
     });
-
-    return {source};
+    requireCD.$depends(result);
+    this.glob.component.$depends(result);
+    return result;
 }
 
 function makeEachBlock(data, option) {
-
-    let nodeItems = trimEmptyNodes(data.body);
-    if(!nodeItems.length) nodeItems = [data.body[0]];
-
-    let itemData = this.buildBlock({body: nodeItems}, {protectLastTag: true, inline: true});
+    this.require('apply');
 
     // #each items as item, index (key)
-    let rx = data.value.match(/^#each\s+(.+)\s+as\s+(.+)$/s);
+    let rx = data.value.match(/^#each\s+(.+)\s+as\s+(.+)$/);
     assert(rx, `Wrong #each expression '${data.value}'`);
     let arrayName = rx[1];
     let right = rx[2];
     let keyName;
 
     // get keyName
-    rx = right.match(/^(.*)\s*\(\s*([^\(\)]+)\s*\)\s*$/s);
+    rx = right.match(/^(.*)\s*\(\s*([^\(\)]+)\s*\)\s*$/);
     if(rx) {
         right = rx[1];
         keyName = rx[2];
     }
     right = right.trim();
 
-    let itemName, indexName, bind0 = null;
+    let itemName, indexName, blockPrefix = null;
     if(right[0] == '{') {
-        rx = right.match(/^(\{[^}]+\})(.*)$/s);
+        rx = right.match(/^(\{[^}]+\})(.*)$/);
         assert(rx, `Wrong #each expression '${data.value}'`);
         let exp = rx[1], keywords;
 
@@ -5031,12 +5251,15 @@ function makeEachBlock(data, option) {
         if(indexName[0] == ',') indexName = indexName.substring(1).trim();
         indexName = indexName || '$index';
 
-        bind0 = xNode('each:unwrap', {
+        blockPrefix = xNode('each:unwrap', {
             exp,
             keywords
         }, (ctx, n) => {
-            ctx.writeLine(`let ${n.keywords.join(', ')};`);
-            ctx.writeLine(`$runtime.prefixPush($ctx.cd, () => (${n.exp} = $$item));`);
+            if(this.script.readOnly) ctx.writeLine(`let ${n.exp} = $$item;`);
+            else {
+                ctx.writeLine(`let ${n.keywords.join(', ')};`);
+                ctx.writeLine(`$runtime.prefixPush($cd, () => (${n.exp} = $$item));`);
+            }
         });
     } else {
         rx = right.trim().split(/\s*\,\s*/);
@@ -5069,82 +5292,93 @@ function makeEachBlock(data, option) {
             })]
         });
     }
-    let bind;
-    if(itemData.source) {
-        bind = xNode('function', {
-            inline: true,
-            arrow: true,
-            args: ['$ctx', '$parentElement', itemName, indexName],
-            body: [
-                `let $cd = $ctx.cd;`,
-                bind0,
-                itemData.source,
-                xNode(ctx => {
-                    ctx.writeLine(`$ctx.rebind = function(_${indexName}, _${itemName}) {`);
-                    ctx.indent++;
-                    ctx.writeLine(`${indexName} = _${indexName};`);
-                    ctx.writeLine(`${itemName} = _${itemName};`);
-                    ctx.indent--;
-                    ctx.writeLine(`};`);
-                })
-            ]
-        });
-    } else {
-        bind = xNode('function', {
-            inline: true,
-            arrow: true,
-            args: ['$ctx'],
-            body: [`$ctx.rebind = $runtime.noop;`]
+    let rebind;
+    if(!this.script.readOnly) {
+        rebind = xNode('block', {
+            itemName,
+            indexName
+        }, (ctx, n) => {
+            ctx.write(`(_${n.indexName}, _${n.itemName}) => {${n.indexName}=_${n.indexName}; ${n.itemName}=_${n.itemName};}`);
         });
     }
 
-    const template = xNode('template', {
-        inline: true,
-        body: itemData.tpl,
-        svg: itemData.svg
+    let nodeItems = trimEmptyNodes(data.body);
+    if(!nodeItems.length) nodeItems = [data.body[0]];
+
+    let itemBlock, block = this.buildBlock({body: nodeItems}, {
+        protectLastTag: true,
+        allowSingleBlock: !blockPrefix,
+        each: {
+            blockPrefix,
+            rebind,
+            itemName,
+            indexName
+        }
     });
 
-    this.require('$cd');
+    if(block.singleBlock) {
+        itemBlock = xNode('each-component', {
+            block: block.singleBlock,
+            rebind,
+            itemName,
+            indexName
+        }, (ctx, n) => {
+            ctx.write(`$runtime.makeEachSingleBlock((${n.itemName}, ${n.indexName}) => [`);
+            ctx.indent++;
+            ctx.write(true);
+            ctx.add(n.rebind);
+            ctx.write(',', true);
+            ctx.add(n.block);
+            ctx.indent--;
+            ctx.write(true, `])`);
+        });
+    } else itemBlock = block.block;
+
     const source = xNode('each', {
         keyFunction,
-        template,
-        bind
-    }, (ctx, data) => {
+        block: itemBlock,
+    }, (ctx, n) => {
         ctx.writeLine(`$runtime.$$eachBlock($cd, ${option.elName}, ${option.onlyChild?1:0}, () => (${arrayName}),`);
         ctx.indent++;
-        ctx.writeIndent();
-        if(data.keyFunction === 'noop') ctx.write('$runtime.noop');
-        else if(data.keyFunction) ctx.build(data.keyFunction);
+        ctx.write(true);
+        if(n.keyFunction === 'noop') ctx.write('$runtime.noop');
+        else if(n.keyFunction) ctx.add(n.keyFunction);
         else ctx.write('$runtime.eachDefaultKey');
-        ctx.write(`,\n`);
-        ctx.writeIndent();
-        ctx.build(data.template);
-        ctx.write(`,\n`);
-        ctx.writeIndent();
-        ctx.build(data.bind);
-        ctx.write(`);\n`);
+        ctx.write(`,`);
+        ctx.add(n.block);
         ctx.indent--;
+        ctx.write(true, `);`, true);
     });
     this.detectDependency(arrayName);
 
     return {source};
 }
 
-function makeHtmlBlock(exp, label) {
+function makeHtmlBlock(exp, label, requireCD) {
     this.detectDependency(exp);
     this.require('$cd');
-    return xNode('block', {
+    const result = xNode('block', {
+        $deps: [this.glob.apply],
         el: label.bindName(),
-        exp
+        exp,
+        requireCD
     }, (ctx, n) => {
-        ctx.writeLine(`$runtime.$$htmlBlock($cd, ${n.el}, () => (${n.exp}));\n`);
+        let cd;
+        if(this.glob.apply.value) {
+            n.requireCD.$value(true);
+            cd = '$cd';
+        } else cd = 'null';
+        ctx.write(true, `$runtime.$$htmlBlock(${cd}, ${n.el}, () => (${n.exp}));`);
     });
+
+    requireCD.$depends(result);
+    return result;
 }
 
 function makeAwaitBlock(node, element) {
     let valueForThen, exp;
 
-    let rx = node.value.match(/^#await\s+(.+)\s+then\s+(\S+)\s*$/s);
+    let rx = node.value.match(/^#await\s+(.+)\s+then\s+(\S+)\s*$/);
     if(rx) {
         assert(!node.parts.then);
         node.parts.then = node.parts.main;
@@ -5152,7 +5386,7 @@ function makeAwaitBlock(node, element) {
         exp = rx[1];
         valueForThen = rx[2];
     } else {
-        rx = node.value.match(/^#await\s+(.+)\s*$/s);
+        rx = node.value.match(/^#await\s+(.+)\s*$/);
         assert(rx);
         exp = rx[1].trim();
     }
@@ -5161,7 +5395,7 @@ function makeAwaitBlock(node, element) {
 
     let parts = [null, null, null];
     if(node.parts.main && node.parts.main.length) {
-        parts[0] = this.buildBlock({body: node.parts.main}, {protectLastTag: true, inlineFunction: true});
+        parts[0] = this.buildBlock({body: node.parts.main}, {protectLastTag: true});
     }
     if(node.parts.then && node.parts.then.length) {
         let args = [];
@@ -5169,27 +5403,30 @@ function makeAwaitBlock(node, element) {
             assert(isSimpleName(valueForThen));
             args.push(valueForThen);
         } else {
-            let rx = node.parts.thenValue.match(/^[^ ]+\s+(.*)$/s);
+            let rx = node.parts.thenValue.match(/^[^ ]+\s+(.*)$/);
             if(rx) {
                 assert(isSimpleName(rx[1]));
                 args.push(rx[1]);
             }
         }
-        parts[1] = this.buildBlock({body: node.parts.then}, {protectLastTag: true, inlineFunction: true, args});
+        parts[1] = this.buildBlock({body: node.parts.then}, {protectLastTag: true, extraArguments: args});
     }
     if(node.parts.catch && node.parts.catch.length) {
         let args = [];
-        let rx = node.parts.catchValue.match(/^[^ ]+\s+(.*)$/s);
+        let rx = node.parts.catchValue.match(/^[^ ]+\s+(.*)$/);
         if(rx) {
             assert(isSimpleName(rx[1]));
             args.push(rx[1]);
         }
-        parts[2] = this.buildBlock({body: node.parts.catch}, {protectLastTag: true, inlineFunction: true, args});
+        parts[2] = this.buildBlock({body: node.parts.catch}, {protectLastTag: true, extraArguments: args});
     }
 
+    if(this.script.readOnly) {
+        this.warning('script read-only conflicts with await');
+        return;
+    }
     this.detectDependency(exp);
-    if(this.script.readOnly) this.warning('script read-only conflicts with await');
-    this.require('apply', '$cd');
+    this.require('apply');
 
     return xNode('await', {
         el: element.bindName(),
@@ -5197,127 +5434,88 @@ function makeAwaitBlock(node, element) {
         parts,
         keywords
     }, (ctx, n) => {
-        ctx.writeIndent();
-        ctx.write(`$runtime.$$awaitBlock($cd, ${n.el}, () => [${n.keywords.join(', ')}], () => ${n.exp}, $$apply,\n`);
-        ctx.goIndent(() => {
-            n.parts.forEach((part, index) => {
-                if(part) {
-                    let {source, tpl, svg} = part;
-                    ctx.writeIndent();
-                    if(source) {
-                        ctx.build(source);
-                        ctx.write(',\n');
-                        ctx.writeIndent();
-                    } else ctx.write(`$runtime.noop, `);
-                    ctx.build(xNode('template', {body: tpl, svg, inline: true}));
-                    ctx.write(index == 2 ? '\n' : ',\n');
-                } else {
-                    ctx.writeLine(`null, null` + (index == 2 ? '' : ','));
-                }            });
+        ctx.write(true, `$runtime.$$awaitBlock($cd, ${n.el}, () => [${n.keywords.join(', ')}], () => ${n.exp},`);
+        ctx.indent++;
+        n.parts.forEach((part, index) => {
+            if(index) ctx.write(', ');
+            if(part) {
+                ctx.write(true);
+                ctx.add(part.block);
+            } else ctx.write('null');
         });
-        ctx.writeLine(');');
+        ctx.indent--;
+        ctx.write(');', true);
     });
 }
 
-function attachSlot(slotName, label, node) {
-    let props = [];
+function attachSlot(slotName, node, requireCD) {
+    let props = [], staticProps = true;
+
     if(node.attributes && node.attributes.length) {
         node.attributes.forEach(prop => {
-            let name = prop.name;
-            let value = prop.value;
-            if(name[0] == '{') {
-                assert(value == null);
-                value = name;
-                name = unwrapExp(name);
-            }            assert(value != null);
-            assert(isSimpleName(name));
-            if(value[0] == '{') {
-                value = unwrapExp(value);
-                this.detectDependency(value);
+            let {name, value, ...ip} = this.inspectProp(prop);
+            if(!ip.static) staticProps = false;
+            props.push(xNode('slot-prop', {
+                name,
+                value
+            }, (ctx, n) => {
+                ctx.write(`${n.name}: ${n.value}`);
+            }));
 
-                props.push(xNode('prop', {
-                    name,
-                    value,
-                    dyn: true
-                }, (ctx, n) => {
-                    if(this.inuse.apply) ctx.write(`${n.name}: () => (${n.value})`);
-                    else ctx.write(`${n.name}: (${n.value})`);
-                }));
-            } else {
-                props.push(xNode('static-prop', {
-                    name,
-                    value
-                }, (ctx, n) => {
-                    ctx.write(`${n.name}: \`${this.Q(n.value)}\``);
-                }));
-            }
         });
     }
     let placeholder;
-    if(node.body && node.body.length) {
-        let block = this.buildBlock(node, {inline: true});
-
-        const tpl = xNode('template', {
-            name: '$parentElement',
-            body: block.tpl,
-            svg: block.svg
-        });
+    if(node.body?.length) placeholder = this.buildBlock(node).block;
 
-        placeholder = xNode('placeholder', {
-            el: label.bindName(),
-            body: block.source,
-            tpl
-        }, (ctx, n) => {
-            ctx.build(n.tpl);
-            ctx.build(n.body);
-            ctx.writeLine(`$runtime.insertAfter(${n.el}, $parentElement);`);
-        });
-    }
-
-    this.require('$component', '$cd', '$context');
+    this.require('$context');
+    this.glob.component.$value(true);
 
-    return xNode('slot', {
+    let result = xNode('slot', {
+        $deps: [this.glob.apply],
         name: slotName,
-        el: label.bindName(),
         props,
-        placeholder
+        staticProps,
+        placeholder,
+        requireCD
     }, (ctx, n) => {
-        let hasDynProps = n.props.some(p => p.dyn);
-        let base = 'Base';
-        if(hasDynProps && ctx.inuse.apply) {
-            assert(!ctx._ctx.script.readOnly);
-            base = '';
-        }
-        ctx.write(true, `$runtime.attachSlot${base}($context, $cd, '${n.name}', ${n.el}, `);
+        let dynamicProps = this.glob.apply.value && !n.staticProps;
+
+        if(dynamicProps) n.requireCD.$value(true);
+    
+        let missed = '', slotName = n.name == 'default' ? 'null' : n.name;
+        if(dynamicProps) ctx.write(`$runtime.invokeSlot($component, ${slotName}, $context`);
+        else ctx.write(`$runtime.invokeSlotBase($component, ${slotName}, $context`);
+
         if(n.props.length) {
-            ctx.write(`{\n`);
-            ctx.goIndent(() => {
-                for(let i=0; i < n.props.length; i++) {
-                    let prop = n.props[i];
-                    ctx.writeIndent();
-                    ctx.build(prop);
-                    if(i + 1 < n.props.length) ctx.write(',');
-                    ctx.write('\n');
-                }
+            if(dynamicProps) ctx.write(', () => ({');
+            else ctx.write(', {');
+            n.props.forEach((prop, i) => {
+                if(i) ctx.write(', ');
+                ctx.add(prop);
             });
-            ctx.write(true, `}`);
-        } else {
-            ctx.write(`null`);
-        }
+            ctx.write('}');
+            if(dynamicProps) ctx.write(')');
+        } else missed += ', null';
+
         if(n.placeholder) {
-            ctx.write(', () => {\n');
-            ctx.goIndent(() => {
-                ctx.build(n.placeholder);
-            });
-            ctx.write(true, '}');
-        } else if(hasDynProps && !this.config.immutable) ctx.write(`, 0`);
-        if(hasDynProps && !this.config.immutable) ctx.write(`, $runtime.$$compareDeep`);
-        ctx.write(');\n');
+            ctx.write(missed, ', ');
+            missed = '';
+            ctx.add(n.placeholder);
+        } else missed += ', null';
+
+        if(dynamicProps) {
+            ctx.write(missed, ', ');
+            if(this.config.immutable) ctx.write(`$runtime.keyComparator`);
+            else ctx.write(`$runtime.$$compareDeep`);
+        }
+        ctx.write(')');
     });
+    requireCD.$depends(result);
+    return result;
 }
 
-function makeFragment(node) {
-    let rx = node.value.match(/#fragment\:(\S+)(.*)$/s);
+function makeFragment(node, requireCD) {
+    let rx = node.value.match(/#fragment\:(\S+)(.*)$/);
     assert(rx);
     let name = rx[1], external = false;
     assert(isSimpleName(name));
@@ -5332,9 +5530,12 @@ function makeFragment(node) {
         });
     }
 
+    if(external) requireCD.$value(true);
+
     let block;
-    if(node.body && node.body.length) block = this.buildBlock({body: trimEmptyNodes(node.body)}, {inline: true, context: 'fragment'});
-    else {
+    if(node.body && node.body.length) {
+        block = this.buildBlock({body: trimEmptyNodes(node.body)}, {inline: true, context: 'fragment', parentElement: '$dom'});
+    } else {
         this.warning(`Empty fragment: '${node.value}'`);
         return xNode('empty-fragment', {name}, (ctx, n) => {
             ctx.writeLine(`function $fragment_${n.name}() {};`);
@@ -5342,36 +5543,45 @@ function makeFragment(node) {
     }
 
     return xNode('fragment', {
+        $compile: [block.source, this.glob.apply],
+        $deps: [block.requireCD],
         name,
         props,
         external,
-        source: block.source,
-        template: xNode('template', {
-            name: '$parentElement',
-            body: block.tpl,
-            svg: block.svg
-        })
+        block
     }, (ctx, n) => {
-        ctx.write(true, `function $fragment_${n.name}($cd, label, $props, $events, $$fragmentSlot) {\n`);
-        ctx.indent++;
-
-        if(n.props?.length) {
-            if(ctx.inuse.apply) {
-                ctx.writeLine('let ' + n.props.join(', ') + ';');
-                ctx.writeLine(`$runtime.unwrapProps($cd, $props, ($$) => ({${n.props.join(', ')}} = $$));`);
-            } else {
-                ctx.writeLine('let ' + n.props.join(', ') + ';');
-                ctx.writeLine(`$props && ({${n.props.join(', ')}} = ($runtime.isFunction($props) ? $props() : $props));`);
+        if(ctx.isEmpty(n.block.source)) {
+            ctx.write(true, `let $fragment_${n.name} = $runtime.makeStaticBlock(`);
+            ctx.add(n.block.template);
+            ctx.write(');');
+        } else {
+            ctx.write(true, `function $fragment_${n.name}($props, $events={}, $$fragmentSlot) {`);
+            ctx.indent++;
+    
+            if(n.block.requireCD.value) ctx.write(true, 'let $cd = $runtime.cd_new();');
+    
+            if(n.props?.length) {
+                if(this.glob.apply.value) {
+                    ctx.writeLine('let ' + n.props.join(', ') + ';');
+                    ctx.writeLine(`$runtime.unwrapProps($cd, $props, ($$) => ({${n.props.join(', ')}} = $$));`);
+                } else {
+                    ctx.writeLine('let ' + n.props.join(', ') + ';');
+                    ctx.writeLine(`$props && ({${n.props.join(', ')}} = ($runtime.isFunction($props) ? $props() : $props));`);
+                }
             }
+    
+            ctx.write(true, 'let $dom = ');
+            ctx.add(n.block.template);
+            ctx.write(';');
+    
+            ctx.add(n.block.source);
+            if(n.block.requireCD.value) ctx.write(true, `return {$cd, $dom};`);
+            else ctx.write(true, `return {$dom};`);
+    
+            ctx.indent--;
+            ctx.writeLine('}');
         }
-
-        ctx.build(n.template);
-        ctx.build(n.source);
-        ctx.writeLine(`$runtime.insertAfter(label, $parentElement);`);
-
-        ctx.indent--;
-        ctx.writeLine('}');
-        if(n.external) ctx.writeLine(`$runtime.exportFragment($component, '${n.name}', $fragment_${n.name});`);
+        if(n.external) ctx.writeLine(`$runtime.exportFragment($cd, '${n.name}', $fragment_${n.name});`);
     });
 }
 
@@ -5393,7 +5603,7 @@ function parseAttibutes(attributes) {
                     name = name.substring(2);
                     events.push({
                         name,
-                        callback: `$events?.${name}`
+                        callback: `$events.${name}`
                     });
                 }
                 return;
@@ -5412,64 +5622,48 @@ function parseAttibutes(attributes) {
 }
 
 
-function attachFragment(node, element) {
+function attachFragment(node) {
     let name = node.elArg;
     assert(isSimpleName(name));
 
-    let slotBlock = null;
-
-    if(node.body?.length) slotBlock = this.buildBlock({body: trimEmptyNodes(node.body)}, {inline: true});
-
-    let {props, events, forwardAllEvents, staticProps} = parseAttibutes.call(this, node.attributes);
-    this.require('$cd');
-
     let slot = null;
-    if(slotBlock) {
-        let template = xNode('template', {
-            name: '$parentElement',
-            body: slotBlock.tpl,
-            svg: slotBlock.svg,
-            inline: !slotBlock.source
-        });
+    if(node.body?.length) slot = this.buildBlock({body: trimEmptyNodes(node.body)}, {inline: true});
 
-        slot = {
-            source: slotBlock.source,
-            template
-        };
-    }
+    let {props, events, forwardAllEvents, staticProps} = parseAttibutes.call(this, node.attributes);
 
     return xNode('call-fragment', {
+        $compile: [slot?.source],
+        $deps: [this.glob.apply],
         forwardAllEvents,
-        el: element.bindName(),
         name,
         events,
         props,
         slot,
         staticProps
     }, (ctx, n) => {
-        ctx.write(true, `$fragment_${n.name}($cd, ${n.el}`);
+        ctx.write(`$fragment_${n.name}(`);
         let missed = '';
         ctx.indent++;
 
         if(n.props.length) {
-            ctx.write(',\n', true);
+            ctx.write(true);
 
             const writeProps = () => ctx.write('{' + n.props.map(p => p.name == p.value ? p.name : `${p.name}: ${p.value}`).join(', ') + '}');
 
-            if(n.staticProps) writeProps();
+            if(n.staticProps || !this.glob.apply.value) writeProps();
             else {
                 ctx.write(`() => (`);
                 writeProps();
                 ctx.write(`)`);
             }
-        } else missed = ', 0';
+        } else missed = 'null';
 
         if(n.forwardAllEvents) {
             if(n.events.length) this.warning(`Fragment: mixing binding and forwarding is not supported: '${node.openTag}'`);
             ctx.write(missed, ', $events');
             missed = '';
         } else if(n.events.length) {
-            ctx.write(missed, ',\n', true, '{');
+            ctx.write(missed, ',', true, '{');
             missed = '';
 
             n.events.forEach((e, i) => {
@@ -5487,42 +5681,42 @@ function attachFragment(node, element) {
         } else missed += ', 0';
 
         if(n.slot) {
-            ctx.write(missed, ',\n');
+            ctx.write(missed, ',', true);
             missed = '';
-            if(n.slot.source) {
-                ctx.writeLine(`($cd, label) => {`);
-                ctx.goIndent(() => {
-                    ctx.build(n.slot.template);
-                    ctx.build(n.slot.source);
-                    ctx.writeLine(`$runtime.insertAfter(label, $parentElement);`);
-                });
-                ctx.write(true, `}`);
+            if(ctx.isEmpty(n.slot.source)) {
+                ctx.write(`$runtime.makeStaticBlock(`);
+                ctx.add(n.slot.template);
+                ctx.write(`)`);
             } else {
-                ctx.write(true, `($cd, label) => $runtime.insertAfter(label, `);
-                ctx.build(n.slot.template);
-                ctx.write(`)\n`);
+                ctx.write(`$runtime.makeBlock(`);
+                ctx.add(n.slot.template);
+                ctx.write(`, ($cd, $parentElement) => {`, true);
+                ctx.indent++;
+                ctx.add(n.slot.source);
+                ctx.indent--;
+                ctx.write(true, `})`);
             }
         }
 
         ctx.indent--;
-        if(n.props.length || n.events.length || n.slot) ctx.write(true, ');\n');
-        else ctx.write(');\n');
+        if(n.props.length || n.events.length || n.slot) ctx.write(true, ')');
+        else ctx.write(')');
 
     });
 }
 
-function attachFragmentSlot(label) {
-    this.require('$cd');
+function attachFragmentSlot(label, requireCD) {
+    requireCD.$value(true);
 
     return xNode('fragment-slot', {
         el: label.bindName()
     }, (ctx, n) => {
-        ctx.writeLine(`$$fragmentSlot?.($cd, ${n.el});`);
+        ctx.write(true, `$runtime.attachBlock($cd, ${n.el}, $$fragmentSlot?.())`);
     });
 }
 
-function attchExportedFragment(node, label, componentName) {
-    this.require('$cd');
+function attchExportedFragment(node, label, componentName, requireCD) {
+    requireCD.$value(true);
 
     let data = {
         name: node.elArg,
@@ -5532,48 +5726,44 @@ function attchExportedFragment(node, label, componentName) {
 
     let body = trimEmptyNodes(node.body || []);
     if(body.length) {
-        let block = this.buildBlock({body}, {inline: true});
-        assert(!block.svg, 'SVG is not supported for exported fragment');
-        data.source = block.source;
-        data.template = xNode('template', {
-            raw: true,
-            body: block.tpl
-        });
+        data.slot = this.buildBlock({body}, {inline: true});
+        data.$compile = [data.slot.source];
+        data.$deps = [data.slot.requireCD];
+        // assert(!data.slot.template.svg, 'SVG is not supported for exported fragment');
     }
 
     let pa = parseAttibutes.call(this, node.attributes);
-    data.props = pa.props;
-    data.events = pa.events;
-    data.forwardAllEvents = pa.forwardAllEvents;
-    data.staticProps = pa.staticProps;
+    data = {...pa, ...data};
 
     return xNode('attach-exported-fragment', data, (ctx, n) => {
-        ctx.write(true, `$runtime.attchExportedFragment($cd, $instance_${n.componentName}, '${n.name}', ${n.label}`);
-        let missed = '';
+        ctx.write(true, `$runtime.attachBlock($cd, ${n.label}, $runtime.callExportedFragment($instance_${n.componentName}, '${n.name}'`);
         ctx.indent++;
+        let missed = '';
 
-        if(n.props.length) {
-            ctx.write(',\n', true);
-
-            const writeProps = () => ctx.write('{' + n.props.map(p => p.name == p.value ? p.name : `${p.name}: ${p.value}`).join(', ') + '}');
+        if(n.slot) {
+            ctx.write(',', true);
 
-            if(n.staticProps) writeProps();
-            else {
-                ctx.write(`$runtime.observeProps(`);
-                if(this.config.immutable) ctx.write(`$runtime.keyComparator`);
-                else ctx.write(`$runtime.$$compareDeep`);
-                ctx.write(', () => (');
-                writeProps();
-                ctx.write('))');
+            if(ctx.isEmpty(n.slot.source)) {
+                ctx.write(`$runtime.makeStaticBlock(`);
+                ctx.add(n.slot.template);
+                ctx.write(`)`);
+            } else {
+                ctx.write(`$runtime.makeBlockBound($cd, `);
+                ctx.add(n.slot.template);
+                ctx.write(`, ($cd, $parentElement) => {`, true);
+                ctx.indent++;
+                ctx.add(n.slot.source);
+                ctx.indent--;
+                ctx.write(true, `})`);
             }
-        } else missed = ', 0';
+        } else missed = ', null';
 
         if(n.forwardAllEvents) {
             if(n.events.length) this.warning(`Fragment: mixing binding and forwarding is not supported: '${node.openTag}'`);
             ctx.write(missed, ', $events');
             missed = '';
         } else if(n.events.length) {
-            ctx.write(missed, ',\n', true, '{');
+            ctx.write(missed, ',', true, '{');
             missed = '';
 
             n.events.forEach((e, i) => {
@@ -5588,27 +5778,32 @@ function attchExportedFragment(node, label, componentName) {
                 }
             });
             ctx.write('}');
-        } else missed += ', 0';
+        } else missed += ', null';
 
-        if(n.template) {
-            if(missed) ctx.write(missed, `, \``);
-            else ctx.write(`,\n`, true, `\``);
-            ctx.build(n.template);
-            if(n.source) {
-                ctx.write(`\`, ($cd, $parentElement) => {\n`);
-                ctx.indent++;
-                ctx.build(n.source);
-                ctx.indent--;
-                ctx.writeLine(`});`);
-            } else {
-                ctx.write(`\`);\n`);
+        if(n.props.length) {
+            if(missed) ctx.write(missed);
+            missed = '';
+            ctx.write(',', true);
+
+            const writeProps = () => ctx.write('{' + n.props.map(p => p.name == p.value ? p.name : `${p.name}: ${p.value}`).join(', ') + '}');
+
+            if(n.staticProps) writeProps();
+            else {
+                ctx.write(`() => (`);
+                writeProps();
+                ctx.write(`), `);
+                if(this.config.immutable) ctx.write(`$runtime.keyComparator`);
+                else ctx.write(`$runtime.$$compareDeep`);
             }
-        } else ctx.write(');\n');
+
+        }
+
         ctx.indent--;
+        ctx.write('));');
     });
 }
 
-function attachHead(n) {
+function attachHead(n, requireCD) {
     if(n.elArg == 'window' || n.elArg == 'body') {
         let name = 'el' + (this.uniqIndex++);
         let block = this.buildBlock({body: [n]}, {malinaElement: true, inline: true, oneElement: name, bindAttributes: true});
@@ -5634,7 +5829,10 @@ function attachHead(n) {
             return true;
         });
 
-        let d = {};
+        let d = {
+            $deps: [this.glob.apply],
+            requireCD
+        };
         if(title?.body?.[0]) {
             assert(title.body[0].type == 'text');
             let r = this.parseText(title.body[0].value);
@@ -5645,27 +5843,39 @@ function attachHead(n) {
             }
         }
         if(body.length) {
-            let block = this.buildBlock({body}, {inline: true});
-            d.source = block.source;
-            d.template = xNode('template', {
-                name: '$parentElement',
-                body: block.tpl
+            let bb = this.buildBlock({body}, {
+                inline: true,
+                template: {
+                    name: '$parentElement',
+                    cloneNode: true,
+                    requireFragment: true
+                }
             });
+            d.source = bb.source;
+            d.template = bb.template;
+            d.blockCD = bb.requireCD;
+
+            d.$compile = [d.source];
+            d.$deps.push(d.blockCD);
+
             this.require('$onDestroy');
         }
 
-        return xNode('malina:head', d, (ctx, n) => {
+        const result = xNode('malina:head', d, (ctx, n) => {
+            if(n.blockCD.value) n.requireCD.$value(true);
             if(n.title != null) ctx.writeLine(`document.title = ${n.title};`);
             if(n.dynTitle) {
-                if(ctx.inuse.apply) ctx.writeLine(`$watchReadOnly($cd, () => (${n.dynTitle}), (value) => {document.title = value;});`);
-                else ctx.writeLine(`document.title = ${n.dynTitle};`);
+                if(this.glob.apply.value) {
+                    n.requireCD.$value(true);
+                    ctx.writeLine(`$watchReadOnly($cd, () => (${n.dynTitle}), (value) => {document.title = value;});`);
+                } else ctx.writeLine(`document.title = ${n.dynTitle};`);
             }
 
             if(n.template) {
                 ctx.writeLine(`{`);
                 ctx.indent++;
-                ctx.build(n.template);
-                ctx.build(n.source);
+                ctx.add(n.template);
+                ctx.add(n.source);
                 ctx.writeLine(`let a=$parentElement.firstChild, b=$parentElement.lastChild;`);
                 ctx.writeLine(`$onDestroy(() => {$runtime.$$removeElements(a, b)});`);
                 ctx.writeLine(`document.head.appendChild($parentElement);`);
@@ -5673,6 +5883,8 @@ function attachHead(n) {
                 ctx.writeLine(`}`);
             }
         });
+        requireCD.$depends(result);
+        return result;
     } else throw 'Wrong tag';
 }
 
@@ -5726,37 +5938,47 @@ function inspectProp(prop) {
     return {name, value, rawValue, static: statical};
 }
 
-function attachPortal(node) {
+function attachPortal(node, requireCD) {
     let body = trimEmptyNodes(node.body || []);
     if(!body.length) return;
-    let block = this.buildBlock({body}, {inline: true});
+
+    let bb = this.buildBlock({body}, {
+        inline: true,
+        template: {
+            name: '$parentElement',
+            cloneNode: true,
+            requireFragment: true
+        }
+    });
+
+    this.require('$component');
 
     let mount = node.attributes.find(a => a.name == 'mount')?.value;
     if(mount) mount = unwrapExp(mount);
 
-    this.require('$cd');
-
-    return xNode('portal', {
+    const result = xNode('portal', {
+        $compile: [bb.source],
+        $deps: [bb.requireCD],
         mount,
-        source: block.source,
-        template: xNode('template', {
-            name: '$parentElement',
-            body: block.tpl,
-            svg: block.svg
-        })
+        source: bb.source,
+        template: bb.template,
+        requireCD
     }, (ctx, n) => {
+        if(n.$deps[0].value) n.requireCD.$value(true);
         let label = n.mount || 'document.body';
         ctx.writeLine('{');
         ctx.indent++;
-        ctx.build(n.template);
-        ctx.build(n.source);
+        ctx.add(n.template);
+        ctx.add(n.source);
         ctx.writeLine(`let $$first = $parentElement[$runtime.firstChild];`);
         ctx.writeLine(`let $$last = $parentElement.lastChild;`);
-        ctx.writeLine(`$runtime.cd_onDestroy($cd, () => $runtime.$$removeElements($$first, $$last));`);
+        ctx.writeLine(`$runtime.cd_onDestroy(${n.$deps[0].value ? '$cd' : '$component'}, () => $runtime.$$removeElements($$first, $$last));`);
         ctx.writeLine(`$tick(() => ${label}.appendChild($parentElement));`);
         ctx.indent--;
         ctx.writeLine('}');
     });
+    requireCD.$depends(result);
+    return result;
 }
 
 function makeEventProp(prop, requireElement) {
@@ -5779,6 +6001,7 @@ function makeEventProp(prop, requireElement) {
     let modList = [], _mod = '';
     let handler = '', exp, func;
     let step = 0;
+    let rootModifier = false;
     for(let a of name) {
         if(a == '|') {
             assert$1(step <= 1);
@@ -5806,14 +6029,18 @@ function makeEventProp(prop, requireElement) {
 
     this.detectDependency(exp || handler);
 
+    let globalFunction = false;
     if(exp) {
         let type = detectExpressionType(exp);
         if(type == 'identifier') {
+            globalFunction = !!this.script.rootFunctions[exp];
             handler = exp;
             exp = null;
         } else if(type == 'function') {
             func = exp;
             exp = null;
+        } else if(type?.type == 'function-call') {
+            globalFunction = !!this.script.rootFunctions[type.name];
         }    }
 
     // modifiers
@@ -5834,6 +6061,10 @@ function makeEventProp(prop, requireElement) {
     let mods = [];
     let preventInserted;
     modList.forEach(opt => {
+        if(opt == 'root') {
+            rootModifier = true;
+            return;
+        }
         if(opt == 'preventDefault' || opt == 'prevent') {
             if(preventInserted) return;
             mods.push('$event.preventDefault();');
@@ -5872,7 +6103,8 @@ function makeEventProp(prop, requireElement) {
         exp,
         handlerName: handler,
         func,
-        mods
+        mods,
+        globalFunction
     }, (ctx, n) => {
         if(n.handlerName && !ctx.inuse.apply && !n.mods) return ctx.write(n.handlerName);
         ctx.write(`($event) => { `);
@@ -5882,11 +6114,11 @@ function makeEventProp(prop, requireElement) {
             if(last(n.exp) != ';') n.exp += ';';
             ctx.write(`${n.exp}`);
         } else if(n.func) ctx.write(`(${n.func})($event);`);
-        if(ctx.inuse.apply) ctx.write(` $$apply();`);
+        if(ctx.inuse.apply && !n.globalFunction) ctx.write(` $$apply();`);
         ctx.write(`}`);
     });
 
-    return {event, fn};
+    return {event, fn, rootModifier};
 }
 
 async function compile(source, config = {}) {
@@ -5919,6 +6151,7 @@ async function compile(source, config = {}) {
         makeEachBlock,
         makeifBlock,
         makeComponent,
+        makeComponentDyn,
         makeHtmlBlock,
         parseText,
         makeAwaitBlock,
@@ -5934,17 +6167,27 @@ async function compile(source, config = {}) {
         checkRootName: checkRootName,
 
         inuse: {},
-        require: function() {
-            for(let name of arguments) {
+        glob: {
+            apply: xNode('apply', false),
+            component: xNode('$component', false),
+            componentFn: xNode('componentFn', false),
+            rootCD: xNode('root-cd', false)
+        },
+        require: function(...args) {
+            for(let name of args) {
                 let deps = true;
                 if(name == '$props:no-deps') {name = '$props'; deps = false;}                if(name == 'apply' && ctx.script.readOnly) name = 'blankApply';
                 if(ctx.inuse[name] == null) ctx.inuse[name] = 0;
                 ctx.inuse[name]++;
                 if(!deps) continue;
+                if(name == 'apply') ctx.glob.apply.$value(true);
+                if(name == '$component') ctx.glob.component.$value(true);
                 if(name == '$attributes') ctx.require('$props');
                 if(name == '$props' && !ctx.script.readOnly) ctx.require('apply', '$cd');
-                if(name == 'apply' && !ctx.script.readOnly) ctx.require('$cd');
-                if(name == '$cd') ctx.require('$component');
+                if(name == '$cd') {
+                    ctx.glob.rootCD.$value(true);
+                    ctx.require('$component');
+                }
                 if(name == '$onDestroy') ctx.require('$component');
                 if(name == '$onMount') ctx.require('$component');
             }
@@ -5977,9 +6220,7 @@ async function compile(source, config = {}) {
         },
 
         xBuild: node => {
-            let w = new xWriter(ctx);
-            w.build(node);
-            return w.toString();
+            return xBuild(ctx, node);
         }
     };
 
@@ -6031,48 +6272,9 @@ async function compile(source, config = {}) {
         result.push(`import { $$htmlToFragment } from 'malinajs/runtime.js';`);
     }
     result.push(ctx.module.top);
+    result.push(makeComponentFn.call(ctx));
 
-    result.push(xNode('block', {
-        name: config.name,
-        body: [ctx.module.head, ctx.module.code, ctx.module.body]
-    }, (ctx, n) => {
-        ctx.writeIndent();
-        if(config.exportDefault) ctx.write('export default ');
-        else ctx.write(`const ${n.name} = `);
-
-        let component = xNode('function', {
-            args: ['$option'],
-            inline: true,
-            arrow: true,
-            body: n.body
-        });
-
-        if(ctx.inuse.apply) {
-            ctx.write('$runtime.makeComponent(');
-            component.args.push('$$apply');
-            ctx.build(component);
-            ctx.write(', $runtime.$base);\n');
-        } else if(ctx.inuse.$cd || ctx.inuse.$component || ctx.inuse.$context || ctx.inuse.blankApply) {
-            if(ctx.inuse.blankApply) {
-                component.body[0].body.unshift(xNode('block', (ctx) => {
-                    ctx.writeLine('let $$apply = $runtime.noop;');
-                }));
-            }
-
-            ctx.write('$runtime.makeComponent(');
-            ctx.build(component);
-            ctx.write(', $runtime.$readOnlyBase);\n');
-        } else {
-            ctx.write('($element, $option={}) => {\n');
-            ctx.goIndent(() => {
-                ctx.inuse.$insertElementByOption = true;
-                ctx.build(xNode('block', {body: n.body}));
-            });
-            ctx.write('}');
-        }
-    }));
-
-    ctx.result = ctx.xBuild(result);
+    ctx.result = xBuild(ctx, result);
 
     await hook(ctx, 'build');
     return ctx;
@@ -6121,8 +6323,7 @@ function loadConfig(filename, option) {
 
     if(localConfig) {
         const confFn = require(localConfig);
-        if(typeof(confFn) == 'function') result = confFn(result, filename);
-        else result = confFn;
+        result = confFn(result, filename);
     }
     if(!result.path) result.path = filename;
     if(!result.name) result.name = filename.match(/([^/\\]+)\.\w+$/)[1];
@@ -6130,6 +6331,60 @@ function loadConfig(filename, option) {
     return result;
 }
 
+
+function makeComponentFn() {
+    let componentFn = xNode('componentFn', {
+        $deps: [this.glob.apply, this.glob.rootCD],
+        body: [this.module.head, this.module.code, this.module.body],
+    }, (ctx, n) => {
+        let component = xNode('function', {
+            args: ['$option'],
+            inline: true,
+            arrow: true,
+            body: n.body
+        });
+
+        if(this.glob.apply.value) {
+            ctx.add(this.glob.componentFn);
+            ctx.write('$runtime.makeComponent(');
+            component.args.push('$$apply');
+            ctx.add(component);
+            ctx.write(', $runtime.$base);', true);
+        } else if(this.glob.rootCD.value || ctx.inuse.$cd || ctx.inuse.$component || ctx.inuse.$context || ctx.inuse.blankApply) {
+            ctx.add(this.glob.componentFn);
+            if(ctx.inuse.blankApply) {
+                component.body[0].body.unshift(xNode('block', (ctx) => {
+                    ctx.writeLine('let $$apply = $runtime.noop;');
+                }));
+            }
+
+            ctx.write('$runtime.makeComponent(');
+            ctx.add(component);
+            ctx.write(');', true);
+        } else {
+            this.glob.componentFn.$value('thin');
+            ctx.add(this.glob.componentFn);
+            ctx.write('($option={}) => {', true);
+            ctx.goIndent(() => {
+                ctx.add(xNode('block', {body: n.body}));
+            });
+            ctx.write(true, '}');
+        }
+    });
+
+    return xNode('block', {
+        $compile: [this.module.head, this.module.code, this.module.body],
+        name: this.config.name,
+        componentFn
+    }, (ctx, n) => {
+        ctx.writeIndent();
+        if(this.config.exportDefault) ctx.write('export default ');
+        else ctx.write(`const ${n.name} = `);
+        ctx.add(this.glob.apply);
+        ctx.add(n.componentFn);
+    });
+}
+
 if(process.argv.length < 3) {
     console.log('node compile.js input.html -o output.js -n widgetName -innerOption');
     process.exit();