Why another template processing idiom?

• Incremental processing — every processing operation produces valid output.
• Differential processing — output text is again a template.

• Wellformed output guaranteed.
• Escaped by default.
• Intelligible templates — input template is valid output.

• Pure javascript, HTML, browser side processing.

Template processing input

<div id="t">
  <div jsselect="items" jscontent="$this"></div>
</div>

var input = {
  items: ['A', 'B', 'C']
};

var output = jstGetTemplate('t');
jstProcess(new JsExprContext(input), output);

Template processing output

<div>
  <div jsinstance="0"
       jsselect="items" jscontent="$this">A</div>
  <div jsinstance="1"
       jsselect="items" jscontent="$this">B</div>
  <div jsinstance="*2"
       jsselect="items" jscontent="$this">C</div>
</div>

Differential processing

var input = {
  items: ['A', 'BC']
};

<div>
  <div jsinstance="0"
       jsselect="items" jscontent="$this">A</div>
  <div jsinstance="*1"
       jsselect="items" jscontent="$this">BC</div>
</div>

Differential processing, again

var input = {
  items: []
};

<div>
  <div jsinstance="*0" jsselect="items"
       style="display: none" jscontent="$this">A</div>
</div>

Template composition

<div id="zebralist">
  <div jsselect="items">
    <div jsdisplay="$index % 2 == 0"
         style="background-color:#f0fff0"
         jscontent="$this"></div>
    <div jsdisplay="$index % 2 != 0"
         style="background-color:#ffffff"
         jscontent="$this"></div>
  </div>
</div>

<div id="t1">
  <div transclude="zebralist"></div>
</div>

Attributes summary

• jsselect="expr" — iteration, change of local evaluation context
• jsdisplay="expr" — conditional display
• jscontent="expr" — content of current DOM node
• jsvalues="target:expr;..." — set values in current context
• jsvars="var:expr;..." — set variables with names that don't start with $
• jseval="expr" — evaluates expression on current DOM node
• transclude="id" — transcludes an HTML fragment by id (no expression here)

Target summary

• jsvalues="attr:expr;..." — set attribute values
• jsvalues=".prop:expr;..." — set js properties
• jsvalues=".prop.subprop:expr;..." — set nested js properties (e.g., on .style)
• jsvalues="$var:expr;..." — set variables in local context

Expression summary

• $this — local evaluation context
• $index — position of local context in iteration implied by jsselect (analog position() in XSLT)
• this — current output context (DOM node)
• $top — initial evaluation context (passed to new JsEvalContext())
• properties of local evaluation context
• variables defined by jsselect, jsvars
• variables defined externally by JsEvalContext.prototype.setVariable()
• globals defined externally by JsEvalContext.setGlobal()
• Javascript expressions

API summary

• new JsEvalContext(data: Object)
• JsEvalContext.prototype.setVariable( name: string, value: Object)
• JsEvalContext.setGlobal(name: string, value: Object)
• jstGetTemplate(name: string): Element
• jstProcess(input: JsEvalContext, output: Element)

Inspiration & alternatives

• Ctemplate, PHP, clearsilver: placeholder-structured; may provide server side source of jstemplates.
• Zope TAL: inspired attribute embedding.
• XSLT: inspired wellformedness guarantees and local evaluation context — but also the desire for intelligible template language and a concise expression language.
• NXSL: earlier used in maps on Safari, like jstemplate but with xpath binding to XML input data.

Content

<b>{{ATTACHMENT_NAME_ESCAPED}}</b> -
{{ATTACHMENT_SIZE_ESCAPED}}

<b><?cs var:html_escape(attachment.name)?></b> -
<?cs var:html_escape(attachment.size)?>

<b jscontent="attachment.name">attachment.html</b> -
<span jscontent="attachment.size">100k</span>

Iteration

<ul>
  {{#ITEM_SECTION}}<li>{{ITEM}}</li>{{/ITEM_SECTION}}
<ul>

<ul>
  <?cs each:item = items?><li><?cs var:item?></li><?cs /each?>
</ul>

<ul>
  <li jsselect="items" jscontent="$this"></li>
</ul>

Attribute values

<a href="{{URL}}">here</a>

<a href="<?cs var:url ?>">here</a>

<a href="#example" jsvalues="href:url">here</a>

<a>
  <xsl:text>here</xsl:text>
  <xsl:attribute name="href">
    <xsl:value-of select="@url"/>
  </xsl:attribute>
</a>

<a href="{@url}">here</a>

Leverage

• HTML syntax as template processing instruction container.
• Javascript syntax as value expressions.
• URL syntax for composition expressions.
• DOM semantics for escaping.

• Processing instruction attributes.
• Specific value expression values.
• Processing target expressions.
• Composition semantics.

Invariants and Guarantees

• Processing preserves wellformedness.
• Composition by transclude preserves wellformedness.

• DOM provides fully correct escaping automatically.

• Input is valid instance of output document type.
• Output is valid instance of input template type.
• Processing is idempotent.

Conclusion

• Concepts, syntax, code.
• Simplicity vs. reuse.
• Leverage, don't layer.