malinajs 0.7.0-a7 → 0.7.0-a8

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) => {
@@ -225,7 +227,7 @@
     };
 
     self.build = function(data) {
-      return astring.generate(data || self.ast);
+      return astring.generate(data || self.ast, {indent: '', lineEnd: ''});
     };
     return self;
   };
@@ -1556,6 +1558,8 @@
       });
     }
 
+    let exportedFunctions = [];
+
     ast.body.forEach(n => {
       if(n.type == 'ImportDeclaration') {
         imports.push(n);
@@ -1571,8 +1575,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 +1684,16 @@
         });
       }));
     }
+
+    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};`);
+    }));
   }
 
 
@@ -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 {
@@ -4427,7 +4482,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 +4565,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 +4591,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);
@@ -4758,14 +4818,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}, {`);
 
@@ -4829,6 +4887,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 +4913,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 +4923,7 @@
       ctx.write(true, ')');
     });
 
-    return { bind: result };
+    return { bind: result, reference };
   }
 
   function makeComponentDyn(node, element) {
@@ -4878,17 +4941,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 +4971,7 @@
       return {
         bind: xNode('block', {
           body: [
-            replaceElementKeyword(exp, () => element.bindName())
+            replaceKeyword(exp, (name) => name == '$element' ? element.bindName() : null)
           ]
         })
       };
@@ -5408,15 +5474,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 +5487,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);
 
@@ -6197,7 +6253,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 +6354,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a7';
+  const version = '0.7.0-a8';
 
 
   async function compile(source, config = {}) {

package/package.json

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

package/runtime.js

@@ -806,6 +806,17 @@ 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;
+  }
+};
+
 let create = (tag, html) => {
   let fr;
   if(tag.parentElement instanceof SVGElement) {
@@ -1160,4 +1171,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, 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, mergeEvents, mount, mountStatic, noop, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };