malinajs 0.7.0-a6 → 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

@@ -179,22 +179,24 @@
   };
 
 
-  const replaceElementKeyword = (exp, fn) => {
+  const replaceKeyword = (exp, fn) => {
     let changed = false;
     let r = parseJS(exp).transform((n, pk) => {
       if(n.type != 'Identifier') return;
       if(pk == 'property' || pk == 'params') return;
-      if(n.name != '$element') return;
-      n.name = fn();
-      changed = true;
+      let name = fn(n.name);
+      if(name) {
+        n.name = name;
+        changed = true;
+      }
     });
-    return changed ? r.build().trim() : exp;
+    return changed ? r.build() : exp;
   };
 
 
   const parseJS = (exp) => {
     let self = {};
-    self.ast = acorn.parse(exp, { sourceType: 'module', ecmaVersion: 12 });
+    self.ast = acorn.parseExpressionAt(exp, 0, { ecmaVersion: 12 });
 
     self.transform = function(fn) {
       const rec = (n, pk) => {
@@ -203,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;
@@ -225,7 +227,7 @@
     };
 
     self.build = function(data) {
-      return astring.generate(data || self.ast);
+      return astring.generate(data || self.ast, { indent: '', lineEnd: '' });
     };
     return self;
   };
@@ -420,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') {
@@ -466,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];
@@ -477,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];
@@ -643,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) {
@@ -1301,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');
@@ -1556,6 +1559,8 @@
       });
     }
 
+    let exportedFunctions = [];
+
     ast.body.forEach(n => {
       if(n.type == 'ImportDeclaration') {
         imports.push(n);
@@ -1571,8 +1576,14 @@
         });
         return;
       } else if(n.type == 'ExportNamedDeclaration') {
-        if(n.declaration.kind != 'const') constantProps = false;
+        if(n.declaration.type == 'FunctionDeclaration') {
+          exportedFunctions.push(n.declaration.id.name);
+          resultBody.push(n.declaration);
+          return;
+        }
+
         assert(n.declaration.type == 'VariableDeclaration', 'Wrong export');
+        if(n.declaration.kind != 'const') constantProps = false;
         n.declaration.declarations.forEach(d => {
           assert(d.type == 'VariableDeclarator', 'Wrong export');
           let p = { name: d.id.name };
@@ -1674,6 +1685,15 @@
         });
       }));
     }
+
+    this.module.code.push(xNode('exported-functions', {
+      $hold: ['$component'],
+      list: exportedFunctions
+    }, (ctx, n) => {
+      if(!n.list.length) return;
+      this.require('$component');
+      for(let name of n.list) ctx.write(true, `$component.${name} = ${name};`);
+    }));
   }
 
 
