Support of async hook functions. Covered by test

DOM.js

@@ -61,7 +61,10 @@ NS.apply = function(a,b) {
 
     var anyTypeClsSetter = function(el, cls) {
         if(typeof cls === 'function'){
-            cls(setters.cls(el));
+            var setter = setters.cls(el);
+            var result = cls(setter);
+            if(result instanceof _Promise)
+              result.then(setter);
         }else if(typeof cls === 'object' && cls.hook){
             cls.hook(setters.cls(el));
         }else if(typeof cls === 'object'){
@@ -436,6 +439,10 @@ NS.apply = function(a,b) {
 
                     };
                     release = subEl( hookFn );
+                    if(release instanceof _Promise){
+                      // TODO CHECK IF LEAKING
+                      release.then(hookFn);
+                    }
                     isNotFragment && el.__un.push(release);
                 }
             }else if( subEl !== void 0 && subEl !== false && subEl !== null ){
@@ -531,6 +538,8 @@ NS.apply = function(a,b) {
                 }
             }else if(typeof token === 'function'){
                 args[i] = DataPieceFactory(refs, args[i]);
+            }else if(typeof token === 'number'){
+              out.push( token +'');
             }
         }
         return depth === 0 && refs.length ? D.__cls(args, refs): out.join(' ');

README.md

@@ -10,6 +10,9 @@ There is a <a href="https://www.npmjs.com/package/cms-tapir">cms-tapir package</
 
 Library is capable of using reactive values.
 
+Properties and children can be defined as functions. If function is presented — it would be called with a callback parameter. When callback parameter is called with some value — parameter would be updated with this value.
+
+Async functions are also supported.
 
 # Store
 

package.json

 {
   "name": "react-vanilla",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "",
   "main": "DOM.js",
   "scripts": {
@@ -21,6 +21,6 @@
     "nyc": "^15.1.0",
     "express": "*",
     "terser": "^5.4.0",
-    "simplest-dom": "^0.0.20"
+    "simplest-dom": "^0.0.23"
   }
 }

test/dom.js

@@ -3,6 +3,12 @@ global.document = new Dom();
 global.DocumentFragment = document.DocumentFragment;
 require('../DOM.js')
 
+var delay = async function(delay = 100){
+    await new Promise(function(resolve, reject){
+      setTimeout(resolve, delay)
+    });
+};
+
 var D = window.NS.D
 const assert = require('chai').assert;
 
@@ -14,7 +20,8 @@ describe('DOM lib', function(){
 
   it( 'should create simple div with child', function(){
     var div = D.div({cls: 'a b'}, 'c');
-    assert.equal(div.outerHTML, '<div class="a b">c</div>');
+    var result = div.outerHTML;
+    assert.equal(result, '<div class="a b">c</div>');
   } );
 
   it( 'should create simple div with attributes', function(){
@@ -30,6 +37,22 @@ describe('DOM lib', function(){
     assert.equal(div.outerHTML, '<div class="a"><div class="b"></div><div class="c"><div class="d"></div></div></div>');
   } );
 
+  it( 'should work with async', async function(){
+
+      var div = D.div({
+          cls: async () => ((await delay(100)), 1) },
+          async () => ((await delay(100)), 10)
+      );
+      await delay(200);
+
+      if(div.outerHTML !== '<div data-hooked="yep" class="1">10</div>')
+        throw new Error(div.outerHTML);
+      else
+        return true;
+
+
+  } );
+
   it( 'events', function(){
     var clicked = 0
     var div = D.div({onclick: ()=>clicked++});