malinajs 0.7.2-a8 → 0.7.3

package/malina.js

@@ -19,7 +19,7 @@
     let prev = current_context;
     try {
       current_context = context;
-      fn();
+      return fn();
     } finally {
       current_context = prev;
     }
@@ -671,6 +671,42 @@
     }
   };
 
+  const walk = (node, fn) => {
+    switch(node.type) {
+      case 'node':
+      case 'slot':
+      case 'block':
+      case 'fragment':
+      case 'root':
+        if(node.body) fn(node.body, node);
+        break
+      case 'each':
+        if(node.mainBlock) fn(node.mainBlock, node);
+        if(node.elseBlock) fn(node.elseBlock, node);
+        break
+      case 'await':
+        if(node.parts.main) fn(node.parts.main, node);
+        if(node.parts.then) fn(node.parts.then, node);
+        if(node.parts.catch) fn(node.parts.catch, node);
+        break
+      case 'if':
+        node.parts.forEach(p => {
+          if(p.body) fn(p.body, node);
+        });
+        if(node.elsePart) fn(node.elsePart, node);
+        break
+      case 'text':
+      case 'comment':
+      case 'script':
+      case 'style':
+      case 'systag':
+      case 'template':
+        break
+      default:
+        throw `Not implemented: ${node.type}`;
+    }
+  };
+
   function compactDOM() {
     let data = this.DOM;
 
@@ -710,29 +746,7 @@
           }
         } else {
           if(node.type == 'node' && (node.name == 'pre' || node.name == 'textarea')) continue;
-          switch(node.type) {
-            case 'node':
-            case 'slot':
-            case 'block':
-            case 'fragment':
-              if(node.body) go(node.body, node);
-              break
-            case 'each':
-              if(node.mainBlock) go(node.mainBlock, node);
-              if(node.elseBlock) go(node.elseBlock, node);
-              break
-            case 'await':
-              if(node.parts.main) go(node.parts.main, node);
-              if(node.parts.then) go(node.parts.then, node);
-              if(node.parts.catch) go(node.parts.catch, node);
-              break
-            case 'if':
-              node.parts.forEach(p => {
-                if(p.body) go(p.body, node);
-              });
-              if(node.elsePart) go(node.elsePart, node);
-              break
-          }
+          walk(node, go);
         }
       }
 
