malinajs 0.7.0-a13 → 0.7.0-a16

package/CHANGELOG.md

@@ -14,6 +14,7 @@
 * each-else
 * else-if
 * refactoring $onMount
+* optional deep checking for passed props: prop={value} prop|deep={value}
 
 ## 0.6.x
 

package/malina.js

@@ -647,8 +647,8 @@
         cloneNode = false;
         if(!node.raw) template = htmlEntitiesToText(template);
       } else {
-        if(get_context().config.hideLabel) convert = '$runtime.$$htmlToFragmentClean';
-        else convert = '$runtime.$$htmlToFragment';
+        if(get_context().config.hideLabel) convert = '$runtime.htmlToFragmentClean';
+        else convert = '$runtime.htmlToFragment';
         template = template.replace(/<!---->/g, '<>');
       }
       if(node.raw) {
@@ -672,14 +672,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;
@@ -717,11 +709,28 @@
           }
         } 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);
-          });
+          switch(node.type) {
+            case 'node':
+            case 'slot':
+            case 'fragment':
+              if(node.body) go(node.body, node);
+              break
+            case 'each':
+              if(node.mainBlock) go(node.mainBlock, node);
+              if(node.elseBlock) go(node.elseBlock, node);
+              break
+            case 'await':
+              if(node.parts.main) go(node.parts.main, node);
+              if(node.parts.then) go(node.parts.then, node);
+              if(node.parts.catch) go(node.parts.catch, node);
+              break
+            case 'if':
+              node.parts.forEach(p => {
+                if(p.body) go(p.body, node);
+              });
+              if(node.elsePart) go(node.elsePart, node);
+              break
+          }
         }
       }
 
@@ -739,12 +748,12 @@
           let prev = getPrev();
           let next = getNext();
 
-          if(next?.type == 'node' && ['br', 'div'].includes(next.name)) {
+          if(next?.type == 'node' && ['br', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'].includes(next.name)) {
             body.splice(i, 1);
             continue;
           }
 
-          if(prev?.type == 'node' && ['br', 'div'].includes(prev.name)) {
+          if(prev?.type == 'node' && ['br', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'].includes(prev.name)) {
             body.splice(i, 1);
             continue;
           }
@@ -774,7 +783,7 @@
               body.splice(i, 1);
               continue;
             }
-            if(parentNode.type == 'node' && parentNode.name == 'div') {
+            if(parentNode.type == 'node' && ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'].includes(parentNode.name)) {
               body.splice(i, 1);
               continue;
             }
@@ -1548,7 +1557,7 @@
           }, (ctx, n) => {
             if(this.inuse.apply) {
               if(this.config.immutable) ctx.write(true, `$watch(() => (${n.exp}), ${n.callback});`);
-              else ctx.write(true, `$watch(() => (${n.exp}), ${n.callback}, {cmp: $runtime.$$deepComparator(0)});`);
+              else ctx.write(true, `$watch(() => (${n.exp}), ${n.callback}, {cmp: $runtime.deepComparator(0)});`);
             } else {
               ctx.write(true, `(${n.callback})(${n.exp});`);
             }
@@ -1565,7 +1574,7 @@
             exp: astring.generate(exp),
             callback
           }, (ctx, n) => {
-            if(this.inuse.apply) ctx.write(true, `$watch(() => ${n.exp}, ($args) => { (${n.callback}).apply(null, $args); }, {cmp: $runtime.$$deepComparator(1)});`);
+            if(this.inuse.apply) ctx.write(true, `$watch(() => ${n.exp}, ($args) => { (${n.callback}).apply(null, $args); }, {cmp: $runtime.deepComparator(1)});`);
             else ctx.write(true, `(${n.callback}).apply(null, ${n.exp})`);
           }));
         } else throw 'Error';
@@ -1663,8 +1672,8 @@
           ctx.write(true, `let {${pa}, ...$attributes} = $props;`);
 
           if(!this.script.readOnly && !n.constantProps) {
-            ctx.write(true, `$runtime.current_component.push = () => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}, ...$attributes} = $props = $option.props || {});`);
-            ctx.write(true, `$runtime.current_component.exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
+            ctx.write(true, `$runtime.current_component.$push = ($$props) => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}, ...$attributes} = $props = $$props);`);
+            ctx.write(true, `$runtime.current_component.$exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
           }
         } else if(this.inuse.$props) {
           let pa = n.props.map(p => {
@@ -1674,8 +1683,8 @@
           ctx.write(true, `let {${pa}} = $props;`);
 
           if(!this.script.readOnly && !n.constantProps) {
-            ctx.write(true, `$runtime.current_component.push = () => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}} = $props = $option.props || {});`);
-            ctx.write(true, `$runtime.current_component.exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
+            ctx.write(true, `$runtime.current_component.$push = ($$props) => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}} = $props = $$props);`);
+            ctx.write(true, `$runtime.current_component.$exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
           }
         }
       }));
