malinajs 0.7.2-a9 → 0.7.4

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,22 +1315,33 @@
     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;
   }
 
 
-  const parseBinding = (reader) => {
+  const parseBinding = (source) => {
+    const reader = new Reader(source);
     let start = reader.index;
 
     assert(reader.read() === '{', 'Bind error');
@@ -1335,7 +1384,7 @@
       const raw = reader.sub(start);
       return {
         raw,
-        value: raw.substring(1, raw.length - 1),
+        value: raw.substring(1, raw.length - 1).trim(),
       };
     }
   };
@@ -1374,7 +1423,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 {
@@ -2175,7 +2224,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});`);
@@ -2613,7 +2663,7 @@
         each: option.each,
         parentElement: option.parentElement
       }, (ctx, n) => {
-        if(n.each && !ctx.isEmpty(n.innerBlock)) {
+        if(n.each) {
           ctx.write('$runtime.makeEachBlock(');
         } else {
           ctx.write('$runtime.makeBlock(');
@@ -5722,13 +5772,13 @@
 
         if(node.spreading) return node.spreading.push(`${name}: ${exp}`);
 
-        if(node.name == 'option' && name == 'value') {
+        if(node.name == 'option' && name == 'value' && parsed.binding) {
           return {
             bind: xNode('bindOptionValue', {
               el: element.bindName(),
-              exp
+              value: parsed.binding
             }, (ctx, n) => {
-              ctx.write(true, `$runtime.selectOption(${n.el}, () => (${n.exp}));`);
+              ctx.write(true, `$runtime.selectOption(${n.el}, () => (${n.value}));`);
             })
           }
         }
@@ -5741,6 +5791,7 @@
           selected: true,
           innerHTML: true,
           innerText: true,
+          multiple: node.name == 'select',
           src: true,
           readonly: 'readOnly'
         };
@@ -5748,7 +5799,7 @@
         let n = xNode('bindAttribute', {
           $wait: ['apply'],
           name,
-          exp,
+          exp: propList[name] && parsed.binding ? parsed.binding : exp,
           hasElement,
           el: element.bindName()
         }, (ctx, data) => {
@@ -6566,42 +6617,34 @@
     name = toCamelCase(name);
     if(name == 'class') name = '_class';
 
-    let rawValue, statical = false;
+    let statical = false;
 
     if(value && value.includes('{')) {
-      const pe = this.parseText(value);
-      this.detectDependency(pe);
-
-      if(pe.parts.length == 1 && pe.parts[0].type == 'exp') {
-        let v = pe.parts[0].value;
-
-        if(isNumber(v)) {
-          value = v;
-          rawValue = Number(v);
-          statical = true;
-        } else if(v == 'true' || v == 'false') {
-          value = v;
-          rawValue = v == 'true';
-          statical = true;
-        } else if(v == 'null') {
-          value = 'null';
-          rawValue = null;
-          statical = true;
-        }
+      const pe = parseBinding(value);
+      const v = pe.value;
+      this.detectDependency(v);
+
+      if(isNumber(v)) {
+        value = v;
+        statical = true;
+      } else if(v == 'true' || v == 'false') {
+        value = v;
+        statical = true;
+      } else if(v == 'null') {
+        value = 'null';
+        statical = true;
+      } else {
+        value = v;
       }
-
-      if(!statical) value = pe.result;
     } else if(value) {
-      rawValue = value;
       value = '`' + Q(value) + '`';
       statical = true;
     } else {
-      rawValue = true;
       value = 'true';
       statical = true;
     }
 
-    return { name, value, rawValue, static: statical, mod };
+    return { name, value, static: statical, mod };
   }
 
   function attachPortal(node) {
@@ -6822,7 +6865,7 @@
     });
   }
 
-  const version = '0.7.2-a9';
+  const version = '0.7.4';
 
 
   async function compile(source, config = {}) {
@@ -6902,7 +6945,7 @@
       parseHTML: function() {
         this.DOM = parseHTML(this.source);
       },
-      compactDOM,
+      compactDOM: config.compact == 'full' ? compactFull : compactDOM,
 
       script: null,
       scriptNodes: null,
@@ -7003,7 +7046,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-a9",
+  "version": "0.7.4",
   "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();
   }
 
@@ -998,7 +998,7 @@ const eachDefaultKey = (item, index, array) => isObject(array[0]) ? item : index
 const makeEachBlock = (fr, fn) => {
   return (item, index) => {
     let $dom = fr.cloneNode(true);
-    return [$dom, fn($dom, item, index)];
+    return [$dom, fn?.($dom, item, index)];
   };
 };
 
@@ -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;
@@ -1287,26 +1287,51 @@ const keepAlive = (store, keyFn, builder) => {
 
 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 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;
   });
-  let w = $watch(getter, (value) => {
-    for(let op of el.options) {
-      if(op.$$value?.() === value) {
-        op.selected = true;
+  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) => {

package/CHANGELOG.md

@@ -1,79 +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
-* handler for element "select"
-* handler for "radio" input
-
-## 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