@@ -1732,7 +1752,7 @@
     }));
 
     this.module.head.push(xNode('$context', {
-      $hold: ['componentFn'],
+      $hold: ['componentFn']
     }, (ctx) => {
       if(this.inuse.$context) {
         this.require('componentFn');
@@ -1785,17 +1805,37 @@
     let bb = this.buildBlock(this.DOM, {
       inline: true,
       protectLastTag: true,
+      allowSingleBlock: true,
       template: {
         name: '$parentElement',
         cloneNode: true
       }
     });
-    runtime.push(bb.template);
-    runtime.push(xNode('root-event', (ctx) => {
-      if(!this.inuse.rootEvent) return;
-      ctx.write(true, 'const $$addRootEvent = $runtime.makeRootEvent($parentElement);');
-    }));
-    runtime.push(bb.source);
+    if(bb.singleBlock) {
+      runtime.push(xNode('attach-block', {
+        block: bb.singleBlock,
+        reference: bb.reference
+      }, (ctx, n) => {
+        if(n.reference) {
+          ctx.write(true, `${n.reference} = `);
+          ctx.add(n.block);
+          ctx.write(';');
+          ctx.write(true, `let $parentElement = ${n.reference}.$dom;`);
+        } else {
+          ctx.write(true, `let $parentElement = `);
+          ctx.add(n.block);
+          ctx.write('.$dom;');
+        }
+      }));
+    } else {
+      runtime.push(bb.template);
+      runtime.push(xNode('root-event', (ctx) => {
+        if(!this.inuse.rootEvent) return;
+        ctx.write(true, 'const $$addRootEvent = $runtime.makeRootEvent($parentElement);');
+      }));
+      runtime.push(bb.source);
+    }
+
 
     if(this.script.onMount) runtime.push('$runtime.$onMount(onMount);');
     if(this.script.onDestroy) runtime.push('$runtime.$onDestroy(onDestroy);');
@@ -1857,13 +1897,21 @@
 
     if(option.each?.blockPrefix) binds.push(option.each.blockPrefix);
 
-    if(option.allowSingleBlock && data.body.length == 1) {
-      let n = data.body[0];
-      if(n.type == 'node' && n.name.match(/^[A-Z]/)) {
-        let component = this.makeComponent(n);
-        return {
-          singleBlock: component.bind
-        };
+    if(option.allowSingleBlock) {
+      let nodesForSingleBlock = data.body.filter(n => {
+        if(n.type == 'comment' && !this.config.preserveComments) return false;
+        return true;
+      });
+
+      if(nodesForSingleBlock.length == 1) {
+        let n = nodesForSingleBlock[0];
+        if(n.type == 'node' && n.name.match(/^[A-Z]/)) {
+          let component = this.makeComponent(n);
+          return {
+            singleBlock: component.bind,
+            reference: component.reference
+          };
+        }
       }
     }
 
@@ -1969,7 +2017,7 @@
               if(!exp.endsWith(';')) exp += ';';
               binds.push(xNode('block', {
                 body: [
-                  replaceElementKeyword(exp, () => textNode.bindName())
+                  replaceKeyword(exp, (name) => name == '$element' ? textNode.bindName() : null)
                 ]
               }));
             });
@@ -2006,11 +2054,18 @@
                 let component = this.makeComponent(n);
                 binds.push(xNode('insert-component', {
                   component: component.bind,
+                  reference: component.reference,
                   el: el.bindName()
                 }, (ctx, n) => {
-                  ctx.write(true, `$runtime.insertAfter(${n.el}, `);
-                  ctx.add(n.component);
-                  ctx.write('.$dom);');
+                  if(n.reference) {
+                    ctx.write(true, `${n.reference} = `);
+                    ctx.add(n.component);
+                    ctx.write(true, `$runtime.attachBlock(${n.el}, ${n.reference});`);
+                  } else {
+                    ctx.write(true, `$runtime.attachBlock(${n.el}, `);
+                    ctx.add(n.component);
+                    ctx.write(');');
+                  }
                 }));
               }
             } else {
@@ -2185,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) binding = true;
 
-              if(node._boundName) ctx.write(true, `let ${node._boundName} = ${parentName() + diff};`);
+              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);
+            }
           }
         }));
       }
