malinajs 0.7.2-a6 → 0.7.2-a8

package/CHANGELOG.md

@@ -16,6 +16,7 @@
 * refactoring $onMount
 * optional deep checking for passed props: prop={value} prop|deep={value}
 * keep-alive
+* malina:self
 
 ## 0.6.x
 

package/malina.js

@@ -1351,27 +1351,40 @@
         if(r.probe('/>') || r.probe('>')) break;
       } else if(r.end()) break;
       let start = r.index;
-      let name = r.readAttribute();
-      assert(name, 'Wrong syntax');
-      if(r.readIf('=')) {
-        if(r.probe('{')) {
-          const {raw} = parseBinding(r);
-          result.push({name, value: raw, raw, content: r.sub(start)});
-        } else if(r.probeQuote()) {
-          const raw = r.readString();
-          const value = raw.substring(1, raw.length - 1);
-          result.push({name, value, raw, content: r.sub(start)});
+      if(r.probe('{*')) {
+        const {raw} = parseBinding(r);
+        result.push({name: raw, content: raw});
+      } else if(r.probe('*{')) {
+        r.read();
+        let {raw} = parseBinding(r);
+        raw = '*' + raw;
+        result.push({name: raw, content: raw});
+      } else if(r.probe('{...')) {
+        let {raw} = parseBinding(r);
+        result.push({name: raw, content: raw});
+      } else {
+        let name = r.readAttribute();
+        assert(name, 'Wrong syntax');
+        if(r.readIf('=')) {
+          if(r.probe('{')) {
+            const {raw} = parseBinding(r);
+            result.push({name, value: raw, raw, content: r.sub(start)});
+          } else if(r.probeQuote()) {
+            const raw = r.readString();
+            const value = raw.substring(1, raw.length - 1);
+            result.push({name, value, raw, content: r.sub(start)});
+          } else {
+            const value = r.readIf(/^\S+/);
+            result.push({name, value, raw: value, content: r.sub(start)});
+          }
         } else {
-          const value = r.readIf(/^\S+/);
+          let value;
+          if(name[0] == '{' && last(name) == '}' && !name.startsWith('{...')) {
+            value = name;
+            name = unwrapExp(name);
+          }
           result.push({name, value, raw: value, content: r.sub(start)});
         }
-      } else {
-        let value;
-        if(name[0] == '{' && last(name) == '}' && !name.startsWith('{...')) {
-          value = name;
-          name = unwrapExp(name);
-        }
-        result.push({name, value, raw: value, content: r.sub(start)});
       }
     }
 
@@ -2174,7 +2187,13 @@
           if(n.name == 'malina' && !option.malinaElement) {
             let b;
             if(n.elArg == 'portal') b = this.attachPortal(n);
-            else b = this.attachHead(n);
+            else if(['window', 'body', 'head'].includes(n.elArg)) b = this.attachHead(n);
+            else if(n.elArg == 'self') {
+              this.glob.$$selfComponent.$value();
+              const label = requireLabel();
+              let component = this.makeComponent(n, {self: true});
+              binds.push(insertComponent(component, label));
+            } else throw 'Wrong tag';
             b && binds.push(b);
             return;
           }
@@ -2194,23 +2213,7 @@
               } else {
                 const label = requireLabel();
                 let component = this.makeComponent(n);
-                binds.push(xNode('insert-component', {
-                  component: component.bind,
-                  reference: component.reference,
-                  label
-                }, (ctx, n) => {
-                  if(n.reference) {
-                    ctx.write(true, `${n.reference} = `);
-                    ctx.add(n.component);
-                    if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, ${n.reference});`);
-                    else ctx.write(true, `$runtime.addBlock(${n.label.name}, ${n.reference});`);
-                  } else {
-                    if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
-                    else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
-                    ctx.add(n.component);
-                    ctx.write(');');
-                  }
-                }));
+                binds.push(insertComponent(component, label));
               }
             } else {
               if(isRoot) requireFragment = true;
@@ -2306,7 +2309,7 @@
             go(n, false, el);
           }
         } else if(n.type === 'block') {
-          if(n.name == 'keep-alive') {
+          if(n.name == 'keep') {
             if(isRoot) requireFragment = true;
             binds.push(xNode('attach-fragment', {
               label: requireLabel(),
@@ -2631,6 +2634,26 @@
     throw e;
   }
 
+  function insertComponent(component, label) {
+    return xNode('insert-component', {
+      component: component.bind,
+      reference: component.reference,
+      label
+    }, (ctx, n) => {
+      if(n.reference) {
+        ctx.write(true, `${n.reference} = `);
+        ctx.add(n.component);
+        if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, ${n.reference});`);
+        else ctx.write(true, `$runtime.addBlock(${n.label.name}, ${n.reference});`);
+      } else {
+        if(n.label.node) ctx.write(true, `$runtime.insertBlock(${n.label.name}, `);
+        else ctx.write(true, `$runtime.addBlock(${n.label.name}, `);
+        ctx.add(n.component);
+        ctx.write(');');
+      }
+    })
+  }
+
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
   function createCommonjsModule(fn, basedir, module) {
@@ -4869,7 +4892,7 @@
     return result;
   };
 
