malinajs 0.6.57 → 0.6.60

package/compile.js

@@ -18,9 +18,10 @@ function assert(x, info) {
 }
 
 function toCamelCase(name) {
-    assert(name[name.length - 1] !== '-', 'Wrong name');
-    return name.replace(/(?<!-)(\-\w)/g, function(part) {
-        return part[1].toUpperCase();
+    assert(last(name) !== '-', 'Wrong name');
+    return name.replace(/(.\-\w)/g, function(part) {
+        if(part[0] == '-') return part;
+        return part[0] + part[2].toUpperCase();
     });
 }
 function Q(s) {
@@ -3869,6 +3870,7 @@ function processCSS() {
                             }
                         } else cleanSelectorItems.push(s);
                     }
+                    while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(cleanSelectorItems[0].type)) cleanSelectorItems.shift();
                     while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(last(cleanSelectorItems).type)) cleanSelectorItems.pop();
                     if(!cleanSelectorItems.length || globalBlock) {  // fully global?
                         assert(origin.length);
@@ -4025,7 +4027,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:')) {
@@ -4102,12 +4107,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;
 };
 

package/malina.js

@@ -19,9 +19,10 @@
     }
 
     function toCamelCase(name) {
-        assert(name[name.length - 1] !== '-', 'Wrong name');
-        return name.replace(/(?<!-)(\-\w)/g, function(part) {
-            return part[1].toUpperCase();
+        assert(last(name) !== '-', 'Wrong name');
+        return name.replace(/(.\-\w)/g, function(part) {
+            if(part[0] == '-') return part;
+            return part[0] + part[2].toUpperCase();
         });
     }
     function Q(s) {
@@ -3870,6 +3871,7 @@
                                 }
                             } else cleanSelectorItems.push(s);
                         }
+                        while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(cleanSelectorItems[0].type)) cleanSelectorItems.shift();
                         while(cleanSelectorItems.length && ['WhiteSpace', 'Combinator'].includes(last(cleanSelectorItems).type)) cleanSelectorItems.pop();
                         if(!cleanSelectorItems.length || globalBlock) {  // fully global?
                             assert(origin.length);
@@ -4026,7 +4028,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:')) {
@@ -4103,12 +4108,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;
     };
 
@@ -5917,7 +5926,7 @@
         return {event, fn};
     }
 
-    const version = '0.6.57';
+    const version = '0.6.60';
 
 
     async function compile(source, config = {}) {

package/package.json

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

package/readme.md

@@ -1,7 +1,7 @@
 
 ## Malina.js
 
-<img align="right" width="200" height="200" src="malinajs2.png" />
+<img align="right" width="200" height="200" src="https://github.com/malinajs/malinajs/raw/master/malinajs2.png" />
 
 Malina.js builds your web-application to use it **without framework on frontend side**. Therefore your web-app becomes thinner and faster, and the application itself consist of **vanilla JavaScript**, look at [examples](https://malinajs.github.io/repl/). [TodoMVC example](https://malina-todomvc.surge.sh) **2.7kb** (gzipped) and [source code](https://github.com/malinajs/todomvc)
 

package/runtime.js

@@ -748,6 +748,18 @@ const unwrapProps = (cd, props, fn) => {
     }
 };
 
+
+const mount = (label, component, option) => {
+    const app = component(label, option);
+    const destroy = () => label.textContent = '';
+
+    if(app?._d) {
+        app._d.push(destroy);
+        return app;
+    }
+    return {destroy};
+};
+
 function $$htmlBlock($cd, tag, fn) {
     let lastElement;
     let create = (html) => {
@@ -947,4 +959,4 @@ function $$eachBlock($parentCD, label, onlyChild, fn, getKey, itemTemplate, bind
     }, {ro: true, cmp: $$compareArray});
 }
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlToFragment, $$htmlToFragmentClean, $$ifBlock, $$removeElements, $$removeItem, $ChangeDetector, $base, $context, $digest, $insertElementByOption, $makeEmitter, $onDestroy, $onMount, $readOnlyBase, $tick, $watch, $watchReadOnly, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachSlot, attachSlotBase, attchExportedFragment, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindInput, bindStyle, bindText, callComponent, cd_onDestroy, childNodes, cloneDeep, configure, createTextNode, current_component, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, insertAfter, isArray, isFunction, keyComparator, makeClassResolver, makeComponent, makeExternalProperty, makeSlot, makeSlotStatic, noop, observeProps, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlToFragment, $$htmlToFragmentClean, $$ifBlock, $$removeElements, $$removeItem, $ChangeDetector, $base, $context, $digest, $insertElementByOption, $makeEmitter, $onDestroy, $onMount, $readOnlyBase, $tick, $watch, $watchReadOnly, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachSlot, attachSlotBase, attchExportedFragment, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindInput, bindStyle, bindText, callComponent, cd_onDestroy, childNodes, cloneDeep, configure, createTextNode, current_component, eachDefaultKey, exportFragment, fire, firstChild, getFinalLabel, insertAfter, isArray, isFunction, keyComparator, makeClassResolver, makeComponent, makeExternalProperty, makeSlot, makeSlotStatic, mount, noop, observeProps, prefixPush, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };