malinajs 0.6.50 → 0.7.1-alpha

package/malina.js

@@ -25,10 +25,10 @@
         });
     }
     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');
@@ -79,11 +79,20 @@
             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) {
@@ -111,147 +120,6 @@
     }
 
 
-    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);
@@ -347,95 +215,136 @@
         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)
@@ -448,7 +357,10 @@
         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 {
@@ -474,8 +386,20 @@
             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;
     }
 
@@ -515,7 +439,7 @@
                 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} = `);
@@ -525,7 +449,7 @@
                 }
                 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--;
@@ -541,10 +465,11 @@
                 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;
                         }
@@ -575,7 +500,12 @@
                         });
                     }
 
-                    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) {
@@ -612,11 +542,13 @@
         },
         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, '<>');
@@ -624,33 +556,177 @@
             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;
@@ -739,7 +815,7 @@
                     }
                 }
                 if(begin) {
-                    if(a.match(/[\da-zA-Z^\-]/)) {
+                    if(a.match(/[\da-zA-Z^]/)) {
                         name += a;
                         continue;
                     } else {
@@ -1101,13 +1177,11 @@
             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'));
@@ -1121,11 +1195,7 @@
                     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');
@@ -1286,7 +1356,7 @@
 
         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';
             }
@@ -1332,31 +1402,14 @@
         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') {
@@ -1390,11 +1443,12 @@
             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 || {};';
         }));
@@ -1404,7 +1458,7 @@
                 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 = [];
@@ -1463,11 +1517,14 @@
             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) {
@@ -1555,21 +1612,38 @@
         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);
 
@@ -1592,8 +1666,10 @@
             }
         }));
 
-        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;');
         }));
 
@@ -1627,17 +1703,34 @@
 
     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);
@@ -1650,7 +1743,7 @@
             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;
@@ -1682,11 +1775,29 @@
                     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);
@@ -1696,13 +1807,18 @@
                             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 => {
@@ -1714,32 +1830,46 @@
                             ]}));
                         });
 
+                        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;
@@ -1748,33 +1878,52 @@
                         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
@@ -1784,7 +1933,7 @@
                     }
                     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);
@@ -1816,7 +1965,9 @@
                         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
@@ -1824,17 +1975,15 @@
                         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);
@@ -1842,18 +1991,20 @@
                     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 => {
@@ -1866,57 +2017,111 @@
         };
         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);
@@ -3869,7 +4074,7 @@
                                 }
                             } 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;
@@ -3894,7 +4099,8 @@
                                 cleanSelector,
                                 isSimple,
                                 source: [],
-                                fullyGlobal: origin.every(i => i.global)
+                                fullyGlobal: origin.every(i => i.global),
+                                hashedSelectors: []
                             };
                         }
 
@@ -3902,17 +4108,18 @@
                             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--) {
@@ -3940,6 +4147,7 @@
         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;
         };
@@ -3953,7 +4161,36 @@
             });
         };
 
+        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 => {
@@ -3978,6 +4215,7 @@
             });
 
             Object.values(selectors).forEach(sel => {
+                sel.$selector = true;
                 if(sel.fullyGlobal || !sel.local) return;
                 let selected;
                 try {
@@ -3988,17 +4226,30 @@
                     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('');
         };
     }
@@ -4024,10 +4275,8 @@
                 //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;
@@ -4069,10 +4318,6 @@
         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);
@@ -4111,22 +4356,21 @@
         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];
 
@@ -4136,30 +4380,12 @@
             }
         }
 
-        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) {
@@ -4187,12 +4413,11 @@
             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');
@@ -4203,7 +4428,7 @@
                 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) => {
@@ -4214,93 +4439,68 @@
                 }
 
                 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;
@@ -4350,35 +4550,21 @@
                 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:'))) {
@@ -4391,6 +4577,7 @@
                     assert(metaClass);
                 }
                 assert(value);
+                this.css.passingClass = true;
 
                 const parsed = this.parseText(prop.value);
                 this.detectDependency(parsed);
@@ -4408,41 +4595,87 @@
         });
 
 
-        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';
 
@@ -4468,77 +4701,61 @@
             } 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);
@@ -4548,17 +4765,7 @@
                 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];
@@ -4566,7 +4773,6 @@
                     // spread operator
                     name = name.substring(3);
                     assert(detectExpressionType(name) == 'identifier');
-                    this.detectDependency(name);
                     return node.spreading.push(`...${name}`);
                 } else {
                     prop.value = prop.name;
@@ -4597,7 +4803,8 @@
         } 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()
@@ -4617,18 +4824,20 @@
                 })};
             }
 
-            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) {
@@ -4636,7 +4845,8 @@
                 return;
             }
 
-            this.require('apply', '$cd');
+            requireCD.$value(true);
+            this.require('apply');
             let exp;
             arg = arg.split(/[\:\|]/);
             let attr = arg.shift();
@@ -4715,7 +4925,7 @@
             })};
         } 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()}]` : '';
