malinajs 0.6.55 → 0.6.58

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

@@ -291,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;
@@ -302,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;
 };
 
 
@@ -1243,7 +1247,7 @@ function transform() {
     function walk(node, parent, fn) {
         if(typeof node !== 'object') return;
 
-        if(node._apply) return;
+        if(node._apply && node.type == 'ExpressionStatement') return;
         node._parent = parent;
         let forParent = parent;
         if(node.type) {
@@ -4021,7 +4025,10 @@ function makeDom(data) {
             let n = new Node(e.name, {__node: e});
             e.attributes.forEach(a => {
                 if(a.name == 'class') {
-                    if(a.value != null) n.className += ' ' + a.value;
+                    if(a.value != null) {
+                        if(a.value.includes('{')) n.dynClass = true;
+                        else n.className += ' ' + a.value;
+                    }
                     n.attributes[a.name] = a.value;
                 } else if(a.name == 'id') n.attributes.id = n.id = a.value;
                 else if(a.name.startsWith('class:')) {
@@ -4098,12 +4105,16 @@ Node.prototype.getElementsByClassName = function(names) {
     if(names.length != 1) throw 'Not supported';
     let cls = names[0];
 
+    let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
     let result = [];
-    this.childNodes.forEach(n => {
-        let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
-        if(rx.test(n.className)) result.push(n);
-        result.push.apply(result, n.getElementsByClassName(cls));
-    });
+    const walk = (node) => {
+        node.childNodes.forEach(n => {
+            if(n.dynClass) result.push(n);
+            else if(rx.test(n.className)) result.push(n);
+            walk(n);
+        });
+    };
+    walk(this);
     return result;
 };
 
@@ -5002,7 +5013,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);
@@ -5012,61 +5023,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', {

package/malina.js

@@ -292,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;
@@ -303,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;
     };
 
 
@@ -1244,7 +1248,7 @@
         function walk(node, parent, fn) {
             if(typeof node !== 'object') return;
 
-            if(node._apply) return;
+            if(node._apply && node.type == 'ExpressionStatement') return;
             node._parent = parent;
             let forParent = parent;
             if(node.type) {
@@ -4022,7 +4026,10 @@
                 let n = new Node(e.name, {__node: e});
                 e.attributes.forEach(a => {
                     if(a.name == 'class') {
-                        if(a.value != null) n.className += ' ' + a.value;
+                        if(a.value != null) {
+                            if(a.value.includes('{')) n.dynClass = true;
+                            else n.className += ' ' + a.value;
+                        }
                         n.attributes[a.name] = a.value;
                     } else if(a.name == 'id') n.attributes.id = n.id = a.value;
                     else if(a.name.startsWith('class:')) {
@@ -4099,12 +4106,16 @@
         if(names.length != 1) throw 'Not supported';
         let cls = names[0];
 
+        let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
         let result = [];
-        this.childNodes.forEach(n => {
-            let rx = RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
-            if(rx.test(n.className)) result.push(n);
-            result.push.apply(result, n.getElementsByClassName(cls));
-        });
+        const walk = (node) => {
+            node.childNodes.forEach(n => {
+                if(n.dynClass) result.push(n);
+                else if(rx.test(n.className)) result.push(n);
+                walk(n);
+            });
+        };
+        walk(this);
         return result;
     };
 
@@ -5003,7 +5014,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);
@@ -5013,61 +5024,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', {
@@ -5888,7 +5924,7 @@
         return {event, fn};
     }
 
-    const version = '0.6.55';
+    const version = '0.6.58';
 
 
     async function compile(source, config = {}) {

package/package.json

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