malinajs 0.7.2-a8 → 0.7.2-a9

package/CHANGELOG.md

@@ -17,6 +17,8 @@
 * 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 || {};');
@@ -2275,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);
@@ -5400,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;
@@ -5428,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++);
+
+      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();});`);
+          })
+        }
+      }
 
-      let argName = 'a' + (this.uniqIndex++);
+      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) {
@@ -5671,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,
@@ -6760,7 +6822,7 @@
     });
   }
 
-  const version = '0.7.2-a8';
+  const version = '0.7.2-a9';
 
 
   async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.2-a8",
+  "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 };