-  function makeComponent(node) {
+  function makeComponent(node, option={}) {
     let propList = node.attributes;
 
     this.require('$context');
@@ -4879,8 +4902,8 @@
     let slotBlocks = [];
     let anchorBlocks = [];
 
-    let componentName = node.name;
-    if(componentName != 'component' && this.config.autoimport) {
+    let componentName = option.self ? '$$selfComponent' : node.name;
+    if(componentName != 'component' && this.config.autoimport && !option.self) {
       let imported = this.script.autoimport[componentName] || this.script.importedNames.includes(componentName) ||
         this.script.rootVariables[componentName] || this.script.rootFunctions[componentName];
 
@@ -6712,7 +6735,7 @@
     }
 
     let key = null;
-    let args = node.value.substr(12);
+    let args = node.value.substr(6);
     if(args) {
       args = parseAttibutes(args);
       const a = args.find(a => a.name == 'key');
@@ -6737,7 +6760,7 @@
     });
   }
 
-  const version = '0.7.2-a6';
+  const version = '0.7.2-a8';
 
 
   async function compile(source, config = {}) {
@@ -6792,7 +6815,8 @@
         rootCD: xNode('root-cd', false),
         apply: xNode('apply', false),
         componentFn: xNode('componentFn', false),
-        $onMount: xNode('$onMount', false)
+        $onMount: xNode('$onMount', false),
+        $$selfComponent: xNode('$$selfComponent', false)
       },
       require: function(...args) {
         for(let name of args) {
@@ -6889,10 +6913,21 @@
         $compile: [ctx.module.head, ctx.module.code, ctx.module.body, ctx.glob.rootCD],
         name: config.name,
         componentFn: ctx.glob.componentFn
-      }, (ctx, n) => {
-        if(config.exportDefault) ctx.write(true, 'export default ');
-        else ctx.write(true, `const ${n.name} = `);
-        ctx.add(n.componentFn);
+      }, (ctx2, n) => {
+        if(config.exportDefault) {
+          if(ctx.glob.$$selfComponent.value) {
+            ctx2.write(true, 'const $$selfComponent = ');
+            ctx2.add(n.componentFn);
+            ctx2.write(true, 'export default $$selfComponent;');
+          } else {
+            ctx2.write(true, 'export default ');
+            ctx2.add(n.componentFn);
+          }
+        } else {
+          assert(!ctx.glob.$$selfComponent.value, 'Not supported');
+          ctx2.write(true, `const ${n.name} = `);
+          ctx2.add(n.componentFn);
+        }
       }));
 
       ctx.result = xBuild(result);

package/package.json

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