malinajs 0.7.2-a1 → 0.7.2-a10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.2-a1",
+  "version": "0.7.2-a10",
   "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, onlyFunction) => {
+  list?.forEach(fn => {
     let r = safeCall(fn);
-    r && destroyList.push(r);
+    r && (!onlyFunction || isFunction(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, 1);
   }
 
   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, 1);
     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, 1);
     } 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, 1);
         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,88 @@ 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 };
+const keepAlive = (store, keyFn, builder) => {
+  if(!store.$$d) store.$$d = [];
+  const key = keyFn();
+  let block = store.get(key);
+  const parentCD = current_cd;
+
+  $onDestroy(() => {
+    if(!block.fr) block.fr = new DocumentFragment();
+    iterNodes(block.first, block.last, n => block.fr.appendChild(n));
+    cd_detach(block.$cd);
+  });
+
+  if(block) {
+    cd_attach(parentCD, block.$cd);
+    return block.fr;
+  } else {
+    let $dom, first, last, prev_destroyList = current_destroyList;
+    let destroyList = current_destroyList = [];
+    let $cd = current_cd = cd_new(parentCD);
+    try {
+      $dom = builder();
+    } finally {
+      current_destroyList = prev_destroyList;
+      current_cd = parentCD;
+    }
+    cd_attach(parentCD, $cd);
+    if($dom.nodeType == 11) {
+      first = $dom.firstChild;
+      last = $dom.lastChild;
+    } else first = last = $dom;
+
+    store.$$d.push(() => safeGroupCall(destroyList));
+    store.set(key, block = {first, last, $cd});
+
+    return $dom;
+  }
+};
+
+const selectElement = (el, getter, setter) => {
+  addEvent(el, 'change', () => {
+    let op = el.querySelector(':checked');
+    if(op?.$$value) {
+      let value = op.$$value();
+      setter(value);
+      w.value = value;
+    }
+  });
+  const update = () => {
+    for(let op of el.options) {
+      if(op.$$value?.() === w.value) {
+        op.selected = true;
+        return;
+      }
+    }
+    el.selectedIndex = -1;
+  };
+  const w = $watch(getter, update);
+
+  let debounce = 0;
+  el.$$update = () => {
+    if(debounce) return;
+    debounce = 1;
+    $tick(() => {
+      debounce = 0;
+      update();
+    });
+  };
+};
+
+const selectOption = (op, getter) => {
+  op.$$value = getter;
+  if(op.parentElement?.$$update) op.parentElement.$$update();
+  else $tick(() => op.parentElement?.$$update?.());
+};
+
+const radioButton = (el, getValue, getter, setter) => {
+  let w = $watch(getter, (value) => {
+    el.checked = getValue() === value;
+  });
+  addEvent(el, 'change', () => {
+    if(el.checked) setter(w.value = getValue());
+  });
+};
+
+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, keepAlive, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeEmitter, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, radioButton, refer, removeElements, removeItem, selectElement, selectOption, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };

package/CHANGELOG.md

@@ -1,75 +0,0 @@
-
-## 0.7.x
-* refactoring, optimization, fixes
-* export function
-* manual event delegation @click|root
-* able to delay destroying block (for animations)
-* be able to off autosubscribe for import: !no-autosubscribe
-* destructuring array/object for each
-* functions mount, mountStatic
-* each, index variable is not included by default
-* reference to element is removed on destroying
-* config.useGroupReferencing
-* action can return destroy function (not only object)
-* each-else
-* else-if
-* refactoring $onMount
-* optional deep checking for passed props: prop={value} prop|deep={value}
-
-## 0.6.x
-
-* style's attribute "global"
-* compound classes (handle mix of class and class directives)
-* new passing class
-* mark a class as external "$className"
-* Deprecated: passing class from 0.5
-* plugins
-* esbuild-plugin (by AlexxNB)
-* $context
-* onError
-* $onMount
-* $onDestroy
-* alias for import: malinajs -> malinajs/runtime.js
-* alias @click -> @click={click}, @@click is forwarding
-* local config "malina.config.js"
-* plugin sass/scss
-* key "auto" for each-block
-* anchors for components
-* style templates, e.g. style:color={color}, style:border-color="red", style:border="1px solid {color}"
-* compile option "css"
-* event modifier: stop, prevent
-* script option "read-only"
-* constant props - "export const prop;"
-* compile option: debugLabel
-* slot for fragment
-* exported fragments (inverted slots)
-* <malina:head>, <malina:body>, <malina:window>
-* option: passClass
-* option: immutable
-* event modifiers: prevent, stop, ctrl, alt, shift, meta. key-events: enter, tab, esc, space, up, down, left, right, delete
-* inline actions for text-node and elements
-* portals: <malina:portal>
-* autoimport
-
-## 0.5.x
-
-* input with type "range"/"number" - value as number
-* improve reactive expression
-* unwrap object in each
-* dynamic component
-* named slot
-* fix for dynamic import
-* option.onerror
-* autosubscribe for imported objects
-* compile time optinoption !no-check
-* fragments
-* event modifier: stopPropagation
-* $props, $attributes, $restProps
-* await-then-catch
-* :global classes
-* spreading props and objects {...obj}
-* forwarding events, forward all @@
-* onMount, onDestroy, $onDestroy
-* shortcuts for bindings and actions
-* scoped-css
-* conrol directives: each, if