malinajs 0.6.50 → 0.7.1-alpha

package/runtime.js

@@ -9,22 +9,32 @@ const configure = (option) => {
 const isFunction = fn => typeof fn == 'function';
 
 
-const isObject = d => typeof d == 'object';
-
-
 const safeCall = fn => {
     try {
-        return isFunction(fn) && fn();
+        return fn?.();
     } catch (e) {
         __app_onerror(e);
     }
 };
 
+function WatchObject(fn, cb) {
+    this.fn = fn;
+    this.cb = cb;
+    this.value = NaN;
+    this.ro = false;
+    this.cmp = null;
+}
+
+
+const cd_watchObject = (fn, cb, option) => {
+    let w = new WatchObject(fn, cb);
+    option && Object.assign(w, option);
+    return w;
+};
+
+
 function $watch(cd, fn, callback, w) {
-    if(!w) w = {};
-    w.fn = fn;
-    w.cb = callback;
-    if(!('value' in w)) w.value = NaN;
+    w = cd_watchObject(fn, callback, w);
     cd.watchers.push(w);
     return w;
 }
@@ -32,6 +42,7 @@ function $watchReadOnly(cd, fn, callback) {
     return $watch(cd, fn, callback, {ro: true});
 }
 function addEvent(cd, el, event, callback) {
+    if(!callback) return;
     el.addEventListener(event, callback);
     cd_onDestroy(cd, () => {
         el.removeEventListener(event, callback);
@@ -50,7 +61,6 @@ function $ChangeDetector(parent) {
     this.watchers = [];
     this._d = [];
     this.prefix = [];
-    this.$$ = parent?.$$;
 }
 $ChangeDetector.prototype.new = function() {
     var cd = new $ChangeDetector(this);
@@ -59,15 +69,37 @@ $ChangeDetector.prototype.new = function() {
 };
 
 $ChangeDetector.prototype.destroy = function(option) {
-    if(option !== false && this.parent) $$removeItem(this.parent.children, this);
-    this.watchers.length = 0;
-    this.prefix.length = 0;
-    this._d.map(safeCall);
-    this._d.length = 0;
-    this.children.map(cd => cd.destroy(false));
-    this.children.length = 0;
+    cd_destroy$1(this, option);
+};
+
+const cd_component = cd => {
+    while(cd.parent) cd = cd.parent;
+    return cd.component;
 };
 
+const cd_new = () => new $ChangeDetector();
+
+const cd_attach = (parent, cd) => {
+    if(cd) {
+        cd.parent = parent;
+        parent.children.push(cd);
+    }
+};
+
+let destroyResults = null;
+
+const cd_destroy$1 = (cd, option) => {
+    if(option !== false && cd.parent) $$removeItem(cd.parent.children, cd);
+    cd.watchers.length = 0;
+    cd.prefix.length = 0;
+    cd._d.forEach(fn => {
+        let p = safeCall(fn);
+        p && destroyResults && destroyResults.push(p);
+    });
+    cd._d.length = 0;
+    cd.children.map(cd => cd.destroy(false));
+    cd.children.length = 0;
+};
 
 const isArray = (a) => Array.isArray(a);
 
@@ -95,8 +127,8 @@ function $$compareArray(w, value) {
 const compareDeep = (a, b, lvl) => {
     if(lvl < 0 || !a || !b) return a !== b;
     if(a === b) return false;
-    let o0 = isObject(a);
-    let o1 = isObject(b);
+    let o0 = typeof(a) == 'object';
+    let o1 = typeof(b) == 'object';
     if(!(o0 && o1)) return a !== b;
 
     let a0 = isArray(a);
@@ -126,7 +158,7 @@ const compareDeep = (a, b, lvl) => {
 function cloneDeep(d, lvl) {
     if(lvl < 0 || !d) return d;
 
-    if(isObject(d)) {
+    if(typeof(d) == 'object') {
         if(d instanceof Date) return d;
         if(d instanceof Element) return d;
         if(isArray(d)) return d.map(i => cloneDeep(i, lvl-1));
@@ -205,8 +237,6 @@ function $digest($cd) {
 let templatecache = {};
 let templatecacheSvg = {};
 
-let $$uniqIndex = 1;
-
 const childNodes = 'childNodes';
 const firstChild = 'firstChild';
 
@@ -216,37 +246,41 @@ const insertAfter = (label, node) => {
     label.parentNode.insertBefore(node, label.nextSibling);
 };
 
-const createTextNode = (text) => {
-    let f = document.createDocumentFragment();
-    f.append(text);
-    return f;
-};
+const createTextNode = (text) => document.createTextNode(text);
 
-const $$htmlToFragment = (html) => {
-    if(templatecache[html]) return templatecache[html].cloneNode(true);
+const $$htmlToFragment = (html, option) => {
+    let result = templatecache[html];
+    if(!result) {
+        let t = document.createElement('template');
+        t.innerHTML = html.replace(/<>/g, '<!---->');
+        result = t.content;
+        if(!(option & 2) && result.firstChild == result.lastChild) result = result.firstChild;
+        templatecache[html] = result;
+    }
 
-    let t = document.createElement('template');
-    t.innerHTML = html.replace(/<>/g, '<!---->');
-    let result = t.content;
-    templatecache[html] = result.cloneNode(true);
-    return result;
+    return option & 1 ? result.cloneNode(true) : result;
 };
 
-const $$htmlToFragmentClean = (html) => {
-    if(templatecache[html]) return templatecache[html].cloneNode(true);
+const $$htmlToFragmentClean = (html, option) => {
+    let result = templatecache[html];
+    if(!result) {
+        let t = document.createElement('template');
+        t.innerHTML = html.replace(/<>/g, '<!---->');
+        result = t.content;
+
+        let it = document.createNodeIterator(result, 128);
+        let n;
+        while(n = it.nextNode()) {
+            if(!n.nodeValue) n.parentNode.replaceChild(document.createTextNode(''), n);
+        }
+        if(!(option & 2) && result.firstChild == result.lastChild) result = result.firstChild;
+        templatecache[html] = result;
+    }
 
-    let t = document.createElement('template');
-    t.innerHTML = html.replace(/<>/g, '<!---->');
-    let result = t.content;
-
-    let it = document.createNodeIterator(result, 128);
-    let n;
-    while(n = it.nextNode()) {
-        if(!n.nodeValue) n.parentNode.replaceChild(document.createTextNode(''), n);
-    }    templatecache[html] = result.cloneNode(true);
-    return result;
+    return option & 1 ? result.cloneNode(true) : result;
 };
 
+
 function svgToFragment(content) {
     if(templatecacheSvg[content]) return templatecacheSvg[content].cloneNode(true);
     let t = document.createElement('template');
@@ -258,15 +292,21 @@ function svgToFragment(content) {
     templatecacheSvg[content] = result.cloneNode(true);
     return result;
 }
-function $$removeElements(el, last) {
+
+const iterNodes = (el, last, fn) => {
     let next;
     while(el) {
         next = el.nextSibling;
-        el.remove();
+        fn(el);
         if(el == last) break;
         el = next;
     }
-}
+};
+
+
+const $$removeElements = (el, last) => iterNodes(el, last, n => n.remove());
+
+
 function removeElementsBetween(el, stop) {
     let next;
     el = el.nextSibling;
@@ -285,22 +325,11 @@ const getFinalLabel = n => {
 };
 
 
-let _tick_list = [];
-let _tick_planned = {};
-function $tick(fn, uniq) {
-    if(uniq) {
-        if(_tick_planned[uniq]) return;
-        _tick_planned[uniq] = true;
-    }
-    _tick_list.push(fn);
-    if(_tick_planned.$tick) return;
-    _tick_planned.$tick = true;
-    setTimeout(() => {
-        _tick_planned = {};
-        let list = _tick_list;
-        _tick_list = [];
-        list.map(safeCall);
-    }, 0);
+const resolvedPromise = Promise.resolve();
+
+function $tick(fn) {
+    fn && resolvedPromise.then(fn);
+    return resolvedPromise;
 }
 
 function $makeEmitter(option) {
@@ -335,72 +364,38 @@ const $onDestroy = fn => current_component._d.push(fn);
 const $onMount = fn => current_component._m.push(fn);
 
 
-const $insertElementByOption = ($label, $option, $element) => {
-    if ($option.$l) {
-        insertAfter($label, $element);
-    } else {
-        $label.appendChild($element);
-    }
-};
-
-
-const $readOnlyBase = {
-    a: ($component) => {
-        $component.$cd = {
-            _d: $component._d,
-            watchers: [],
-            prefix: [],
-            new: () => $component.$cd,
-            destroy: noop,
-            $$: $component
-        };
-    },
-    b: ($component) => {
-        let watchers = $component.$cd.watchers;
-        let prefix = $component.$cd.prefix;
-        while(watchers.length || prefix.length) {
-            let wl = watchers.slice();
-            watchers.length = 0;
-            prefix.forEach(safeCall);
-            prefix.length = 0;
-            wl.forEach(w => w.cb(w.fn()));
-        }
-    }
-};
-
-
 const $base = {
     a: ($component) => {
-        let $cd = new $ChangeDetector();
-        $cd.$$ = $component;
+        let $cd = cd_new();
+        $cd.component = $component;
         $onDestroy(() => $cd.destroy());
 
-        let id = `a${$$uniqIndex++}`;
-        let process;
+        let planned;
         let apply = r => {
-            if (process) return r;
+            if(planned) return r;
+            planned = true;
             $tick(() => {
                 try {
-                    process = true;
                     $digest($cd);
                 } finally {
-                    process = false;
+                    planned = false;
                 }
-            }, id);
+            });
             return r;
         };
 
         $component.$cd = $cd;
         $component.apply = apply;
         $component.push = apply;
-        apply();
     },
-    b: noop
+    b: ($component) => {
+        safeCall(() => $digest($component.$cd));
+    }
 };
 
 
 const makeComponent = (init, $base) => {
-    return ($element, $option={}) => {
+    return ($option={}) => {
         let prev = current_component;
         $context = $option.context || {};
         let $component = current_component = {
@@ -411,29 +406,29 @@ const makeComponent = (init, $base) => {
             _d: [],
             _m: []
         };
-        $base.a($component);
+        $base?.a($component);
 
         try {
-            $insertElementByOption($element, $option, init($option, $component.apply));
-            $base.b($component);
+            $component.$dom = init($option, $component.apply);
+            $base?.b($component);
         } finally {
             current_component = prev;
             $context = null;
         }
 
-        $tick(() => $component._d.push(...$component._m.map(safeCall)));
+        $component._d.push(...$component._m.map(safeCall));
         return $component;
     };
 };
 
 
-const callComponent = (cd, context, component, label, option, propFn, cmp, setter, classFn) => {
-    option.$l = 1;
+const callComponent = (context, component, option={}, propFn, cmp, setter, classFn) => {
     option.context = {...context};
-    let $component, parentWatch, childWatch;
+    let $component, parentWatch, childWatch, cd;
 
     if(propFn) {
         if(cmp) {
+            cd = cd_new();
             parentWatch = $watch(cd, propFn, value => {
                 option.props = value;
                 if($component) {
@@ -447,30 +442,71 @@ const callComponent = (cd, context, component, label, option, propFn, cmp, sette
     }
 
     if(classFn) {
+        cd = cd || cd_new();
         fire($watch(cd, classFn, value => {
             option.$class = value;
             $component?.apply?.();
         }, {ro: true, value: {}, cmp: keyComparator}));
     }
 
-    $component = safeCall(() => component(label, option));
-    if($component) {
-      cd_onDestroy(cd, $component.destroy);
+    let anchors = option.anchor;
+    if(anchors) {
+        for(let name in anchors) {
+            let a = anchors[name];
+            let fn = a.$;
+            if(fn) {
+                cd = cd || cd_new();
+                anchors[name] = el => {
+                    let $cd = cd_new();
+                    cd_attach(cd, $cd);
+                    fn($cd, el);
+                    return () => cd_destroy$1($cd);
+                };
+            }
+        }
+    }
 
-      if(setter && $component.exportedProps) {
+    $component = safeCall(() => component(option));
+    if(setter && $component?.exportedProps) {
         childWatch = $watch($component.$cd, $component.exportedProps, value => {
-          setter(value);
-          cd.$$.apply();
+            setter(value);
+            cd_component(cd).apply();
         }, {ro: true, idle: true, value: parentWatch.value, cmp});
-      }
     }
-    return $component;
+    return {
+        $cd: cd,
+        $dom: $component.$dom,
+        destroy: $component.destroy,
+        $component
+    };
+};
+
+
+const attachDynComponent = (parentCD, label, exp, bind) => {
+    let active, $cd, $dom, destroy, finalLabel = getFinalLabel(label);
+    cd_onDestroy(parentCD, () => destroy?.());
+    $watch(parentCD, exp, (component) => {
+        destroy?.();
+        if($cd) cd_destroy$1($cd);
+        if(active) removeElementsBetween(label, finalLabel);
+
+        if(component) {
+            ({$cd, $dom, destroy} = bind(component));
+            cd_attach(parentCD, $cd);
+            insertAfter(label, $dom);
+            active = true;
+        } else {
+            destroy = null;
+            $cd = null;
+            active = false;
+        }
+    });
 };
 
 
 const autoSubscribe = (...list) => {
     list.forEach(i => {
-        if(isFunction(i.subscribe)) {
+        if(i.subscribe) {
             let unsub = i.subscribe(current_component.apply);
             if(isFunction(unsub)) cd_onDestroy(current_component, unsub);
         }
@@ -491,16 +527,21 @@ const addClass = (el, className) => el.classList.add(className);
 
 
 const bindClass = (cd, element, fn, className) => {
-    $watchReadOnly(cd, fn, value => {
+    $watch(cd, fn, value => {
         if(value) addClass(element, className);
         else element.classList.remove(className);
-    });
+    }, {ro: true, value: false});
 };
 
 
 const setClassToElement = (element, value) => bindAttributeBase(element, 'class', value);
 
 
+const bindClassExp = (cd, element, fn) => {
+    $watch(cd, fn, value => setClassToElement(element, value), {ro: true, value: ''});
+};
+
+
 const bindText = (cd, element, fn) => {
     $watchReadOnly(cd, () => '' + fn(), value => {
         element.textContent = value;
@@ -522,10 +563,7 @@ const bindAttributeBase = (element, name, value) => {
 
 
 const bindAttribute = (cd, element, name, fn) => {
-    $watchReadOnly(cd, () => {
-        let v = fn();
-        return v == null ? v : '' + v;
-    }, value => bindAttributeBase(element, name, value));
+    $watchReadOnly(cd, () => '' + fn(), value => bindAttributeBase(element, name, value));
 };
 
 
@@ -536,7 +574,7 @@ const bindAction = (cd, element, action, fn, subscribe) => {
             value = fn();
             handler = action.apply(null, [element].concat(value));
         } else handler = action(element);
-        if(handler?.destroy) cd_onDestroy(cd, handler.destroy);
+        cd_onDestroy(cd, handler?.destroy);
         subscribe?.(cd, fn, handler, value);
     });
 };
@@ -565,8 +603,8 @@ const makeClassResolver = ($option, classMap, metaClass, mainName) => {
     if(!$option.$class) $option.$class = {};
     if(!mainName && metaClass.main) mainName = 'main';
     return (line, defaults) => {
-        let result = [];
-        if(defaults) result.push(defaults);
+        let result = {};
+        if(defaults) result[defaults] = 1;
         line.trim().split(/\s+/).forEach(name => {
             let meta;
             if(name[0] == '$') {
@@ -577,19 +615,21 @@ const makeClassResolver = ($option, classMap, metaClass, mainName) => {
             if(h) {
                 let className = ($option.$class[name === mainName ? '$$main' : name] || '').trim();
                 if(className) {
-                    result.push(className);
+                    result[className] = 1;
                 } else if(h !== true) {
-                    result.push(name, h);
+                    result[name] = 1;
+                    result[h] = 1;
                 }
             }
             let h2 = classMap[name];
             if(h2) {
-                result.push(name, h2);
+                result[name] = 1;
+                result[h2] = 1;
             } else if(!h) {
-                result.push(name);
+                result[name] = 1;
             }
         });
-        return result.join(' ');
+        return Object.keys(result).join(' ');
     }
 };
 
@@ -602,60 +642,11 @@ const makeExternalProperty = ($component, name, getter, setter) => {
 };
 
 
-const attachSlotBase = ($context, $cd, slotName, label, props, placeholder) => {
-    let $slot = $cd.$$.$option.slots?.[slotName];
-    if($slot) $slot($cd, label, $context, props);
-    else placeholder?.();
-};
+const eachDefaultKey = (item, index, array) => typeof array[0] === 'object' ? item : index;
 
 
-const attachSlot = ($context, $cd, slotName, label, props, placeholder, cmp) => {
-    let $slot = $cd.$$.$option.slots?.[slotName];
-    if($slot) {
-        let resultProps = {}, push;
-        if(props) {
-            let setter = (k) => {
-                return v => {
-                    resultProps[k] = v;
-                    push?.();
-                }
-            };
-            for(let k in props) {
-                let v = props[k];
-                if(isFunction(v)) {
-                    fire($watch($cd, v, setter(k), {ro: true, cmp}));
-                } else resultProps[k] = v;
-            }
-        }
-        push = $slot($cd, label, $context, resultProps);
-    } else placeholder?.();
-};
-
-
-const makeSlot = (parentCD, fn) => {
-    return (callerCD, label, $context, props) => {
-        let $cd = parentCD.new();
-        cd_onDestroy(callerCD, () => $cd.destroy());
-        let r = fn($cd, $context, callerCD, props || {});
-        insertAfter(label, r.el || r);
-        $cd.$$.apply?.();
-        return r.push;
-    };
-};
-
-
-const makeSlotStatic = (fn) => {
-    return (callerCD, label) => {
-        insertAfter(label, fn());
-    }
-};
-
-
-const eachDefaultKey = (item, index, array) => isObject(array[0]) ? item : index;
-
-
-const attachAnchor = ($option, $cd, name, el) => {
-    let fn = $option.anchor?.[name];
+const attachAnchor = ($option, $cd, el, name) => {
+    let fn = $option.anchor?.[name || 'default'];
     if(fn) cd_onDestroy($cd, fn(el));
 };
 
@@ -690,35 +681,35 @@ const spreadAttributes = (cd, el, fn) => {
 };
 
 
-const attchExportedFragment = ($parentCD, $childCD, name, label, props, events, template, innerFn) => {
-    let fn = $childCD.$$.exported[name];
-    if(fn) {
-        let slot;
-        if(template) {
-            slot = (childCD, label) => {
-                const $parentElement = $$htmlToFragment(template);
-                if(innerFn) {
-                    let $cd = $parentCD.new();
-                    cd_onDestroy(childCD, () => $cd.destroy());
-                    innerFn($cd, $parentElement);
-                    $cd.$$.apply?.();
-                }
-                insertAfter(label, $parentElement);
-            };
-        }
-
-        if(isFunction(props)) props = props($parentCD, $childCD);
-        fn($parentCD, $childCD, label, props, events, slot);
+const callExportedFragment = (childComponent, name, slot, events, props, cmp) => {
+    let $cd, r;
+    if(cmp) {
+        $cd = cd_new();
+        let fn = props, result;
+        props = () => result;
+        let w = $watch($cd, fn, (props) => {
+            result = props;
+            r?.push();
+        }, {value: {}, cmp});
+        fire(w);
     }
+    let fn = childComponent.exported[name];
+    r = fn(props, events, slot);
+    r.$cd = $cd;
+    return r;
 };
 
 
-const exportFragment = ($component, name, fn) => {
-    $component.exported[name] = ($parentCD, $childCD, label, props, events, slot) => {
-      let $cd = $childCD.new();
-      cd_onDestroy($parentCD, () => $cd.destroy());
-      fn($cd, label, props, events, slot);
-      $component.apply();
+const exportFragment = (childCD, name, fn) => {
+    cd_component(childCD).exported[name] = (props, events, slot) => {
+        let {$cd, $dom} = fn(props, events || {}, slot);
+        cd_attach(childCD, $cd);
+        let apply = cd_component(childCD).apply;
+        return {
+            $dom,
+            destroy: () => $cd.destroy(),
+            push: () => apply?.()
+        };
     };
 };
 
@@ -729,18 +720,6 @@ const prefixPush = ($cd, fn) => {
 };
 
 
-const observeProps = (cmp, fn) => {
-    return (cd, target) => {
-        let result;
-        fire($watch(cd, fn, value => {
-            result = value;
-            target.$$.apply();
-        }, {ro: true, value: {}, cmp}));
-        return () => result;
-    }
-};
-
-
 const unwrapProps = (cd, props, fn) => {
     if(props) {
         if(isFunction(props)) prefixPush(cd, () => fn(props()));
@@ -748,112 +727,241 @@ const unwrapProps = (cd, props, fn) => {
     }
 };
 
+
+const makeBlock = (fr, fn) => {
+    return (v) => {
+        let $dom = fr.cloneNode(true), $cd = cd_new();
+        fn($cd, $dom, v);
+        return {$cd, $dom};
+    }
+};
+
+
+const makeBlockBound = (parentCD, fr, fn) => {
+    return () => {
+        let $dom = fr.cloneNode(true), $cd = cd_new();
+        fn($cd, $dom);
+        cd_attach(parentCD, $cd);
+        return {
+            $dom,
+            destroy: () => cd_destroy$1($cd)
+        };
+    }
+};
+
+
+const makeStaticBlock = (fr, fn) => {
+    return () => {
+        let $dom = fr.cloneNode(true);
+        fn?.($dom);
+        return {$dom};
+    }
+};
+
+const attachBlock = (cdo, label, block) => {
+    if(!block) return;
+    cd_onDestroy(cdo, block.destroy);
+    cd_attach(cdo, block.$cd);
+    insertAfter(label, block.$dom);
+};
+
+
+const mergeEvents = (...callbacks) => {
+    callbacks = callbacks.filter(i => i);
+    return (e) => callbacks.forEach(cb => cb(e));
+};
+
+
+const makeRootEvent = (root) => {
+    let events = {}, nodes = [];
+
+    if(root.nodeType == 11) {
+        let n = root.firstElementChild;
+        while(n) {
+            nodes.push(n);
+            n = n.nextElementSibling;
+        }
+    } else nodes = [root];
+
+    $onDestroy(() => {
+        for(let eventName in events) {
+            nodes.forEach(n => n.removeEventListener(eventName, events[eventName]));
+        }
+    });
+    return (target, eventName, callback) => {
+        const key = `_$$${eventName}`;
+        if(!events[eventName]) {
+            let handler = events[eventName] = ($event) => {
+                let top = $event.currentTarget;
+                let el = $event.target;
+                while(el) {
+                    el[key]?.($event);
+                    if(el == top || $event.cancelBubble) break;
+                    el = el.parentNode;
+                }
+            };
+            nodes.forEach(n => n.addEventListener(eventName, handler));
+        }        target[key] = callback;
+    }
+};
+
 function $$htmlBlock($cd, tag, fn) {
     let lastElement;
     let create = (html) => {
         let fr;
         if(tag.parentElement instanceof SVGElement) fr = svgToFragment(html);
-        else fr = $$htmlToFragment(html);
+        else fr = $$htmlToFragment(html, 3);
         lastElement = fr.lastChild;
         insertAfter(tag, fr);
     };
     let destroy = () => {
         if(!lastElement) return;
-        let next, el = tag.nextSibling;
-        while(el) {
-            next = el.nextSibling;
-            el.remove();
-            if(el == lastElement) break;
-            el = next;
-        }
-
+        $$removeElements(tag.nextSibling, lastElement);
         lastElement = null;
     };
-    $watch($cd, fn, (html) => {
-        destroy();
-        if(html) create(html);
-    }, {ro: true});
+    if($cd) {
+        $watch($cd, fn, (html) => {
+            destroy();
+            if(html) create(html);
+        }, {ro: true});
+    } else create(fn());
 }
 
-function $$ifBlock($cd, $parentElement, fn, tpl, build, tplElse, buildElse) {
-    let childCD;
-    let first, last;
-
-    function create(fr, builder) {
-        childCD = $cd.new();
-        let tpl = fr.cloneNode(true);
-        builder(childCD, tpl);
-        first = tpl[firstChild];
-        last = tpl.lastChild;
-        insertAfter($parentElement, tpl);
-    }
-    function destroy() {
-        if(!childCD) return;
-        childCD.destroy();
-        childCD = null;
-        $$removeElements(first, last);
+function ifBlock(parentCD, label, fn, build, buildElse) {
+    let first, last, $cd, destroy;
+    cd_onDestroy(parentCD, () => destroy?.());
+
+    function createBlock(builder) {
+        let $dom;
+        ({$cd, destroy, $dom} = builder());
+        cd_attach(parentCD, $cd);
+        if($dom.nodeType == 11) {
+            first = $dom[firstChild];
+            last = $dom.lastChild;
+        } else first = last = $dom;
+        insertAfter(label, $dom);
+    }
+    function destroyBlock() {
+        if(!first) return;
+        destroyResults = [];
+        destroy?.();
+        destroy = null;
+        if($cd) {
+            cd_destroy$1($cd);
+            $cd = null;
+        }
+        if(destroyResults.length) {
+            let f = first, l = last;
+            Promise.allSettled(destroyResults).then(() => {
+                $$removeElements(f, l);
+            });
+        } else $$removeElements(first, last);
         first = last = null;
+        destroyResults = null;
     }
-    $watch($cd, fn, (value) => {
+    $watch(parentCD, fn, (value) => {
         if(value) {
-            destroy();
-            create(tpl, build);
+            destroyBlock();
+            createBlock(build);
         } else {
-            destroy();
-            if(buildElse) create(tplElse, buildElse);
+            destroyBlock();
+            if(buildElse) createBlock(buildElse);
         }
     });
 }
 
-function $$awaitBlock($cd, label, relation, fn, $$apply, build_main, tpl_main, build_then, tpl_then, build_catch, tpl_catch) {
-    let promise, childCD;
-    let first, last, status = 0;
+function ifBlockReadOnly(component, label, fn, build, buildElse) {
+    function createBlock(builder) {
+        let {destroy, $dom} = builder();
+        cd_onDestroy(component, destroy);
+        insertAfter(label, $dom);
+    }
+    if(fn()) createBlock(build);
+    else if(buildElse) createBlock(buildElse);
+}
 
-    function remove() {
-        if(!childCD) return;
-        childCD.destroy();
-        childCD = null;
+function $$awaitBlock(parentCD, label, relation, fn, build_main, build_then, build_catch) {
+    let first, last, $cd, destroy, promise, status = 0;
+    cd_onDestroy(parentCD, () => destroy?.());
+
+    function destroyBlock() {
+        if(!first) return;
+        destroy?.();
+        destroy = null;
+        if($cd) {
+            cd_destroy($cd);
+            $cd = null;
+        }
         $$removeElements(first, last);
         first = last = null;
     }
-    function render(build, tpl, value) {
-        if(childCD) remove();
-        if(!tpl) return;
-        childCD = $cd.new();
-        let fr = tpl.cloneNode(true);
-        build(childCD, fr, value);
-        $$apply();
-        first = fr[firstChild];
-        last = fr.lastChild;
-        insertAfter(label, fr);
-    }
-    $watch($cd, relation, () => {
+    function render(builder, value) {
+        destroyBlock();
+
+        let $dom;
+        ({$cd, destroy, $dom} = builder(value));
+        cd_attach(parentCD, $cd);
+        if($dom.nodeType == 11) {
+            first = $dom[firstChild];
+            last = $dom.lastChild;
+        } else first = last = $dom;
+        insertAfter(label, $dom);
+        cd_component(parentCD).apply();
+    }
+    $watch(parentCD, relation, () => {
         let p = fn();
-        if(status !== 1) render(build_main, tpl_main);
+        if(status !== 1) render(build_main);
         status = 1;
         if(p && p instanceof Promise) {
             promise = p;
             promise.then(value => {
                 status = 2;
                 if(promise !== p) return;
-                render(build_then, tpl_then, value);
+                render(build_then, value);
             }).catch(value => {
                 status = 3;
                 if(promise !== p) return;
-                render(build_catch, tpl_catch, value);
+                render(build_catch, value);
             });
         }
-    }, {ro: true, cmp: $$deepComparator(1)});
+    }, {ro: true, value: [], cmp: keyComparator});
 }
 
-function $$eachBlock($parentCD, label, onlyChild, fn, getKey, itemTemplate, bind) {
-    let $cd = $parentCD.new();
+const makeEachBlock = (fr, fn) => {
+    return (item, index) => {
+        let $dom = fr.cloneNode(true), $cd = cd_new();
+        let rebind = fn($cd, $dom, item, index);
+        return {$cd, $dom, rebind};
+    }
+};
+
+
+const makeStaticEachBlock = (fr, fn) => {
+    return (item, index) => {
+        let $dom = fr.cloneNode(true);
+        let rebind = fn($dom, item, index);
+        return {$dom, rebind};
+    }
+};
+
+
+const makeEachSingleBlock = (fn) => {
+    return (item, index) => {
+        let [rebind, component] = fn(item, index);
+        let {$cd, destroy, $dom} = component;
+        return {$cd, destroy, $dom, rebind};
+    }
+};
+
+
+function $$eachBlock($parentCD, label, onlyChild, fn, getKey, bind) {
+    let eachCD = cd_new();
+    cd_attach($parentCD, eachCD);
 
     let mapping = new Map();
-    let lastNode;
-    let tplLength = itemTemplate[childNodes].length;
+    let lastNode, vi = 0;
 
-    $watch($cd, fn, (array) => {
+    $watch(eachCD, fn, (array) => {
         if(!array) array = [];
         if(typeof(array) == 'number') array = [...Array(array)].map((_,i) => i + 1);
         else if(!isArray(array)) array = [];
@@ -870,47 +978,76 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, itemTemplate, bind
 
         if(mapping.size) {
             let ctx, count = 0;
+            vi++;
             for(let i=0;i<array.length;i++) {
                 ctx = mapping.get(getKey(array[i], i, array));
                 if(ctx) {
-                    ctx.a = true;
+                    ctx.a = vi;
                     count++;
                 }
             }
 
             if(!count && lastNode) {
-                if(onlyChild) label.textContent = '';
-                else $$removeElements(label.nextSibling, lastNode);
-                $cd.children.forEach(cd => cd.destroy(false));
-                $cd.children.length = 0;
+                destroyResults = [];
+                eachCD.children.forEach(cd => cd_destroy$1(cd, false));
+                eachCD.children.length = 0;
+                mapping.forEach(ctx => ctx.destroy?.());
                 mapping.clear();
-            } else {
-                $cd.children = [];
+
+                if(destroyResults.length) {
+                    let removedNodes = [];
+                    iterNodes(onlyChild ? label.firstChild : label.nextSibling, lastNode, 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);
+                }
+
+                destroyResults = null;
+            } else if(count < mapping.size) {
+                eachCD.children = [];
+                destroyResults = [];
+                let removedNodes = [];
                 mapping.forEach(ctx => {
-                    if(ctx.a) {
-                        ctx.a = false;
-                        $cd.children.push(ctx.cd);
+                    if(ctx.a == vi) {
+                        ctx.$cd && eachCD.children.push(ctx.$cd);
                         return;
                     }
-                    $$removeElements(ctx.first, ctx.last);
-                    ctx.cd.destroy(false);
+                    ctx.$cd && cd_destroy$1(ctx.$cd, false);
+                    ctx.destroy?.();
+                    iterNodes(ctx.first, ctx.last, n => {
+                        n.$$removing = true;
+                        removedNodes.push(n);
+                    });
                 });
+
+                if(destroyResults.length) {
+                    Promise.allSettled(destroyResults).then(() => removedNodes.forEach(n => n.remove()));
+                } else {
+                    removedNodes.forEach(n => n.remove());
+                }
+                destroyResults = null;
             }
         }
 
-        let i, item, next_ctx, ctx, nextEl;
+        let i, item, next_ctx, ctx, nextEl, key;
         for(i=0;i<array.length;i++) {
             item = array[i];
+            key = getKey(item, i, array);
             if(next_ctx) {
                 ctx = next_ctx;
                 next_ctx = null;
-            } else ctx = mapping.get(getKey(item, i, array));
+            } else ctx = mapping.get(key);
             if(ctx) {
                 nextEl = i == 0 && onlyChild ? parentNode[firstChild] : prevNode.nextSibling;
+                while(nextEl && nextEl.$$removing) nextEl = nextEl.nextSibling;
                 if(nextEl != ctx.first) {
                     let insert = true;
 
-                    if(tplLength == 1 && (i + 1 < array.length) && prevNode?.nextSibling) {
+                    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);
@@ -929,22 +1066,58 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, itemTemplate, bind
                         }
                     }
                 }
-                ctx.rebind(i, item);
+                ctx.rebind?.(i, item);
             } else {
-                let tpl = itemTemplate.cloneNode(true);
-                let childCD = $cd.new();
-                ctx = {cd: childCD};
-                bind(ctx, tpl, item, i);
-                ctx.first = tpl[firstChild];
-                ctx.last = tpl.lastChild;
-                parentNode.insertBefore(tpl, prevNode?.nextSibling);
+                let $dom;
+                ({$dom, ...ctx} = bind(item, i));
+                cd_attach(eachCD, ctx.$cd);
+                if($dom.nodeType == 11) {
+                    ctx.first = $dom[firstChild];
+                    ctx.last = $dom.lastChild;
+                } else ctx.first = ctx.last = $dom;
+                parentNode.insertBefore($dom, prevNode?.nextSibling);
             }
             prevNode = ctx.last;
-            newMapping.set(getKey(item, i, array), ctx);
+            newMapping.set(key, ctx);
         }        lastNode = prevNode;
         mapping.clear();
         mapping = newMapping;
     }, {ro: true, cmp: $$compareArray});
 }
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlToFragment, $$htmlToFragmentClean, $$ifBlock, $$removeElements, $$removeItem, $ChangeDetector, $base, $context, $digest, $insertElementByOption, $makeEmitter, $onDestroy, $onMount, $readOnlyBase, $tick, $watch, $watchReadOnly, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachSlot, attachSlotBase, attchExportedFragment, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindInput, bindStyle, bindText, callComponent, cd_onDestroy, childNodes, cloneDeep, configure, createTextNode, current_component, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, insertAfter, isArray, isFunction, keyComparator, makeClassResolver, makeComponent, makeExternalProperty, makeSlot, makeSlotStatic, noop, observeProps, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+const invokeSlotBase = ($component, slotName, $context, props, placeholder) => {
+    let $slot = $component.$option.slots?.[slotName || 'default'];
+    return $slot ? $slot($component, $context, props) : placeholder?.();
+};
+
+
+const invokeSlot = ($component, slotName, $context, propsFn, placeholder, cmp) => {
+    let $slot = $component.$option.slots?.[slotName || 'default'];
+
+    if($slot) {
+        let push, w, result;
+        w = cd_watchObject(propsFn, value => push?.(value), {ro: true, value: {}, cmp});
+        fire(w);
+        ({push, ...result} = $slot($component, $context, w.value));
+        if(push) {
+            result.$cd = cd_new();
+            result.$cd.watchers.push(w);
+        }
+        return result;
+    } else return placeholder?.();
+};
+
+
+const makeSlot = (parentCD, fr, fn) => {
+    return (callerComponent, $context, props) => {
+        let $dom = fr.cloneNode(true), $cd = cd_new();
+        cd_attach(parentCD, $cd);
+        return {
+            $dom,
+            destroy: () => cd_destroy$1($cd),
+            push: fn($cd, $dom, $context, callerComponent, props)
+        };
+    };
+};
+
+export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $base, $context, $digest, $makeEmitter, $onDestroy, $onMount, $tick, $watch, $watchReadOnly, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callExportedFragment, cd_attach, cd_component, cd_destroy$1 as cd_destroy, cd_new, cd_onDestroy, cd_watchObject, childNodes, cloneDeep, configure, createTextNode, current_component, destroyResults, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, makeStaticBlock, makeStaticEachBlock, mergeEvents, noop, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };