Mask - Template language

home edit

Mask is an open source template language created in 2012.

#717on PLDB

12Years Old

306Repos

Download source code:

git clone https://github.com/atmajs/maskjs

Homepage · Source Code

Markup | Template | HMVC

Tags: template language
Mask is developed on GitHub and has 92 stars
There are at least 306 Mask repos on GitHub
Early development of Mask happened in https://github.com/atmajs
Mask is written in TypeScript, JavaScript, JSON, HTML, Markdown, YAML, CSS, Ini
The Google BigQuery Public Dataset GitHub snapshot shows 576 users using Mask in 595 repos on GitHub
Pygments supports syntax highlighting for Mask
GitHub supports syntax highlighting for Mask
atmajs.com was registered in 2013

Example from Linguist:


// HTML Elements
header {
    
    img .logo src='/images/~[currentLogo].png' alt=logo;
    
    h4 > 'Bar View'
    
    if (currentUser) {
        
        .account >
            a href='/acount' >
                'Hello, ~[currentUser.username]'
    }
}

.view {
    ul {
       
        // Iteration
        for ((user, index) of users) {
            
            li.user data-id='~[user.id]' {
                
                // interpolation
                .name > '~[ user.username ]'
                
                // expression
                .count > '~[: user.level.toFixed(2) ]'
                
                // util
                /* Localization sample
                 * lastActivity: "Am {0:dd. MM} war der letzte Eintrag"
                 */
                .date > '~[ L: "lastActivity",  user.date]'
            }
        }
    }
    
    // Component
    :countdownComponent {
        input type = text >
            :dualbind value='number';
            
        button x-signal='click: countdownStart' > 'Start';
        
        h5 {
            '~[bind: number]'
            
            :animation x-slot='countdownStart' {
                @model > 'transition | scale(0) > scale(1) | 500ms'
                @next  > 'background-color | red > blue | 2s linear'
            }
        }
    }
}

footer > :bazCompo {
    
    'Component generated at ~[: $u.format($c.date, "HH-mm") ]'
}

Language features

Feature	Supported	Example	Token
MultiLine Comments	✓	/* A comment */	/* */
Comments	✓	// A comment
Line Comments	✓	// A comment	//
Semantic Indentation	X