malinajs 0.7.2-a1 → 0.7.2-a5

package/malina-esbuild.js

@@ -59,10 +59,25 @@ function malinaPlugin(options={}){
     const cssModules = new Map();
 
     if(options.displayVersion !== false) console.log('! Malina.js', malina.version);
-    
+
     return {
         name: 'malina-plugin',
-        setup(build) {        
+        setup(build) {
+            build.onResolve({ filter: /^malinajs$/ }, async (args) => {
+                const runtime = await build.resolve('malinajs/runtime.js', {resolveDir: args.resolveDir});
+                return {
+                    path: runtime.path,
+                    sideEffects: false
+                };
+            });
+
+            build.onResolve({ filter: /\.(xht|ma|html)$/ }, (arg) => {
+                return {
+                    path: path.resolve(arg.resolveDir,arg.path),
+                    sideEffects: false
+                }
+            });
+
             build.onLoad(
                 { filter: /\.(xht|ma|html)$/ }, 
                 async (args) => {

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;
@@ -1245,6 +1246,9 @@
               assert(parent.type === 'fragment', 'Fragment error: /fragment');
               return;
             } else throw 'Error binding: ' + bind.value;
+          } else {
+              addText(readBinding().raw);
+              continue;
           }
         }
 
@@ -1807,8 +1811,13 @@
       }
     }));
 
-    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.top.push(xNode(this.glob.$onMount, {
@@ -1851,7 +1860,6 @@
 
     let bb = this.buildBlock(this.DOM, {
       inline: true,
-      protectLastTag: true,
       allowSingleBlock: true,
       template: {
         name: '$parentElement',
@@ -1938,7 +1946,6 @@
     let binds = xNode('block');
     let result = {};
     let inuse = Object.assign({}, this.inuse);
-    let lastTagDynamic = false;
 
     if(!option.parentElement) option.parentElement = '$parentElement';
 
@@ -2021,26 +2028,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,16 +2106,22 @@
               }));
             });
 
-            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;
@@ -2092,29 +2130,35 @@
             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()
+                  label
                 }, (ctx, n) => {
                   if(n.reference) {
                     ctx.write(true, `${n.reference} = `);
                     ctx.add(n.component);
-                    ctx.write(true, `$runtime.attachBlock(${n.el}, ${n.reference});`);
+                    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 {
-                    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.component);
                     ctx.write(');');
                   }
@@ -2122,9 +2166,7 @@
               }
             } 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 +2175,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 +2196,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 +2212,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');
@@ -2217,9 +2259,8 @@
           }
         } 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 +2268,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 +2289,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 +2313,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) {
@@ -2529,7 +2564,7 @@
       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 == 'if') e.details = n.parts?.[0]?.value.trim() || 'if-block';
     }
     throw e;
   }
@@ -5128,7 +5163,7 @@
     return { bind: result, reference };
   }
 
-  function makeComponentDyn(node, element) {
+  function makeComponentDyn(node, label) {
     let dynamicComponent;
 
     if(node.elArg) {
@@ -5150,15 +5185,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)');
     });
   }
 
