build improvements. version support, map files generation

DOM.js

@@ -257,7 +257,7 @@ NS.apply = function(a,b) {
     D.ext = function(el, cfg) {
         cfg.el = el;
         if(cfg.cls){
-            anyTypeClsSetter(el, [el.className, cfg.cls])
+            cfg.cls = [el.className, cfg.cls];
         }
         return D.div(cfg);
     }
@@ -479,7 +479,7 @@ NS.apply = function(a,b) {
                 }else if(Array.isArray(token)){
                     tmp = D._cls(token, refs, depth+1);
                     // TODO check for push tmp
-                    tmp && out.push( token );
+                    tmp && out.push( tmp );
                 }else{
                     for(key in token){
                         if(token[key] === null)

build.js

@@ -15,7 +15,13 @@ const {minify} = require("terser"),
       rDOM
     },
 
-    hash = {};
+    hash = {},
+
+    {execSync} = require('child_process'),
+    commit = execSync( 'git rev-list --count HEAD' ).toString().trim()-0,
+
+    bigVersion = 1,
+    version = [bigVersion, commit/17|0, commit % 17];
 
 Object
   .values(build)
@@ -26,18 +32,31 @@ Object
   );
 
 (async function(){
-
-
   for( let outFileName in build ){
     let
-      dest = path.join( dir, outFileName )+'.js',
-      source = header +
+      dest = path.join( dir, outFileName )+'_'+version.join('.')+'.js',
+      latest = path.join( dir, outFileName )+'_latest.js',
+      source =
         (await minify(
-          build[ outFileName ].map( fileName => hash[ fileName ] ).join( ';' )
-        )).code;
-    fs.writeFileSync( dest, source );
-    console.log( `Build ${dest} ${( source.length / 1024 ).toFixed( 2 )}K` )
+          build[ outFileName ].map( fileName => hash[ fileName ] ).join( ';' ),
+          {
+            sourceMap: true,
+            format: {
+              preamble: header
+            },
+            ie8: false,
+            compress: {
+              passes: 2
+            }
+          }
+        )),
+      code = source.code,
+      map = source.map;
+
+    fs.writeFileSync( dest, code );
+    fs.writeFileSync( dest+'.map', map );
+    fs.writeFileSync( latest, code );
+    fs.writeFileSync( latest+'.map', map );
+    console.log( `Build ${dest} ${( code.length / 1024 ).toFixed( 2 )}K` )
   }
-
-
 })();
\ No newline at end of file

package.json

@@ -14,6 +14,11 @@
   "author": "",
   "license": "MPL-2.0",
   "dependencies": {
+    "simplest-dom": "^0.0.20",
     "terser": "^5.4.0"
+  },
+  "devDependencies": {
+    "mocha": "^8.2.1",
+    "chai": "^4.2.0"
   }
 }

test/dom-store.js

+var Dom = require('simplest-dom');
+global.document = new Dom();
+const assert = require('chai').assert;
+global.DocumentFragment = document.DocumentFragment;
+global.Element = DocumentFragment.prototype.constructor
+require('../DOM.js')
+const Observable = global.Observable = require('../Observer');
+
+const Store = require('../Store.js')
+var D = window.NS.D
+
+describe('DOM with Store', function(){
+  it( 'should create simple div with reactive value', function(){
+    var val = new Store.Value.String('c');
+    var div = D.div({}, val);
+    assert.equal(div.outerHTML, '<div data-hooked="yep">c</div>');
+    val.set('d');
+    assert.equal(div.outerHTML, '<div data-hooked="yep">d</div>');
+  } );
+
+  it( 'should set reactive cls', function(){
+    var val = new Store.Value.String('c'),
+        bool = new Store.Value.Boolean(false);
+    var div = D.div({cls: [{a: val, b: bool}]}, val);
+    assert.equal(div.outerHTML, '<div class="a" data-hooked="yep">c</div>');
+    bool.set(true);
+    assert.equal(div.outerHTML, '<div class="a b" data-hooked="yep">c</div>');
+    bool.set(false);
+    assert.equal(div.outerHTML, '<div class="a" data-hooked="yep">c</div>');
+  } );
+
+  it( 'should extend reactive cls', function(){
+    var div = D.div( { cls: 'abc' }, 'in' );
+    assert.equal(div.outerHTML, '<div class="abc">in</div>');
+    D.ext(div, {cls: ['2']})
+    assert.equal(div.outerHTML, '<div class="abc 2">in</div>');
+
+    var bool = new Store.Value.Boolean(true);
+    D.ext(div, {cls: [{x: bool}]})
+    assert.equal(div.outerHTML, '<div class="abc 2 x">in</div>');
+
+    bool.set(false);
+    assert.equal(div.outerHTML, '<div class="abc 2">in</div>');
+  });
+
+});
\ No newline at end of file

test/dom.js

+var Dom = require('simplest-dom');
+global.document = new Dom();
+global.DocumentFragment = document.DocumentFragment;
+require('../DOM.js')
+
+var D = window.NS.D
+const assert = require('chai').assert;
+
+describe('DOM lib', function(){
+  it( 'should create simple div', function(){
+    var div = D.div({cls: '1'});
+    assert.equal(div.outerHTML, '<div class="1"></div>');
+  } );
+
+  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>');
+  } );
+
+  it( 'should create simple div with attributes', function(){
+    var div = D.div({'data-test': '123'});
+    assert.equal(div.outerHTML, '<div data-test="123"></div>');
+  } );
+
+  it( 'should create nested divs', function(){
+    var div = D.div({cls: 'a'},
+      D.div({cls: 'b'}),
+      D.div({cls: 'c'}, D.div({cls: 'd'}))
+    );
+    assert.equal(div.outerHTML, '<div class="a"><div class="b"></div><div class="c"><div class="d"></div></div></div>');
+  } );
+
+  it( 'events', function(){
+    var clicked = 0
+    var div = D.div({onclick: ()=>clicked++});
+    div.click();
+
+    assert.equal(clicked, 1);
+  } );
+});
\ No newline at end of file