Skip to content

How It Works

Steven Vachon edited this page Mar 14, 2016 · 12 revisions

A Handlebars template such as:

<{{tag}} {{attr1}} attr="{{attr2}}" attr{{attr3}}="asdf" {{#if something}}attr3="asdf"{{/if}}>
	value1
</{{tag}}>

…is parsed via Handlebars.parse() into a syntax tree, then re-stringified into the following (with {{}} encapsulators added here for visual clarity):

<{{alias1}} {{alias3}} attr="{{alias5}}" attr{{alias7}}="asdf" {{alias9}}>
	value1
</{{alias11}}>

…where each "alias" is a reference to a statement in the current (first) level of the syntax tree.

That new string, which is now HTML-spec compliant, is then passed through an HTML parser.

Aliases are then referenced back to the syntax tree, allowing the expressions to be resolved. Everything is added to a linear program:

// THIS IS OUTDATED
/*[
	startTag,
	startTagName, variable, endTagName,
	??variable??,
	startAttrName, text, endAttrName, startAttrValue, variable, endAttrValue,
	startAttrName, text, variable, endAttrName, startAttrValue, text, endAttrValue,
	startHelper, startAttrName, text, endAttrName, startAttrValue, text, endAttrValue,
	endTag,
	
	text,
	
	startTag(closing=true), startTagName, variable, endTagName, endTag
]*/
Clone this wiki locally