@@ -4427,7 +4608,10 @@
         let n = new Node(e.name, { __node: e });
         e.attributes.forEach(a => {
           if(a.name == 'class') {
-            if(a.value != null) n.className += ' ' + a.value;
+            if(a.value != null) {
+              if(a.value.includes('{')) n.dynClass = true;
+              else n.className += ' ' + a.value;
+            }
             n.attributes[a.name] = a.value;
           } else if(a.name == 'id') n.attributes.id = n.id = a.value;
           else if(a.name.startsWith('class:')) {
@@ -4507,18 +4691,20 @@
     if(names.length != 1) throw 'Not supported';
     let cls = names[0];
 
+    let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
     let result = [];
-    this.childNodes.forEach(n => {
-      let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
-      if(rx.test(n.className)) result.push(n);
-      result.push.apply(result, n.getElementsByClassName(cls));
-    });
+    const walk = (node) => {
+      node.childNodes.forEach(n => {
+        if(n.dynClass) result.push(n);
+        else if(rx.test(n.className)) result.push(n);
+        walk(n);
+      });
+    };
+    walk(this);
     return result;
   };
 
   function makeComponent(node) {
-    this.require('apply');
-
     let propList = node.attributes;
 
     this.require('$context');
@@ -4531,7 +4717,7 @@
     let componentName = node.name;
     if(componentName != 'component' && this.config.autoimport) {
       let imported = this.script.autoimport[componentName] || this.script.importedNames.includes(componentName) ||
-              this.script.rootVariables[componentName] || this.script.rootFunctions[componentName];
+        this.script.rootVariables[componentName] || this.script.rootFunctions[componentName];
 
       if(!imported) {
         let r = this.config.autoimport(componentName, this.config.path, this);
@@ -4616,7 +4802,7 @@
             if(n.props) ctx.write(', $localProps');
             ctx.write(') => {', true);
             ctx.indent++;
-            if(n.props) ctx.write(true, `let {${n.props.join(', ')}} = $localProps;`);
+            if(n.props) ctx.write(true, `let {${n.props.join(', ')}} = $localProps || {};`);
             ctx.add(n.bind);
 
             if(n.props && this.inuse.apply) ctx.write(true, `return ($localProps) => ({${n.props.join(', ')}} = $localProps, $$apply());`);
@@ -4758,14 +4944,12 @@
       staticProps,
       props: propsFn,
       propsSetter,
-      reference,
       $class,
       forwardAllEvents,
       events,
       slots: slotBlocks.length ? slotBlocks : null,
       anchors: anchorBlocks.length ? anchorBlocks : null
     }, (ctx, n) => {
-      if(n.reference) throw 'not implemented'; // FIXME
       let comma = false;
       ctx.write(`$runtime.callComponent($context, ${n.componentName}, {`);
 
@@ -4779,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) => {
@@ -4799,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(', ');
@@ -4829,6 +5013,11 @@
         ctx.indent--;
         ctx.write(true, '}');
       }
+      if(n.$class.length && !ctx.inuse.apply) {
+        if(comma) ctx.write(', ');
+        comma = true;
+        ctx.write(`$class: {${n.$class.join(', ')}}`);
+      }
       ctx.write('}');
 
       let other = '';
@@ -4850,7 +5039,7 @@
         ctx.write(',\n', true, `($$_value) => ({${n.propsSetter.join(', ')}} = $$_value)`);
       } else other += ', null';
 
-      if(n.$class.length) {
+      if(n.$class.length && ctx.inuse.apply) {
         if(other) ctx.write(other);
         other = '';
         ctx.write(',\n', true, `() => ({${n.$class.join(', ')}})`);
@@ -4860,7 +5049,7 @@
       ctx.write(true, ')');
     });
 
-    return { bind: result };
+    return { bind: result, reference };
   }
 
   function makeComponentDyn(node, element) {
@@ -4878,17 +5067,20 @@
     }
 
     assert(dynamicComponent);
+    this.require('apply');
     this.detectDependency(dynamicComponent);
 
-    let component = this.makeComponent(node).bind;
+    let { bind: component, reference } = this.makeComponent(node);
 
     component.componentName = '$ComponentConstructor';
     return xNode('dyn-component', {
       el: element.bindName(),
       exp: dynamicComponent,
-      component
+      component,
+      reference
     }, (ctx, n) => {
       ctx.write(true, `$runtime.attachDynComponent(${n.el}, () => ${n.exp}, ($ComponentConstructor) => `);
+      if(n.reference) ctx.write(`${n.reference} = `);
       ctx.add(n.component);
       ctx.write(')');
     });
@@ -4905,7 +5097,7 @@
       return {
         bind: xNode('block', {
           body: [
-            replaceElementKeyword(exp, () => element.bindName())
+            replaceKeyword(exp, (name) => name == '$element' ? element.bindName() : null)
           ]
         })
       };
@@ -4959,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);
@@ -5408,15 +5602,8 @@
     right = right.trim();
 
     const makeKeyFunction = (keyLink) => {
-      const e = parseJS(keyName).transform((n, pk) => {
-        if(n.type != 'Identifier') return;
-        if(pk == 'property') return;
-        let r = keyLink[n.name];
-        if(r) n.name = r;
-      });
-      let exp = e.build(e.ast.body[0].expression);
       keyFunction = xNode('key-function', {
-        exp
+        exp: replaceKeyword(keyName, n => keyLink[n])
       }, (ctx, n) => {
         ctx.write(`($$item, $index) => ${n.exp}`);
       });
@@ -5428,22 +5615,19 @@
       try {
         let exp = `[${right}]`;
         let e = parseJS(exp);
-        assert(e.ast.body.length == 1);
-
+        assert(e.ast.elements.length == 1 || e.ast.elements.length == 2);
         itemName = '$$item';
-        let n = e.ast.body[0];
-        assert(n.expression.elements.length == 1 || n.expression.elements.length == 2);
-        let a = n.expression.elements[0];
-        unwrap = exp.substring(a.start, a.end);
-        
-        if(n.expression.elements.length == 2) {
-          let b = n.expression.elements[1];
+
+        unwrap = e.build(e.ast.elements[0]);
+
+        if(e.ast.elements.length == 2) {
+          let b = e.ast.elements[1];
           assert(b.type == 'Identifier');
-          indexName = exp.substring(b.start, b.end);
+          indexName = e.build(b);
         }
 
         e = parseJS(`(${unwrap} = $$item)`);
-        let l = e.ast.body[0].expression.left;
+        let l = e.ast.left;
         if(l.type == 'ArrayPattern') {
           keywords = l.elements.map(p => p.name);
 
@@ -5486,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);
         }
@@ -5531,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);
@@ -5675,11 +5859,11 @@
       name: slotName,
       props,
       staticProps,
-      placeholder,
+      placeholder
     }, (ctx, n) => {
       let dynamicProps = this.inuse.apply && !n.staticProps;
 
-      let missed = '', slotName = n.name == 'default' ? 'null' : n.name;
+      let missed = '', slotName = n.name == 'default' ? 'null' : `'${n.name}'`;
       if(dynamicProps) ctx.write(`$runtime.invokeSlot($component, ${slotName}, $context`);
       else ctx.write(`$runtime.invokeSlotBase($component, ${slotName}, $context`);
 
@@ -6197,7 +6381,9 @@
     if(prop.value) {
       assert$1(!handler);
       exp = unwrapExp(prop.value);
-      exp = replaceElementKeyword(exp, requireElement);
+      exp = replaceKeyword(exp, (name) => {
+        if(name == '$element') return requireElement();
+      });
     } else if(!handler) handler = event;
 
     this.detectDependency(exp || handler);
@@ -6296,7 +6482,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a6';
+  const version = '0.7.0-a9';
 
 
   async function compile(source, config = {}) {
@@ -6314,7 +6500,8 @@
       debug: true,
       css: true,
       passClass: true,
-      immutable: false
+      immutable: false,
+      useGroupReferencing: true
     }, config);
 
     const ctx = {
@@ -6439,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],
@@ -6454,7 +6636,7 @@
         else ctx.write(true, `const ${n.name} = `);
         ctx.add(n.componentFn);
       }));