@@ -763,8 +777,9 @@
           if(prev && next) {
             if(prev.type == 'node' && next.type == 'node') {
               if(isTable(prev) && isTable(next) ||
-                              prev.name == 'li' && next.name == 'li' ||
-                              prev.name == 'div' && next.name == 'div') {
+                  prev.name == 'li' && next.name == 'li' ||
+                  parentNode?.type == 'node' && parentNode?.name == 'select' && prev.name == 'option' && next.name == 'option' ||
+                  prev.name == 'div' && next.name == 'div') {
                 body.splice(i, 1);
                 continue;
               }
@@ -785,6 +800,10 @@
               body.splice(i, 1);
               continue;
             }
+            if((p == 'option' || n == 'option') && (parentNode.type == 'node' && parentNode.name == 'select')) {
+              body.splice(i, 1);
+              continue;
+            }
             if(parentNode.type == 'node' && ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'].includes(parentNode.name)) {
               body.splice(i, 1);
               continue;
@@ -836,6 +855,25 @@
     go(data.body);
   }
 
+  function compactFull() {
+    const go = (body) => {
+      let i = 0;
+      while (i < body.length) {
+        let n = body[i];
+        if(n.type == 'text') {
+          n.value = n.value.trim();
+          if(!n.value) {
+            body.splice(i, 1);
+            continue;
+          }
+        } else walk(n, go);
+        i++;
+      }
+    };
+
+    walk(this.DOM, go);
+  }
+
   class Reader {
     constructor(source) {
       if(source instanceof Reader) return source;
@@ -1277,18 +1315,28 @@
     assert(step == 0, 'Wrong expression: ' + source);
     let staticText = null;
     if(!parts.some(p => p.type == 'exp')) staticText = parts.map(p => p.type == 'text' ? p.value : '').join('');
-    let result = [];
-    parts.forEach(p => {
-      if(p.type == 'js') return;
-      if(p.type == 'exp') result.push(p);
-      else {
-        let l = last(result);
-        if(l?.type == 'text') l.value += p.value;
-        else result.push({ ...p });
+
+    let pe = {
+      parts,
+      staticText,
+      binding: parts.length == 1 && parts[0].type == 'exp' ? parts[0].value : null,
+      getResult() {
+        let result = [];
+        this.parts.forEach(p => {
+          if(p.type == 'js') return;
+          if(p.type == 'exp') result.push(p);
+          else {
+            let l = last(result);
+            if(l?.type == 'text') l.value += p.value;
+            else result.push({ ...p });
+          }
+        });
+
+        return '`' + result.map(p => p.type == 'text' ? Q(p.value) : '${' + p.value + '}').join('') + '`';
       }
-    });
-    result = result.map(p => p.type == 'text' ? '`' + Q(p.value) + '`' : '(' + p.value + ')').join('+');
-    return { result, parts, staticText };
+    };
+    pe.result = pe.getResult();
+    return pe;
   }
 
 
@@ -1374,7 +1422,7 @@
             const value = raw.substring(1, raw.length - 1);
             result.push({name, value, raw, content: r.sub(start)});
           } else {
-            const value = r.readIf(/^\S+/);
+            const value = r.readIf(/^[^\s<>]+/);
             result.push({name, value, raw: value, content: r.sub(start)});
           }
         } else {
@@ -1852,6 +1900,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 || {};');
@@ -2147,7 +2223,8 @@
               let bindText = xNode('bindText', {
                 $wait: ['apply'],
                 el: textNode.bindName(),
-                exp: pe.result
+                exp: pe.result,
+                parsedExpression: pe
               }, (ctx, n) => {
                 if(this.inuse.apply) {
                   ctx.writeLine(`$runtime.bindText(${n.el}, () => ${n.exp});`);
@@ -2275,8 +2352,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 +5484,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 +5512,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) {
@@ -5671,6 +5771,17 @@
 
         if(node.spreading) return node.spreading.push(`${name}: ${exp}`);
 
+        if(node.name == 'option' && name == 'value' && parsed.binding) {
+          return {
+            bind: xNode('bindOptionValue', {
+              el: element.bindName(),
+              value: parsed.binding
+            }, (ctx, n) => {
+              ctx.write(true, `$runtime.selectOption(${n.el}, () => (${n.value}));`);
+            })
+          }
+        }
+
         const propList = {
           hidden: true,
           checked: true,
@@ -5679,6 +5790,7 @@
           selected: true,
           innerHTML: true,
           innerText: true,
+          multiple: node.name == 'select',
           src: true,
           readonly: 'readOnly'
         };
@@ -5686,7 +5798,7 @@
         let n = xNode('bindAttribute', {
           $wait: ['apply'],
           name,
-          exp,
+          exp: propList[name] && parsed.binding ? parsed.binding : exp,
           hasElement,
           el: element.bindName()
         }, (ctx, data) => {
@@ -6760,7 +6872,7 @@
     });
   }
 
-  const version = '0.7.2-a8';
+  const version = '0.7.2-a12';
 
 
   async function compile(source, config = {}) {
@@ -6840,7 +6952,7 @@
       parseHTML: function() {
         this.DOM = parseHTML(this.source);
       },
-      compactDOM,
+      compactDOM: config.compact == 'full' ? compactFull : compactDOM,
 
       script: null,
       scriptNodes: null,
@@ -6941,7 +7053,7 @@
   async function hook(ctx, name) {
     for(let i = 0; i < ctx.config.plugins.length; i++) {
       const fn = ctx.config.plugins[i][name];
-      if(fn) await fn(ctx);
+      if(fn) await use_context(ctx, () => fn(ctx));
     }
   }
 

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "malinajs",
-  "version": "0.7.2-a8",
+  "version": "0.7.3",
   "license": "MIT",
   "scripts": {
-    "prepare": "npm run build",
     "build": "npm run build_runtime && rollup -c",
     "build_runtime": "rollup -c ./rollup.config.runtime.js",
     "build_app": "NODE_PATH=.. rollup -c rollup.config.app.js && uglifyjs ./example/public/app.js -o ./example/public/app.min.js -m -c",
@@ -39,6 +38,7 @@
     "runtime.js",
     "malina-rollup.js",
     "malina-esbuild.js",
-    "plugins/sass.js"
+    "plugins/sass.js",
+    "plugins/static-text.js"
   ]
 }

package/plugins/sass.js

@@ -8,17 +8,35 @@ module.exports = function sassPlugin() {
                 let type = node.attributes.filter(a => a.name == 'type' || a.name == 'lang')[0];
                 if(!type || type.value != 'sass' && type.value != 'scss') continue;
 
-                const sass = require('sass');
+                let sass;
+                try {
+                    sass = require('sass');
+                } catch (e) {
+                    if(e.code == 'MODULE_NOT_FOUND') sass = require('node-sass');
+                    else throw e;
+                }
                 node.content = await (new Promise((resolve, reject) => {
-                    sass.render({
-                        file: ctx.config.path,
-                        data: node.content,
-                        indentedSyntax: type.value == 'sass'
-                    }, function(e, result) {
-                        if(e) return reject(e);
-                        resolve(result.css.toString());
-                        type.value = 'css';
-                    });
+                    if(sass.render) {
+                        sass.render({  // node-sass
+                            file: ctx.config.path,
+                            data: node.content,
+                            indentedSyntax: type.value == 'sass'
+                        }, function(e, result) {
+                            if(e) return reject(e);
+                            resolve(result.css.toString());
+                            type.value = 'css';
+                        });
+                    } else {
+                        sass.compileStringAsync(node.content, {
+                            syntax: type.value == 'sass' ? 'indented' : 'scss',
+                            url: 'file://' + ctx.config.path
+                        }).then((r) => {
+                            resolve(r.css);
+                        }, (e) => {
+                            console.error('SCSS Error', e);
+                            reject(e);
+                        })
+                    }
                 }));
             };
         }

package/plugins/static-text.js

@@ -0,0 +1,46 @@
+
+module.exports = function staticTextPlugin() {
+  /*
+    Build static text for text binding
+    Usage: {=variable}
+  */
+  return {
+    name: 'static-text',
+    'build:before': (ctx) => {
+      const walk = (n) => {
+        if (!n) return;
+
+        // Modify AST-node
+        if (n.$type == 'bindText') {
+          let hasStatic, hasDynamic;
+          n.parsedExpression.parts.forEach(p => {
+            if(p.type == 'exp') {
+              if(p.value[0] == '=') {
+                p.value = p.value.substring(1);
+                hasStatic = true;
+              } else hasDynamic = true;
+            }
+          });
+
+          if(hasStatic) n.exp = n.parsedExpression.getResult();
+
+          if(hasStatic && !hasDynamic) {
+            n.$handler = function (ctx, n) {
+              ctx.write(true, `${n.el}.textContent = ${n.exp};`);
+            }
+          }
+        }
+
+        // traversal AST
+        if (Array.isArray(n)) n.forEach(walk);
+        else if (n.$type) {
+          for (let k in n) {
+            if (k[0] == '$') continue;
+            walk(n[k]);
+          }
+        }
+      }
+      walk(ctx.module.body);
+    }
+  };
+};

package/runtime.js

@@ -28,10 +28,10 @@ const safeGroupCall = list => {
   }
 };
 
-const safeGroupCall2 = (list, resultList) => {
+const safeGroupCall2 = (list, resultList, onlyFunction) => {
   list?.forEach(fn => {
     let r = safeCall(fn);
-    r && resultList.push(r);
+    r && (!onlyFunction || isFunction(r)) && resultList.push(r);
   });
 };
 
@@ -895,7 +895,7 @@ function ifBlock(label, fn, parts, parentLabel) {
     } else first = last = $dom;
     if(parentLabel) label.appendChild($dom);
     else label.parentNode.insertBefore($dom, label);
-    safeGroupCall2(mountList, destroyList);
+    safeGroupCall2(mountList, destroyList, 1);
   }
 
   function destroyBlock() {
@@ -969,7 +969,7 @@ function awaitBlock(label, parentLabel, relation, fn, build_main, build_then, bu
     } else first = last = $dom;
     if(parentLabel) label.appendChild($dom);
     else label.parentNode.insertBefore($dom, label);
-    safeGroupCall2(mountList, destroyList);
+    safeGroupCall2(mountList, destroyList, 1);
     cd_component(parentCD).$apply();
   }
 
@@ -1026,7 +1026,7 @@ const makeEachElseBlock = (fn) => {
       } else first = last = $dom;
       cd_attach(parentCD, $cd);
       parentNode.insertBefore($dom, mode ? null : label);
-      safeGroupCall2(current_mountList, destroyList);
+      safeGroupCall2(current_mountList, destroyList, 1);
     } finally {
       current_destroyList = current_mountList = current_cd = null;
     }
@@ -1187,7 +1187,7 @@ function $$eachBlock(label, mode, fn, getKey, bind, buildElseBlock) {
         } else ctx.first = ctx.last = $dom;
         parentNode.insertBefore($dom, nextNode);
         nextNode = ctx.first;
-        safeGroupCall2(m, d);
+        safeGroupCall2(m, d, 1);
         if(d.length) {
           ctx.d = d;
           p_destroy = 1;
@@ -1285,4 +1285,62 @@ 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 value = [];
+    el.querySelectorAll(':checked').forEach(o => {
+      value.push(o.$$value ? o.$$value() : o.value);
+    });
+    value = el.multiple ? value : value[0];
+    setter(value);
+    w.value = value;
+  });
+  const update = () => {
+    let value = w.value;
+    if(el.multiple) {
+      if(isArray(value)) {
+        for(let o of el.options) {
+          const option_value = o.$$value ? o.$$value() : o.value;
+          o.selected = value.indexOf(option_value) != -1;
+        }
+        return;
+      }
+    } else {
+      for(let o of el.options) {
+        if((o.$$value ? o.$$value() : o.value) === value) {
+          o.selected = true;
+          return;
+        }
+      }
+    }
+    el.selectedIndex = -1;
+  };
+  const w = $watch(getter, update);
+
+  let debounce = 0;
+  el.$$update = () => {
+    if(debounce) return;
+    debounce = 1;
+    $tick(() => {
+      debounce = 0;
+      update();
+    });
+  };
+};
+
+const selectOption = (op, getter) => {
+  op.$$value = getter;
+  if(op.parentElement?.$$update) op.parentElement.$$update();
+  else $tick(() => op.parentElement?.$$update?.());
+};
+
+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 };