@@ -4779,8 +4989,7 @@
             });
 
             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 => {
@@ -4797,24 +5006,40 @@
                 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');
@@ -4828,18 +5053,22 @@
                         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}');`);
@@ -4848,18 +5077,22 @@
                                 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) {
@@ -4878,36 +5111,41 @@
                     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]
                 })};
             }
 
@@ -4920,104 +5158,86 @@
         }
     }
 
-    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;
 
@@ -5032,12 +5252,15 @@
             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*/);
@@ -5070,82 +5293,93 @@
                 })]
             });
         }
-        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;
@@ -5153,7 +5387,7 @@
             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();
         }
@@ -5162,7 +5396,7 @@
 
         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 = [];
@@ -5170,27 +5404,30 @@
                 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(),
@@ -5198,127 +5435,88 @@
             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));
@@ -5333,9 +5531,12 @@
             });
         }
 
+        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}() {};`);
@@ -5343,36 +5544,45 @@
         }
 
         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});`);
         });
     }
 
@@ -5394,7 +5604,7 @@
                         name = name.substring(2);
                         events.push({
                             name,
-                            callback: `$events?.${name}`
+                            callback: `$events.${name}`
                         });
                     }
                     return;
@@ -5413,64 +5623,48 @@
     }
 
 
-    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) => {
@@ -5488,42 +5682,42 @@
             } 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,
@@ -5533,48 +5727,44 @@
 
         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) => {
@@ -5589,27 +5779,32 @@
                     }
                 });
                 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});
@@ -5635,7 +5830,10 @@
                 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);
@@ -5646,27 +5844,39 @@
                 }
             }
             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);`);
@@ -5674,6 +5884,8 @@
                     ctx.writeLine(`}`);
                 }
             });
+            requireCD.$depends(result);
+            return result;
         } else throw 'Wrong tag';
     }
 
@@ -5727,37 +5939,47 @@
         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) {
@@ -5780,6 +6002,7 @@
         let modList = [], _mod = '';
         let handler = '', exp, func;
         let step = 0;
+        let rootModifier = false;
         for(let a of name) {
             if(a == '|') {
                 assert$1(step <= 1);
@@ -5807,14 +6030,18 @@
 
         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
@@ -5835,6 +6062,10 @@
         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();');
@@ -5873,7 +6104,8 @@
             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) => { `);
@@ -5883,14 +6115,14 @@
                 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};
     }
 
-    const version = '0.6.50';
+    const version = '0.7.1-alpha';
 
 
     async function compile(source, config = {}) {
@@ -5923,6 +6155,7 @@
             makeEachBlock,
             makeifBlock,
             makeComponent,
+            makeComponentDyn,
             makeHtmlBlock,
             parseText,
             makeAwaitBlock,
@@ -5938,17 +6171,27 @@
             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');
                 }
@@ -5981,9 +6224,7 @@
             },
 
             xBuild: node => {
-                let w = new xWriter(ctx);
-                w.build(node);
-                return w.toString();
+                return xBuild(ctx, node);
             }
         };
 
@@ -6035,48 +6276,9 @@
             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;
@@ -6125,8 +6327,7 @@
 
         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];
@@ -6134,6 +6335,60 @@
         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);
+        });
+    }
+
     exports.compile = compile;
     exports.version = version;