malinajs 0.7.0-a8 → 0.7.0-a9

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+## 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
+
 ## 0.6.x
 
 * style's attribute "global"

package/malina.js

@@ -196,7 +196,7 @@
 
   const parseJS = (exp) => {
     let self = {};
-    self.ast = acorn.parseExpressionAt(exp, 0, {ecmaVersion: 12});
+    self.ast = acorn.parseExpressionAt(exp, 0, { ecmaVersion: 12 });
 
     self.transform = function(fn) {
       const rec = (n, pk) => {
@@ -205,11 +205,11 @@
           self = n;
           fn?.(n, pk);
         }
-    
+
         for(let k in n) {
           if(k == '_parent') continue;
           let v = n[k];
-          if(v == null || typeof(v) != 'object') continue;
+          if(v == null || typeof (v) != 'object') continue;
           if(Array.isArray(v)) {
             v.forEach(i => {
               i._parent = self || n._parent;
@@ -227,7 +227,7 @@
     };
 
     self.build = function(data) {
-      return astring.generate(data || self.ast, {indent: '', lineEnd: ''});
+      return astring.generate(data || self.ast, { indent: '', lineEnd: '' });
     };
     return self;
   };
@@ -422,7 +422,7 @@
       if(_data === false && !_handler) {
         handler = noop;
         data = null;
-      } else if(_handler === false && typeof(_data) == 'object') {
+      } else if(_handler === false && typeof (_data) == 'object') {
         handler = noop;
         data = _data;
       } else if(typeof _data == 'function') {
@@ -468,7 +468,7 @@
   const resolveDependecies = node => {
     if(node.$wait) {
       node.$wait = node.$wait.map(n => {
-        if(typeof(n) == 'string') {
+        if(typeof (n) == 'string') {
           const context = get_context();
           assert(context.glob[n], `Wrong dependency '${n}'`);
           n = context.glob[n];
@@ -479,7 +479,7 @@
 
     if(node.$hold) {
       node.$hold.forEach(n => {
-        if(typeof(n) == 'string') {
+        if(typeof (n) == 'string') {
           const context = get_context();
           assert(context.glob[n], `Wrong dependency '${n}'`);
           n = context.glob[n];
@@ -645,7 +645,8 @@
         cloneNode = false;
         if(!node.raw) template = htmlEntitiesToText(template);
       } else {
-        convert = '$$htmlToFragment';
+        if(get_context().config.hideLabel) convert = '$runtime.$$htmlToFragmentClean';
+        else convert = '$runtime.$$htmlToFragment';
         template = template.replace(/<!---->/g, '<>');
       }
       if(node.raw) {
@@ -1303,9 +1304,9 @@
       }
       const onComment = (isBlockComment, value, start, end) => {
         if(isBlockComment) return;
-        this.script.comments.push({start, end, value});
+        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: 12, onComment });
 
       if(source.includes('$props')) this.require('$props');
       if(source.includes('$attributes')) this.require('$attributes');
@@ -1691,8 +1692,7 @@
     }, (ctx, n) => {
       if(!n.list.length) return;
       this.require('$component');
-      for(let name of n.list)
-        ctx.write(true, `$component.${name} = ${name};`);
+      for(let name of n.list) ctx.write(true, `$component.${name} = ${name};`);
     }));
   }
 
@@ -1752,7 +1752,7 @@
     }));
 
     this.module.head.push(xNode('$context', {
-      $hold: ['componentFn'],
+      $hold: ['componentFn']
     }, (ctx) => {
       if(this.inuse.$context) {
         this.require('componentFn');
@@ -2240,26 +2240,152 @@
           root: option.parentElement,
           single: rootTemplate.children.length == 1 && !requireFragment
         }, (ctx, n) => {
-          const gen = (parent, parentName) => {
-            for(let i = 0; i < parent.children.length; i++) {
-              let node = parent.children[i];
-              let diff = i == 0 ? '[$runtime.firstChild]' : `[$runtime.childNodes][${i}]`;
+          if(this.config.useGroupReferencing) {
+            const mark = (node) => {
+              let binding = false;
+              let next = false;
 
-              if(node._boundName) ctx.write(true, `let ${node._boundName} = ${parentName() + diff};`);
+              if(node._boundName) binding = true;
+
+              if(node.children?.length) {
+                let i = node.children.length - 1;
+                for(;i >= 0;i--) {
+                  let n = node.children[i];
+    
+                  if(mark(n)) {
+                    if(next) n.bindName();
+                    next = true;
+                    binding = true;
+                    node._innerBinding = true;
+                  }
+                }
+              }
+              return binding;
+            };
+            mark(n.tpl);
+
+            const encodeShift = (i) => {
+              if(i <= 42) return String.fromCharCode(48 + i);
+              let b = i % 42;
+              let a = (i - b) / 42;
+              assert(a <= 42, 'Node-shift overflow: ' + i);
+              return '!' + String.fromCharCode(48 + a) + String.fromCharCode(48 + b);
+            };
+
+            const encodeRef = (i) => {
+              if(i <= 26) return String.fromCharCode(97 + i);
+              let b = i % 42;
+              let a = (i - b) / 42;
+              assert(a <= 42, 'Node ref overflow: ' + i);
+              return '#' + String.fromCharCode(48 + a) + String.fromCharCode(48 + b);
+            };
+
+            let result = [];
+            let vars = [];
+            let active = null;
+
+            const walk = (node) => {
+              let shift = 0;
+              let base = null;
+              node.children?.forEach((n, i) => {
+                if(i == 0) {
+                  if(n._boundName) {
+                    result.push('+');
+                    vars.push(n);
+                    active = n;
+                    walk(n);
+                    if(n != active) base = n;
+                  } else if(n._innerBinding) {
+                    result.push('>');
+                    active = n;
+                    walk(n);
+                  } else if(node._innerBinding) {
+                    result.push('>');
+                    active = n;
+                    walk(n);
+                  }
+                } else {
+                  if(n._boundName) {
+                    if(base) {
+                      let x = vars.indexOf(base);
+                      result.push(encodeRef(x));
+                      base = null;
+                    }
+                    result.push(encodeShift(shift));
+                    result.push('.');
+                    shift = 0;
+                    active = n;
+                    vars.push(n);
+                    walk(n);
+                    if(n != active) base = n;
+                  } else if(n._innerBinding) {
+                    if(base) {
+                      let x = vars.indexOf(base);
+                      result.push(encodeRef(x));
+                      base = null;
+                    }
+                    result.push(encodeShift(shift));
+                    active = n;
+                    walk(n);
+                  }
+                }
+                shift++;
+              });
+            };
+
+            if(n.single) {
+              let node = n.tpl.children[0];
+              if(node._boundName) ctx.write(true, `let ${node._boundName} = ${n.root};`);
               if(node.children) {
-                gen(node, () => {
-                  if(node._boundName) return node._boundName;
-                  return parentName() + diff;
-                });
+                walk(node);
+                if(vars.length) {
+                  result = result.join('');
+                  vars = vars.map(v => v._boundName).join(', ');
+                  ctx.write(true, `let [${vars}] = $runtime.refer(${n.root}, '${result}');`);
+                }
+              }
+            } else {
+              walk(n.tpl);
+              if(vars.length) {
+                result = result.join('');
+                vars = vars.map(v => v._boundName).join(', ');
+                ctx.write(true, `let [${vars}] = $runtime.refer(${n.root}, '${result}');`);
               }
             }
-          };
-          if(n.single) {
-            let node = n.tpl.children[0];
-            if(node._boundName) ctx.write(true, `let ${node._boundName} = ${n.root};`);
-            if(node.children) gen(node, () => n.root);
           } else {
-            gen(n.tpl, () => n.root);
+            const walk = p => {
+              if(p.children?.length) {
+                let col = 0;
+                for(let n of p.children) {
+                  col += walk(n);
+                }
+                if(col > 1 && !p._boundName) p.bindName();
+                return col ? 1 : 0;
+              }            return p._boundName ? 1 : 0;
+            };
+            walk(n.tpl);
+    
+            const gen = (parent, parentName) => {
+              for(let i = 0; i < parent.children.length; i++) {
+                let node = parent.children[i];
+                let diff = i == 0 ? '[$runtime.firstChild]' : `[$runtime.childNodes][${i}]`;
+    
+                if(node._boundName) ctx.write(true, `let ${node._boundName} = ${parentName() + diff};`);
+                if(node.children) {
+                  gen(node, () => {
+                    if(node._boundName) return node._boundName;
+                    return parentName() + diff;
+                  });
+                }
+              }
+            };
+            if(n.single) {
+              let node = n.tpl.children[0];
+              if(node._boundName) ctx.write(true, `let ${node._boundName} = ${n.root};`);
+              if(node.children) gen(node, () => n.root);
+            } else {
+              gen(n.tpl, () => n.root);
+            }
           }
         }));
       }
@@ -4837,10 +4963,11 @@
         if(comma) ctx.write(', ');
         comma = true;
         ctx.write('events: $events');
-      } else if(n.events && !n.forwardAllEvents) {
+      } else if(n.events) {
         if(comma) ctx.write(',', true);
         comma = true;
-        ctx.write('events: {');
+        if(n.forwardAllEvents) ctx.write('events: $runtime.mergeAllEvents($events, {');
+        else ctx.write('events: {');
         ctx.indent++;
         ctx.write(true);
         Object.entries(n.events).forEach(([event, list], index) => {
@@ -4857,9 +4984,8 @@
           }
         });
         ctx.indent--;
-        ctx.write(true, '}');
-      } else if(n.events && n.forwardAllEvents) {
-        throw 'not implemented'; // FIXME
+        if(n.forwardAllEvents) ctx.write(true, '})');
+        else ctx.write(true, '}');
       }
       if(n.slots) {
         if(comma) ctx.write(', ');
@@ -4944,7 +5070,7 @@
     this.require('apply');
     this.detectDependency(dynamicComponent);
 
-    let {bind: component, reference} = this.makeComponent(node);
+    let { bind: component, reference } = this.makeComponent(node);
 
     component.componentName = '$ComponentConstructor';
     return xNode('dyn-component', {
@@ -5025,13 +5151,15 @@
     if(name[0] == '#') {
       let target = name.substring(1);
       assert(detectExpressionType(target) == 'identifier', name);
-      return { bind: xNode('reference-to-element', {
-        target,
-        el: element.bindName()
-      }, (ctx, n) => {
-        ctx.write(true, `${n.target} = ${n.el};`);
-        ctx.write(true, `$runtime.$onDestroy(() => ${n.target} = null);`);
-      })};
+      return {
+        bind: xNode('reference-to-element', {
+          target,
+          el: element.bindName()
+        }, (ctx, n) => {
+          ctx.write(true, `${n.target} = ${n.el};`);
+          ctx.write(true, `$runtime.$onDestroy(() => ${n.target} = null);`);
+        })
+      };
     } else if(name == 'event') {
       if(prop.name.startsWith('@@')) {
         assert(!prop.value);
@@ -5542,7 +5670,7 @@
       if(keyName) {
         if(keyName == itemName) keyFunction = 'noop';
         else {
-          let keyLink = {[itemName]: '$$item'};
+          let keyLink = { [itemName]: '$$item' };
           if(indexName) keyLink[indexName] = '$index';
           makeKeyFunction(keyLink);
         }
@@ -5587,7 +5715,7 @@
       }, (ctx, n) => {
         ctx.write(`$runtime.makeEachSingleBlock((${n.itemName}`);
         if(n.indexName) ctx.write(`, ${n.indexName}`);
-        ctx.write(`) => [`);
+        ctx.write(') => [');
         ctx.indent++;
         ctx.write(true);
         if(n.rebind) ctx.add(n.rebind);
@@ -5731,7 +5859,7 @@
       name: slotName,
       props,
       staticProps,
-      placeholder,
+      placeholder
     }, (ctx, n) => {
       let dynamicProps = this.inuse.apply && !n.staticProps;
 
@@ -6354,7 +6482,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a8';
+  const version = '0.7.0-a9';
 
 
   async function compile(source, config = {}) {
@@ -6372,7 +6500,8 @@
       debug: true,
       css: true,
       passClass: true,
-      immutable: false
+      immutable: false,
+      useGroupReferencing: true
     }, config);
 
     const ctx = {
@@ -6497,11 +6626,6 @@
       const result = ctx.result = xNode('block');
       result.push('import * as $runtime from \'malinajs/runtime.js\';');
       result.push('import { $watch, $tick } from \'malinajs/runtime.js\';');
-      if(config.hideLabel) {
-        result.push('import { $$htmlToFragmentClean as $$htmlToFragment } from \'malinajs/runtime.js\';');
-      } else {
-        result.push('import { $$htmlToFragment } from \'malinajs/runtime.js\';');
-      }
       result.push(ctx.module.top);
       result.push(xNode('componentFn-wrapper', {
         $compile: [ctx.module.head, ctx.module.code, ctx.module.body, ctx.glob.rootCD],
@@ -6512,7 +6636,7 @@
         else ctx.write(true, `const ${n.name} = `);
         ctx.add(n.componentFn);
       }));
-    
+
       ctx.result = xBuild(result);
     });
 
@@ -6565,7 +6689,7 @@
 
     if(localConfig) {
       const confFn = require(localConfig);
-      if(typeof(confFn) == 'function') result = confFn(result, filename);
+      if(typeof (confFn) == 'function') result = confFn(result, filename);
       else result = confFn;
     }
     if(!result.path) result.path = filename;

package/package.json

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

package/runtime.js

@@ -432,7 +432,7 @@ const callComponent = (context, component, option = {}, propFn, cmp, setter, cla
       option.props = parentWatch.fn();
       $component.push();
     });
-    Object.assign(w, {idle: true, cmp, value: parentWatch.value});
+    Object.assign(w, { idle: true, cmp, value: parentWatch.value });
     $component.$cd.watchers.push(w);
   }
 
@@ -632,7 +632,7 @@ const makeAnchor = (fn) => {
     } finally {
       current_cd = prev;
     }
-  }
+  };
 };
 
 
@@ -737,7 +737,7 @@ const makeBlockBound = (fr, fn) => {
     } finally {
       current_cd = prev;
     }
-  }
+  };
 };
 
 
@@ -751,6 +751,15 @@ const mergeEvents = (...callbacks) => {
   return (e) => callbacks.forEach(cb => cb(e));
 };
 
+const mergeAllEvents = ($events, local) => {
+  let result = Object.assign({}, $events);
+  for(let e in local) {
+    if(result[e]) result[e] = mergeEvents($events[e], local[e]);
+    else result[e] = local[e];
+  }
+  return result;
+};
+
 const makeRootEvent = (root) => {
   let events = {}, nodes = [];
 
@@ -817,6 +826,40 @@ const mountStatic = (label, component, option) => {
   }
 };
 
+const refer = (active, line) => {
+  let result = [], i, v;
+  const code = (x, d) => x.charCodeAt() - d;
+
+  for(i = 0; i < line.length; i++) {
+    let a = line[i];
+    switch (a) {
+      case '>':
+        active = active.firstChild;
+        break;
+      case '+':
+        active = active.firstChild;
+      case '.':
+        result.push(active);
+        break;
+      case '!':
+        v = code(line[++i], 48) * 42 + code(line[++i], 48);
+        while(v--) active = active.nextSibling;
+        break;
+      case '#':
+        active = result[code(line[++i], 48) * 26 + code(line[++i], 48)];
+        break;
+      default:
+        v = code(a, 0);
+        if(v >= 97) active = result[v - 97];
+        else {
+          v -= 48;
+          while(v--) active = active.nextSibling;
+        }
+    }
+  }
+  return result;
+};
+
 let create = (tag, html) => {
   let fr;
   if(tag.parentElement instanceof SVGElement) {
@@ -1108,14 +1151,14 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind) {
           d = current_destroyList = [],
           $cd = current_cd = cd_new();
         try {
-          ([ $dom, rebind ] = bind(item, i));
+          ([$dom, rebind] = bind(item, i));
         } finally {
           current_destroyList = null;
           current_cd = null;
         }
         if(d.length) p_destroy = 1;
         else d = null;
-        ctx = {$cd, d, rebind};
+        ctx = { $cd, d, rebind };
         cd_attach2(eachCD, $cd);
         if($dom.nodeType == 11) {
           ctx.first = $dom[firstChild];
@@ -1142,7 +1185,7 @@ const invokeSlot = ($component, slotName, $context, propsFn, placeholder, cmp) =
 
   if($slot) {
     let push, w = new WatchObject(propsFn, value => push(value));
-    Object.assign(w, {value: {}, cmp, idle: true});
+    Object.assign(w, { value: {}, cmp, idle: true });
     fire(w);
     let $dom = $slot($component, $context, w.value);
     if($dom.$dom) {
@@ -1164,11 +1207,11 @@ const makeSlot = (fr, fn) => {
     $onDestroy(() => cd_detach($cd));
     parentCD.component.apply();
     try {
-      return {$dom, push: fn($dom, $context, callerComponent, props)};
+      return { $dom, push: fn($dom, $context, callerComponent, props) };
     } finally {
       current_cd = prev;
     }
   };
 };
 
-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, childNodes, cloneDeep, configure, createTextNode, current_cd, current_component, current_destroyList, destroyResults, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, mergeEvents, mount, mountStatic, noop, prefixPush, 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, childNodes, cloneDeep, configure, createTextNode, current_cd, current_component, current_destroyList, destroyResults, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };