BNfantasy.js

// Block
BN
  .decl('main-page', 'mod', 'val') // mod and val are optional, but maybe we should prohibit modifications for javascript and use it only as CSS\DOM states

  .deps('page', 'content') // Maybe depricated

  .extends('page', 't-block') // Multiple inheritance: for data and view - complicate, for methods - override
  
  // Initial code, e.g. for pages router - runs after block been declarated. alt names - 'runs', 'runAfterDecl'
  .init(function () {
      BN('router').addRoute('/some/:route', BN('main-page'));
  })

  .data(function (ctx, params) { // If one function - use it for block, also you can pass {block: fn, elem: {name: fn}} arg
      // General case for defer rendrering
      ctx.defer(Vow.promise());
      // Or
      // Shortcuts for different transports. Can use client proxy like ajax-proxy
      ctx.ws(); // Maybe web-socket
      ctx.db(); // Maybe database - for standalone, fullstack projects
      ctx.model(query); // Maybe model, like in Derby.js
      ctx.api('api-name', 'get', params); // Shortcuts for declarated API's
      ctx.http({ //HTTP[S] requests
          method: 'GET',
          url: '/user/' + params.id,
          resultTo: 'user' // Put results in this params field
      })
      // 'Then' aslo available
      .then(function (ctx, params) {
        if (!params.user) {
          ctx.remove();
        }
      });
    })
  
  .template({
      block: function (ctx, params) {
          ctx
              .tag('ul')
              .content(Object.keys(params.user).map(function (key) {
                  return {
                      elem: 'line',
                      key: key,
                      value: params.user[key]
                  }
              }));
      },
      elems: {
          line: function (ctx, params) {
              ctx
                  .tag('ul')
                  .content({
                      elem: 'key',
                      tag: 'b',
                      content: {
                        elem: params.key, // weight for databind
                        content: params.key
                      }
                  }, {
                      elem: 'value',
                      content: params.value
                  })
          }
      }
  })
  
  // For static properties and methods
  .statical({
      icount: 0,
      getTest: function (n) {
          return this.icount * n;
      }
  })
  
  // For instance properties and methods  
  .instance({
      weight: 1,
      getMath: function () {
          return this.weight * this.__base('page')(); // You can call base from any super block
      }
  })

  // Databindings?
  .dataBind({
      user: { // Model
          weight: { // Field
              elem: 'weight' // --> autoupdate content for element
              // Or functions
              get: function () {
                  return this.weight * 10;
              },
              set: fucntion (w) {
                  this.weight = w / 10;
              }
          }
      }
  })
  
  // For instance states (onSetMod) 
  .states({
      js: function () {
          console.log(this.weight === 1); // true
      }
  })
  
  // Big sugar - additional selector for events. "this" is instance
  .handlers({ // Maybe will be better add handler sugar support at `instance` declaration
      //Typical jquery DOM event
      '.class hover': function (e) {

      },
      
      // Channel event
      '@channel update': function (e) {

      },
      
      // On set mod handler, duplicates or extends .states({})
      '_mod value': function (e) {

      },
      
      // Inner element event?
      '__elem event': function (e) {

      },
      
      // Inner block event
      '$inner-block change': function (e) {
          console.log(this.weight === 1); // true
          this.state('test', 'yes');
      }
  });

I should think about multiple modifications