syntax.mask

//### COMMENTS
/** 
 * Block comment
 */
// Income comment

//### LITERALS

// - Single
'Foo'
// - Block
""" 
   with quotes ""
   qux
"""

// ### TAGS
// - Single
div;

// - class, id
span.foo-class #id;

// - only class, id
#id .qux;

// - attribute
input autofocus value='Foo' data-test=quoteLess
	// inline comment
	other = attribute;

// - single child
div > span;
// - more children
h4 {
	i > 'Foo'
	footer { hr; }
}

// ### Interpolations
// - in literal
'Foo: ~name ~[name] ~[bind: name] ~[name + " hello "] ~[ _.L("lokalize-util") ]'
// - in attribute
div name = '~name ~[name] ~[bind: name] ~[name + " hello "] ~[ _.L("lokalize-util") ]';


// ### STATEMENTS

if (name) {
	// nodes
}
for (letter of letters) {
	'~[letter]'
}
for ((letter, index) of letters) {
	'~letter at ~index'
}
with (name) > '~.'
each (letters) > '~letter'
debugger;
log (user.name);
switch (state) {
	case ('active') {
		// nodes
	}
}

// ### MODULES
import from 'foo.mask';
import * as Data from '/api/data' is json;
import async Foo, Quux from 'baz';

// ### DEFINE
define Foo as (div.span) extends Dialog, Collapser {
	var name = 'MyName';
	var num  = 2;
	var arr = [1, 2, 3];
	var scope = {
		name: 'one',
		arr: [1, 2, false, /asd/]
	};

	function onRenderStart(model, ctx, container) {
		console.log('model:', model);
	}
	slot show() {
		this.model.hidden = false;
	}
	event submit(evt) {
		evt.preventDefault();
	}
}

// ### PLACEHOLDERS
define A extends B {
	@body > 'IsBody'
	@placeholder;
	footer >  @footer;
}
A {
	@footer > 'Test'
}

<div> Suppots html tags within </div>

[IsAuthorized]
[WithCaption('Foo')]
div;

function private async loadUser () {
	
}