@@ -5322,7 +5358,7 @@
         })
       };
     } else if(name == 'style' && arg) {
-      let styleName = toCamelCase(arg);
+      let styleName = arg;
       let exp;
       if(prop.value) {
         if(isExpression(prop.value)) {
@@ -5340,13 +5376,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 +5399,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};`);
             }
           })]
         })
@@ -5603,7 +5639,7 @@
     }
   }
 
-  function makeifBlock(data, element, parentElement) {
+  function makeifBlock(data, label) {
     const getBlock = b => {
       if(b.singleBlock) {
         return xNode('make-block', {
@@ -5624,22 +5660,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 +5700,7 @@
 
       ctx.indent--;
       ctx.write(true);
-      if(n.parentElement) ctx.write(', true');
+      if(!n.label.node) ctx.write(', true');
       ctx.write(');', true);
     });
   }
@@ -5783,7 +5818,6 @@
     if(!nodeItems.length) nodeItems = [data.mainBlock[0]];
 
     let itemBlock, block = this.buildBlock({ body: nodeItems }, {
-      protectLastTag: true,
       allowSingleBlock: !blockPrefix,
       each: {
         blockPrefix,
@@ -5817,7 +5851,6 @@
     let elseBlock = null;
     if(data.elseBlock) {
       let block = this.buildBlock({ body: data.elseBlock }, {
-        protectLastTag: true,
         allowSingleBlock: false
       });
       elseBlock = block.block;
@@ -5826,9 +5859,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 +5892,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 +5920,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 +5934,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 +5943,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 +5954,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(', ');
@@ -6192,9 +6231,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 +6243,7 @@
     let data = {
       name: node.elArg,
       componentName,
-      label: label.bindName()
+      label
     };
 
     let body = trimEmptyNodes(node.body || []);
@@ -6218,7 +6258,8 @@
     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 +6638,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.2-a1';
+  const version = '0.7.2-a5';
 
 
   async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.2-a1",
+  "version": "0.7.2-a5",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",

package/runtime.js

@@ -1,3 +1,7 @@
+let current_destroyList, current_mountList, current_cd, destroyResults;
+const $onDestroy = fn => fn && current_destroyList.push(fn);
+const $onMount = fn => current_mountList.push(fn);
+
 let __app_onerror = console.error;
 
 const configure = (option) => {
@@ -24,17 +28,13 @@ const safeGroupCall = list => {
   }
 };
 
-const safeCallMount = (mountList, destroyList) => {
-  mountList.forEach(fn => {
+const safeGroupCall2 = (list, resultList) => {
+  list?.forEach(fn => {
     let r = safeCall(fn);
-    r && destroyList.push(r);
+    r && resultList.push(r);
   });
 };
 
-let current_destroyList, current_mountList, current_cd, destroyResults;
-const $onDestroy = fn => fn && current_destroyList.push(fn);
-const $onMount = fn => current_mountList.push(fn);
-
 function WatchObject(fn, cb) {
   this.fn = fn;
   this.cb = cb;
@@ -75,7 +75,7 @@ const cd_component = cd => {
   return cd.component;
 };
 
-const cd_new = () => new $ChangeDetector();
+const cd_new = (parent) => new $ChangeDetector(parent);
 
 const cd_attach = (parent, cd) => {
   if(cd) {
@@ -288,25 +288,6 @@ const iterNodes = (el, last, fn) => {
 const removeElements = (el, last) => iterNodes(el, last, n => n.remove());
 
 
-function removeElementsBetween(el, stop) {
-  let next;
-  el = el.nextSibling;
-  while(el) {
-    next = el.nextSibling;
-    if(el == stop) break;
-    el.remove();
-    el = next;
-  }
-}
-
-const getFinalLabel = n => {
-  if(n.nextSibling) return n.nextSibling;
-  let e = document.createTextNode('');
-  n.parentNode.appendChild(e);
-  return e;
-};
-
-
 const resolvedPromise = Promise.resolve();
 
 function $tick(fn) {
@@ -326,7 +307,7 @@ function makeEmitter(option) {
 }
 
 
-let current_component;
+let current_component, $context;
 
 
 const makeApply = () => {
@@ -357,6 +338,7 @@ const makeApply = () => {
 
 const makeComponent = (init) => {
   return ($option = {}) => {
+    $context = $option.context || {};
     let prev_component = current_component,
       prev_cd = current_cd,
       $component = current_component = { $option };
@@ -367,6 +349,7 @@ const makeComponent = (init) => {
     } finally {
       current_component = prev_component;
       current_cd = prev_cd;
+      $context = null;
     }
 
     return $component;
@@ -417,34 +400,33 @@ const callComponentDyn = (component, context, option = {}, propFn, cmp, setter,
 };
 
 
-const attachDynComponent = (label, exp, bind) => {
+const attachDynComponent = (label, exp, bind, parentLabel) => {
   let parentCD = current_cd;
-  let active, destroyList, $cd, $dom, finalLabel = getFinalLabel(label);
+  let destroyList, $cd, first;
   const destroy = () => safeGroupCall(destroyList);
   $onDestroy(destroy);
 
   $watch(exp, (component) => {
     destroy();
     if($cd) cd_detach($cd);
-    if(active) removeElementsBetween(label, finalLabel);
+    if(first) removeElements(first, parentLabel ? null : label.previousSibling);
 
     if(component) {
       destroyList = current_destroyList = [];
       current_mountList = [];
-      $cd = current_cd = cd_new();
+      $cd = current_cd = cd_new(parentCD);
       try {
-        $dom = bind(component).$dom;
+        const $dom = bind(component).$dom;
         cd_attach(parentCD, $cd);
-        insertAfter(label, $dom);
-        safeCallMount(current_mountList, destroyList);
+        first = $dom.nodeType == 11 ? $dom.firstChild : $dom;
+        if(parentLabel) label.appendChild($dom);
+        else label.parentNode.insertBefore($dom, label);
+        safeGroupCall2(current_mountList, destroyList);
       } finally {
         current_destroyList = current_mountList = current_cd = null;
       }
-      active = true;
     } else {
-      $cd = null;
-      active = false;
-      destroyList = null;
+      $cd = first = destroyList = null;
     }
   });
 };
@@ -647,7 +629,8 @@ const spreadAttributes = (el, fn) => {
 
 
 const callExportedFragment = (childComponent, name, slot, events, props, cmp) => {
-  let push, $dom;
+  let push, $dom, fn = childComponent.$exported?.[name];
+  if(!fn) return;
   if(cmp) {
     let result;
     let w = $watch(props, (value) => {
@@ -657,7 +640,6 @@ const callExportedFragment = (childComponent, name, slot, events, props, cmp) =>
     fire(w);
     props = () => result;
   }
-  let fn = childComponent.$exported?.[name];
   ([$dom, push] = fn(props, events, slot));
   return $dom;
 };
@@ -731,6 +713,16 @@ const attachBlock = (label, $dom) => {
   insertAfter(label, $dom.$dom || $dom);
 };
 
+const addBlock = (parent, $dom) => {
+  if(!$dom) return;
+  parent.appendChild($dom.$dom || $dom);
+};
+
+const insertBlock = (label, $dom) => {
+  if(!$dom) return;
+  label.parentNode.insertBefore($dom.$dom || $dom, label);
+};
+
 const mergeEvents = (...callbacks) => {
   callbacks = callbacks.filter(i => i);
   return (e) => callbacks.forEach(cb => cb(e));
@@ -791,7 +783,7 @@ const mount = (label, component, option) => {
       last = $dom.lastChild;
     } else first = last = $dom;
     label.appendChild($dom);
-    safeCallMount(current_mountList, destroyList);
+    safeGroupCall2(current_mountList, destroyList);
   } finally {
     current_destroyList = current_mountList = null;
   }
@@ -860,21 +852,21 @@ let create = (tag, html) => {
     t.innerHTML = html;
     fr = t.content;
   }
-  let lastElement = fr.lastChild;
-  insertAfter(tag, fr);
-  return lastElement;
+  let firstElement = fr.firstChild;
+  tag.parentNode.insertBefore(fr, tag);
+  return firstElement;
 };
 
 function htmlBlock(tag, fn) {
-  let lastElement;
+  let firstElement;
   let destroy = () => {
-    if(!lastElement) return;
-    removeElements(tag.nextSibling, lastElement);
-    lastElement = null;
+    if(!firstElement) return;
+    removeElements(firstElement, tag.previousSibling);
+    firstElement = null;
   };
   $watch(fn, (html) => {
     destroy();
-    if(html) lastElement = create(tag, html);
+    if(html) firstElement = create(tag, html);
   });
 }
 
@@ -884,13 +876,13 @@ function htmlBlockStatic(tag, value) {
 
 function ifBlock(label, fn, parts, parentLabel) {
   let first, last, $cd, destroyList, parentCD = current_cd;
-  $onDestroy(() => safeGroupCall(destroyList));
+  $onDestroy(() => safeGroupCall2(destroyList, destroyResults));
 
   function createBlock(builder) {
     let $dom;
     destroyList = current_destroyList = [];
     let mountList = current_mountList = [];
-    $cd = current_cd = cd_new();
+    $cd = current_cd = cd_new(parentCD);
     try {
       $dom = builder();
     } finally {
@@ -902,14 +894,14 @@ function ifBlock(label, fn, parts, parentLabel) {
       last = $dom.lastChild;
     } else first = last = $dom;
     if(parentLabel) label.appendChild($dom);
-    else insertAfter(label, $dom);
-    safeCallMount(mountList, destroyList);
+    else label.parentNode.insertBefore($dom, label);
+    safeGroupCall2(mountList, destroyList);
   }
 
   function destroyBlock() {
     if(!first) return;
     destroyResults = [];
-    safeGroupCall(destroyList);
+    safeGroupCall2(destroyList, destroyResults);
     destroyList.length = 0;
     if($cd) {
       cd_detach($cd);
@@ -932,12 +924,16 @@ function ifBlock(label, fn, parts, parentLabel) {
 }
 
 
-function ifBlockReadOnly(label, fn, parts) {
+function ifBlockReadOnly(label, fn, parts, parentLabel) {
   let value = fn();
-  if(value != null) insertAfter(label, parts[value]());
+  if(value != null) {
+    const $dom = parts[value]();
+    if(parentLabel) label.appendChild($dom);
+    else label.parentNode.insertBefore($dom, label);
+  }
 }
 
-function awaitBlock(label, relation, fn, build_main, build_then, build_catch) {
+function awaitBlock(label, parentLabel, relation, fn, build_main, build_then, build_catch) {
   let parentCD = current_cd, first, last, $cd, promise, destroyList, status = 0;
   $onDestroy(() => safeGroupCall(destroyList));
 
@@ -959,7 +955,7 @@ function awaitBlock(label, relation, fn, build_main, build_then, build_catch) {
 
     if(!builder) return;
     destroyList = current_destroyList = [];
-    $cd = current_cd = cd_new();
+    $cd = current_cd = cd_new(parentCD);
     let $dom, mountList = current_mountList = [];
     try {
       $dom = builder(value);
@@ -971,8 +967,9 @@ function awaitBlock(label, relation, fn, build_main, build_then, build_catch) {
       first = $dom.firstChild;
       last = $dom.lastChild;
     } else first = last = $dom;
-    insertAfter(label, $dom);
-    safeCallMount(mountList, destroyList);
+    if(parentLabel) label.appendChild($dom);
+    else label.parentNode.insertBefore($dom, label);
+    safeGroupCall2(mountList, destroyList);
     cd_component(parentCD).$apply();
   }
 
@@ -1015,11 +1012,12 @@ const makeEachSingleBlock = (fn) => {
 
 
 const makeEachElseBlock = (fn) => {
-  return (label, onlyChild, parentCD) => {
+  return (label, mode, parentCD) => {
     let first, last;
     let destroyList = current_destroyList = [];
-    let $cd = current_cd = cd_new();
+    let $cd = current_cd = cd_new(parentCD);
     current_mountList = [];
+    const parentNode = mode ? label : label.parentNode;
     try {
       let $dom = fn();
       if($dom.nodeType == 11) {
@@ -1027,32 +1025,41 @@ const makeEachElseBlock = (fn) => {
         last = $dom.lastChild;
       } else first = last = $dom;
       cd_attach(parentCD, $cd);
-      if(onlyChild) label.appendChild($dom);
-      else attachBlock(label, $dom);
-      safeCallMount(current_mountList, destroyList);
+      parentNode.insertBefore($dom, mode ? null : label);
+      safeGroupCall2(current_mountList, destroyList);
     } finally {
       current_destroyList = current_mountList = current_cd = null;
     }
 
     return () => {
-      removeElements(first, last);
       cd_detach($cd);
-      safeGroupCall(destroyList);
+      destroyResults = [];
+      safeGroupCall2(destroyList, destroyResults);
+
+      if(destroyResults.length) {
+        const f = first, l = last;
+        iterNodes(f, l, n => n.$$removing = true);
+        Promise.allSettled(destroyResults).then(() => iterNodes(f, l, n => n.remove()));
+      } else {
+        removeElements(first, last);
+      }
+      destroyResults = null;
     };
   };
 };
 
 
-function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
+function $$eachBlock(label, mode, fn, getKey, bind, buildElseBlock) {
   let parentCD = current_cd;
   let eachCD = cd_new();
   cd_attach(parentCD, eachCD);
 
   let mapping = new Map();
-  let lastNode, vi = 0, p_promise = 0, p_destroy = 0, elseBlock;
+  let firstNode, vi = 0, p_promise = 0, p_destroy = 0, elseBlock;
+  const onlyChild = mode == 1;
 
   const destroyAll = () => {
-    p_destroy && safeCall(() => mapping.forEach(ctx => ctx.d?.forEach(fn => fn())));
+    p_destroy && mapping.forEach(ctx => safeGroupCall2(ctx.d, destroyResults));
     mapping.clear();
   };
 
@@ -1065,14 +1072,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
     else if(!isArray(array)) array = [];
 
     let newMapping = new Map();
-    let prevNode, parentNode;
-    if(onlyChild) {
-      prevNode = null;
-      parentNode = label;
-    } else {
-      prevNode = label;
-      parentNode = label.parentNode;
-    }
+    let parentNode = mode ? label : label.parentNode;
 
     if(mapping.size) {
       let ctx, count = 0;
@@ -1085,7 +1085,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
         }
       }
 
-      if(!count && lastNode) {
+      if(!count && firstNode) {
         destroyResults = [];
         eachCD.children.length = 0;
         destroyAll();
@@ -1093,14 +1093,14 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
         if(destroyResults.length) {
           p_promise = 1;
           let removedNodes = [];
-          iterNodes(onlyChild ? label.firstChild : label.nextSibling, lastNode, n => {
+          iterNodes(firstNode, onlyChild ? null : label.previousSibling, n => {
             n.$$removing = true;
             removedNodes.push(n);
           });
           Promise.allSettled(destroyResults).then(() => removedNodes.forEach(n => n.remove()));
         } else {
           if(onlyChild) label.textContent = '';
-          else removeElements(label.nextSibling, lastNode);
+          else removeElements(firstNode, label.previousSibling);
         }
 
         destroyResults = null;
@@ -1113,7 +1113,7 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
             ctx.$cd && eachCD.children.push(ctx.$cd);
             return;
           }
-          safeGroupCall(ctx.d);
+          safeGroupCall2(ctx.d, destroyResults);
           iterNodes(ctx.first, ctx.last, n => removedNodes.push(n));
         });
 
@@ -1134,7 +1134,9 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
     }
 
     let i, item, next_ctx, ctx, nextEl, key;
-    for(i = 0; i < array.length; i++) {
+    let nextNode = mode ? null : label;
+    i = array.length;
+    while(i--) {
       item = array[i];
       key = getKey(item, i, array);
       if(next_ctx) {
@@ -1142,36 +1144,36 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
         next_ctx = null;
       } else ctx = mapping.get(key);
       if(ctx) {
-        nextEl = i == 0 && onlyChild ? parentNode.firstChild : prevNode.nextSibling;
-        if(p_promise) while(nextEl && nextEl.$$removing) nextEl = nextEl.nextSibling;
-        if(nextEl != ctx.first) {
+        nextEl = nextNode ? nextNode.previousSibling : parentNode.lastChild;
+        if(p_promise) while(nextEl && nextEl.$$removing) nextEl = nextEl.previousSibling;
+        if(nextEl != ctx.last) {
           let insert = true;
 
-          if(ctx.first == ctx.last && (i + 1 < array.length) && prevNode?.nextSibling) {
-            next_ctx = mapping.get(getKey(array[i + 1], i + 1, array));
-            if(next_ctx && prevNode.nextSibling.nextSibling === next_ctx.first) {
-              parentNode.replaceChild(ctx.first, prevNode.nextSibling);
+          if(ctx.first == ctx.last && (i > 0) && nextEl) {
+            next_ctx = mapping.get(getKey(array[i - 1], i - 1, array));
+            if(next_ctx && nextEl.previousSibling === next_ctx.last) {
+              parentNode.replaceChild(ctx.first, nextEl);
               insert = false;
             }
           }
 
           if(insert) {
-            let insertBefore = prevNode?.nextSibling;
             let next, el = ctx.first;
             while(el) {
               next = el.nextSibling;
-              parentNode.insertBefore(el, insertBefore);
+              parentNode.insertBefore(el, nextNode);
               if(el == ctx.last) break;
               el = next;
             }
           }
         }
         ctx.rebind?.(item, i);
+        nextNode = ctx.first;
       } else {
         let $dom, rebind,
           d = current_destroyList = [],
           m = current_mountList = [],
-          $cd = current_cd = cd_new();
+          $cd = current_cd = cd_new(eachCD);
         try {
           ([$dom, rebind] = bind(item, i));
         } finally {
@@ -1183,22 +1185,22 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
           ctx.first = $dom.firstChild;
           ctx.last = $dom.lastChild;
         } else ctx.first = ctx.last = $dom;
-        parentNode.insertBefore($dom, prevNode?.nextSibling);
-        safeCallMount(m, d);
+        parentNode.insertBefore($dom, nextNode);
+        nextNode = ctx.first;
+        safeGroupCall2(m, d);
         if(d.length) {
           ctx.d = d;
           p_destroy = 1;
         }
       }
-      prevNode = ctx.last;
       newMapping.set(key, ctx);
     }
-    lastNode = prevNode;
+    firstNode = nextNode;
     mapping.clear();
     mapping = newMapping;
 
     if(!array.length && !elseBlock && buildElseBlock) {
-      elseBlock = buildElseBlock(label, onlyChild, parentCD);
+      elseBlock = buildElseBlock(label, mode, parentCD);
     }
   }, { cmp: compareArray });
 }
@@ -1245,4 +1247,4 @@ const makeSlot = (fr, fn) => {
   };
 };
 
-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 };
+export { $$eachBlock, $context, $digest, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addBlock, 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, htmlBlock, htmlBlockStatic, htmlToFragment, htmlToFragmentClean, ifBlock, ifBlockReadOnly, insertAfter, insertBlock, 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, removeItem, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };