malinajs 0.7.0-alpha → 0.7.1-alpha

package/malina.js

@@ -6122,7 +6122,7 @@
         return {event, fn, rootModifier};
     }
 
-    const version = '0.7.0-alpha';
+    const version = '0.7.1-alpha';
 
 
     async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.0-alpha",
+  "version": "0.7.1-alpha",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",
@@ -34,7 +34,6 @@
   "main": "malina",
   "files": [
     "malina.js",
-    "compile.js",
     "runtime.js",
     "malina-rollup.js",
     "malina-esbuild.js",

package/readme.md

@@ -1,7 +1,7 @@
 
 ## Malina.js
 
-<img align="right" width="200" height="200" src="malinajs2.png" />
+<img align="right" width="200" height="200" src="https://github.com/malinajs/malinajs/raw/master/malinajs2.png" />
 
 Malina.js builds your web-application to use it **without framework on frontend side**. Therefore your web-app becomes thinner and faster, and the application itself consist of **vanilla JavaScript**, look at [examples](https://malinajs.github.io/repl/). [TodoMVC example](https://malina-todomvc.surge.sh) **2.7kb** (gzipped) and [source code](https://github.com/malinajs/todomvc)
 

package/runtime.js

@@ -86,11 +86,16 @@ const cd_attach = (parent, 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.map(safeCall);
+    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;
@@ -287,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;
@@ -563,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);
     });
 };
@@ -778,23 +789,19 @@ const makeRootEvent = (root) => {
         }
     });
     return (target, eventName, callback) => {
-        let handler = events[eventName];
-        if(!handler) {
-            handler = events[eventName] = ($event) => {
+        const key = `_$$${eventName}`;
+        if(!events[eventName]) {
+            let handler = events[eventName] = ($event) => {
                 let top = $event.currentTarget;
                 let el = $event.target;
                 while(el) {
-                    if(el.__cb?.[eventName]) {
-                        el.__cb[eventName]($event);
-                        return;
-                    }
-                    if(el == top) break;
+                    el[key]?.($event);
+                    if(el == top || $event.cancelBubble) break;
                     el = el.parentNode;
                 }
             };
             nodes.forEach(n => n.addEventListener(eventName, handler));
-        }        if(!target.__cb) target.__cb = {};
-        target.__cb[eventName] = callback;
+        }        target[key] = callback;
     }
 };
 
@@ -836,14 +843,21 @@ function ifBlock(parentCD, label, fn, build, buildElse) {
     }
     function destroyBlock() {
         if(!first) return;
+        destroyResults = [];
         destroy?.();
         destroy = null;
         if($cd) {
             cd_destroy$1($cd);
             $cd = null;
         }
-        $$removeElements(first, last);
+        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(parentCD, fn, (value) => {
         if(value) {
@@ -945,7 +959,7 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, bind) {
     cd_attach($parentCD, eachCD);
 
     let mapping = new Map();
-    let lastNode;
+    let lastNode, vi = 0;
 
     $watch(eachCD, fn, (array) => {
         if(!array) array = [];
@@ -964,45 +978,72 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, 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);
-                eachCD.children.forEach(cd => cd.destroy(false));
+                destroyResults = [];
+                eachCD.children.forEach(cd => cd_destroy$1(cd, false));
                 eachCD.children.length = 0;
                 mapping.forEach(ctx => ctx.destroy?.());
                 mapping.clear();
+
+                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;
+                    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;
 
@@ -1037,7 +1078,7 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, bind) {
                 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;
@@ -1079,4 +1120,4 @@ const makeSlot = (parentCD, fr, fn) => {
     };
 };
 
-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, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, keyComparator, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, makeStaticBlock, makeStaticEachBlock, mergeEvents, noop, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+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 };