@@ -1685,13 +1694,13 @@
       this.module.head.push(xNode('no-props', ctx => {
         if(this.inuse.$props && this.inuse.$attributes) {
           ctx.write(true, 'let $props = $option.props || {}, $attributes = $props;');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $props = $attributes = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $props = $attributes = $$props;');
         } else if(this.inuse.$props) {
           ctx.write(true, 'let $props = $option.props || {};');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $props = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $props = $$props;');
         } else if(this.inuse.$attributes) {
           ctx.write(true, 'let $attributes = $option.props || {};');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $attributes = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $attributes = $$props;');
         }
       }));
 
@@ -1781,22 +1790,13 @@
       }
     }));
 
-    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(xNode('$context', (ctx) => {
+      if(this.inuse.$context) ctx.write(true, 'const $context = $option.context || {};');
     }));
 
     this.module.top.push(xNode(this.glob.$onMount, {
-      $hold: ['componentFn']
     }, (ctx, n) => {
-      if(n.value) {
-        this.require('componentFn');
-        ctx.write(true, `import { $onMount } from 'malinajs/runtime.js';`);
-      }
+      if(n.value) ctx.write(true, `import { $onMount } from 'malinajs/runtime.js';`);
     }));
 
     this.module.top.push(xNode('$onDestroy', (ctx) => {
@@ -1815,7 +1815,7 @@
     }));
 
     this.module.head.push(xNode('$emit', (ctx) => {
-      if(this.inuse.$emit) ctx.write(true, 'const $emit = $runtime.$makeEmitter($option);');
+      if(this.inuse.$emit) ctx.write(true, 'const $emit = $runtime.makeEmitter($option);');
     }));
 
     if(this.config.autoSubscribe && !this.script.readOnly) {
@@ -1936,7 +1936,12 @@
       if(nodesForSingleBlock.length == 1) {
         let n = nodesForSingleBlock[0];
         if(n.type == 'node' && n.name.match(/^[A-Z]/)) {
-          let component = this.makeComponent(n);
+          let component;
+          try {
+            component = this.makeComponent(n);
+          } catch (e) {
+            wrapException(e, n);
+          }
           return {
             singleBlock: component.bind,
             reference: component.reference
@@ -2408,7 +2413,9 @@
                     base = n;
                     shift = 0;
                   } else if(n._innerBinding) {
-                    let npath = [base._boundName];
+                    let npath;
+                    if(base) npath = [base._boundName];
+                    else npath = [...path, 'firstChild'];
                     while(shift--) npath.push('nextSibling');
                     walk(n, npath);
                     shift = 0;
@@ -4444,6 +4451,7 @@
                 }
               } else cleanSelectorItems.push(s);
             }
+            while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(cleanSelectorItems[0].type)) cleanSelectorItems.shift();
             while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(last(cleanSelectorItems).type)) cleanSelectorItems.pop();
             if(!cleanSelectorItems.length || globalBlock) { // fully global?
               assert(origin.length);
@@ -4753,7 +4761,7 @@
     this.require('$context');
 
     let reference = null;
-    let propsFn = [], propsSetter = [], $class = [], staticProps = true;
+    let propsFn = [], propsSetter = [], $class = [], staticProps = true, deepChecking = false;
     let slotBlocks = [];
     let anchorBlocks = [];
 
@@ -4944,7 +4952,9 @@
           return;
         }
 