-    
+
       ctx.result = xBuild(result);
     });
 
@@ -6507,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-a6",
+  "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 = [];
 
@@ -806,6 +815,51 @@ const mount = (label, component, option) => {
   return app;
 };
 
+const mountStatic = (label, component, option) => {
+  current_destroyList = [];
+  try {
+    let app = component(option);
+    label.appendChild(app.$dom);
+    return app;
+  } finally {
+    current_destroyList = null;
+  }
+};
+
+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) {
@@ -1097,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];
@@ -1123,19 +1177,24 @@ function $$eachBlock(label, onlyChild, fn, getKey, bind) {
 
 const invokeSlotBase = ($component, slotName, $context, props, placeholder) => {
   let $slot = $component.$option.slots?.[slotName || 'default'];
-  return $slot ? $slot($component, $context, props)[0] : placeholder?.();
+  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, $dom,
-      w = new WatchObject(propsFn, value => push(value));
-    Object.assign(w, {value: {}, cmp, idle: true});
+    let push, w = new WatchObject(propsFn, value => push(value));
+    Object.assign(w, { value: {}, cmp, idle: true });
     fire(w);
-    ([$dom, push] = $slot($component, $context, w.value));
-    if(push) current_cd.watchers.push(w);
+    let $dom = $slot($component, $context, w.value);
+    if($dom.$dom) {
+      if($dom.push) {
+        push = $dom.push;
+        current_cd.watchers.push(w);
+      }
+      $dom = $dom.$dom;
+    }
     return $dom;
   } else return placeholder?.();
 };
@@ -1148,11 +1207,11 @@ const makeSlot = (fr, fn) => {
     $onDestroy(() => cd_detach($cd));
     parentCD.component.apply();
     try {
-      return [$dom, 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, 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 };