1.2 Mask

About

Mask is reversed HTML with little CSS and JavaScript syntax. But not the syntax is the key point of the MaskJS - but the performance: the way how the Parser works, how the Builder creates a Shadow DOM and then inserts into the live DOM - these all make the application start up significant faster then any other approach. Also, worth to mention, the Parser works same on Node.js and a modified Builder creates the Shadow DOM-alike AST, and then renders HTML. And the 2-Phase initialization of a Component allows it to be truly isomorphic.

---

☰

• 1 Comments
• 2 Literals
• 3 Nodes
  • 3.1 Declaration
  • 3.2 Attributes
  • 3.3 Expression
• 4 ChildNodes
• 5 Custom Syntax
  • 5.1 script
  • 5.2 style
  • 5.3 function
  • 5.4 event
  • 5.5 slot
  • 5.6 var

1 Comments

// single line comment
/*
  Multiline comment
*/

2 Literals

'Foo'
"Foo"
"""
  Multiline with any '"' inside
"""
'''
  Multiline with any '"' inside
'''

3 Tags / Components

3.1 Declaration

<!-- html -->
<div id='foo' class='bar qux' name='quux' hidden></div>

// mask
div id='foo' class='bar qux' name='quux' hidden;

Pretty similar, right? Any formatting possible in HTML, is also possible in Mask: new lines, spaces, etc.

• sugar For the id and class attributes can be used CSS syntax: #id, .class

   div#foo.bar.qux name='quux' hidden;

• sugar If a tag begins with #id or .class, the the tag name can be omitted. Mask Parser will guess the tagName. Default is div, inside ul the guessed tagName is li, and so on.

   #foo.bar.qux name='quux' hidden;

3.2 Attributes

Like in HTML:

• ' and " are used for values,
• When attributes value contains no whitespace, quotes are not required.
• Attributes value is also not required, like in HTML.
• Attributes value can contain new lines

section
	name=foo
	style = '
		border: 1px solid green;
		background: url("foo.png") no-repeat;
	';

3.3 Expression

A node can have an expression enclosed in Parentheses (), and the syntax inside depends on the particular node type

log (foo.name);

4 Childnodes

• No childnodes. As from examples above, if a tag has no children, it should be closed with ; (semicolon).

• Childnodes. To define children of a tag, {} (brackets) blocks are used, just like in JS, CSS, LESS, etc.

   <section>
   	<input type='text' placeholder='Lorem ipsum' />
   	<input
   		type = submit
   		value = 'Do some work' />
   </section>

   section {
   	input type='text' placeholder='Lorem ipsum';
   	input
   		type = submit
   		value = 'Do some work' ;
   }

• sugar (Better readability) You can use > (like in CSS) if a node has only one child.

   <div class='dialog-backdrop'>
   	<div class='dialog-panel'>
   		<header>
   			Hello
   		</header>
   		<section>
   			<img src='/baz.png' />
   		</section>
   	</div>
   </div>

   // blocks
   .dialog-backdrop {
   	.dialog-panel {
   		header  {
   			'Hello'
   		}
   		section {
   			img src='/baz.png';
   		}
   	}
   }

   .dialog-backdrop > .dialog-panel {
   	header  > 'Hello'
   	section > img src='/baz.png';
   }

5 Custom Syntax

There are Node Handlers, which implement some custom syntax parsing.

5.1 Script

script {
	console.log('That is javascript');
}

5.2 Style

style {
	#foo {
		background: red;
	}
}

5.3 Function

function barQux (txt) {
	console.log(txt);
}

5.4 Event

button {
	event click (event) {
		event.currentTarget.style.display = 'none';
	}
}

5.5 Slot

slot logSelf () {
	console.log(this);
}

button x-tap='logSelf' >
	'Print component to the console'

5.6 Slot

var myArr = [1, 2, 3, 4];

ul > each(myArr) > 'Number: ~[.]'

---

🏁