-        let { event, fn } = this.makeEventProp(prop);
+        let { event, fn } = this.makeEventProp(prop, () => {
+          throw new Error('$element is not available for component, use $event instead');
+        });
 
         passEvent(event, xNode('passEvent', {
           fn
@@ -4977,12 +4987,14 @@
       if(ip.name == ip.value) propsFn.push(`${ip.name}`);
       else propsFn.push(`${ip.name}: ${ip.value}`);
       if(!ip.static) staticProps = false;
+      if(ip.mod.deep) deepChecking = true;
     });
 
 
     if(Object.keys(events).length == 0) events = null;
 
     let result = xNode('component', {
+      $wait: ['apply'],
       componentName,
       staticProps,
       props: propsFn,
@@ -4991,12 +5003,16 @@
       forwardAllEvents,
       events,
       slots: slotBlocks.length ? slotBlocks : null,
-      anchors: anchorBlocks.length ? anchorBlocks : null
+      anchors: anchorBlocks.length ? anchorBlocks : null,
+      deepChecking
     }, (ctx, n) => {
       let comma = false;
-      ctx.write(`$runtime.callComponent($context, ${n.componentName}, {`);
 
-      if(n.props.length && n.staticProps) {
+      if(this.inuse.apply && (n.$class.length || n.propsSetter.length || n.props.length && !n.staticProps)) {
+        ctx.write(`$runtime.callComponentDyn(${n.componentName}, $context, {`);
+      } else ctx.write(`$runtime.callComponent(${n.componentName}, $context, {`);
+
+      if(n.props.length && (n.staticProps || !this.inuse.apply)) {
         ctx.write(`props: {${n.props.join(', ')}}`);
         comma = true;
         n.props = [];
@@ -5067,16 +5083,16 @@
       if(n.props.length) ctx.write(',\n', true, `() => ({${n.props.join(', ')}})`);
       else other = ', null';
 
-      if(ctx.inuse.apply && n.props.length) {
+      if(this.inuse.apply && n.props.length) {
         if(other) ctx.write(other);
         other = '';
         ctx.write(',');
         if(n.props.length) ctx.write('\n', true);
-        if(this.config.immutable) ctx.write('$runtime.keyComparator');
-        else ctx.write('$runtime.$$compareDeep');
+        if(n.deepChecking) ctx.write('$runtime.compareDeep');
+        else ctx.write('$runtime.keyComparator');
       } else other += ', null';
 
-      if(n.propsSetter.length) {
+      if(n.propsSetter.length && this.inuse.apply) {
         if(other) ctx.write(other);
         other = '';
         ctx.write(',\n', true, `($$_value) => ({${n.propsSetter.join(', ')}} = $$_value)`);
@@ -5823,8 +5839,8 @@
       el: label.bindName(),
       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.el}, () => (${n.exp}));`);
+      else ctx.write(true, `$runtime.htmlBlockStatic(${n.el}, ${n.exp});`);
     });
   }
 
@@ -5887,7 +5903,7 @@
       parts,
       keywords
     }, (ctx, n) => {
-      ctx.write(true, `$runtime.$$awaitBlock(${n.el}, () => [${n.keywords.join(', ')}], () => ${n.exp},`);
+      ctx.write(true, `$runtime.awaitBlock(${n.el}, () => [${n.keywords.join(', ')}], () => ${n.exp},`);
       ctx.indent++;
       n.parts.forEach((part, index) => {
         if(index) ctx.write(', ');
@@ -5902,12 +5918,13 @@
   }
 
   function attachSlot(slotName, node) {
-    let props = [], staticProps = true;
+    let props = [], staticProps = true, deepChecking = false;
 
     if(node.attributes && node.attributes.length) {
       node.attributes.forEach(prop => {
         let { name, value, ...ip } = this.inspectProp(prop);
         if(!ip.static) staticProps = false;
+        if(ip.mod.deep) deepChecking = true;
         props.push(xNode('slot-prop', {
           name,
           value
@@ -5928,7 +5945,8 @@
       name: slotName,
       props,
       staticProps,
-      placeholder
+      placeholder,
+      deepChecking
     }, (ctx, n) => {
       let dynamicProps = this.inuse.apply && !n.staticProps;
 
@@ -5955,8 +5973,8 @@
 
       if(dynamicProps) {
         ctx.write(missed, ', ');
-        if(this.config.immutable) ctx.write('$runtime.keyComparator');
-        else ctx.write('$runtime.$$compareDeep');
+        if(n.deepChecking) ctx.write('$runtime.compareDeep');
+        else ctx.write('$runtime.keyComparator');
       }
       ctx.write(')');
     });
@@ -5989,6 +6007,11 @@
       });
     }
 
+    if(external) {
+      this.require('$component');
+      if(props?.length) this.require('apply');
+    }
+
     return xNode('fragment', {
       $compile: [block.source],
       name,
@@ -6025,7 +6048,7 @@
         ctx.indent--;
         ctx.writeLine('}');
       }
-      if(n.external) ctx.writeLine(`$runtime.exportFragment('${n.name}', $fragment_${n.name});`);
+      if(n.external) ctx.writeLine(`$runtime.exportFragment($component, '${n.name}', $fragment_${n.name});`);
     });
   }
 
@@ -6035,6 +6058,7 @@
     let events = [];
     let forwardAllEvents;
     let staticProps = true;
+    let deepChecking = false;
 
     attributes.forEach(prop => {
       let name = prop.name;
@@ -6059,10 +6083,11 @@
         let ip = this.inspectProp(prop);
         props.push(ip);
         if(!ip.static) staticProps = false;
+        if(ip.mod.deep) deepChecking = true;
       }
     });
 
-    return { props, events, forwardAllEvents, staticProps };
+    return { props, events, forwardAllEvents, staticProps, deepChecking };
   }
 
 
@@ -6232,8 +6257,8 @@
           ctx.write('() => (');
           writeProps();
           ctx.write('), ');
-          if(this.config.immutable) ctx.write('$runtime.keyComparator');
-          else ctx.write('$runtime.$$compareDeep');
+          if(n.deepChecking) ctx.write('$runtime.compareDeep');
+          else ctx.write('$runtime.keyComparator');
         }
       }
 
@@ -6310,7 +6335,7 @@
           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('$onDestroy(() => {$runtime.removeElements(a, b)});');
           ctx.writeLine('document.head.appendChild($parentElement);');
           ctx.indent--;
           ctx.writeLine('}');
@@ -6321,14 +6346,18 @@
   }
 
   function inspectProp(prop) {
-    let { name, value } = prop;
+    let { name, value } = prop, mod = {};
     if(name[0] == '{') {
       assert(!prop.value);
       value = name;
       name = unwrapExp(name);
+    } else {
+      const p = name.split('|');
+      name = p[0];
+      p.slice(1).forEach(n => mod[n] = true);
     }
 
-    assert(name.match(/^([\w$_][\w\d$_.\-]*)$/), `Wrong property: '${name}'`);
+    assert(name.match(/^([\w$_][\w\d$_.\-|]*)$/), `Wrong property: '${name}'`);
     name = toCamelCase(name);
     if(name == 'class') name = '_class';
 
@@ -6367,7 +6396,7 @@
       statical = true;
     }
 
-    return { name, value, rawValue, static: statical };
+    return { name, value, rawValue, static: statical, mod };
   }
 
   function attachPortal(node) {
@@ -6399,7 +6428,7 @@
       ctx.add(n.source);
       ctx.writeLine('let $$first = $parentElement.firstChild;');
       ctx.writeLine('let $$last = $parentElement.lastChild;');
-      ctx.writeLine(`$runtime.$onDestroy(() => $runtime.$$removeElements($$first, $$last));`);
+      ctx.writeLine(`$runtime.$onDestroy(() => $runtime.removeElements($$first, $$last));`);
       ctx.writeLine(`$tick(() => ${label}.appendChild($parentElement));`);
       ctx.indent--;
       ctx.writeLine('}');
@@ -6551,7 +6580,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a13';
+  const version = '0.7.0-a16';
 
 
   async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.0-a13",
+  "version": "0.7.0-a16",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",

package/runtime.js

@@ -18,7 +18,7 @@ const safeCall = fn => {
 
 const safeGroupCall = list => {
   try {
-    list.forEach(fn => fn?.());
+    list?.forEach(fn => fn?.());
   } catch (e) {
     __app_onerror(e);
   }
@@ -58,7 +58,7 @@ function addEvent(el, event, callback) {
   });
 }
 
-function $$removeItem(array, item) {
+function removeItem(array, item) {
   let i = array.indexOf(item);
   if(i >= 0) array.splice(i, 1);
 }
@@ -77,20 +77,18 @@ const cd_component = cd => {
 
 const cd_new = () => new $ChangeDetector();
 
-const cd_attach2 = (parent, cd) => {
+const cd_attach = (parent, cd) => {
   if(cd) {
     cd.parent = parent;
     parent.children.push(cd);
   }
 };
 
-const cd_attach = (cd) => cd_attach2(current_cd, cd);
-
-const cd_detach = cd => $$removeItem(cd.parent.children, cd);
+const cd_detach = cd => removeItem(cd.parent.children, cd);
 
 const isArray = (a) => Array.isArray(a);
 
-const compareArray = (a, b) => {
+const _compareArray = (a, b) => {
   let a0 = isArray(a);
   let a1 = isArray(b);
   if(a0 !== a1) return true;
@@ -103,15 +101,15 @@ const compareArray = (a, b) => {
 };
 
 
-function $$compareArray(w, value) {
-  if(!compareArray(w.value, value)) return 0;
+function compareArray(w, value) {
+  if(!_compareArray(w.value, value)) return 0;
   if(isArray(value)) w.value = value.slice();
   else w.value = value;
   w.cb(w.value);
 }
 
 
-const compareDeep = (a, b, lvl) => {
+const _compareDeep = (a, b, lvl) => {
   if(lvl < 0 || !a || !b) return a !== b;
   if(a === b) return false;
   let o0 = isObject(a);
@@ -125,12 +123,12 @@ const compareDeep = (a, b, lvl) => {
   if(a0) {
     if(a.length !== b.length) return true;
     for(let i = 0; i < a.length; i++) {
-      if(compareDeep(a[i], b[i], lvl - 1)) return true;
+      if(_compareDeep(a[i], b[i], lvl - 1)) return true;
     }
   } else {
     let set = {};
     for(let k in a) {
-      if(compareDeep(a[k], b[k], lvl - 1)) return true;
+      if(_compareDeep(a[k], b[k], lvl - 1)) return true;
       set[k] = true;
     }
     for(let k in b) {
@@ -156,19 +154,16 @@ function cloneDeep(d, lvl) {
   return d;
 }
 
-const $$cloneDeep = function(d) {
-  return cloneDeep(d, 10);
-};
 
-function $$deepComparator(depth) {
+function deepComparator(depth) {
   return function(w, value) {
-    let diff = compareDeep(w.value, value, depth);
+    let diff = _compareDeep(w.value, value, depth);
     diff && (w.value = cloneDeep(value, depth), !w.idle && w.cb(value));
     w.idle = false;
   };
 }
 
-const $$compareDeep = $$deepComparator(10);
+const compareDeep = deepComparator(10);
 
 
 const keyComparator = (w, value) => {
@@ -232,7 +227,7 @@ const insertAfter = (label, node) => {
 
 const createTextNode = (text) => document.createTextNode(text);
 
-const $$htmlToFragment = (html, option) => {
+const htmlToFragment = (html, option) => {
   let result = templatecache[html];
   if(!result) {
     let t = document.createElement('template');
@@ -245,7 +240,7 @@ const $$htmlToFragment = (html, option) => {
   return option & 1 ? result.cloneNode(true) : result;
 };
 
-const $$htmlToFragmentClean = (html, option) => {
+const htmlToFragmentClean = (html, option) => {
   let result = templatecache[html];
   if(!result) {
     let t = document.createElement('template');
@@ -290,7 +285,7 @@ const iterNodes = (el, last, fn) => {
 };
 
 
-const $$removeElements = (el, last) => iterNodes(el, last, n => n.remove());
+const removeElements = (el, last) => iterNodes(el, last, n => n.remove());
 
 
 function removeElementsBetween(el, stop) {
@@ -320,7 +315,7 @@ function $tick(fn) {
 }
 
 
-function $makeEmitter(option) {
+function makeEmitter(option) {
   return (name, detail) => {
     let fn = option.events?.[name];
     if(!fn) return;
@@ -331,24 +326,7 @@ function $makeEmitter(option) {
 }
 
 
-function $$addEventForComponent(list, event, fn) {
-  let prev = list[event];
-  if(prev) {
-    if(prev._list) prev._list.push(fn);
-    else {
-      function handler(e) {
-        handler._list.forEach(fn => {
-          fn(e);
-        });
-      }
-      handler._list = [prev, fn];
-      list[event] = handler;
-    }
-  } else list[event] = fn;
-}
-
-
-let current_component, $context;
+let current_component;
 
 
 const makeApply = () => {
@@ -370,8 +348,8 @@ const makeApply = () => {
     return r;
   };
 
-  current_component.apply = apply;
-  current_component.push = apply;
+  current_component.$apply = apply;
+  current_component.$push = apply;
   apply();
   return apply;
 };
@@ -379,21 +357,15 @@ const makeApply = () => {
 
 const makeComponent = (init) => {
   return ($option = {}) => {
-    $context = $option.context || {};
     let prev_component = current_component,
       prev_cd = current_cd,
-      $component = current_component = {
-        $option,
-        context: $context,
-        exported: {}
-      };
+      $component = current_component = { $option };
     current_cd = null;
 
     try {
       $component.$dom = init($option);
     } finally {
       current_component = prev_component;
-      $context = null;
       current_cd = prev_cd;
     }
 
@@ -402,37 +374,40 @@ const makeComponent = (init) => {
 };
 
 
-const callComponent = (context, component, option = {}, propFn, cmp, setter, classFn) => {
+const callComponent = (component, context, option = {}) => {
   option.context = { ...context };
-  let $component, parentWatch, parentCD = current_cd;
+  let $component = safeCall(() => component(option));
+  if($component instanceof Node) $component = { $dom: $component };
+  return $component;
+};
+
+
+const callComponentDyn = (component, context, option = {}, propFn, cmp, setter, classFn) => {
+  let $component, parentWatch;
 
   if(propFn) {
-    if(cmp) {
-      parentWatch = $watch(propFn, value => {
-        option.props = value;
-        if($component) {
-          $component.push?.();
-          $component.apply?.();
-        }
-      }, { value: {}, cmp });
-      fire(parentWatch);
-    } else option.props = propFn();
+    parentWatch = $watch(propFn, value => {
+      $component.$push?.(value);
+      $component.$apply?.();
+    }, { value: {}, idle: true, cmp });
+    fire(parentWatch);
+    option.props = parentWatch.value;
   }
 
   if(classFn) {
     fire($watch(classFn, value => {
       option.$class = value;
-      $component?.apply?.();
+      $component?.$apply?.();
     }, { value: {}, cmp: keyComparator }));
   }
 
-  $component = safeCall(() => component(option));
-  if(setter && $component?.exportedProps) {
-    let w = new WatchObject($component.exportedProps, value => {
+  $component = callComponent(component, context, option);
+  if(setter && $component?.$exportedProps) {
+    let parentCD = current_cd, w = new WatchObject($component.$exportedProps, value => {
       setter(value);
-      cd_component(parentCD).apply();
-      option.props = parentWatch.fn();
-      $component.push();
+      cd_component(parentCD).$apply();
+      $component.$push(parentWatch.fn());
+      $component.$apply();
     });
     Object.assign(w, { idle: true, cmp, value: parentWatch.value });
     $component.$cd.watchers.push(w);
@@ -445,7 +420,7 @@ const callComponent = (context, component, option = {}, propFn, cmp, setter, cla
 const attachDynComponent = (label, exp, bind) => {
   let parentCD = current_cd;
   let active, destroyList, $cd, $dom, finalLabel = getFinalLabel(label);
-  const destroy = () => destroyList && safeGroupCall(destroyList);
+  const destroy = () => safeGroupCall(destroyList);
   $onDestroy(destroy);
 
   $watch(exp, (component) => {
@@ -455,15 +430,16 @@ const attachDynComponent = (label, exp, bind) => {
 
     if(component) {
       destroyList = current_destroyList = [];
+      current_mountList = [];
       $cd = current_cd = cd_new();
       try {
         $dom = bind(component).$dom;
+        cd_attach(parentCD, $cd);
+        insertAfter(label, $dom);
+        safeCallMount(current_mountList, destroyList);
       } finally {
-        current_destroyList = null;
-        current_cd = null;
+        current_destroyList = current_mountList = current_cd = null;
       }
-      cd_attach2(parentCD, $cd);
-      insertAfter(label, $dom);
       active = true;
     } else {
       $cd = null;
@@ -477,7 +453,7 @@ const attachDynComponent = (label, exp, bind) => {
 const autoSubscribe = (...list) => {
   list.forEach(i => {
     if(isFunction(i.subscribe)) {
-      let unsub = i.subscribe(current_component.apply);
+      let unsub = i.subscribe(current_component.$apply);
       if(isFunction(unsub)) $onDestroy(unsub);
     }
   });
@@ -559,7 +535,7 @@ const __bindActionSubscribe = (fn, handler, value) => {
   if(handler?.update && fn) {
     $watch(fn, args => {
       handler.update.apply(handler, args);
-    }, { cmp: $$deepComparator(1), value: cloneDeep(value, 1) });
+    }, { cmp: deepComparator(1), value: cloneDeep(value, 1) });
   }
 };
 
@@ -613,14 +589,11 @@ const makeExternalProperty = (name, getter, setter) => {
   let $component = current_component;
   Object.defineProperty($component, name, {
     get: getter,
-    set: v => { setter(v); $component.apply(); }
+    set: v => { setter(v); $component.$apply(); }
   });
 };
 
 
-const eachDefaultKey = (item, index, array) => isObject(array[0]) ? item : index;
-
-
 const attachAnchor = ($option, el, name) => {
   $option.anchor?.[name || 'default']?.(el);
 };
@@ -630,7 +603,7 @@ const makeAnchor = (fn) => {
   let parentCD = current_cd;
   return ($dom) => {
     let prev = current_cd, $cd = current_cd = cd_new();
-    cd_attach2(parentCD, $cd);
+    cd_attach(parentCD, $cd);
     $onDestroy(() => cd_detach($cd));
     try {
       fn($dom);
@@ -684,20 +657,27 @@ const callExportedFragment = (childComponent, name, slot, events, props, cmp) =>
     fire(w);
     props = () => result;
   }
-  let fn = childComponent.exported[name];
+  let fn = childComponent.$exported?.[name];
   ([$dom, push] = fn(props, events, slot));
   return $dom;
 };
 
 
-const exportFragment = (name, fn) => {
+const exportFragment = (component, name, fn) => {
   let childCD = current_cd;
-  cd_component(childCD).exported[name] = (props, events, slot) => {
-    let prev = current_cd, $cd = current_cd = cd_new();
-    cd_attach2(childCD, $cd);
-    $onDestroy(() => cd_detach($cd));
-    let apply = cd_component(childCD).apply;
-    apply();
+  if(!component.$exported) component.$exported = {};
+  component.$exported[name] = (props, events, slot) => {
+    let prev = current_cd, apply;
+    if(childCD) {
+      let $cd = current_cd = cd_new();
+      cd_attach(childCD, $cd);
+      $onDestroy(() => cd_detach($cd));
+      apply = component.$apply;
+      apply();
+    } else {
+      current_cd = null;
+    }
+
     try {
       return [fn(props, events || {}, slot), apply];
     } finally {
@@ -734,7 +714,7 @@ const makeBlockBound = (fr, fn) => {
   let parentCD = current_cd;
   return () => {
     let $dom = fr.cloneNode(true), prev = current_cd, $cd = current_cd = cd_new();
-    cd_attach2(parentCD, $cd);
+    cd_attach(parentCD, $cd);
     $onDestroy(() => cd_detach($cd));
     try {
       fn($dom);
@@ -813,12 +793,11 @@ const mount = (label, component, option) => {
     label.appendChild($dom);
     safeCallMount(current_mountList, destroyList);
   } finally {
-    current_destroyList = null;
-    current_mountList = null;
+    current_destroyList = current_mountList = null;
   }
   app.destroy = () => {
     safeGroupCall(destroyList);
-    $$removeElements(first, last);
+    removeElements(first, last);
   };
   return app;
 };
@@ -832,8 +811,7 @@ const mountStatic = (label, component, option) => {
     safeGroupCall(current_mountList);
     return app;
   } finally {
-    current_destroyList = null;
-    current_mountList = null;
+    current_destroyList = current_mountList = null;
   }
 };
 
@@ -887,11 +865,11 @@ let create = (tag, html) => {
   return lastElement;
 };
 
-function $$htmlBlock(tag, fn) {
+function htmlBlock(tag, fn) {
   let lastElement;
   let destroy = () => {
     if(!lastElement) return;
-    $$removeElements(tag.nextSibling, lastElement);
+    removeElements(tag.nextSibling, lastElement);
     lastElement = null;
   };
   $watch(fn, (html) => {
@@ -900,7 +878,7 @@ function $$htmlBlock(tag, fn) {
   });
 }
 
-function $$htmlBlockStatic(tag, value) {
+function htmlBlockStatic(tag, value) {
   create(tag, value);
 }
 
@@ -916,11 +894,9 @@ function ifBlock(label, fn, parts, parentLabel) {
     try {
       $dom = builder();
     } finally {
-      current_destroyList = null;
-      current_mountList = null;
-      current_cd = null;
+      current_destroyList = current_mountList = current_cd = null;
     }
-    cd_attach2(parentCD, $cd);
+    cd_attach(parentCD, $cd);
     if($dom.nodeType == 11) {
       first = $dom.firstChild;
       last = $dom.lastChild;
@@ -942,9 +918,9 @@ function ifBlock(label, fn, parts, parentLabel) {
     if(destroyResults.length) {
       let f = first, l = last;
       Promise.allSettled(destroyResults).then(() => {
-        $$removeElements(f, l);
+        removeElements(f, l);
       });
-    } else $$removeElements(first, last);
+    } else removeElements(first, last);
     first = last = null;
     destroyResults = null;
   }
@@ -961,7 +937,7 @@ function ifBlockReadOnly(label, fn, parts) {
   if(value != null) insertAfter(label, parts[value]());
 }
 
-function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch) {
+function awaitBlock(label, relation, fn, build_main, build_then, build_catch) {
   let parentCD = current_cd, first, last, $cd, promise, destroyList, status = 0;
   $onDestroy(() => safeGroupCall(destroyList));
 
@@ -974,7 +950,7 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
       cd_detach($cd);
       $cd = null;
     }
-    $$removeElements(first, last);
+    removeElements(first, last);
     first = last = null;
   }
 
@@ -990,14 +966,14 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
     } finally {
       current_destroyList = current_mountList = current_cd = null;
     }
-    cd_attach2(parentCD, $cd);
+    cd_attach(parentCD, $cd);
     if($dom.nodeType == 11) {
       first = $dom.firstChild;
       last = $dom.lastChild;
     } else first = last = $dom;
     insertAfter(label, $dom);
     safeCallMount(mountList, destroyList);
-    cd_component(parentCD).apply();
+    cd_component(parentCD).$apply();
   }
 
   $watch(relation, () => {
@@ -1019,6 +995,9 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
   }, { value: [], cmp: keyComparator });
 }
 
+const eachDefaultKey = (item, index, array) => isObject(array[0]) ? item : index;
+
+
 const makeEachBlock = (fr, fn) => {
   return (item, index) => {
     let $dom = fr.cloneNode(true);
@@ -1040,22 +1019,23 @@ const makeEachElseBlock = (fn) => {
     let first, last;
     let destroyList = current_destroyList = [];
     let $cd = current_cd = cd_new();
+    current_mountList = [];
     try {
       let $dom = fn();
       if($dom.nodeType == 11) {
         first = $dom.firstChild;
         last = $dom.lastChild;
       } else first = last = $dom;
-      cd_attach2(parentCD, $cd);
+      cd_attach(parentCD, $cd);
       if(onlyChild) label.appendChild($dom);
       else attachBlock(label, $dom);
+      safeCallMount(current_mountList, destroyList);
     } finally {
-      current_destroyList = null;
-      current_cd = null;
+      current_destroyList = current_mountList = current_cd = null;
     }
 
     return () => {
-      $$removeElements(first, last);
+      removeElements(first, last);
       cd_detach($cd);
       safeGroupCall(destroyList);
     };
@@ -1066,7 +1046,7 @@ const makeEachElseBlock = (fn) => {
 function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
   let parentCD = current_cd;
   let eachCD = cd_new();
-  cd_attach(eachCD);
+  cd_attach(parentCD, eachCD);
 
   let mapping = new Map();
   let lastNode, vi = 0, p_promise = 0, p_destroy = 0, elseBlock;
@@ -1120,7 +1100,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
           Promise.allSettled(destroyResults).then(() => removedNodes.forEach(n => n.remove()));
         } else {
           if(onlyChild) label.textContent = '';
-          else $$removeElements(label.nextSibling, lastNode);
+          else removeElements(label.nextSibling, lastNode);
         }
 
         destroyResults = null;
@@ -1133,7 +1113,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
             ctx.$cd && eachCD.children.push(ctx.$cd);
             return;
           }
-          ctx.d && safeGroupCall(ctx.d);
+          safeGroupCall(ctx.d);
           iterNodes(ctx.first, ctx.last, n => removedNodes.push(n));
         });
 
@@ -1198,7 +1178,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
           current_destroyList = current_mountList = current_cd = null;
         }
         ctx = { $cd, rebind };
-        cd_attach2(eachCD, $cd);
+        cd_attach(eachCD, $cd);
         if($dom.nodeType == 11) {
           ctx.first = $dom.firstChild;
           ctx.last = $dom.lastChild;
@@ -1220,7 +1200,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
     if(!array.length && !elseBlock && buildElseBlock) {
       elseBlock = buildElseBlock(label, onlyChild, parentCD);
     }
-  }, { cmp: $$compareArray });
+  }, { cmp: compareArray });
 }
 
 const invokeSlotBase = ($component, slotName, $context, props, placeholder) => {
@@ -1250,10 +1230,13 @@ const invokeSlot = ($component, slotName, $context, propsFn, placeholder, cmp) =
 const makeSlot = (fr, fn) => {
   let parentCD = current_cd;
   return (callerComponent, $context, props) => {
-    let $dom = fr.cloneNode(true), prev = current_cd, $cd = current_cd = cd_new();
-    cd_attach2(parentCD, $cd);
-    $onDestroy(() => cd_detach($cd));
-    parentCD.component.apply();
+    let $dom = fr.cloneNode(true), prev = current_cd;
+    if(parentCD) {
+      let $cd = current_cd = cd_new();
+      cd_attach(parentCD, $cd);
+      $onDestroy(() => cd_detach($cd));
+      cd_component(parentCD).$apply();
+    } else current_cd = null;
     try {
       return { $dom, push: fn($dom, $context, callerComponent, props) };
     } finally {
@@ -1262,4 +1245,4 @@ const makeSlot = (fr, fn) => {
   };
 };
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $context, $digest, $makeEmitter, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callExportedFragment, cd_attach, cd_attach2, cd_component, cd_detach, cd_new, cloneDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, destroyResults, eachDefaultKey, exportFragment, fire, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+export { $$eachBlock, $digest, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, awaitBlock, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callComponentDyn, callExportedFragment, cd_attach, cd_component, cd_detach, cd_new, cloneDeep, compareArray, compareDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, deepComparator, destroyResults, eachDefaultKey, exportFragment, fire, getFinalLabel, htmlBlock, htmlBlockStatic, htmlToFragment, htmlToFragmentClean, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeEmitter, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElements, removeElementsBetween, removeItem, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };