malinajs 0.7.2-a7 → 0.7.2-a9

package/CHANGELOG.md

@@ -16,6 +16,9 @@
 * refactoring $onMount
 * optional deep checking for passed props: prop={value} prop|deep={value}
 * keep-alive
+* malina:self
+* handler for element "select"
+* handler for "radio" input
 
 ## 0.6.x
 

package/malina.js

@@ -1852,6 +1852,34 @@
     });
   };
 
+  function radioInput(node, el) {
+    assert(node.name == 'input');
+    const aType = node.attributes.find(a => a.name == 'type');
+    if(!aType || aType.value != 'radio') return null;
+    const aName = node.attributes.find(a => a.name == 'name');
+    if(!aName.value.startsWith('{')) return null;
+    const aValue = node.attributes.find(a => a.name == 'value');
+
+    aName._skip = true;
+    aValue._skip = true;
+
+    const name = unwrapExp(aName.value);
+    assert(detectExpressionType(name) == 'identifier', 'Wrong name for radio input');
+    let value = aValue.value;
+    if(value.match(/^\{.+\}$/)) value = unwrapExp(aValue.value);
+    else value = '`' + value + '`';
+
+    this.require('apply');
+
+    return xNode('radioInput', {
+      name,
+      value,
+      el: el.bindName()
+    }, (ctx, n) => {
+      ctx.write(true, `$runtime.radioButton(${n.el}, () => (${n.value}), () => (${n.name}), ($$) => {${n.name} = $$; $$apply();});`);
+    });
+  }
+
   function buildRuntime() {
     this.module.head.push(xNode('$events', (ctx) => {
       if(this.inuse.$events) ctx.write(true, 'const $events = $option.events || {};');
@@ -2187,7 +2215,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;
           }
@@ -2207,23 +2241,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;
@@ -2285,8 +2303,15 @@
               ctx.writeLine(`$runtime.spreadAttributes(${n.el}, () => ({${n.props.join(', ')}}));`);
             }));
           }
+
+          if(n.name == 'input') {
+            const b = radioInput.call(this, n, el);
+            b && binds.push(b);
+          }
+
           let bindTail = [];
           n.attributes.forEach(p => {
+            if(p._skip) return;
             let b = this.bindProp(p, n, el);
             if(b) {
               if(b.bind) binds.push(b.bind);
@@ -2644,6 +2669,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) {
@@ -4882,7 +4927,7 @@
     return result;
   };
 
-  function makeComponent(node) {
+  function makeComponent(node, option={}) {
     let propList = node.attributes;
 
     this.require('$context');
@@ -4892,8 +4937,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];
 
@@ -5390,7 +5435,7 @@
           ctx.write(');');
         })
       };
-    } else if(name == 'bind') {
+    } else if(name == 'bind' && arg) {
       if(this.script.readOnly) {
         this.warning('script read-only conflicts with bind: ' + node.openTag);
         return;
@@ -5418,18 +5463,34 @@
       }
 
       assert(['value', 'checked', 'valueAsNumber', 'valueAsDate', 'selectedIndex'].includes(attr), 'Not supported: ' + prop.content);
-      assert(arg.length == 0);
       assert(detectExpressionType(exp) == 'identifier', 'Wrong bind name: ' + prop.content);
-      if(attr == 'value' && ['number', 'range'].includes(inputType)) attr = 'valueAsNumber';
+      assert(arg.length == 0);
       this.detectDependency(exp);
+      let argName = '$$a' + (this.uniqIndex++);
 
-      let argName = 'a' + (this.uniqIndex++);
+      if(node.name == 'select' && attr == 'value') {
+        return {
+          bind: xNode('bindInput', {
+            el: element.bindName(),
+            exp,
+            attr,
+            argName
+          }, (ctx, n) => {
+            ctx.write(true, `$runtime.selectElement(${n.el}, () => ${n.exp}, ${n.argName} => {${n.exp} = ${n.argName}; $$apply();});`);
+          })
+        }
+      }
+
+      if(attr == 'value' && ['number', 'range'].includes(inputType)) attr = 'valueAsNumber';
 
       return {
         bind: xNode('bindInput', {
-          el: element.bindName()
+          el: element.bindName(),
+          exp,
+          attr,
+          argName
         }, (ctx, n) => {
-          ctx.writeLine(`$runtime.bindInput(${n.el}, '${attr}', () => ${exp}, ${argName} => {${exp} = ${argName}; $$apply();});`);
+          ctx.write(true, `$runtime.bindInput(${n.el}, '${n.attr}', () => ${n.exp}, ${n.argName} => {${n.exp} = ${n.argName}; $$apply();});`);
         })
       };
     } else if(name == 'style' && arg) {
@@ -5661,6 +5722,17 @@
 
         if(node.spreading) return node.spreading.push(`${name}: ${exp}`);
 
+        if(node.name == 'option' && name == 'value') {
+          return {
+            bind: xNode('bindOptionValue', {
+              el: element.bindName(),
+              exp
+            }, (ctx, n) => {
+              ctx.write(true, `$runtime.selectOption(${n.el}, () => (${n.exp}));`);
+            })
+          }
+        }
+
         const propList = {
           hidden: true,
           checked: true,
@@ -6750,7 +6822,7 @@
     });
   }
 
-  const version = '0.7.2-a7';
+  const version = '0.7.2-a9';
 
 
   async function compile(source, config = {}) {
@@ -6805,7 +6877,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) {
@@ -6902,10 +6975,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-a7",
+  "version": "0.7.2-a9",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",

package/runtime.js

@@ -1285,4 +1285,37 @@ const keepAlive = (store, keyFn, builder) => {
   }
 };
 
-export { $$eachBlock, $context, $digest, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addBlock, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, awaitBlock, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callComponentDyn, callExportedFragment, cd_attach, cd_component, cd_detach, cd_new, cloneDeep, compareArray, compareDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, deepComparator, destroyResults, eachDefaultKey, exportFragment, fire, htmlBlock, htmlBlockStatic, htmlToFragment, htmlToFragmentClean, ifBlock, ifBlockReadOnly, insertAfter, insertBlock, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keepAlive, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeEmitter, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElements, removeItem, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+const selectElement = (el, getter, setter) => {
+  addEvent(el, 'change', () => {
+    let op = el.querySelector(':checked');
+    if(op?.$$value) {
+      let value = op.$$value();
+      setter(value);
+      w.value = value;
+    }
+  });
+  let w = $watch(getter, (value) => {
+    for(let op of el.options) {
+      if(op.$$value?.() === value) {
+        op.selected = true;
+        return;
+      }
+    }
+    el.selectedIndex = -1;
+  });
+};
+
+const selectOption = (op, getter) => {
+  op.$$value = getter;
+};
+
+const radioButton = (el, getValue, getter, setter) => {
+  let w = $watch(getter, (value) => {
+    el.checked = getValue() === value;
+  });
+  addEvent(el, 'change', () => {
+    if(el.checked) setter(w.value = getValue());
+  });
+};
+
+export { $$eachBlock, $context, $digest, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addBlock, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, awaitBlock, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callComponentDyn, callExportedFragment, cd_attach, cd_component, cd_detach, cd_new, cloneDeep, compareArray, compareDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, deepComparator, destroyResults, eachDefaultKey, exportFragment, fire, htmlBlock, htmlBlockStatic, htmlToFragment, htmlToFragmentClean, ifBlock, ifBlockReadOnly, insertAfter, insertBlock, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keepAlive, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeEmitter, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, radioButton, refer, removeElements, removeItem, selectElement, selectOption, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };