malinajs 0.6.53 → 0.6.56

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 
 ## 0.6.x
 
+* destruncting for "each" for array and object
 * style's attribute "global"
 * compound classes (handle mix of class and class directives)
 * new passing class

package/compile.js

@@ -19,7 +19,7 @@ function assert(x, info) {
 
 function toCamelCase(name) {
     assert(name[name.length - 1] !== '-', 'Wrong name');
-    return name.replace(/(\-\w)/g, function(part) {
+    return name.replace(/(?<!-)(\-\w)/g, function(part) {
         return part[1].toUpperCase();
     });
 }
@@ -55,19 +55,10 @@ function detectExpressionType(name) {
     let ast = acorn.parse(name, {allowReturnOutsideFunction: true});
 
     function checkIdentificator(body) {
-        if(body.length != 1) return;
-        if(body[0].type != 'ExpressionStatement') return;
-        if(body[0].expression.type != 'Identifier') return;
-        return true;
-    }
-
-    function checkMemberIdentificator(body) {
         if(body.length != 1) return;
         if(body[0].type != 'ExpressionStatement') return;
         let obj = body[0].expression;
-        if(obj.type != 'MemberExpression') return;
-        if(obj.property.type != 'Identifier') return;
-        return true;
+        return obj.type == 'Identifier' || obj.type == 'MemberExpression';
     }
 
     function checkFunction(body) {
@@ -79,7 +70,6 @@ function detectExpressionType(name) {
     }
 
     if(checkIdentificator(ast.body)) return 'identifier';
-    if(checkMemberIdentificator(ast.body)) return 'identifier';
     if(checkFunction(ast.body)) return 'function';
 
     return;
@@ -301,7 +291,7 @@ const extractKeywords = (exp) => {
 
 const replaceElementKeyword = (exp, fn) => {
     let changed = false;
-    let r = parseJS(exp, (n, pk) => {
+    let r = parseJS(exp).transform((n, pk) => {
         if(n.type != 'Identifier') return;
         if(pk == 'property' || pk == 'params') return;
         if(n.name != '$element') return;
@@ -312,38 +302,42 @@ const replaceElementKeyword = (exp, fn) => {
 };
 
 
-const parseJS = (exp, fn) => {
-    let result = {};
-    let ast = result.ast = acorn.parse(exp, {sourceType: 'module', ecmaVersion: 12});
+const parseJS = (exp) => {
+    let self = {};
+    self.ast = acorn.parse(exp, {sourceType: 'module', ecmaVersion: 12});
 
-    const rec = (n, pk) => {
-        let self;
-        if(n.type) {
-            self = n;
-            fn?.(n, pk);
-        }
-
-        for(let k in n) {
-            if(k == '_parent') continue;
-            let v = n[k];
-            if(v == null || typeof(v) != 'object') continue;
-            if(Array.isArray(v)) {
-                v.forEach(i => {
-                    i._parent = self || n._parent;
-                    rec(i, k);
-                });
-            } else {
-                v._parent = self || n._parent;
-                rec(v, k);
+    self.transform = function(fn) {
+        const rec = (n, pk) => {
+            let self;
+            if(n.type) {
+                self = n;
+                fn?.(n, pk);
             }
-        }
+    
+            for(let k in n) {
+                if(k == '_parent') continue;
+                let v = n[k];
+                if(v == null || typeof(v) != 'object') continue;
+                if(Array.isArray(v)) {
+                    v.forEach(i => {
+                        i._parent = self || n._parent;
+                        rec(i, k);
+                    });
+                } else {
+                    v._parent = self || n._parent;
+                    rec(v, k);
+                }
+            }
+        };
+        rec(self.ast, null);
+
+        return self;
     };
-    rec(ast, null);
 
-    result.build = (data) => {
-        return astring.generate(data || ast);
+    self.build = function(data) {
+        return astring.generate(data || self.ast);
     };
-    return result;
+    return self;
 };
 
 
@@ -5012,7 +5006,7 @@ function makeEachBlock(data, option) {
     assert(rx, `Wrong #each expression '${data.value}'`);
     let arrayName = rx[1];
     let right = rx[2];
-    let keyName;
+    let keyName, keyFunction = null;
 
     // get keyName
     rx = right.match(/^(.*)\s*\(\s*([^\(\)]+)\s*\)\s*$/s);
@@ -5022,61 +5016,86 @@ function makeEachBlock(data, option) {
     }
     right = right.trim();
 
-    let itemName, indexName, bind0 = null;
-    if(right[0] == '{') {
-        rx = right.match(/^(\{[^}]+\})(.*)$/s);
-        assert(rx, `Wrong #each expression '${data.value}'`);
-        let exp = rx[1], keywords;
+    const makeKeyFunction = (keyLink) => {
+        const e = parseJS(keyName).transform((n, pk) => {
+            if(n.type != 'Identifier') return;
+            if(pk == 'property') return;
+            let r = keyLink[n.name];
+            if(r) n.name = r;
+        });
+        let exp = e.build(e.ast.body[0].expression);
+        keyFunction = xNode('key-function', {
+            exp
+        }, (ctx, n) => {
+            ctx.write(`($$item, $index) => ${n.exp}`);
+        });
+    };
 
+    let itemName, indexName, bind0 = null;
+    if(right[0] == '{' || right[0] == '[') {
+        let keywords, unwrap;
         try {
-            keywords = acorn.parse(`(${exp} = $$item)`, {sourceType: 'module', ecmaVersion: 12}).body[0].expression.left.properties.map(p => p.key.name);
+            let exp = `[${right}]`;
+            let e = parseJS(exp);
+            assert(e.ast.body.length == 1);
+
+            itemName = '$$item';
+            let n = e.ast.body[0];
+            let a = n.expression.elements[0];
+            unwrap = exp.substring(a.start, a.end);
+            if(n.expression.elements.length == 1) {
+                indexName = '$index';
+            } else {
+                assert(n.expression.elements.length == 2);
+                let b = n.expression.elements[1];
+                assert(b.type == 'Identifier');
+                indexName = exp.substring(b.start, b.end);
+            }
+
+            e = parseJS(`(${unwrap} = $$item)`);
+            let l = e.ast.body[0].expression.left;
+            if(l.type == 'ArrayPattern') {
+                keywords = l.elements.map(p => p.name);
+
+                if(keyName) {
+                    let keyLink = {};
+                    for(let i in keywords) keyLink[keywords[i]] = `$$item[${i}]`;
+                    makeKeyFunction(keyLink);
+                }
+            } else {
+                assert(l.type == 'ObjectPattern');
+                keywords = l.properties.map(p => p.key.name);
+
+                if(keyName) {
+                    let keyLink = {};
+                    for(let k of keywords) keyLink[k] = `$$item.${k}`;
+                    makeKeyFunction(keyLink);
+                }
+            }
         } catch (e) {
             throw new Error('Wrong destructuring in each: ' + data.value);
         }
 
-        itemName = '$$item';
-        indexName = rx[2].trim();
-        if(indexName[0] == ',') indexName = indexName.substring(1).trim();
-        indexName = indexName || '$index';
-
         bind0 = xNode('each:unwrap', {
-            exp,
+            unwrap,
             keywords
         }, (ctx, n) => {
             ctx.writeLine(`let ${n.keywords.join(', ')};`);
-            ctx.writeLine(`$runtime.prefixPush($ctx.cd, () => (${n.exp} = $$item));`);
+            ctx.writeLine(`$runtime.prefixPush($ctx.cd, () => (${n.unwrap} = $$item));`);
         });
     } else {
         rx = right.trim().split(/\s*\,\s*/);
         assert(rx.length <= 2, `Wrong #each expression '${data.value}'`);
         itemName = rx[0];
         indexName = rx[1] || '$index';
+        if(keyName) {
+            if(keyName == itemName) keyFunction = 'noop';
+            else makeKeyFunction({[itemName]: '$$item', [indexName]: '$index'});
+        }
     }
     assert(isSimpleName(itemName), `Wrong name '${itemName}'`);
     assert(isSimpleName(indexName), `Wrong name '${indexName}'`);
 
-    let keyFunction = null;
-    if(keyName == itemName) {
-        keyName = null;
-        keyFunction = 'noop';
-    }
-    if(keyName) assert(detectExpressionType(keyName) == 'identifier', `Wrong key '${keyName}'`);
-
-    if(keyName) {
-        this.detectDependency(keyName);
-        keyFunction = xNode('function', {
-            inline: true,
-            arrow: true,
-            args: [itemName, 'i'],
-            body: [xNode('block', {
-                index: indexName,
-                key: keyName
-            }, (ctx, data) => {
-                if(data.key == data.index) ctx.writeLine('return i;');
-                else ctx.writeLine(`return ${data.key};`);
-            })]
-        });
-    }
     let bind;
     if(itemData.source) {
         bind = xNode('function', {
@@ -5318,7 +5337,7 @@ function attachSlot(slotName, label, node) {
                 ctx.build(n.placeholder);
             });
             ctx.write(true, '}');
-        } else if(hasDynProps && !this.config.immutable) ctx.write(`, 0`);
+        } else if(hasDynProps && !this.config.immutable) ctx.write(`, null`);
         if(hasDynProps && !this.config.immutable) ctx.write(`, $runtime.$$compareDeep`);
         ctx.write(');\n');
     });

package/malina.js

@@ -20,7 +20,7 @@
 
     function toCamelCase(name) {
         assert(name[name.length - 1] !== '-', 'Wrong name');
-        return name.replace(/(\-\w)/g, function(part) {
+        return name.replace(/(?<!-)(\-\w)/g, function(part) {
             return part[1].toUpperCase();
         });
     }
@@ -56,19 +56,10 @@
         let ast = acorn.parse(name, {allowReturnOutsideFunction: true});
 
         function checkIdentificator(body) {
-            if(body.length != 1) return;
-            if(body[0].type != 'ExpressionStatement') return;
-            if(body[0].expression.type != 'Identifier') return;
-            return true;
-        }
-
-        function checkMemberIdentificator(body) {
             if(body.length != 1) return;
             if(body[0].type != 'ExpressionStatement') return;
             let obj = body[0].expression;
-            if(obj.type != 'MemberExpression') return;
-            if(obj.property.type != 'Identifier') return;
-            return true;
+            return obj.type == 'Identifier' || obj.type == 'MemberExpression';
         }
 
         function checkFunction(body) {
@@ -80,7 +71,6 @@
         }
 
         if(checkIdentificator(ast.body)) return 'identifier';
-        if(checkMemberIdentificator(ast.body)) return 'identifier';
         if(checkFunction(ast.body)) return 'function';
 
         return;
@@ -302,7 +292,7 @@
 
     const replaceElementKeyword = (exp, fn) => {
         let changed = false;
-        let r = parseJS(exp, (n, pk) => {
+        let r = parseJS(exp).transform((n, pk) => {
             if(n.type != 'Identifier') return;
             if(pk == 'property' || pk == 'params') return;
             if(n.name != '$element') return;
@@ -313,38 +303,42 @@
     };
 
 
-    const parseJS = (exp, fn) => {
-        let result = {};
-        let ast = result.ast = acorn.parse(exp, {sourceType: 'module', ecmaVersion: 12});
+    const parseJS = (exp) => {
+        let self = {};
+        self.ast = acorn.parse(exp, {sourceType: 'module', ecmaVersion: 12});
 
-        const rec = (n, pk) => {
-            let self;
-            if(n.type) {
-                self = n;
-                fn?.(n, pk);
-            }
-
-            for(let k in n) {
-                if(k == '_parent') continue;
-                let v = n[k];
-                if(v == null || typeof(v) != 'object') continue;
-                if(Array.isArray(v)) {
-                    v.forEach(i => {
-                        i._parent = self || n._parent;
-                        rec(i, k);
-                    });
-                } else {
-                    v._parent = self || n._parent;
-                    rec(v, k);
+        self.transform = function(fn) {
+            const rec = (n, pk) => {
+                let self;
+                if(n.type) {
+                    self = n;
+                    fn?.(n, pk);
                 }
-            }
+        
+                for(let k in n) {
+                    if(k == '_parent') continue;
+                    let v = n[k];
+                    if(v == null || typeof(v) != 'object') continue;
+                    if(Array.isArray(v)) {
+                        v.forEach(i => {
+                            i._parent = self || n._parent;
+                            rec(i, k);
+                        });
+                    } else {
+                        v._parent = self || n._parent;
+                        rec(v, k);
+                    }
+                }
+            };
+            rec(self.ast, null);
+
+            return self;
         };
-        rec(ast, null);
 
-        result.build = (data) => {
-            return astring.generate(data || ast);
+        self.build = function(data) {
+            return astring.generate(data || self.ast);
         };
-        return result;
+        return self;
     };
 
 
@@ -5013,7 +5007,7 @@
         assert(rx, `Wrong #each expression '${data.value}'`);
         let arrayName = rx[1];
         let right = rx[2];
-        let keyName;
+        let keyName, keyFunction = null;
 
         // get keyName
         rx = right.match(/^(.*)\s*\(\s*([^\(\)]+)\s*\)\s*$/s);
@@ -5023,61 +5017,86 @@
         }
         right = right.trim();
 
-        let itemName, indexName, bind0 = null;
-        if(right[0] == '{') {
-            rx = right.match(/^(\{[^}]+\})(.*)$/s);
-            assert(rx, `Wrong #each expression '${data.value}'`);
-            let exp = rx[1], keywords;
+        const makeKeyFunction = (keyLink) => {
+            const e = parseJS(keyName).transform((n, pk) => {
+                if(n.type != 'Identifier') return;
+                if(pk == 'property') return;
+                let r = keyLink[n.name];
+                if(r) n.name = r;
+            });
+            let exp = e.build(e.ast.body[0].expression);
+            keyFunction = xNode('key-function', {
+                exp
+            }, (ctx, n) => {
+                ctx.write(`($$item, $index) => ${n.exp}`);
+            });
+        };
 
+        let itemName, indexName, bind0 = null;
+        if(right[0] == '{' || right[0] == '[') {
+            let keywords, unwrap;
             try {
-                keywords = acorn.parse(`(${exp} = $$item)`, {sourceType: 'module', ecmaVersion: 12}).body[0].expression.left.properties.map(p => p.key.name);
+                let exp = `[${right}]`;
+                let e = parseJS(exp);
+                assert(e.ast.body.length == 1);
+
+                itemName = '$$item';
+                let n = e.ast.body[0];
+                let a = n.expression.elements[0];
+                unwrap = exp.substring(a.start, a.end);
+                if(n.expression.elements.length == 1) {
+                    indexName = '$index';
+                } else {
+                    assert(n.expression.elements.length == 2);
+                    let b = n.expression.elements[1];
+                    assert(b.type == 'Identifier');
+                    indexName = exp.substring(b.start, b.end);
+                }
+
+                e = parseJS(`(${unwrap} = $$item)`);
+                let l = e.ast.body[0].expression.left;
+                if(l.type == 'ArrayPattern') {
+                    keywords = l.elements.map(p => p.name);
+
+                    if(keyName) {
+                        let keyLink = {};
+                        for(let i in keywords) keyLink[keywords[i]] = `$$item[${i}]`;
+                        makeKeyFunction(keyLink);
+                    }
+                } else {
+                    assert(l.type == 'ObjectPattern');
+                    keywords = l.properties.map(p => p.key.name);
+
+                    if(keyName) {
+                        let keyLink = {};
+                        for(let k of keywords) keyLink[k] = `$$item.${k}`;
+                        makeKeyFunction(keyLink);
+                    }
+                }
             } catch (e) {
                 throw new Error('Wrong destructuring in each: ' + data.value);
             }
 
-            itemName = '$$item';
-            indexName = rx[2].trim();
-            if(indexName[0] == ',') indexName = indexName.substring(1).trim();
-            indexName = indexName || '$index';
-
             bind0 = xNode('each:unwrap', {
-                exp,
+                unwrap,
                 keywords
             }, (ctx, n) => {
                 ctx.writeLine(`let ${n.keywords.join(', ')};`);
-                ctx.writeLine(`$runtime.prefixPush($ctx.cd, () => (${n.exp} = $$item));`);
+                ctx.writeLine(`$runtime.prefixPush($ctx.cd, () => (${n.unwrap} = $$item));`);
             });
         } else {
             rx = right.trim().split(/\s*\,\s*/);
             assert(rx.length <= 2, `Wrong #each expression '${data.value}'`);
             itemName = rx[0];
             indexName = rx[1] || '$index';
+            if(keyName) {
+                if(keyName == itemName) keyFunction = 'noop';
+                else makeKeyFunction({[itemName]: '$$item', [indexName]: '$index'});
+            }
         }
         assert(isSimpleName(itemName), `Wrong name '${itemName}'`);
         assert(isSimpleName(indexName), `Wrong name '${indexName}'`);
 
-        let keyFunction = null;
-        if(keyName == itemName) {
-            keyName = null;
-            keyFunction = 'noop';
-        }
-        if(keyName) assert(detectExpressionType(keyName) == 'identifier', `Wrong key '${keyName}'`);
-
-        if(keyName) {
-            this.detectDependency(keyName);
-            keyFunction = xNode('function', {
-                inline: true,
-                arrow: true,
-                args: [itemName, 'i'],
-                body: [xNode('block', {
-                    index: indexName,
-                    key: keyName
-                }, (ctx, data) => {
-                    if(data.key == data.index) ctx.writeLine('return i;');
-                    else ctx.writeLine(`return ${data.key};`);
-                })]
-            });
-        }
         let bind;
         if(itemData.source) {
             bind = xNode('function', {
@@ -5319,7 +5338,7 @@
                     ctx.build(n.placeholder);
                 });
                 ctx.write(true, '}');
-            } else if(hasDynProps && !this.config.immutable) ctx.write(`, 0`);
+            } else if(hasDynProps && !this.config.immutable) ctx.write(`, null`);
             if(hasDynProps && !this.config.immutable) ctx.write(`, $runtime.$$compareDeep`);
             ctx.write(');\n');
         });
@@ -5898,7 +5917,7 @@
         return {event, fn};
     }
 
-    const version = '0.6.53';
+    const version = '0.6.56';
 
 
     async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.6.53",
+  "version": "0.6.56",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",

package/runtime.js

@@ -510,7 +510,7 @@ const bindText = (cd, element, fn) => {
 
 const bindStyle = (cd, element, name, fn) => {
     $watchReadOnly(cd, fn, (value) => {
-        element.style[name] = value;
+        element.style.setProperty(name, value);
     });
 };