malinajs 0.7.0-a15 → 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';
@@ -1806,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) {
@@ -1927,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
@@ -4437,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);
@@ -4746,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 = [];
 
@@ -4937,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
@@ -4970,6 +4987,7 @@
       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;
     });
 
 
@@ -4985,10 +5003,14 @@
       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(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(', ')}}`);
@@ -5066,8 +5088,8 @@
         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 && this.inuse.apply) {
@@ -5817,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});`);
     });
   }
 
@@ -5881,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(', ');
@@ -5896,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
@@ -5922,7 +5945,8 @@
       name: slotName,
       props,
       staticProps,
-      placeholder
+      placeholder,
+      deepChecking
     }, (ctx, n) => {
       let dynamicProps = this.inuse.apply && !n.staticProps;
 
@@ -5949,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(')');
     });
@@ -5983,6 +6007,11 @@
       });
     }
 
+    if(external) {
+      this.require('$component');
+      if(props?.length) this.require('apply');
+    }
+
     return xNode('fragment', {
       $compile: [block.source],
       name,
@@ -6019,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});`);
     });
   }
 
@@ -6029,6 +6058,7 @@
     let events = [];
     let forwardAllEvents;
     let staticProps = true;
+    let deepChecking = false;
 
     attributes.forEach(prop => {
       let name = prop.name;
@@ -6053,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 };
   }
 
 
@@ -6226,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');
         }
       }
 
@@ -6304,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('}');
@@ -6315,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';
 
@@ -6361,7 +6396,7 @@
       statical = true;
     }
 
-    return { name, value, rawValue, static: statical };
+    return { name, value, rawValue, static: statical, mod };
   }
 
   function attachPortal(node) {
@@ -6393,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('}');
@@ -6545,7 +6580,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a15';
+  const version = '0.7.0-a16';
 
 
   async function compile(source, config = {}) {

package/package.json

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

package/runtime.js

@@ -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,23 +326,6 @@ 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;
 
 
@@ -381,7 +359,7 @@ const makeComponent = (init) => {
   return ($option = {}) => {
     let prev_component = current_component,
       prev_cd = current_cd,
-      $component = current_component = {$option};
+      $component = current_component = { $option };
     current_cd = null;
 
     try {
@@ -396,9 +374,16 @@ 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) {
     parentWatch = $watch(propFn, value => {
@@ -416,12 +401,13 @@ const callComponent = (context, component, option = {}, propFn, cmp, setter, cla
     }, { value: {}, cmp: keyComparator }));
   }
 
-  $component = safeCall(() => component(option));
-  if($component instanceof Node) $component = {$dom: $component};
+  $component = callComponent(component, context, option);
   if(setter && $component?.$exportedProps) {
-    let w = new WatchObject($component.$exportedProps, value => {
+    let parentCD = current_cd, w = new WatchObject($component.$exportedProps, value => {
       setter(value);
       cd_component(parentCD).$apply();
+      $component.$push(parentWatch.fn());
+      $component.$apply();
     });
     Object.assign(w, { idle: true, cmp, value: parentWatch.value });
     $component.$cd.watchers.push(w);
@@ -448,7 +434,7 @@ const attachDynComponent = (label, exp, bind) => {
       $cd = current_cd = cd_new();
       try {
         $dom = bind(component).$dom;
-        cd_attach2(parentCD, $cd);
+        cd_attach(parentCD, $cd);
         insertAfter(label, $dom);
         safeCallMount(current_mountList, destroyList);
       } finally {
@@ -549,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) });
   }
 };
 
@@ -608,9 +594,6 @@ const makeExternalProperty = (name, getter, setter) => {
 };
 
 
-const eachDefaultKey = (item, index, array) => isObject(array[0]) ? item : index;
-
-
 const attachAnchor = ($option, el, name) => {
   $option.anchor?.[name || 'default']?.(el);
 };
@@ -620,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);
@@ -680,16 +663,21 @@ const callExportedFragment = (childComponent, name, slot, events, props, cmp) =>
 };
 
 
-const exportFragment = (name, fn) => {
+const exportFragment = (component, name, fn) => {
   let childCD = current_cd;
-  let component = cd_component(childCD);
   if(!component.$exported) component.$exported = {};
   component.$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();
+    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 {
@@ -726,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);
@@ -809,7 +797,7 @@ const mount = (label, component, option) => {
   }
   app.destroy = () => {
     safeGroupCall(destroyList);
-    $$removeElements(first, last);
+    removeElements(first, last);
   };
   return app;
 };
@@ -877,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) => {
@@ -890,7 +878,7 @@ function $$htmlBlock(tag, fn) {
   });
 }
 
-function $$htmlBlockStatic(tag, value) {
+function htmlBlockStatic(tag, value) {
   create(tag, value);
 }
 
@@ -908,7 +896,7 @@ function ifBlock(label, fn, parts, parentLabel) {
     } 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;
@@ -930,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;
   }
@@ -949,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));
 
@@ -962,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;
   }
 
@@ -978,7 +966,7 @@ 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;
@@ -1007,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);
@@ -1035,7 +1026,7 @@ const makeEachElseBlock = (fn) => {
         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);
@@ -1044,7 +1035,7 @@ const makeEachElseBlock = (fn) => {
     }
 
     return () => {
-      $$removeElements(first, last);
+      removeElements(first, last);
       cd_detach($cd);
       safeGroupCall(destroyList);
     };
@@ -1055,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;
@@ -1109,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;
@@ -1187,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;
@@ -1209,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) => {
@@ -1242,7 +1233,7 @@ const makeSlot = (fr, fn) => {
     let $dom = fr.cloneNode(true), prev = current_cd;
     if(parentCD) {
       let $cd = current_cd = cd_new();
-      cd_attach2(parentCD, $cd);
+      cd_attach(parentCD, $cd);
       $onDestroy(() => cd_detach($cd));
       cd_component(parentCD).$apply();
     } else current_cd = null;
@@ -1254,4 +1245,4 @@ const makeSlot = (fr, fn) => {
   };
 };
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $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 };