malinajs 0.7.0-a10 → 0.7.0-a13

package/CHANGELOG.md

@@ -12,6 +12,8 @@
 * config.useGroupReferencing
 * action can return destroy function (not only object)
 * each-else
+* else-if
+* refactoring $onMount
 
 ## 0.6.x
 

package/malina.js

@@ -36,9 +36,10 @@
   }
 
   function toCamelCase(name) {
-    assert(name[name.length - 1] !== '-', 'Wrong name');
-    return name.replace(/(?<!-)(\-\w)/g, function(part) {
-      return part[1].toUpperCase();
+    assert(last(name) !== '-', 'Wrong name');
+    return name.replace(/(.\-\w)/g, function(part) {
+      if(part[0] == '-') return part;
+      return part[0] + part[2].toUpperCase();
     });
   }
 
@@ -71,7 +72,7 @@
   function detectExpressionType(name) {
     if(isSimpleName(name)) return 'identifier';
 
-    let ast = acorn.parse(name, { allowReturnOutsideFunction: true });
+    let ast = acorn.parse(name, { allowReturnOutsideFunction: true, ecmaVersion: 'latest' });
 
     function checkIdentificator(body) {
       if(body.length != 1) return;
@@ -138,7 +139,7 @@
 
 
   const extractKeywords = (exp) => {
-    let ast = acorn.parse(exp, { sourceType: 'module', ecmaVersion: 12 });
+    let ast = acorn.parse(exp, { sourceType: 'module', ecmaVersion: 12, ecmaVersion: 'latest' });
 
     const keys = new Set();
     const rec = (n) => {
@@ -179,9 +180,9 @@
   };
 
 
-  const replaceKeyword = (exp, fn) => {
+  const replaceKeyword = (exp, fn, option) => {
     let changed = false;
-    let r = parseJS(exp).transform((n, pk) => {
+    let r = parseJS(exp, option).transform((n, pk) => {
       if(n.type != 'Identifier') return;
       if(pk == 'property' || pk == 'params') return;
       let name = fn(n.name);
@@ -194,9 +195,10 @@
   };
 
 
-  const parseJS = (exp) => {
+  const parseJS = (exp, option) => {
     let self = {};
-    self.ast = acorn.parseExpressionAt(exp, 0, { ecmaVersion: 12 });
+    if(option === true) self.ast = acorn.parse(exp, { ecmaVersion: 'latest' });
+    else self.ast = acorn.parseExpressionAt(exp, 0, { ecmaVersion: 'latest' });
 
     self.transform = function(fn) {
       const rec = (n, pk) => {
@@ -931,6 +933,22 @@
     const readScript = (tag) => {
       let endTag = `</${tag}>`;
       let q, a, p, start = index;
+
+      const readRegExp = () => {
+        while(true) {
+          p = a;
+          a = readNext();
+          if(q) {
+            if(a != q) continue;
+            if(p == '\\') continue;
+            q = null;
+            continue;
+          }
+          if(a == '[' && p != '\\') q = ']';
+          if(a == '/' && p != '\\') return;
+        }
+      };
+
       while(true) {
         p = a;
         a = readNext();
@@ -944,6 +962,10 @@
           q = a;
           continue;
         }
+        if(a == '/') {
+          readRegExp();
+          continue;
+        }
         if(a == '<') {
           if(source.substring(index - 1, index + endTag.length - 1) == endTag) {
             let end = index - 1;
@@ -1039,7 +1061,7 @@
 
       while(index < source.length) {
         let a = source[index];
-        if(a === '<' && source[index+1].match(/\S/)) {
+        if(a === '<' && source[index + 1].match(/\S/)) {
           flushText();
 
           if(source.substring(index, index + 4) === '<!--') {
@@ -1154,7 +1176,7 @@
               let tag = {
                 type: 'await',
                 value: bind.value,
-                parts: {main: []}
+                parts: { main: [] }
               };
               push(tag);
               go(tag, n => tag.parts.main.push(n));
@@ -1314,7 +1336,7 @@
         if(isBlockComment) return;
         this.script.comments.push({ start, end, value });
       };
-      this.script.ast = acorn.parse(source, { sourceType: 'module', ecmaVersion: 12, onComment });
+      this.script.ast = acorn.parse(source, { sourceType: 'module', ecmaVersion: 'latest', onComment });
 
       if(source.includes('$props')) this.require('$props');
       if(source.includes('$attributes')) this.require('$attributes');
@@ -2025,7 +2047,7 @@
               if(!exp.endsWith(';')) exp += ';';
               binds.push(xNode('block', {
                 body: [
-                  replaceKeyword(exp, (name) => name == '$element' ? textNode.bindName() : null)
+                  replaceKeyword(exp, (name) => name == '$element' ? textNode.bindName() : null, true)
                 ]
               }));
             });
@@ -2256,7 +2278,7 @@
 
             if(node.children?.length) {
               let i = node.children.length - 1;
-              for(;i >= 0;i--) {
+              for(;i >= 0; i--) {
                 let n = node.children[i];
 
                 if(mark(n)) {
@@ -2378,7 +2400,8 @@
                   }
                 } else {
                   if(n._boundName) {
-                    ctx.write(true, `let ${n._boundName} = ${base._boundName}`);
+                    if(base) ctx.write(true, `let ${n._boundName} = ${base._boundName}`);
+                    else ctx.write(true, `let ${n._boundName} = ${path.join('.')}.firstChild`);
                     while(shift--) ctx.write('.nextSibling');
                     ctx.write(';');
                     walk(n, [n._boundName]);
@@ -4607,12 +4630,16 @@
   function makeDom(data) {
     function build(parent, list) {
       list.forEach(e => {
-        if(e.type == 'each' || e.type == 'fragment' || e.type == 'slot') {
+        if(e.type == 'fragment' || e.type == 'slot') {
           if(e.body && e.body.length) build(parent, e.body);
           return;
+        } else if(e.type == 'each') {
+          build(parent, e.mainBlock);
+          e.elseBlock?.length && build(parent, e.elseBlock);
+          return;
         } else if(e.type == 'if') {
-          if(e.bodyMain && e.bodyMain.length) build(parent, e.bodyMain);
-          if(e.body && e.body.length) build(parent, e.body);
+          e.parts.forEach(p => build(parent, p.body));
+          e.elsePart?.length && build(parent, e.elsePart);
           return;
         } else if(e.type == 'await') {
           if(e.parts.main && e.parts.main.length) build(parent, e.parts.main);
@@ -5113,7 +5140,7 @@
       return {
         bind: xNode('block', {
           body: [
-            replaceKeyword(exp, (name) => name == '$element' ? element.bindName() : null)
+            replaceKeyword(exp, (name) => name == '$element' ? element.bindName() : null, true)
           ]
         })
       };
@@ -5596,7 +5623,7 @@
         ctx.write(true, `}`);
       }
       ctx.write(`, [`);
-      n.elseBlock && n.parts.push({block: n.elseBlock});
+      n.elseBlock && n.parts.push({ block: n.elseBlock });
       n.parts.forEach((p, i) => {
         if(i) ctx.write(', ');
         ctx.add(p.block);
@@ -6425,7 +6452,7 @@
       exp = unwrapExp(prop.value);
       exp = replaceKeyword(exp, (name) => {
         if(name == '$element') return requireElement();
-      });
+      }, true);
     } else if(!handler) handler = event;
 
     this.detectDependency(exp || handler);
@@ -6524,7 +6551,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a10';
+  const version = '0.7.0-a13';
 
 
   async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.0-a10",
+  "version": "0.7.0-a13",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",
@@ -16,8 +16,8 @@
     "fix": "npx standardx --fix ./src/"
   },
   "dependencies": {
-    "acorn": "^7.3.1",
-    "astring": "^1.8.1",
+    "acorn": "^8.7.1",
+    "astring": "^1.8.3",
     "css-tree": "^1.0.0-alpha.39"
   },
   "devDependencies": {

package/runtime.js

@@ -24,8 +24,16 @@ const safeGroupCall = list => {
   }
 };
 
-let current_destroyList, current_cd, destroyResults;
+const safeCallMount = (mountList, destroyList) => {
+  mountList.forEach(fn => {
+    let r = safeCall(fn);
+    r && destroyList.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;
@@ -341,7 +349,6 @@ function $$addEventForComponent(list, event, fn) {
 
 
 let current_component, $context;
-const $onMount = fn => current_component._m.push(fn);
 
 
 const makeApply = () => {
@@ -378,8 +385,7 @@ const makeComponent = (init) => {
       $component = current_component = {
         $option,
         context: $context,
-        exported: {},
-        _m: []
+        exported: {}
       };
     current_cd = null;
 
@@ -391,7 +397,6 @@ const makeComponent = (init) => {
       current_cd = prev_cd;
     }
 
-    $component._m.forEach(fn => $onDestroy(safeCall(fn)));
     return $component;
   };
 };
@@ -545,7 +550,7 @@ const bindAction = (element, action, fn, subscribe) => {
   else {
     $onDestroy(handler?.destroy);
     subscribe?.(fn, handler, value);
-    handler?.init && $tick(handler.init);
+    handler?.init && $onMount(handler.init);
   }
 };
 
@@ -796,6 +801,7 @@ const makeRootEvent = (root) => {
 
 const mount = (label, component, option) => {
   let app, first, last, destroyList = current_destroyList = [];
+  current_mountList = [];
   try {
     app = component(option);
     let $dom = app.$dom;
@@ -805,8 +811,10 @@ const mount = (label, component, option) => {
       last = $dom.lastChild;
     } else first = last = $dom;
     label.appendChild($dom);
+    safeCallMount(current_mountList, destroyList);
   } finally {
     current_destroyList = null;
+    current_mountList = null;
   }
   app.destroy = () => {
     safeGroupCall(destroyList);
@@ -817,12 +825,15 @@ const mount = (label, component, option) => {
 
 const mountStatic = (label, component, option) => {
   current_destroyList = [];
+  current_mountList = [];
   try {
     let app = component(option);
     label.appendChild(app.$dom);
+    safeGroupCall(current_mountList);
     return app;
   } finally {
     current_destroyList = null;
+    current_mountList = null;
   }
 };
 
@@ -900,11 +911,13 @@ function ifBlock(label, fn, parts, parentLabel) {
   function createBlock(builder) {
     let $dom;
     destroyList = current_destroyList = [];
+    let mountList = current_mountList = [];
     $cd = current_cd = cd_new();
     try {
       $dom = builder();
     } finally {
       current_destroyList = null;
+      current_mountList = null;
       current_cd = null;
     }
     cd_attach2(parentCD, $cd);
@@ -914,6 +927,7 @@ function ifBlock(label, fn, parts, parentLabel) {
     } else first = last = $dom;
     if(parentLabel) label.appendChild($dom);
     else insertAfter(label, $dom);
+    safeCallMount(mountList, destroyList);
   }
 
   function destroyBlock() {
@@ -970,12 +984,11 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
     if(!builder) return;
     destroyList = current_destroyList = [];
     $cd = current_cd = cd_new();
-    let $dom;
+    let $dom, mountList = current_mountList = [];
     try {
       $dom = builder(value);
     } finally {
-      current_destroyList = null;
-      current_cd = null;
+      current_destroyList = current_mountList = current_cd = null;
     }
     cd_attach2(parentCD, $cd);
     if($dom.nodeType == 11) {
@@ -983,6 +996,7 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
       last = $dom.lastChild;
     } else first = last = $dom;
     insertAfter(label, $dom);
+    safeCallMount(mountList, destroyList);
     cd_component(parentCD).apply();
   }
 
@@ -1044,8 +1058,8 @@ const makeEachElseBlock = (fn) => {
       $$removeElements(first, last);
       cd_detach($cd);
       safeGroupCall(destroyList);
-    }
-  }
+    };
+  };
 };
 
 
@@ -1176,22 +1190,25 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind, buildElseBlock) {
       } else {
         let $dom, rebind,
           d = current_destroyList = [],
+          m = current_mountList = [],
           $cd = current_cd = cd_new();
         try {
           ([$dom, rebind] = bind(item, i));
         } finally {
-          current_destroyList = null;
-          current_cd = null;
+          current_destroyList = current_mountList = current_cd = null;
         }
-        if(d.length) p_destroy = 1;
-        else d = null;
-        ctx = { $cd, d, rebind };
+        ctx = { $cd, rebind };
         cd_attach2(eachCD, $cd);
         if($dom.nodeType == 11) {
           ctx.first = $dom.firstChild;
           ctx.last = $dom.lastChild;
         } else ctx.first = ctx.last = $dom;
         parentNode.insertBefore($dom, prevNode?.nextSibling);
+        safeCallMount(m, d);
+        if(d.length) {
+          ctx.d = d;
+          p_destroy = 1;
+        }
       }
       prevNode = ctx.last;
       newMapping.set(key, ctx);
@@ -1245,4 +1262,4 @@ const makeSlot = (fr, fn) => {
   };
 };
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $context, $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, 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 { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $context, $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 };