CHANGELOG.md

Changelog

• 0.64.0

  • Properties

    div [style.backgroundColor] = 'red';

• 0.60.0

  • Await statements, components and also modules

    define Foo {
        function async onRenderStart () {
            this.model = await LoadUserExample();
        }
        h4 > '~userName'
    }
    
    // Component
    await Foo {
        @progress > i > 'Loading user';
    }
    
    // Promises
    await (this.getCurrentUser()) {
        @progress > i > 'Loading user';
        @done (user) {
            h4 > '~user.userName'
        }
        @fail (error) {
            .danger > '~error.message'
        }
    }
    
    // Modules
    import async Foo from './Foo';
    
    heading > 'Some heading'
    await Foo {
        @progress > 'Loading and initilizing the module'
    }

• 0.58.0

  • Decorators for methods and nodes

    [IsAuthorized]
    div > 'Hello ~user'
    
    [LogCall]
    function doSmth () {
        // ...
    }

  • Async and Private methods. For browsers which do not yet support async/await es2017 feature, please use postmask-babel plugin.

    slot private async upload () {
        await MyService.doSmth();
    }

-0.57.13

+ **Modules**
    + Namespace routing

        ```mask
        import FooService from services;

        h4 > '~FooService.doSmth()'
        ```

        You can also configurate the base path for the routing, e.g. `mask.Module.cfg('baseNs', '/src/')`

        > If the module is not loaded or not set to the namespace repository, we will load it for you by the resolved path, e.g. `'/src/services/FooService.js'`

    + Prefix routing

        ```mask
        import MyButton from '@controls/MyButton';
        MyButton x-tap='clicked';
        ```

        You have to configurate the prefix first, e.g.:

        ```js
        mask.Module.cfg('prefixes.controls', '/src/controls/{0}/{1}.mask');
        ```

• 0.57.0

  • Typa annotations for arguments: (argumentName: argumentType, ...)

    import * as IFoo from '/service/IFoo.js';
    import * as IBar from '/service/IBar.js';
    define MyCompo (foo: IFoo) {
        function constructor (bar: IBar) {
            this.bar = bar;
        }
        span > `~[foo.someMethod()]`
    }

• 0.56.0

  • Functions now receive the scope with imports and defines arguments

    import * as Service from '/services/UserService.js';
    define UserEditor (user) {
    
        slot save () {
            Service
                .changeUserName(user.id, user.name)
                .then(() => console.log('saved!'));
        }
    
        input > dualbind value='user.name';
        button x-tap=save > 'Save'
    }

• 0.55.1

  • Mixed markup: HTML can be used within Mask markup, and Mask can be used within HTLM

        section {
            <h4> Html Markup </h4>
        }
        // or
        <section>
            <mask>
                h4 > 'Mask markup'
            </mask>
        </section>

• 0.55.0

  • Async imports.

    import async Foo from './Foo.mask';
    h4 > 'MyHeader'
    await Foo;

    h4 header is rendered during the Foo may still being loaded.

  • define and let support arguments

    define Foo (user) {
        h4 > '~user.name'
    }
    
    Foo(me);

    mask.render(template, { me: { name: 'TestUser' }});

• 0.53.8

  • Expressions: Support bitwise operators
  • Components: Animatable attributes

• 0.52.4

  • SVG renderer

• 0.51

  • Better debugging for slot function event handlers

  • event handler: accept additional parameters, e.g.:

    event press: enter (e)  {
    
    }

  • Better component scoping with let directive

• 0.12.19

  • Modules of different types

    import qux from 'baz';
    import * as Foo  from './bar.mask'
    import * as Bic  from 'script.js';
    import from 'app.css';
    import * as AboutBlock from 'about.html';

  • HTML Parser

    Use also html for the templates

• 0.12.2

  • slot and event javascript handlers (handler)
  • style node syntax support with (style)
    • :host, :host() support
    • scoped css support (IE6+)

    section {
        style scoped {
            span {
                color: red;
            }
        }
        span > 'Hello World'
    }

• 0.9.6

  • Merge feature for better encapsulation, e.g:

      define :dialog {
          .wrapper > .modal {
              .modal-header {
                  @title;
                  .close;
              }
              .modal-content > @body;
          }
      }
      // ..
      :dialog {
          @title > 'Hello'
          @body  > 'World!'
      }

• 0.9.1

  • Expressions:

    • Accessors with Bracket notation: ~[foo[bar]],~[foo["key"]]

  • VarStatement:

        ul {
            var list = ['foo', 'bar'];
            for(key of list){
                li > '~[key]'
            }
        }
        /* renders to:
         * <ul><li>foo</li><li>bar</li></ul>
         */

• 0.9.0

  • Syntax: (statements)
    • if (expression) { ... } else if (expr) {} else {}
    • for (el of array) { ... }
    • for ((el,index) of array) { ... }
    • for (key in object) { ... }
    • for ((key, value) in object) { ... }
    • each (array) { ... }
    • with (obj.property.value) { ... }
    • switch (value) { case (expression) { ... } /*...*/ }
  • Controllers scoped model

• 0.8.1

  • To get components/context property values use special symbols:

    • '~[$c.compoName]' // component's property sample
    • '~[$a.id]' // component attribute's property sample
    • '~[$ctx.page.id]' // context's property sample

• 0.8.0

  • Async components. If a components needs to accomplish any async task, it can be done in renderStart/onRenderStart function using Compo.pause(this, ctx) / Compo.resume(this, ctx)

        mask.registerHandler(':asyncCompo', mask.Compo({
            onRenderStart: function(model, ctx){
                var resume = Compo.pause(this, ctx);
    
                someAsyncJob(function(){
                    resume();
                });
            }
        }));

---