package/CHANGELOG.md

@@ -1,77 +0,0 @@
-
-## 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
-* action can return destroy function (not only object)
-* each-else
-* else-if
-* refactoring $onMount
-* optional deep checking for passed props: prop={value} prop|deep={value}
-* keep-alive
-* malina:self
-
-## 0.6.x
-
-* style's attribute "global"
-* compound classes (handle mix of class and class directives)
-* new passing class
-* mark a class as external "$className"
-* Deprecated: passing class from 0.5
-* plugins
-* esbuild-plugin (by AlexxNB)
-* $context
-* onError
-* $onMount
-* $onDestroy
-* alias for import: malinajs -> malinajs/runtime.js
-* alias @click -> @click={click}, @@click is forwarding
-* local config "malina.config.js"
-* plugin sass/scss
-* key "auto" for each-block
-* anchors for components
-* style templates, e.g. style:color={color}, style:border-color="red", style:border="1px solid {color}"
-* compile option "css"
-* event modifier: stop, prevent
-* script option "read-only"
-* constant props - "export const prop;"
-* compile option: debugLabel
-* slot for fragment
-* exported fragments (inverted slots)
-* <malina:head>, <malina:body>, <malina:window>
-* option: passClass
-* option: immutable
-* event modifiers: prevent, stop, ctrl, alt, shift, meta. key-events: enter, tab, esc, space, up, down, left, right, delete
-* inline actions for text-node and elements
-* portals: <malina:portal>
-* autoimport
-
-## 0.5.x
-
-* input with type "range"/"number" - value as number
-* improve reactive expression
-* unwrap object in each
-* dynamic component
-* named slot
-* fix for dynamic import
-* option.onerror
-* autosubscribe for imported objects
-* compile time optinoption !no-check
-* fragments
-* event modifier: stopPropagation
-* $props, $attributes, $restProps
-* await-then-catch
-* :global classes
-* spreading props and objects {...obj}
-* forwarding events, forward all @@
-* onMount, onDestroy, $onDestroy
-* shortcuts for bindings and actions
-* scoped-css
-* conrol directives: each, if