malinajs 0.7.2-a1 → 0.7.2-a11

package/malina.js

@@ -290,6 +290,7 @@
 
     this.isEmpty = function(n) {
       if(n == null) return true;
+      if(n.$type == 'if:bind') return false;
       assert(n.$done, 'Node is not built');
       return !n.$result.some(r => {
         if(typeof (r) == 'string') return true;
@@ -712,6 +713,7 @@
           switch(node.type) {
             case 'node':
             case 'slot':
+            case 'block':
             case 'fragment':
               if(node.body) go(node.body, node);
               break
@@ -761,8 +763,9 @@
           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') {
+                  prev.name == 'li' && next.name == 'li' ||
+                  parentNode?.type == 'node' && parentNode?.name == 'select' && prev.name == 'option' && next.name == 'option' ||
+                  prev.name == 'div' && next.name == 'div') {
                 body.splice(i, 1);
                 continue;
               }
@@ -783,6 +786,10 @@
               body.splice(i, 1);
               continue;
             }
+            if((p == 'option' || n == 'option') && (parentNode.type == 'node' && parentNode.name == 'select')) {
+              body.splice(i, 1);
+              continue;
+            }
             if(parentNode.type == 'node' && ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'].includes(parentNode.name)) {
               body.splice(i, 1);
               continue;
@@ -834,121 +841,103 @@
     go(data.body);
   }
 
-  function parse() {
-    let source = this.source;
-    let index = 0;
+  class Reader {
+    constructor(source) {
+      if(source instanceof Reader) return source;
+      this.index = 0;
+      this.source = source;
+    }
 
-    const readNext = () => {
-      assert(index < source.length, 'EOF');
-      return source[index++];
-    };
+    read(pattern) {
+      assert(!this.end(), 'EOF');
+      if(pattern == null) {
+        return this.source[this.index++];
+      } else if(pattern instanceof RegExp) {
+        assert(pattern.source[0] == '^');
+        const rx = this.source.substring(this.index).match(pattern);
+        assert(rx && rx.index == 0, 'Wrong syntax');
+        let r = rx[1] || rx[0];
+        this.index += rx[0].length;
+        return r;
+      } else throw 'Not implemented';
+    }
 
-    const probeNext = () => source[index];
+    probe(pattern) {
+      if(pattern instanceof RegExp) {
+        assert(pattern.source[0] == '^');
+        const r = this.source.substring(this.index).match(pattern);
+        if(r) return r[0];
+      } else {
+        if(this.source[this.index] == pattern[0] && this.source.substr(this.index, pattern.length) == pattern) return pattern;
+      }
+      return null;
+    }
 
-    const readTag = () => {
-      let start = index;
-      let a = readNext();
-      assert(a === '<', 'Tag error');
-      let attributes = [];
-      let begin = true;
-      let name = '';
-      let eq, attr_start;
-      let elArg = null;
+    probeQuote() {
+      const a = this.source[this.index];
+      return a == '"' || a == "'" || a == '`';
+    }
 
-      const error = (name) => {
-        let e = new Error(name);
-        e.details = source.substring(start, index);
-        throw e;
-      };
+    readIf(pattern) {
+      const r = this.probe(pattern);
+      if(r != null) this.index += r.length;
+      return r;
+    }
 
-      function flush(shift) {
-        if(!attr_start) return;
-        shift = shift || 0;
-        let end = index - 1 + shift;
-        if(elArg === true) {
-          elArg = source.substring(attr_start, end);
-          attr_start = null;
-          eq = null;
-          return;
-        }
-        let a = {
-          content: source.substring(attr_start, end)
-        };
-        if(eq) {
-          a.name = source.substring(attr_start, eq);
-          a.value = source.substring(eq + 1, end);
-          if(a.value[0] == '"' || a.value[0] == '\'') a.value = a.value.substring(1);
-          let i = a.value.length - 1;
-          if(a.value[i] == '"' || a.value[i] == '\'') a.value = a.value.substring(0, i);
-        } else a.name = a.content;
-        attributes.push(a);
-        attr_start = null;
-        eq = null;
+    end() {
+      return this.index >= this.source.length;
+    }
+
+    skip() {
+      while(!this.end()) {
+        if(!this.source[this.index].match(/\s/)) break;
+        this.index++;
       }
+    }
 
+    readString() {
+      let q = this.read();
+      assert(q == '"' || q == '`' || q == `'`, 'Wrong syntax');
+      let a = null, p, result = q;
       while(true) {
-        a = readNext();
-        if(!begin && !attr_start && a.match(/\S/) && a != '/' && a != '>') attr_start = index - 1;
-        if(a == '"' || a == "'" || a == '`') {
-          while(a != readNext());
-          continue;
-        }
-        if(a == '{') {
-          index--;
-          readBinding();
-          flush(1);
-          continue;
-        }
-        if(a == '}') error('Wrong attr');
-        if(a == '<') error('Wrong tag');
-        if(a == '/') {
-          a = readNext();
-          assert(a == '>');
-          flush(-1);
-        }
-        if(a == '>') {
-          flush();
-          const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-          let voidTag = voidTags.indexOf(name) >= 0;
-          let closedTag = voidTag || source[index - 2] == '/';
-          return {
-            type: 'node',
-            name,
-            elArg,
-            openTag: source.substring(start, index),
-            start: start,
-            end: index,
-            closedTag,
-            voidTag,
-            attributes
-          };
-        }
-        if(begin) {
-          if(a.match(/[\da-zA-Z^\-]/)) {
-            name += a;
-            continue;
-          } else {
-            begin = false;
-            if(a == ':') {
-              elArg = true;
-              attr_start = index;
-            }
-          }
-        } else if(attr_start) {
-          if(a == '=' && !eq) eq = index - 1;
-          else if(a.match(/\s/)) flush();
-        }
+        p = a;
+        a = this.read();
+        result += a;
+        if(a == q && p != '\\') break;
       }
-    };
+      return result;
+    }
+
+    readAttribute() {
+      let name = '';
+      while(true) {
+        if(this.end()) break;
+        let a = this.source[this.index];
+        if(a == '=' || a == '/' || a == '>' || a == '\t' || a == '\n' || a == '\v' || a == '\f' || a == '\r' || a == ' ' || a == ' ') break;
+        name += a;
+        this.index++;
+      }
+      assert(name, 'Syntax error');
+      return name;
+    }
+
+    sub(start, end) {
+      return this.source.substring(start, end || this.index);
+    }
+  }
 
-    const readScript = (tag) => {
-      let endTag = `</${tag}>`;
-      let q, a, p, start = index;
+  function parseHTML(source) {
+    const reader = new Reader(source);
+
+    const readScript = (reader) => {
+      const start = reader.index;
 
       const readRegExp = () => {
+        assert(reader.read() == '/');
+        let a, p, q;
         while(true) {
           p = a;
-          a = readNext();
+          a = reader.read();
           if(q) {
             if(a != q) continue;
             if(p == '\\') continue;
@@ -961,108 +950,40 @@
       };
 
       while(true) {
-        p = a;
-        a = readNext();
-        if(q) {
-          if(a != q) continue;
-          if(p == '\\') continue;
-          q = null;
-          continue;
-        }
-        if(a == '"' || a == '\'' || a == '`') {
-          q = a;
+        if(reader.probeQuote()) {
+          reader.readString();
           continue;
         }
-        if(a == '/') {
-          let n = probeNext();
-          if(n == '/') {  // inline comment
-            while(readNext() != '\n');
-            a = null;
-            continue
+        if(reader.probe('/')) {
+          if(reader.readIf('//')) {
+            while(reader.read() != '\n');
+            continue;
           }
-          if(n == '*') {
-            readNext();
-            while(true) {  // multiline comment
-              if(readNext() == '*' && probeNext() == '/') break;
+          if(reader.readIf('/*')) {
+            while(true) {
+              if(reader.read() == '*' && reader.readIf('/')) break;
             }
-            readNext();
-            a = null;
             continue;
           }
           readRegExp();
           continue;
         }
-        if(a == '<') {
-          if(source.substring(index - 1, index + endTag.length - 1) == endTag) {
-            let end = index - 1;
-            index += endTag.length - 1;
-            return source.substring(start, end);
-          }
-        }
+        if(reader.readIf('</script>')) {
+          return reader.sub(start, reader.index - 9);
+        } else reader.read();
       }
     };
 
     const readStyle = () => {
-      let start = index;
-      let end = source.substring(start).indexOf('</style>') + start;
-      assert(end >= 0, '<style> is not closed');
-      index = end + 9;
-      return source.substring(start, end);
+      return reader.read(/^(.*?)<\/style>/s);
     };
 
-    const readBinding = () => {
-      let start = index;
-      assert(readNext() === '{', 'Bind error');
-      let a = null, p, q;
-      let bkt = 1;
-
-      while(true) {
-        p = a;
-        a = readNext();
-
-        if(q) {
-          if(a != q) continue;
-          if(p == '\\') continue;
-          q = null;
-          continue;
-        }
-        if(a == '"' || a == "'" || a == '`') {
-          q = a;
-          continue;
-        }
-        if(a == '*' && p == '/') {
-          // comment block
-          while(true) {
-            p = a;
-            a = readNext();
-            if(a == '/' && p == '*') break;
-          }
-          continue;
-        }
-
-        if(a == '{') {
-          bkt++;
-          continue;
-        }
-        if(a == '}') {
-          bkt--;
-          if(bkt > 0) continue;
-        } else continue;
-
-        return {
-          value: source.substring(start + 1, index - 1),
-          raw: source.substring(start, index)
-        };
-      }
+    const readComment = () => {
+      return reader.read(/^<!--.*?-->/s);
     };
 
-    const readComment = () => {
-      let start = index;
-      let end = source.indexOf('-->', start);
-      assert(end >= 0, 'Comment is not closed');
-      end += 3;
-      index = end;
-      return source.substring(start, end);
+    const readTemplate = () => {
+      return reader.read(/^(.*?)<\/template>/s);
     };
 
     const go = (parent, push) => {
@@ -1085,12 +1006,11 @@
         textNode = null;
       };
 
-      while(index < source.length) {
-        let a = source[index];
-        if(a === '<' && source[index + 1].match(/\S/)) {
+      while(!reader.end()) {
+        if(reader.probe('<') && reader.probe(/^<\S/)) {
           flushText();
 
-          if(source.substring(index, index + 4) === '<!--') {
+          if(reader.probe('<!--')) {
             push({
               type: 'comment',
               content: readComment()
@@ -1098,14 +1018,8 @@
             continue;
           }
 
-          if(source[index + 1] === '/') { // close tag
-            let name = '';
-            index += 2;
-            while(true) {
-              a = readNext();
-              if(a === '>') break;
-              name += a;
-            }
+          if(reader.readIf('</')) { // close tag
+            let name = reader.read(/^([^>]*)>/);
             name = name.trim();
             if(name) {
               name = name.split(':')[0];
@@ -1114,15 +1028,15 @@
             return;
           }
 
-          let tag = readTag();
+          let tag = readTag(reader);
           push(tag);
           if(tag.name === 'script') {
             tag.type = 'script';
-            tag.content = readScript('script');
+            tag.content = readScript(reader);
             continue;
           } else if(tag.name === 'template') {
             tag.type = 'template';
-            tag.content = readScript('template');
+            tag.content = readTemplate();
             continue;
           } else if(tag.name === 'style') {
             tag.type = 'style';
@@ -1143,9 +1057,9 @@
             throw e;
           }
           continue;
-        } else if(a === '{') {
-          if(['#', '/', ':', '@', '*'].indexOf(source[index + 1]) >= 0) {
-            let bind = readBinding();
+        } else if(reader.probe('{')) {
+          if(reader.probe(/^\{[#/:@*]/)) {
+            let bind = parseBinding(reader);
             if(bind.value[0] != '*') flushText();
             if(bind.value[0] == '*') {
               addText(bind.raw);
@@ -1244,11 +1158,29 @@
             } else if(bind.value == '/fragment') {
               assert(parent.type === 'fragment', 'Fragment error: /fragment');
               return;
+            } else if(bind.value.match(/^#([\w\-]+)/)) {
+              const name = bind.value.match(/^#([\w\-]+)/)[1];
+              let tag = {
+                type: 'block',
+                value: bind.value,
+                name,
+                body: []
+              };
+              push(tag);
+              go(tag);
+              continue;
+            } else if(bind.value.match(/^\/([\w\-]+)/)) {
+              const name = bind.value.match(/^\/([\w\-]+)/)[1];
+              assert(parent.type === 'block' && parent.name == name, `Fragment error: ${parent.name} - ${name}`);
+              return;
             } else throw 'Error binding: ' + bind.value;
+          } else {
+            addText(parseBinding(reader).raw);
+            continue;
           }
         }
 
-        addText(readNext());
+        addText(reader.read());
       }
       flushText();
       assert(parent.type === 'root', 'File ends to early');
@@ -1260,9 +1192,41 @@
     };
     go(root);
 
-    this.DOM = root;
+    return root;
   }
 
+  function readTag(reader) {
+    const start = reader.index;
+    assert(reader.read() === '<', 'Tag error');
+
+    let name = reader.read(/^[\da-zA-Z^\-]+/);
+    let elArg = null;
+
+    if(reader.readIf(':')) {
+      elArg = reader.read(/^[^\s>/]+/);
+    }
+
+    let attributes = parseAttibutes(reader, {closedByTag: true});
+
+    let closedTag = false;
+    if(reader.readIf('/>')) closedTag = true;
+    else assert(reader.readIf('>'));
+
+    const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+    let voidTag = voidTags.indexOf(name) >= 0;
+    if(voidTag) closedTag = true;
+    return {
+      type: 'node',
+      name,
+      elArg,
+      openTag: reader.sub(start),
+      start: start,
+      end: reader.index,
+      closedTag,
+      voidTag,
+      attributes
+    };
+  }
 
   function parseText(source) {
     let i = 0;
@@ -1328,11 +1292,116 @@
         else result.push({ ...p });
       }
     });
-    result = result.map(p => p.type == 'text' ? '`' + Q(p.value) + '`' : '(' + p.value + ')').join('+');
-    return { result, parts, staticText };
+    result = '`' + result.map(p => p.type == 'text' ? Q(p.value) : '${' + p.value + '}').join('') + '`';
+    return {
+      result,
+      parts,
+      staticText,
+      binding: parts.length == 1 && parts[0].type == 'exp' ? parts[0].value : null
+    };
   }
 
-  function parse$1() {
+
+  const parseBinding = (reader) => {
+    let start = reader.index;
+
+    assert(reader.read() === '{', 'Bind error');
+    let a = null, p, q;
+    let bkt = 1;
+
+    while(true) {
+      p = a;
+      a = reader.read();
+
+      if(q) {
+        if(a != q) continue;
+        if(p == '\\') continue;
+        q = null;
+        continue;
+      }
+      if(a == '"' || a == "'" || a == '`') {
+        q = a;
+        continue;
+      }
+      if(a == '*' && p == '/') {
+        // comment block
+        while(true) {
+          p = a;
+          a = reader.read();
+          if(a == '/' && p == '*') break;
+        }
+        continue;
+      }
+
+      if(a == '{') {
+        bkt++;
+        continue;
+      }
+      if(a == '}') {
+        bkt--;
+        if(bkt > 0) continue;
+      } else continue;
+
+      const raw = reader.sub(start);
+      return {
+        raw,
+        value: raw.substring(1, raw.length - 1),
+      };
+    }
+  };
+
+
+  const parseAttibutes = (source, option={}) => {
+    const r = new Reader(source);
+    let result = [];
+
+    while(!r.end()) {
+      r.skip();
+      if(option.closedByTag) {
+        if(r.probe('/>') || r.probe('>')) break;
+      } else if(r.end()) break;
+      let start = r.index;
+      if(r.probe('{*')) {
+        const {raw} = parseBinding(r);
+        result.push({name: raw, content: raw});
+      } else if(r.probe('*{')) {
+        r.read();
+        let {raw} = parseBinding(r);
+        raw = '*' + raw;
+        result.push({name: raw, content: raw});
+      } else if(r.probe('{...')) {
+        let {raw} = parseBinding(r);
+        result.push({name: raw, content: raw});
+      } else {
+        let name = r.readAttribute();
+        assert(name, 'Wrong syntax');
+        if(r.readIf('=')) {
+          if(r.probe('{')) {
+            const {raw} = parseBinding(r);
+            result.push({name, value: raw, raw, content: r.sub(start)});
+          } else if(r.probeQuote()) {
+            const raw = r.readString();
+            const value = raw.substring(1, raw.length - 1);
+            result.push({name, value, raw, content: r.sub(start)});
+          } else {
+            const value = r.readIf(/^[^\s<>]+/);
+            result.push({name, value, raw: value, content: r.sub(start)});
+          }
+        } else {
+          let value;
+          if(name[0] == '{' && last(name) == '}' && !name.startsWith('{...')) {
+            value = name;
+            name = unwrapExp(name);
+          }
+          result.push({name, value, raw: value, content: r.sub(start)});
+        }
+      }
+    }
+
+    return result;
+  };
+
+  function parse() {
     let source = this.scriptNodes.length ? this.scriptNodes[0].content : null;
     this.script = {
       source,
@@ -1793,6 +1862,34 @@
     });
   };
 
+  function radioInput(node, el) {
+    assert(node.name == 'input');
+    const aType = node.attributes.find(a => a.name == 'type');
+    if(!aType || aType.value != 'radio') return null;
+    const aName = node.attributes.find(a => a.name == 'name');
+    if(!aName.value.startsWith('{')) return null;
+    const aValue = node.attributes.find(a => a.name == 'value');
+
+    aName._skip = true;
+    aValue._skip = true;
+
+    const name = unwrapExp(aName.value);
+    assert(detectExpressionType(name) == 'identifier', 'Wrong name for radio input');
+    let value = aValue.value;
+    if(value.match(/^\{.+\}$/)) value = unwrapExp(aValue.value);
+    else value = '`' + value + '`';
+
+    this.require('apply');
+
+    return xNode('radioInput', {
+      name,
+      value,
+      el: el.bindName()
+    }, (ctx, n) => {
+      ctx.write(true, `$runtime.radioButton(${n.el}, () => (${n.value}), () => (${n.name}), ($$) => {${n.name} = $$; $$apply();});`);
+    });
+  }
+
   function buildRuntime() {
     this.module.head.push(xNode('$events', (ctx) => {
       if(this.inuse.$events) ctx.write(true, 'const $events = $option.events || {};');
@@ -1807,8 +1904,19 @@
       }
     }));
 
-    this.module.head.push(xNode('$context', (ctx) => {
-      if(this.inuse.$context) ctx.write(true, 'const $context = $option.context || {};');
+    this.module.head.push(xNode('$context', {
+      $hold: ['componentFn']
+    }, (ctx) => {
+      if(this.inuse.$context) {
+        this.require('componentFn');
+        ctx.write(true, 'const $context = $runtime.$context;');
+      }
+    }));
+
+    this.module.head.push(this.glob.keepAliveStore = xNode('$$keepAliveStore', {
+      value: false
+    }, (ctx, n) => {
+      if(n.value) ctx.write(true, `const $$keepAliveStore = new Map();`);
     }));
 
     this.module.top.push(xNode(this.glob.$onMount, {
@@ -1851,7 +1959,6 @@
 
     let bb = this.buildBlock(this.DOM, {
       inline: true,
-      protectLastTag: true,
       allowSingleBlock: true,
       template: {
         name: '$parentElement',
@@ -1938,7 +2045,6 @@
     let binds = xNode('block');
     let result = {};
     let inuse = Object.assign({}, this.inuse);
-    let lastTagDynamic = false;
 
     if(!option.parentElement) option.parentElement = '$parentElement';
 
@@ -2021,26 +2127,51 @@
         if(svg && !other) rootSVG = true;
       }
 
-      let lastStatic;
+      let labelRequest;
 
-      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);
+      const requireLabel = (final, noParent) => {
+        if(labelRequest) {
+          if(labelRequest.final) {
+            labelRequest.set(tpl.push(xNode('node:comment', { label: true, value: '' })));
+          } else {
+            if(final) labelRequest.final = true;
+            if(noParent) labelRequest.noParent = true;
+            return labelRequest;
+          }
         }
-        return el;
+        labelRequest = {
+          name: null,
+          node: null,
+          final,
+          noParent,
+          set(n) {
+            labelRequest.name = n.bindName();
+            labelRequest.node = n;
+            labelRequest = null;
+          },
+          resolve() {
+            assert(!labelRequest.node);
+            if(labelRequest.noParent) {
+              labelRequest.set(tpl.push(xNode('node:comment', { label: true, value: '' })));
+            } else if(isRoot) {
+              assert(!tpl._boundName);
+              labelRequest.name = tpl._boundName = option.parentElement;
+            } else {
+              labelRequest.name = tpl.bindName();
+            }
+            labelRequest = null;
+          }
+        };
+        return labelRequest;
       };
 
       const bindNode = (n, nodeIndex) => {
         if(n.type === 'text') {
-          if(isRoot) lastTagDynamic = false;
           let prev = tpl.getLast();
-          if(prev?.$type == 'node:text' && prev._boundName) tpl.push(xNode('node:comment', { label: true }));
+          // if(prev?.$type == 'node:text' && prev._boundName) tpl.push(xNode('node:comment', { label: true }));
+          if(prev?.$type == 'node:text' && labelRequest) {
+            labelRequest.set(tpl.push(xNode('node:comment', { label: true })));
+          }
 
           if(n.value.indexOf('{') >= 0) {
             const pe = this.parseText(n.value);
@@ -2074,57 +2205,57 @@
               }));
             });
 
-            lastStatic = textNode;
+            labelRequest?.set(textNode);
           } else {
-            lastStatic = tpl.push(n.value);
+            const textNode = tpl.push(n.value);
+            labelRequest?.set(textNode);
           }
+
         } else if(n.type === 'template') {
-          if(isRoot) lastTagDynamic = false;
-          lastStatic = null;
-          tpl.push(n.openTag);
-          tpl.push(n.content);
-          tpl.push('</template>');
+          const templateNode = xNode('node', {
+            openTag: n.openTag,
+            content: n.content
+          });
+          templateNode.$handler = (ctx, n) => {
+            ctx.write(n.openTag, n.content, '</template>');
+          };
+          tpl.push(templateNode);
+          labelRequest?.set(templateNode);
         } 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);
+            else if(['window', 'body', 'head'].includes(n.elArg)) b = this.attachHead(n);
+            else if(n.elArg == 'self') {
+              this.glob.$$selfComponent.$value();
+              const label = requireLabel();
+              let component = this.makeComponent(n, {self: true});
+              binds.push(insertComponent(component, label));
+            } else throw 'Wrong tag';
             b && binds.push(b);
             return;
           }
-          if(isRoot) lastTagDynamic = false;
           if(n.name == 'component' || n.name.match(/^[A-Z]/)) {
             if(n.name == 'component' || !n.elArg) {
               // component
               if(isRoot) requireFragment = true;
-              let el = placeLabel(n.name);
 
               if(n.name == 'component') {
                 // dyn-component
-                binds.push(this.makeComponentDyn(n, el));
+                if(isRoot) {
+                  requireFragment = true;
+                  if(!tpl.getLast()) tpl.push(xNode('node:comment', { label: true }));
+                }
+                const label = requireLabel(true, isRoot);
+                binds.push(this.makeComponentDyn(n, label));
               } else {
+                const label = requireLabel();
                 let component = this.makeComponent(n);
-                binds.push(xNode('insert-component', {
-                  component: component.bind,
-                  reference: component.reference,
-                  el: el.bindName()
-                }, (ctx, n) => {
-                  if(n.reference) {
-                    ctx.write(true, `${n.reference} = `);
-                    ctx.add(n.component);
-                    ctx.write(true, `$runtime.attachBlock(${n.el}, ${n.reference});`);
-                  } else {
-                    ctx.write(true, `$runtime.attachBlock(${n.el}, `);
-                    ctx.add(n.component);
-                    ctx.write(');');
-                  }
-                }));
+                binds.push(insertComponent(component, label));
               }
             } else {
               if(isRoot) requireFragment = true;
-              let el = placeLabel(`exported ${n.elArg}`);
-              let b = this.attchExportedFragment(n, el, n.name);
-              b && binds.push(b);
+              binds.push(this.attchExportedFragment(n, requireLabel(), n.name));
             }
             return;
           }
@@ -2133,21 +2264,20 @@
             let slotName = n.elArg;
             if(!slotName) {
               if(option.context == 'fragment') {
-                let el = placeLabel('fragment-slot');
-                binds.push(this.attachFragmentSlot(el));
+                binds.push(this.attachFragmentSlot(requireLabel()));
                 return;
               } else slotName = 'default';
             }
 
-            let el = placeLabel(slotName);
             let slot = this.attachSlot(slotName, n);
 
             binds.push(xNode('attach-slot', {
               $compile: [slot],
-              el: el.bindName(),
+              label: requireLabel(),
               slot
             }, (ctx, n) => {
-              ctx.write(true, `$runtime.attachBlock(${n.el}, `);
+              if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
+              else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
               ctx.add(n.slot);
               ctx.write(');', true);
             }));
@@ -2155,12 +2285,13 @@
           }
           if(n.name == 'fragment') {
             assert(n.elArg, 'Fragment name is required');
-            let el = placeLabel(`fragment ${n.elArg}`);
+            if(isRoot) requireFragment = true;
             binds.push(xNode('attach-fragment', {
-              el: el.bindName(),
+              label: requireLabel(),
               fragment: this.attachFragment(n)
             }, (ctx, n) => {
-              ctx.write(true, `$runtime.attachBlock(${n.el}, `);
+              if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
+              else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
               ctx.add(n.fragment);
               ctx.write(')');
             }));
@@ -2170,7 +2301,7 @@
           let el = xNode('node', { name: n.name });
           if(option.oneElement) el._boundName = option.oneElement;
           tpl.push(el);
-          lastStatic = el;
+          labelRequest?.set(el);
 
           if(n.attributes.some(a => a.name.startsWith('{...'))) {
             this.require('rootCD');
@@ -2182,8 +2313,15 @@
               ctx.writeLine(`$runtime.spreadAttributes(${n.el}, () => ({${n.props.join(', ')}}));`);
             }));
           }
+
+          if(n.name == 'input') {
+            const b = radioInput.call(this, n, el);
+            b && binds.push(b);
+          }
+
           let bindTail = [];
           n.attributes.forEach(p => {
+            if(p._skip) return;
             let b = this.bindProp(p, n, el);
             if(b) {
               if(b.bind) binds.push(b.bind);
@@ -2215,11 +2353,24 @@
           if(!n.closedTag) {
             go(n, false, el);
           }
+        } else if(n.type === 'block') {
+          if(n.name == 'keep') {
+            if(isRoot) requireFragment = true;
+            binds.push(xNode('attach-fragment', {
+              label: requireLabel(),
+              block: this.makeKeepAlive(n)
+            }, (ctx, n) => {
+              if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
+              else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
+              ctx.add(n.block);
+              ctx.write(')');
+            }));
+            return;
+          } else wrapException(`wrong block: "${n.name}"`, n);
         } else if(n.type === 'each') {
           if(data.type == 'node' && data.body.length == 1) {
-            lastStatic = null;
             let eachBlock = this.makeEachBlock(n, {
-              elName: tpl.bindName(),
+              label: tpl.bindName(),
               onlyChild: true
             });
             binds.push(eachBlock.source);
@@ -2227,20 +2378,18 @@
           } else {
             if(isRoot) {
               requireFragment = true;
-              lastTagDynamic = true;
+              if(!tpl.getLast()) tpl.push(xNode('node:comment', { label: true }));
             }
-            let element = placeLabel(n.value);
-            let eachBlock = this.makeEachBlock(n, { elName: element.bindName() });
+            let eachBlock = this.makeEachBlock(n, { label: requireLabel(true, isRoot) });
             binds.push(eachBlock.source);
             return;
           }
         } else if(n.type === 'if') {
           if(isRoot) {
             requireFragment = true;
-            lastTagDynamic = true;
+            if(!tpl.getLast()) tpl.push(xNode('node:comment', { label: true }));
           }
-          if(nodeIndex == 0 && !isRoot) binds.push(this.makeifBlock(n, tpl, true));
-          else binds.push(this.makeifBlock(n, placeLabel(n.value)));
+          binds.push(this.makeifBlock(n, requireLabel(true, isRoot)));
           return;
         } else if(n.type === 'systag') {
           let r = n.value.match(/^@(\w+)\s+(.*)$/s);
@@ -2250,24 +2399,21 @@
           if(name == 'html') {
             if(isRoot) {
               requireFragment = true;
-              lastTagDynamic = true;
+              if(!tpl.getLast()) tpl.push(xNode('node:comment', { label: true }));
             }
-            let el = placeLabel('html');
-            binds.push(this.makeHtmlBlock(exp, el));
+            binds.push(this.makeHtmlBlock(exp, requireLabel(true, true)));
             return;
           } else throw 'Wrong tag';
         } else if(n.type === 'await') {
           if(isRoot) {
             requireFragment = true;
-            lastTagDynamic = true;
+            if(!tpl.getLast()) tpl.push(xNode('node:comment', { label: true }));
           }
-          let el = placeLabel(n.value);
-          let r = this.makeAwaitBlock(n, el);
-          r && binds.push(r);
+          binds.push(this.makeAwaitBlock(n, requireLabel(true, isRoot)));
           return;
         } else if(n.type === 'comment') {
-          if(isRoot) lastTagDynamic = false;
-          lastStatic = tpl.push(n.content);
+          const commentNode = tpl.push(n.content);
+          labelRequest?.set(commentNode);
         }
       };
       body.forEach((node, i) => {
@@ -2277,11 +2423,10 @@
           wrapException(e, node);
         }
       });
+      labelRequest?.resolve();
     };
+
     go(data, true, rootTemplate);
-    if(option.protectLastTag && lastTagDynamic) {
-      rootTemplate.push(xNode('node:comment', { value: '' }));
-    }
 
     let innerBlock = null;
     if(binds.body.length) {
@@ -2528,12 +2673,32 @@
       console.log('Node: ', n);
       if(n.type == 'text') e.details = n.value.trim();
       else if(n.type == 'node') e.details = n.openTag.trim();
-      else if(n.type == 'each') e.details = n.value.trim();
-      else if(n.type == 'if') e.details = n.value.trim();
+      else if(n.type == 'each' || n.type == 'block') e.details = n.value.trim();
+      else if(n.type == 'if') e.details = n.parts?.[0]?.value.trim() || 'if-block';
     }
     throw e;
   }
 
+  function insertComponent(component, label) {
+    return xNode('insert-component', {
+      component: component.bind,
+      reference: component.reference,
+      label
+    }, (ctx, n) => {
+      if(n.reference) {
+        ctx.write(true, `${n.reference} = `);
+        ctx.add(n.component);
+        if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, ${n.reference});`);
+        else ctx.write(true, `$runtime.addBlock(${n.label.name}, ${n.reference});`);
+      } else {
+        if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
+        else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
+        ctx.add(n.component);
+        ctx.write(');');
+      }
+    })
+  }
+
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
   function createCommonjsModule(fn, basedir, module) {
@@ -4655,7 +4820,7 @@
   function makeDom(data) {
     function build(parent, list) {
       list.forEach(e => {
-        if(e.type == 'fragment' || e.type == 'slot') {
+        if(e.type == 'fragment' || e.type == 'slot' || e.type == 'block') {
           if(e.body && e.body.length) build(parent, e.body);
           return;
         } else if(e.type == 'each') {
@@ -4772,7 +4937,7 @@
     return result;
   };
 
-  function makeComponent(node) {
+  function makeComponent(node, option={}) {
     let propList = node.attributes;
 
     this.require('$context');
@@ -4782,8 +4947,8 @@
     let slotBlocks = [];
     let anchorBlocks = [];
 
-    let componentName = node.name;
-    if(componentName != 'component' && this.config.autoimport) {
+    let componentName = option.self ? '$$selfComponent' : node.name;
+    if(componentName != 'component' && this.config.autoimport && !option.self) {
       let imported = this.script.autoimport[componentName] || this.script.importedNames.includes(componentName) ||
         this.script.rootVariables[componentName] || this.script.rootFunctions[componentName];
 
@@ -5128,7 +5293,7 @@
     return { bind: result, reference };
   }
 
-  function makeComponentDyn(node, element) {
+  function makeComponentDyn(node, label) {
     let dynamicComponent;
 
     if(node.elArg) {
@@ -5150,15 +5315,16 @@
 
     component.componentName = '$ComponentConstructor';
     return xNode('dyn-component', {
-      el: element.bindName(),
+      label,
       exp: dynamicComponent,
       component,
       reference
     }, (ctx, n) => {
-      ctx.write(true, `$runtime.attachDynComponent(${n.el}, () => ${n.exp}, ($ComponentConstructor) => `);
+      ctx.write(true, `$runtime.attachDynComponent(${n.label.name}, () => ${n.exp}, ($ComponentConstructor) => `);
       if(n.reference) ctx.write(`${n.reference} = `);
       ctx.add(n.component);
-      ctx.write(')');
+      if(n.label.node) ctx.write(')');
+      else ctx.write(', true)');
     });
   }
 
@@ -5279,7 +5445,7 @@
           ctx.write(');');
         })
       };
-    } else if(name == 'bind') {
+    } else if(name == 'bind' && arg) {
       if(this.script.readOnly) {
         this.warning('script read-only conflicts with bind: ' + node.openTag);
         return;
@@ -5307,22 +5473,38 @@
       }
 
       assert(['value', 'checked', 'valueAsNumber', 'valueAsDate', 'selectedIndex'].includes(attr), 'Not supported: ' + prop.content);
-      assert(arg.length == 0);
       assert(detectExpressionType(exp) == 'identifier', 'Wrong bind name: ' + prop.content);
-      if(attr == 'value' && ['number', 'range'].includes(inputType)) attr = 'valueAsNumber';
+      assert(arg.length == 0);
       this.detectDependency(exp);
+      let argName = '$$a' + (this.uniqIndex++);
 
-      let argName = 'a' + (this.uniqIndex++);
+      if(node.name == 'select' && attr == 'value') {
+        return {
+          bind: xNode('bindInput', {
+            el: element.bindName(),
+            exp,
+            attr,
+            argName
+          }, (ctx, n) => {
+            ctx.write(true, `$runtime.selectElement(${n.el}, () => ${n.exp}, ${n.argName} => {${n.exp} = ${n.argName}; $$apply();});`);
+          })
+        }
+      }
+
+      if(attr == 'value' && ['number', 'range'].includes(inputType)) attr = 'valueAsNumber';
 
       return {
         bind: xNode('bindInput', {
-          el: element.bindName()
+          el: element.bindName(),
+          exp,
+          attr,
+          argName
         }, (ctx, n) => {
-          ctx.writeLine(`$runtime.bindInput(${n.el}, '${attr}', () => ${exp}, ${argName} => {${exp} = ${argName}; $$apply();});`);
+          ctx.write(true, `$runtime.bindInput(${n.el}, '${n.attr}', () => ${n.exp}, ${n.argName} => {${n.exp} = ${n.argName}; $$apply();});`);
         })
       };
     } else if(name == 'style' && arg) {
-      let styleName = toCamelCase(arg);
+      let styleName = arg;
       let exp;
       if(prop.value) {
         if(isExpression(prop.value)) {
@@ -5340,13 +5522,13 @@
                 name: styleName,
                 value: prop.value
               }, (ctx, n) => {
-                ctx.writeLine(`${n.el}.style.${n.name} = \`${Q(n.value)}\`;`);
+                ctx.writeLine(`${n.el}.style.${toCamelCase(n.name)} = \`${Q(n.value)}\`;`);
               })
             };
           }
         }
       } else {
-        exp = styleName;
+        exp = toCamelCase(styleName);
       }
 
       let hasElement = exp.includes('$element');
@@ -5363,7 +5545,7 @@
             if(ctx.inuse.apply) {
               ctx.writeLine(`$runtime.bindStyle(${n.el}, '${n.styleName}', () => (${n.exp}));`);
             } else {
-              ctx.writeLine(`${n.el}.style.${n.styleName} = ${n.exp};`);
+              ctx.writeLine(`${n.el}.style.${toCamelCase(n.styleName)} = ${n.exp};`);
             }
           })]
         })
@@ -5550,6 +5732,17 @@
 
         if(node.spreading) return node.spreading.push(`${name}: ${exp}`);
 
+        if(node.name == 'option' && name == 'value' && parsed.binding) {
+          return {
+            bind: xNode('bindOptionValue', {
+              el: element.bindName(),
+              value: parsed.binding
+            }, (ctx, n) => {
+              ctx.write(true, `$runtime.selectOption(${n.el}, () => (${n.value}));`);
+            })
+          }
+        }
+
         const propList = {
           hidden: true,
           checked: true,
@@ -5558,6 +5751,7 @@
           selected: true,
           innerHTML: true,
           innerText: true,
+          multiple: node.name == 'select',
           src: true,
           readonly: 'readOnly'
         };
@@ -5565,7 +5759,7 @@
         let n = xNode('bindAttribute', {
           $wait: ['apply'],
           name,
-          exp,
+          exp: propList[name] && parsed.binding ? parsed.binding : exp,
           hasElement,
           el: element.bindName()
         }, (ctx, data) => {
@@ -5603,7 +5797,7 @@
     }
   }
 
-  function makeifBlock(data, element, parentElement) {
+  function makeifBlock(data, label) {
     const getBlock = b => {
       if(b.singleBlock) {
         return xNode('make-block', {
@@ -5624,22 +5818,21 @@
       this.detectDependency(exp);
       parts.push({
         exp,
-        block: getBlock(this.buildBlock(part, { protectLastTag: true, allowSingleBlock: true }))
+        block: getBlock(this.buildBlock(part, { allowSingleBlock: true }))
       });
     });
-    if(data.elsePart) elseBlock = getBlock(this.buildBlock({ body: data.elsePart }, { protectLastTag: true, allowSingleBlock: true }));
+    if(data.elsePart) elseBlock = getBlock(this.buildBlock({ body: data.elsePart }, { allowSingleBlock: true }));
 
     return xNode('if:bind', {
       $wait: ['apply'],
-      el: element.bindName(),
-      parentElement,
+      label,
       parts,
       elseBlock
     }, (ctx, n) => {
       if(this.inuse.apply) {
-        ctx.write(true, `$runtime.ifBlock(${n.el}, `);
+        ctx.write(true, `$runtime.ifBlock(${n.label.name}, `);
       } else {
-        ctx.write(true, `$runtime.ifBlockReadOnly(${n.el}, `);
+        ctx.write(true, `$runtime.ifBlockReadOnly(${n.label.name}, `);
       }
 
       if(n.parts.length == 1) {
@@ -5665,7 +5858,7 @@
 
       ctx.indent--;
       ctx.write(true);
-      if(n.parentElement) ctx.write(', true');
+      if(!n.label.node) ctx.write(', true');
       ctx.write(');', true);
     });
   }
@@ -5783,7 +5976,6 @@
     if(!nodeItems.length) nodeItems = [data.mainBlock[0]];
 
     let itemBlock, block = this.buildBlock({ body: nodeItems }, {
-      protectLastTag: true,
       allowSingleBlock: !blockPrefix,
       each: {
         blockPrefix,
@@ -5817,7 +6009,6 @@
     let elseBlock = null;
     if(data.elseBlock) {
       let block = this.buildBlock({ body: data.elseBlock }, {
-        protectLastTag: true,
         allowSingleBlock: false
       });
       elseBlock = block.block;
@@ -5826,9 +6017,15 @@
     const source = xNode('each', {
       keyFunction,
       block: itemBlock,
-      elseBlock
+      elseBlock,
+      label: option.label,
+      onlyChild: option.onlyChild
     }, (ctx, n) => {
-      ctx.writeLine(`$runtime.$$eachBlock(${option.elName}, ${option.onlyChild ? 1 : 0}, () => (${arrayName}),`);
+      let el = n.onlyChild ? n.label : n.label.name;
+      let mode = 0;
+      if(n.onlyChild) mode = 1;
+      else if(!n.label.node) mode = 2;
+      ctx.writeLine(`$runtime.$$eachBlock(${el}, ${mode}, () => (${arrayName}),`);
       ctx.indent++;
       ctx.write(true);
       if(n.keyFunction === 'noop') ctx.write('$runtime.noop');
@@ -5853,15 +6050,15 @@
     this.detectDependency(exp);
     return xNode('block', {
       $wait: ['apply'],
-      el: label.bindName(),
+      label,
       exp
     }, (ctx, n) => {
-      if(this.inuse.apply) ctx.write(true, `$runtime.htmlBlock(${n.el}, () => (${n.exp}));`);
-      else ctx.write(true, `$runtime.htmlBlockStatic(${n.el}, ${n.exp});`);
+      if(this.inuse.apply) ctx.write(true, `$runtime.htmlBlock(${n.label.name}, () => (${n.exp}));`);
+      else ctx.write(true, `$runtime.htmlBlockStatic(${n.label.name}, ${n.exp});`);
     });
   }
 
-  function makeAwaitBlock(node, element) {
+  function makeAwaitBlock(node, label) {
     let valueForThen, exp;
 
     let rx = node.value.match(/^#await\s+(.+)\s+then\s+(\S+)\s*$/s);
@@ -5881,7 +6078,7 @@
 
     let parts = [null, null, null];
     if(node.parts.main && node.parts.main.length) {
-      parts[0] = this.buildBlock({ body: node.parts.main }, { protectLastTag: true });
+      parts[0] = this.buildBlock({ body: node.parts.main });
     }
     if(node.parts.then && node.parts.then.length) {
       let args = [];
@@ -5895,7 +6092,7 @@
           args.push(rx[1]);
         }
       }
-      parts[1] = this.buildBlock({ body: node.parts.then }, { protectLastTag: true, extraArguments: args });
+      parts[1] = this.buildBlock({ body: node.parts.then }, { extraArguments: args });
     }
     if(node.parts.catch && node.parts.catch.length) {
       let args = [];
@@ -5904,7 +6101,7 @@
         assert(isSimpleName(rx[1]));
         args.push(rx[1]);
       }
-      parts[2] = this.buildBlock({ body: node.parts.catch }, { protectLastTag: true, extraArguments: args });
+      parts[2] = this.buildBlock({ body: node.parts.catch }, { extraArguments: args });
     }
 
     if(this.script.readOnly) {
@@ -5915,12 +6112,12 @@
     this.require('apply');
 
     return xNode('await', {
-      el: element.bindName(),
+      label,
       exp,
       parts,
       keywords
     }, (ctx, n) => {
-      ctx.write(true, `$runtime.awaitBlock(${n.el}, () => [${n.keywords.join(', ')}], () => ${n.exp},`);
+      ctx.write(true, `$runtime.awaitBlock(${n.label.name}, ${n.label.node ? 0 : 1}, () => [${n.keywords.join(', ')}], () => ${n.exp},`);
       ctx.indent++;
       n.parts.forEach((part, index) => {
         if(index) ctx.write(', ');
@@ -6070,7 +6267,7 @@
   }
 
 
-  function parseAttibutes(attributes) {
+  function parseAttibutes$1(attributes) {
     let props = [];
     let events = [];
     let forwardAllEvents;
@@ -6115,7 +6312,7 @@
     let slot = null;
     if(node.body?.length) slot = this.buildBlock({ body: trimEmptyNodes(node.body) }, { inline: true });
 
-    let { props, events, forwardAllEvents, staticProps } = parseAttibutes.call(this, node.attributes);
+    let { props, events, forwardAllEvents, staticProps } = parseAttibutes$1.call(this, node.attributes);
 
     return xNode('call-fragment', {
       $compile: [slot?.source],
@@ -6192,9 +6389,10 @@
 
   function attachFragmentSlot(label) {
     return xNode('fragment-slot', {
-      el: label.bindName()
+      label
     }, (ctx, n) => {
-      ctx.write(true, `$runtime.attachBlock(${n.el}, $$fragmentSlot?.())`);
+      if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, $$fragmentSlot?.())`);
+      else ctx.write(true, `$runtime.addBlock(${n.label.name}, $$fragmentSlot?.())`);
     });
   }
 
@@ -6203,7 +6401,7 @@
     let data = {
       name: node.elArg,
       componentName,
-      label: label.bindName()
+      label
     };
 
     let body = trimEmptyNodes(node.body || []);
@@ -6214,11 +6412,12 @@
       // assert(!data.slot.template.svg, 'SVG is not supported for exported fragment');
     }
 
-    let pa = parseAttibutes.call(this, node.attributes);
+    let pa = parseAttibutes$1.call(this, node.attributes);
     data = { ...pa, ...data };
 
     return xNode('attach-exported-fragment', data, (ctx, n) => {
-      ctx.write(true, `$runtime.attachBlock(${n.label}, $runtime.callExportedFragment($instance_${n.componentName}, '${n.name}'`);
+      if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, $runtime.callExportedFragment($instance_${n.componentName}, '${n.name}'`);
+      else ctx.write(true, `$runtime.addBlock(${n.label.name}, $runtime.callExportedFragment($instance_${n.componentName}, '${n.name}'`);
       ctx.indent++;
       let missed = '';
 
@@ -6597,7 +6796,44 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.2-a1';
+  function makeKeepAlive(node) {
+    let block;
+    if(node.body && node.body.length) {
+      block = this.buildBlock({ body: trimEmptyNodes(node.body) }, { }).block;
+    } else {
+      this.warning(`Empty block: '${node.value}'`);
+      return xNode('empty-block', (ctx, n) => {
+        ctx.writeLine(`function $block() {};`);
+      });
+    }
+
+    let key = null;
+    let args = node.value.substr(6);
+    if(args) {
+      args = parseAttibutes(args);
+      const a = args.find(a => a.name == 'key');
+      if(a) {
+        let value = a.value;
+        if(value[0] == '{') value = unwrapExp(value);
+        key = `() => (${value})`;
+      }
+    }
+
+    if(!key) key = `() => '$$${this.uniqIndex++}'`;
+
+    this.glob.keepAliveStore.$value();
+
+    return xNode('keep-alive', {
+      block,
+      key
+    }, (ctx, n) => {
+      ctx.write(`$runtime.keepAlive($$keepAliveStore, ${n.key}, `);
+      ctx.add(n.block);
+      ctx.write(')');
+    });
+  }
+
+  const version = '0.7.2-a11';
 
 
   async function compile(source, config = {}) {
@@ -6643,6 +6879,7 @@
       inspectProp,
       attachPortal,
       makeEventProp,
+      makeKeepAlive,
       checkRootName: checkRootName,
 
       inuse: {},
@@ -6651,7 +6888,8 @@
         rootCD: xNode('root-cd', false),
         apply: xNode('apply', false),
         componentFn: xNode('componentFn', false),
-        $onMount: xNode('$onMount', false)
+        $onMount: xNode('$onMount', false),
+        $$selfComponent: xNode('$$selfComponent', false)
       },
       require: function(...args) {
         for(let name of args) {
@@ -6672,12 +6910,14 @@
       detectDependency,
 
       DOM: null,
-      parseHTML: parse,
+      parseHTML: function() {
+        this.DOM = parseHTML(this.source);
+      },
       compactDOM,
 
       script: null,
       scriptNodes: null,
-      js_parse: parse$1,
+      js_parse: parse,
       js_transform: transform,
 
       styleNodes: null,
@@ -6746,10 +6986,21 @@
         $compile: [ctx.module.head, ctx.module.code, ctx.module.body, ctx.glob.rootCD],
         name: config.name,
         componentFn: ctx.glob.componentFn
-      }, (ctx, n) => {
-        if(config.exportDefault) ctx.write(true, 'export default ');
-        else ctx.write(true, `const ${n.name} = `);
-        ctx.add(n.componentFn);
+      }, (ctx2, n) => {
+        if(config.exportDefault) {
+          if(ctx.glob.$$selfComponent.value) {
+            ctx2.write(true, 'const $$selfComponent = ');
+            ctx2.add(n.componentFn);
+            ctx2.write(true, 'export default $$selfComponent;');
+          } else {
+            ctx2.write(true, 'export default ');
+            ctx2.add(n.componentFn);
+          }
+        } else {
+          assert(!ctx.glob.$$selfComponent.value, 'Not supported');
+          ctx2.write(true, `const ${n.name} = `);
+          ctx2.add(n.componentFn);
+        }
       }));
 
       ctx.result = xBuild(result);
@@ -6837,6 +7088,7 @@
   }
 
   exports.compile = compile;
+  exports.parseHTML = parseHTML;
   exports.version = version;
 
   Object.defineProperty(exports, '__esModule', { value: true });